diff --git a/.env.example b/.env.example
index 9f9c8c15..065cfeca 100644
--- a/.env.example
+++ b/.env.example
@@ -6,6 +6,9 @@ API_URL="http://localhost:8000"
 ORGANIZATION_NAME="Evo AI"
 ORGANIZATION_URL="https://evoai.evoapicloud.com"
 
+# AI Engine configuration: "adk" or "crewai"
+AI_ENGINE="adk"
+
 # Database settings
 POSTGRES_CONNECTION_STRING="postgresql://postgres:root@localhost:5432/evo_ai"
 
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
new file mode 100644
index 00000000..71424f1f
--- /dev/null
+++ b/.github/workflows/build-and-deploy.yml
@@ -0,0 +1,149 @@
+name: Build and Deploy Docker Images
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - "*.*.*"
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  detect-changes:
+    name: Detect Changes
+    runs-on: ubuntu-latest
+    outputs:
+      backend-changed: ${{ steps.changes.outputs.backend }}
+      frontend-changed: ${{ steps.changes.outputs.frontend }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Detect changes
+        id: changes
+        uses: dorny/paths-filter@v2
+        with:
+          filters: |
+            backend:
+              - 'src/**'
+              - 'migrations/**'
+              - 'scripts/**'
+              - 'Dockerfile'
+              - 'pyproject.toml'
+              - 'alembic.ini'
+              - 'conftest.py'
+              - 'setup.py'
+              - 'Makefile'
+              - '.dockerignore'
+            frontend:
+              - 'frontend/**'
+
+  build-backend:
+    name: Build Backend Image
+    runs-on: ubuntu-latest
+    needs: detect-changes
+    if: needs.detect-changes.outputs.backend-changed == 'true' || github.event_name == 'push'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: evoapicloud/evo-ai
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}
+
+  build-frontend:
+    name: Build Frontend Image
+    runs-on: ubuntu-latest
+    needs: detect-changes
+    if: needs.detect-changes.outputs.frontend-changed == 'true' || github.event_name == 'push'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: evoapicloud/evo-ai-frontend
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v5
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL || 'https://api-evoai.evoapicloud.com' }}
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }} 
\ No newline at end of file
diff --git a/.github/workflows/build-homolog.yml b/.github/workflows/build-homolog.yml
new file mode 100644
index 00000000..09398c7c
--- /dev/null
+++ b/.github/workflows/build-homolog.yml
@@ -0,0 +1,139 @@
+name: Build Homolog Images
+
+on:
+  push:
+    branches:
+      - develop
+      - homolog
+
+jobs:
+  detect-changes:
+    name: Detect Changes
+    runs-on: ubuntu-latest
+    outputs:
+      backend-changed: ${{ steps.changes.outputs.backend }}
+      frontend-changed: ${{ steps.changes.outputs.frontend }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Detect changes
+        id: changes
+        uses: dorny/paths-filter@v2
+        with:
+          filters: |
+            backend:
+              - 'src/**'
+              - 'migrations/**'
+              - 'scripts/**'
+              - 'Dockerfile'
+              - 'pyproject.toml'
+              - 'alembic.ini'
+              - 'conftest.py'
+              - 'setup.py'
+              - 'Makefile'
+              - '.dockerignore'
+            frontend:
+              - 'frontend/**'
+
+  build-backend-homolog:
+    name: Build Backend Homolog
+    runs-on: ubuntu-latest
+    needs: detect-changes
+    if: needs.detect-changes.outputs.backend-changed == 'true' || github.event_name == 'push'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: evoapicloud/evo-ai
+          tags: |
+            type=raw,value=homolog
+            type=raw,value=homolog-{{sha}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}
+
+  build-frontend-homolog:
+    name: Build Frontend Homolog
+    runs-on: ubuntu-latest
+    needs: detect-changes
+    if: needs.detect-changes.outputs.frontend-changed == 'true' || github.event_name == 'push'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: evoapicloud/evo-ai-frontend
+          tags: |
+            type=raw,value=homolog
+            type=raw,value=homolog-{{sha}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v5
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL_HOMOLOG || 'https://api-homolog-evoai.evoapicloud.com' }}
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }} 
\ No newline at end of file
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
deleted file mode 100644
index 3aeaf723..00000000
--- a/.github/workflows/docker-image.yml
+++ /dev/null
@@ -1,48 +0,0 @@
-name: Build Docker image
-
-on:
-  push:
-    tags:
-      - "*.*.*"
-
-jobs:
-  build_deploy:
-    name: Build and Deploy
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: evoapicloud/evo-ai
-          tags: type=semver,pattern=v{{version}}
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Build and push
-        id: docker_build
-        uses: docker/build-push-action@v5
-        with:
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-
-      - name: Image digest
-        run: echo ${{ steps.docker_build.outputs.digest }}
\ No newline at end of file
diff --git a/.github/workflows/publish_docker_image_homolog.yml b/.github/workflows/publish_docker_image_homolog.yml
deleted file mode 100644
index c67dbb8a..00000000
--- a/.github/workflows/publish_docker_image_homolog.yml
+++ /dev/null
@@ -1,48 +0,0 @@
-name: Build Docker image
-
-on:
-  push:
-    branches:
-      - develop
-
-jobs:
-  build_deploy:
-    name: Build and Deploy
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: evoapicloud/evo-ai
-          tags: homolog
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Build and push
-        id: docker_build
-        uses: docker/build-push-action@v5
-        with:
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-
-      - name: Image digest
-        run: echo ${{ steps.docker_build.outputs.digest }}
\ No newline at end of file
diff --git a/.github/workflows/publish_docker_image_latest.yml b/.github/workflows/publish_docker_image_latest.yml
deleted file mode 100644
index 12875f0d..00000000
--- a/.github/workflows/publish_docker_image_latest.yml
+++ /dev/null
@@ -1,48 +0,0 @@
-name: Build Docker image
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  build_deploy:
-    name: Build and Deploy
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: evoapicloud/evo-ai
-          tags: latest
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Build and push
-        id: docker_build
-        uses: docker/build-push-action@v5
-        with:
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-
-      - name: Image digest
-        run: echo ${{ steps.docker_build.outputs.digest }}
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 640d581f..cf0180a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,11 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.0] - 2025-05-24
+
+### Added
+
+- Export and Import Agents
+
+### Changed
+
+- A2A implementation updated to version 0.2.1 (https://google.github.io/A2A/specification/#agent2agent-a2a-protocol-specification)
+- Frontend redesign
+- Fixed message order
+
 ## [0.0.11] - 2025-05-16
 
 ### Changed
 
-- Fixes on email service and client service
+- Fixes in email service and client service
 
 ## [0.0.10] - 2025-05-15
 
diff --git a/Makefile b/Makefile
index 506619c4..fc6b1f2c 100644
--- a/Makefile
+++ b/Makefile
@@ -18,7 +18,7 @@ alembic-downgrade:
 
 # Command to run the server
 run:
-	uvicorn src.main:app --host 0.0.0.0 --port 8000 --reload --env-file .env
+	uvicorn src.main:app --host 0.0.0.0 --port 8000 --reload --env-file .env --reload-exclude frontend/ --reload-exclude "*.log" --reload-exclude "*.tmp"
 
 # Command to run the server in production mode
 run-prod:
diff --git a/README.md b/README.md
index 87bac869..2f8a16a6 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,18 @@
-# Evo AI - AI Agents Platform
+<h1 align="center">Evo AI - AI Agents Platform</h1>
+
+<div align="center">
+
+[![Whatsapp Group](https://img.shields.io/badge/Group-WhatsApp-%2322BC18)](https://evolution-api.com/whatsapp)
+[![Discord Community](https://img.shields.io/badge/Discord-Community-blue)](https://evolution-api.com/discord)
+[![Postman Collection](https://img.shields.io/badge/Postman-Collection-orange)](https://evolution-api.com/postman)
+[![Documentation](https://img.shields.io/badge/Documentation-Official-green)](https://doc.evolution-api.com)
+[![License](https://img.shields.io/badge/license-Apache--2.0-blue)](./LICENSE)
+[![Support](https://img.shields.io/badge/Donation-picpay-green)](https://app.picpay.com/user/davidsongomes1998)
+[![Sponsors](https://img.shields.io/badge/Github-sponsor-orange)](https://github.com/sponsors/EvolutionAPI)
+
+</div>
+
+## Evo AI - AI Agents Platform
 
 Evo AI is an open-source platform for creating and managing AI agents, enabling integration with different AI models and services.
 
@@ -8,321 +22,51 @@ The Evo AI platform allows:
 
 - Creation and management of AI agents
 - Integration with different language models
-- Client management
-- MCP server configuration
+- Client management and MCP server configuration
 - Custom tools management
-- **[Google Agent Development Kit (ADK)](https://google.github.io/adk-docs/)**: Base framework for agent development, providing support for LLM Agents, Sequential Agents, Loop Agents, Parallel Agents and Custom Agents
+- **[Google Agent Development Kit (ADK)](https://google.github.io/adk-docs/)**: Base framework for agent development
+- **[CrewAI Support](https://github.com/crewAI/crewAI)**: Alternative framework for agent development (in development)
 - JWT authentication with email verification
-- **[Agent 2 Agent (A2A) Protocol Support](https://developers.googleblog.com/en/a2a-a-new-era-of-agent-interoperability/)**: Interoperability between AI agents following Google's A2A specification
-- **[Workflow Agent with LangGraph](https://www.langchain.com/langgraph)**: Building complex agent workflows with LangGraph and ReactFlow
-- **Secure API Key Management**: Encrypted storage of API keys with Fernet encryption
+- **[Agent 2 Agent (A2A) Protocol Support](https://developers.googleblog.com/en/a2a-a-new-era-of-agent-interoperability/)**: Interoperability between AI agents
+- **[Workflow Agent with LangGraph](https://www.langchain.com/langgraph)**: Building complex agent workflows
+- **Secure API Key Management**: Encrypted storage of API keys
 - **Agent Organization**: Folder structure for organizing agents by categories
 
-## 🤖 Agent Types and Creation
+## 🤖 Agent Types
 
-Evo AI supports different types of agents that can be flexibly combined to create complex solutions:
+Evo AI supports different types of agents that can be flexibly combined:
 
 ### 1. LLM Agent (Language Model)
 
 Agent based on language models like GPT-4, Claude, etc. Can be configured with tools, MCP servers, and sub-agents.
 
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "personal_assistant",
-  "description": "Specialized personal assistant",
-  "role": "Personal Assistant",
-  "goal": "Help users with daily tasks and provide relevant information",
-  "type": "llm",
-  "model": "gpt-4",
-  "api_key_id": "stored-api-key-uuid",
-  "folder_id": "folder_id (optional)",
-  "instruction": "Detailed instructions for agent behavior",
-  "config": {
-    "tools": [
-      {
-        "id": "tool-uuid",
-        "envs": {
-          "API_KEY": "tool-api-key",
-          "ENDPOINT": "http://localhost:8000"
-        }
-      }
-    ],
-    "mcp_servers": [
-      {
-        "id": "server-uuid",
-        "envs": {
-          "API_KEY": "server-api-key",
-          "ENDPOINT": "http://localhost:8001"
-        },
-        "tools": ["tool_name1", "tool_name2"]
-      }
-    ],
-    "custom_tools": {
-      "http_tools": []
-    },
-    "sub_agents": ["sub-agent-uuid"]
-  }
-}
-```
-
 ### 2. A2A Agent (Agent-to-Agent)
 
 Agent that implements Google's A2A protocol for agent interoperability.
 
-```json
-{
-  "client_id": "{{client_id}}",
-  "type": "a2a",
-  "agent_card_url": "http://localhost:8001/api/v1/a2a/your-agent/.well-known/agent.json",
-  "folder_id": "folder_id (optional)",
-  "config": {
-    "sub_agents": ["sub-agent-uuid"]
-  }
-}
-```
-
 ### 3. Sequential Agent
 
 Executes a sequence of sub-agents in a specific order.
 
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "processing_flow",
-  "type": "sequential",
-  "folder_id": "folder_id (optional)",
-  "config": {
-    "sub_agents": ["agent-uuid-1", "agent-uuid-2", "agent-uuid-3"]
-  }
-}
-```
-
 ### 4. Parallel Agent
 
 Executes multiple sub-agents simultaneously.
 
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "parallel_processing",
-  "type": "parallel",
-  "folder_id": "folder_id (optional)",
-  "config": {
-    "sub_agents": ["agent-uuid-1", "agent-uuid-2"]
-  }
-}
-```
-
 ### 5. Loop Agent
 
 Executes sub-agents in a loop with a defined maximum number of iterations.
 
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "loop_processing",
-  "type": "loop",
-  "folder_id": "folder_id (optional)",
-  "config": {
-    "sub_agents": ["sub-agent-uuid"],
-    "max_iterations": 5
-  }
-}
-```
-
 ### 6. Workflow Agent
 
-Executes sub-agents in a custom workflow defined by a graph structure. This agent type uses LangGraph for implementing complex agent workflows with conditional execution paths.
-
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "workflow_agent",
-  "type": "workflow",
-  "folder_id": "folder_id (optional)",
-  "config": {
-    "sub_agents": ["agent-uuid-1", "agent-uuid-2", "agent-uuid-3"],
-    "workflow": {
-      "nodes": [],
-      "edges": []
-    }
-  }
-}
-```
-
-The workflow structure is built using ReactFlow in the frontend, allowing visual creation and editing of complex agent workflows with nodes (representing agents or decision points) and edges (representing flow connections).
+Executes sub-agents in a custom workflow defined by a graph structure using LangGraph.
 
 ### 7. Task Agent
 
-Executes a specific task using a target agent. Task Agent provides a streamlined approach for structured task execution, where the agent_id specifies which agent will process the task, and the task description can include dynamic content placeholders.
-
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "web_search_task",
-  "type": "task",
-  "folder_id": "folder_id (optional)",
-  "config": {
-    "tasks": [
-      {
-        "agent_id": "search-agent-uuid",
-        "description": "Search the web for information about {content}",
-        "expected_output": "Comprehensive search results with relevant information"
-      }
-    ],
-    "sub_agents": ["post-processing-agent-uuid"]
-  }
-}
-```
-
-Key features of Task Agent:
-
-- Passes structured task instructions to the designated agent
-- Supports variable content using {content} placeholder in the task description
-- Provides clear task definition with instructions and expected output format
-- Can execute sub-agents after the main task is completed
-- Simplifies orchestration for single-focused task execution
-
-Task Agent is ideal for scenarios where you need to execute a specific, well-defined task with clear instructions and expectations.
-
-### Common Characteristics
-
-- All agent types can have sub-agents
-- Sub-agents can be of any type
-- Agents can be flexibly combined
-- Type-specific configurations
-- Support for custom tools and MCP servers
-
-### MCP Server Configuration
-
-Agents can be integrated with MCP (Model Context Protocol) servers for distributed processing:
-
-```json
-{
-  "config": {
-    "mcp_servers": [
-      {
-        "id": "server-uuid",
-        "envs": {
-          "API_KEY": "server-api-key",
-          "ENDPOINT": "http://localhost:8001",
-          "MODEL_NAME": "gpt-4",
-          "TEMPERATURE": 0.7,
-          "MAX_TOKENS": 2000
-        },
-        "tools": ["tool_name1", "tool_name2"]
-      }
-    ]
-  }
-}
-```
-
-Available configurations for MCP servers:
-
-- **id**: Unique MCP server identifier
-- **envs**: Environment variables for configuration
-  - API_KEY: Server authentication key
-  - ENDPOINT: MCP server URL
-  - MODEL_NAME: Model name to be used
-  - TEMPERATURE: Text generation temperature (0.0 to 1.0)
-  - MAX_TOKENS: Maximum token limit per request
-  - Other server-specific variables
-- **tools**: MCP server tool names for agent use
-
-### Agent Composition Examples
-
-Different types of agents can be combined to create complex processing flows:
-
-#### 1. Sequential Processing Pipeline
-
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "processing_pipeline",
-  "type": "sequential",
-  "config": {
-    "sub_agents": [
-      "llm-analysis-agent-uuid", // LLM Agent for initial analysis
-      "a2a-translation-agent-uuid", // A2A Agent for translation
-      "llm-formatting-agent-uuid" // LLM Agent for final formatting
-    ]
-  }
-}
-```
-
-#### 2. Parallel Processing with Aggregation
-
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "parallel_analysis",
-  "type": "sequential",
-  "config": {
-    "sub_agents": [
-      {
-        "type": "parallel",
-        "config": {
-          "sub_agents": [
-            "analysis-agent-uuid-1",
-            "analysis-agent-uuid-2",
-            "analysis-agent-uuid-3"
-          ]
-        }
-      },
-      "aggregation-agent-uuid" // Agent for aggregating results
-    ]
-  }
-}
-```
-
-#### 3. Multi-Agent Conversation System
-
-```json
-{
-  "client_id": "{{client_id}}",
-  "name": "conversation_system",
-  "type": "parallel",
-  "config": {
-    "sub_agents": [
-      {
-        "type": "llm",
-        "name": "context_agent",
-        "model": "gpt-4",
-        "instruction": "Maintain conversation context"
-      },
-      {
-        "type": "a2a",
-        "agent_card_url": "expert-agent-url"
-      },
-      {
-        "type": "loop",
-        "config": {
-          "sub_agents": ["memory-agent-uuid"],
-          "max_iterations": 1
-        }
-      }
-    ]
-  }
-}
-```
-
-### API Creation
-
-For creating a new agent, use the endpoint:
-
-```http
-POST /api/v1/agents
-Content-Type: application/json
-Authorization: Bearer your-token-jwt
-
-{
-    // Configuration of the agent as per the examples above
-}
-```
+Executes a specific task using a target agent with structured task instructions.
 
 ## 🛠️ Technologies
 
+### Backend
 - **FastAPI**: Web framework for building the API
 - **SQLAlchemy**: ORM for database interaction
 - **PostgreSQL**: Main database
@@ -335,223 +79,259 @@ Authorization: Bearer your-token-jwt
 - **Jinja2**: Template engine for email rendering
 - **Bcrypt**: Password hashing and security
 - **LangGraph**: Framework for building stateful, multi-agent workflows
-- **ReactFlow**: Library for building node-based visual workflows
+
+### Frontend
+- **Next.js 15**: React framework with App Router
+- **React 18**: User interface library
+- **TypeScript**: Type-safe JavaScript
+- **Tailwind CSS**: Utility-first CSS framework
+- **shadcn/ui**: Modern component library
+- **React Hook Form**: Form management
+- **Zod**: Schema validation
+- **ReactFlow**: Node-based visual workflows
+- **React Query**: Server state management
 
 ## 📊 Langfuse Integration (Tracing & Observability)
 
 Evo AI platform natively supports integration with [Langfuse](https://langfuse.com/) for detailed tracing of agent executions, prompts, model responses, and tool calls, using the OpenTelemetry (OTel) standard.
 
-### Why use Langfuse?
-
-- Visual dashboard for agent traces, prompts, and executions
-- Detailed analytics for debugging and evaluating LLM apps
-- Easy integration with Google ADK and other frameworks
-
-### How it works
-
-- Every agent execution (including streaming) is automatically traced via OpenTelemetry spans
-- Data is sent to Langfuse, where it can be visualized and analyzed
-
 ### How to configure
 
 1. **Set environment variables in your `.env`:**
 
    ```env
-   LANGFUSE_PUBLIC_KEY="pk-lf-..."   # Your Langfuse public key
-   LANGFUSE_SECRET_KEY="sk-lf-..."   # Your Langfuse secret key
-   OTEL_EXPORTER_OTLP_ENDPOINT="https://cloud.langfuse.com/api/public/otel" # (or us.cloud... for US region)
+   LANGFUSE_PUBLIC_KEY="pk-lf-..."
+   LANGFUSE_SECRET_KEY="sk-lf-..."
+   OTEL_EXPORTER_OTLP_ENDPOINT="https://cloud.langfuse.com/api/public/otel"
    ```
 
-   > **Attention:** Do not swap the keys! `pk-...` is public, `sk-...` is secret.
-
-2. **Automatic initialization**
-
-   - Tracing is automatically initialized when the application starts (`src/main.py`).
-   - Agent execution functions are already instrumented with spans (`src/services/agent_runner.py`).
-
-3. **View in the Langfuse dashboard**
+2. **View in the Langfuse dashboard**
    - Access your Langfuse dashboard to see real-time traces.
 
-### Troubleshooting
-
-- **401 Error (Invalid credentials):**
-  - Check if the keys are correct and not swapped in your `.env`.
-  - Make sure the endpoint matches your region (EU or US).
-- **Context error in async generator:**
-  - The code is already adjusted to avoid OpenTelemetry context issues in async generators.
-- **Questions about integration:**
-  - See the [official Langfuse documentation - Google ADK](https://langfuse.com/docs/integrations/google-adk)
-
 ## 🤖 Agent 2 Agent (A2A) Protocol Support
 
-Evo AI implements the Google's Agent 2 Agent (A2A) protocol, enabling seamless communication and interoperability between AI agents. This implementation includes:
-
-### Key Features
-
-- **Standardized Communication**: Agents can communicate using a common protocol regardless of their underlying implementation
-- **Interoperability**: Support for agents built with different frameworks and technologies
-- **Well-Known Endpoints**: Standardized endpoints for agent discovery and interaction
-- **Task Management**: Support for task creation, execution, and status tracking
-- **State Management**: Tracking of agent states and conversation history
-- **Authentication**: Secure API key-based authentication for agent interactions
-
-### Implementation Details
-
-- **Agent Card**: Each agent exposes a `.well-known/agent.json` endpoint with its capabilities and configuration
-- **Task Handling**: Support for task creation, execution, and status tracking
-- **Message Format**: Standardized message format for agent communication
-- **History Tracking**: Maintains conversation history between agents
-- **Artifact Management**: Support for handling different types of artifacts (text, files, etc.)
-
-### Example Usage
-
-```json
-// Agent Card Example
-{
-  "name": "My Agent",
-  "description": "A helpful AI assistant",
-  "url": "https://api.example.com/agents/123",
-  "capabilities": {
-    "streaming": false,
-    "pushNotifications": false,
-    "stateTransitionHistory": true
-  },
-  "authentication": {
-    "schemes": ["apiKey"],
-    "credentials": {
-      "in": "header",
-      "name": "x-api-key"
-    }
-  },
-  "skills": [
-    {
-      "id": "search",
-      "name": "Web Search",
-      "description": "Search the web for information"
-    }
-  ]
-}
-```
+Evo AI implements the Google's Agent 2 Agent (A2A) protocol, enabling seamless communication and interoperability between AI agents.
 
 For more information about the A2A protocol, visit [Google's A2A Protocol Documentation](https://google.github.io/A2A/).
 
-## 📁 Project Structure
-
-```
-src/
-├── api/          # API endpoints
-├── core/         # Core business logic
-├── models/       # Data models
-├── schemas/      # Pydantic schemas for validation
-├── services/     # Business services
-├── templates/    # Email templates
-│   └── emails/   # Jinja2 email templates
-├── utils/        # Utilities
-└── config/       # Configurations
-```
-
 ## 📋 Prerequisites
 
-Before starting, make sure you have the following installed:
-
+### Backend
 - **Python**: 3.10 or higher
 - **PostgreSQL**: 13.0 or higher
 - **Redis**: 6.0 or higher
 - **Git**: For version control
-- **Make**: For running Makefile commands (usually pre-installed on Linux/Mac, for Windows use WSL or install via chocolatey)
+- **Make**: For running Makefile commands
 
-You'll also need the following accounts/API keys:
-
-- **SendGrid Account**: For email functionality
-
-## 📋 Requirements
-
-- Python 3.10+
-- PostgreSQL
-- Redis
-- Email provider:
-  - SendGrid Account (if using SendGrid email provider)
-  - SMTP Server (if using SMTP email provider)
+### Frontend
+- **Node.js**: 18.0 or higher
+- **pnpm**: Package manager (recommended) or npm/yarn
 
 ## 🔧 Installation
 
-1. Clone the repository:
+### 1. Clone the Repository
 
 ```bash
 git clone https://github.com/EvolutionAPI/evo-ai.git
 cd evo-ai
 ```
 
-2. Create a virtual environment:
+### 2. Backend Setup
+
+#### Virtual Environment and Dependencies
 
 ```bash
+# Create and activate virtual environment
 make venv
 source venv/bin/activate  # Linux/Mac
-# or
-venv\Scripts\activate  # Windows
+# or on Windows: venv\Scripts\activate
+
+# Install development dependencies
+make install-dev
 ```
 
-3. Install dependencies:
-
-```bash
-pip install -e .        # For basic installation
-# or
-pip install -e ".[dev]" # For development dependencies
-```
-
-Or using the Makefile:
-
-```bash
-make install      # For basic installation
-# or
-make install-dev  # For development dependencies
-```
-
-4. Set up environment variables:
+#### Environment Configuration
 
 ```bash
+# Copy and configure backend environment
 cp .env.example .env
-# Edit the .env file with your settings
+# Edit the .env file with your database, Redis, and other settings
 ```
 
-5. Initialize the database and run migrations:
+#### Database Setup
 
 ```bash
+# Initialize database and apply migrations
 make alembic-upgrade
-```
 
-6. Seed the database with initial data:
-
-```bash
+# Seed initial data (admin user, sample clients, etc.)
 make seed-all
 ```
 
-## 🖥️ Frontend Installation
+### 3. Frontend Setup
 
-After installing Evo AI (the backend), you need to install the frontend to access the web interface:
-
-1. Clone the frontend repository:
+#### Install Dependencies
 
 ```bash
-git clone https://github.com/EvolutionAPI/evo-ai-frontend.git
-cd evo-ai-frontend
+# Navigate to frontend directory
+cd frontend
+
+# Install dependencies using pnpm (recommended)
+pnpm install
+
+# Or using npm
+# npm install
+
+# Or using yarn
+# yarn install
 ```
 
-2. Follow the installation instructions in the frontend repository's README to set up and run the web interface.
+#### Frontend Environment Configuration
 
-> The backend (API) and frontend are separate projects. Make sure both are running for full platform functionality.
+```bash
+# Copy and configure frontend environment
+cp .env.example .env
+# Edit .env with your API URL (default: http://localhost:8000)
+```
 
-## 🚀 Getting Started
+The frontend `.env.local` should contain:
 
-After installation, follow these steps to set up your first agent:
+```env
+NEXT_PUBLIC_API_URL=http://localhost:8000
+```
 
-1. **Configure MCP Server**: Set up your Model Context Protocol server configuration first
-2. **Create Client or Register**: Create a new client or register a user account
-3. **Create Agents**: Set up the agents according to your needs (LLM, A2A, Sequential, Parallel, Loop, or Workflow)
+## 🚀 Running the Application
 
-### Configuration (.env file)
+### Development Mode
 
-Configure your environment using the following key settings:
+#### Start Backend (Terminal 1)
+```bash
+# From project root
+make run
+# Backend will be available at http://localhost:8000
+```
+
+#### Start Frontend (Terminal 2)
+```bash
+# From frontend directory
+cd frontend
+pnpm dev
+
+# Or using npm/yarn
+# npm run dev
+# yarn dev
+
+# Frontend will be available at http://localhost:3000
+```
+
+### Production Mode
+
+#### Backend
+```bash
+make run-prod    # Production with multiple workers
+```
+
+#### Frontend
+```bash
+cd frontend
+pnpm build && pnpm start
+
+# Or using npm/yarn
+# npm run build && npm start
+# yarn build && yarn start
+```
+
+## 🐳 Docker Installation
+
+### Full Stack with Docker Compose
+
+```bash
+# Build and start all services (backend + database + redis)
+make docker-build
+make docker-up
+
+# Initialize database with seed data
+make docker-seed
+```
+
+### Frontend with Docker
+
+```bash
+# From frontend directory
+cd frontend
+
+# Build frontend image
+docker build -t evo-ai-frontend .
+
+# Run frontend container
+docker run -p 3000:3000 -e NEXT_PUBLIC_API_URL=http://localhost:8000 evo-ai-frontend
+```
+
+Or using the provided docker-compose:
+
+```bash
+# From frontend directory
+cd frontend
+docker-compose up -d
+```
+
+## 🎯 Getting Started
+
+After installation, follow these steps:
+
+1. **Access the Frontend**: Open `http://localhost:3000`
+2. **Create Admin Account**: Use the seeded admin credentials or register a new account
+3. **Configure MCP Server**: Set up your first MCP server connection
+4. **Create Client**: Add a client to organize your agents
+5. **Build Your First Agent**: Create and configure your AI agent
+6. **Test Agent**: Use the chat interface to interact with your agent
+
+### Default Admin Credentials
+
+After running the seeders, you can login with:
+- **Email**: Check the seeder output for the generated admin email
+- **Password**: Check the seeder output for the generated password
+
+## 🖥️ API Documentation
+
+The interactive API documentation is available at:
+
+- Swagger UI: `http://localhost:8000/docs`
+- ReDoc: `http://localhost:8000/redoc`
+
+## 👨‍💻 Development Commands
+
+### Backend Commands
+```bash
+# Database migrations
+make alembic-upgrade            # Update database to latest version
+make alembic-revision message="description"  # Create new migration
+
+# Seeders
+make seed-all                   # Run all seeders
+
+# Code verification
+make lint                       # Verify code with flake8
+make format                     # Format code with black
+```
+
+### Frontend Commands
+```bash
+# From frontend directory
+cd frontend
+
+# Development
+pnpm dev                        # Start development server
+pnpm build                      # Build for production
+pnpm start                      # Start production server
+pnpm lint                       # Run ESLint
+```
+
+## 🚀 Configuration
+
+### Backend Configuration (.env file)
+
+Key settings include:
 
 ```bash
 # Database settings
@@ -560,447 +340,48 @@ POSTGRES_CONNECTION_STRING="postgresql://postgres:root@localhost:5432/evo_ai"
 # Redis settings
 REDIS_HOST="localhost"
 REDIS_PORT=6379
-REDIS_DB=0
-REDIS_PASSWORD="your-redis-password"
+
+# AI Engine configuration
+AI_ENGINE="adk"  # Options: "adk" (Google Agent Development Kit) or "crewai" (CrewAI framework)
 
 # JWT settings
 JWT_SECRET_KEY="your-jwt-secret-key"
-JWT_ALGORITHM="HS256"
-JWT_EXPIRATION_TIME=30  # In seconds
 
 # Email provider configuration
 EMAIL_PROVIDER="sendgrid"  # Options: "sendgrid" or "smtp"
 
-# SendGrid (if EMAIL_PROVIDER=sendgrid)
-SENDGRID_API_KEY="your-sendgrid-api-key"
-EMAIL_FROM="noreply@yourdomain.com"
-APP_URL="https://yourdomain.com"
-
-# SMTP (if EMAIL_PROVIDER=smtp)
-SMTP_FROM="noreply-smtp@yourdomain.com"
-SMTP_USER="your-smtp-username"
-SMTP_PASSWORD="your-smtp-password"
-SMTP_HOST="your-smtp-host"
-SMTP_PORT=587
-SMTP_USE_TLS=true
-SMTP_USE_SSL=false
-
 # Encryption for API keys
 ENCRYPTION_KEY="your-encryption-key"
 ```
 
-### Project Dependencies
-
-The project uses modern Python packaging standards with `pyproject.toml`. Key dependencies include:
-
-```toml
-dependencies = [
-    "fastapi==0.115.12",
-    "uvicorn==0.34.2",
-    "pydantic==2.11.3",
-    "sqlalchemy==2.0.40",
-    "psycopg2==2.9.10",
-    "alembic==1.15.2",
-    "redis==5.3.0",
-    "langgraph==0.4.1",
-    # ... other dependencies
-]
-```
-
-For development, additional packages can be installed with:
+### Frontend Configuration (.env.local file)
 
 ```bash
-pip install -e ".[dev]"
+# API Configuration
+NEXT_PUBLIC_API_URL="http://localhost:8000"  # Backend API URL
 ```
 
-This includes development tools like black, flake8, pytest, and more.
+> **Note**: While Google ADK is fully supported, the CrewAI engine option is still under active development. For production environments, it's recommended to use the default "adk" engine.
 
 ## 🔐 Authentication
 
-The API uses JWT (JSON Web Token) authentication. To access the endpoints, you need to:
+The API uses JWT (JSON Web Token) authentication with:
 
-1. Register a user or log in to obtain a JWT token
-2. Include the JWT token in the `Authorization` header of all requests in the format `Bearer <token>`
-3. Tokens expire after a configured period (default: 30 minutes)
+- User registration and email verification
+- Login to obtain JWT tokens
+- Password recovery flow
+- Account lockout after multiple failed login attempts
 
-### Authentication Flow
+## 🚀 Star Us on GitHub
 
-1. **User Registration**:
+If you find EvoAI useful, please consider giving us a star! Your support helps us grow our community and continue improving the product.
 
-```http
-POST /api/v1/auth/register
-```
-
-2. **Email Verification**:
-   An email will be sent containing a verification link.
-
-3. **Login**:
-
-```http
-POST /api/v1/auth/login
-```
-
-Returns a JWT token to be used in requests.
-
-4. **Password Recovery (if needed)**:
-
-```http
-POST /api/v1/auth/forgot-password
-POST /api/v1/auth/reset-password
-```
-
-5. **Recover logged user data**:
-
-```http
-POST /api/v1/auth/me
-```
-
-### Example Usage with curl:
-
-```bash
-# Login
-curl -X POST "http://localhost:8000/api/v1/auth/login" \
-     -H "Content-Type: application/json" \
-     -d '{"email": "your-email@example.com", "password": "your-password"}'
-
-# Use received token
-curl -X GET "http://localhost:8000/api/v1/clients/" \
-     -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
-```
-
-### Access Control
-
-- Regular users (associated with a client) only have access to their client's resources
-- Admin users have access to all resources
-- Certain operations (such as creating MCP servers) are restricted to administrators only
-- Account lockout mechanism after multiple failed login attempts for enhanced security
-
-## 📧 Email Templates
-
-The platform uses Jinja2 templates for email rendering with a unified design system:
-
-- **Base Template**: All emails extend a common base template for consistent styling
-- **Verification Email**: Sent when users register to verify their email address
-- **Password Reset**: Sent when users request a password reset
-- **Welcome Email**: Sent after email verification to guide new users
-- **Account Locked**: Security alert when an account is locked due to multiple failed login attempts
-
-All email templates feature responsive design, clear call-to-action buttons, and fallback mechanisms.
-
-## 🚀 Running the Project
-
-```bash
-make run         # For development with automatic reload
-# or
-make run-prod    # For production with multiple workers
-```
-
-The API will be available at `http://localhost:8000`
-
-## 👨‍💻 Development Commands
-
-```bash
-# Database migrations
-make init                       # Initialize Alembic
-make alembic-revision message="description"  # Create new migration
-make alembic-upgrade            # Update database to latest version (use to execute existing migrations)
-make alembic-downgrade          # Revert latest migration
-make alembic-migrate message="description"  # Create and apply migration
-make alembic-reset              # Reset database
-
-# Seeders
-make seed-admin                 # Create default admin
-make seed-client                # Create default client
-make seed-mcp-servers           # Create example MCP servers
-make seed-tools                 # Create example tools
-make seed-all                   # Run all seeders
-
-# Code verification
-make lint                       # Verify code with flake8
-make format                     # Format code with black
-make clear-cache                # Clear project cache
-```
-
-## 🐳 Running with Docker
-
-For quick setup and deployment, we provide Docker and Docker Compose configurations.
-
-### Prerequisites
-
-- Docker installed
-- Docker Compose installed
-
-### Configuration
-
-1. Create and configure the `.env` file:
-
-```bash
-cp .env.example .env
-# Edit the .env file with your settings, especially:
-# - POSTGRES_CONNECTION_STRING
-# - REDIS_HOST (should be "redis" when using Docker)
-# - JWT_SECRET_KEY
-# - SENDGRID_API_KEY
-```
-
-2. Build the Docker image:
-
-```bash
-make docker-build
-```
-
-3. Start the services (API, PostgreSQL, and Redis):
-
-```bash
-make docker-up
-```
-
-4. Apply migrations (first time only):
-
-```bash
-docker-compose exec api python -m alembic upgrade head
-```
-
-5. Populate the database with initial data:
-
-```bash
-make docker-seed
-```
-
-6. To check application logs:
-
-```bash
-make docker-logs
-```
-
-7. To stop the services:
-
-```bash
-make docker-down
-```
-
-### Available Services
-
-- **API**: http://localhost:8000
-- **API Documentation**: http://localhost:8000/docs
-- **PostgreSQL**: localhost:5432
-- **Redis**: localhost:6379
-
-### Persistent Volumes
-
-Docker Compose sets up persistent volumes for:
-
-- PostgreSQL data
-- Redis data
-- Application logs directory
-
-### Environment Variables
-
-The main environment variables used by the API container:
-
-- `POSTGRES_CONNECTION_STRING`: PostgreSQL connection string
-- `REDIS_HOST`: Redis host (use "redis" when running with Docker)
-- `JWT_SECRET_KEY`: Secret key for JWT token generation
-- `EMAIL_PROVIDER`: Email provider to use ("sendgrid" or "smtp")
-- `SENDGRID_API_KEY`: SendGrid API key (if using SendGrid)
-- `EMAIL_FROM`: Email used as sender (for SendGrid)
-- `SMTP_FROM`: Email used as sender (for SMTP)
-- `SMTP_HOST`, `SMTP_PORT`, `SMTP_USER`, `SMTP_PASSWORD`: SMTP server configuration
-- `SMTP_USE_TLS`, `SMTP_USE_SSL`: SMTP security settings
-- `APP_URL`: Base URL of the application
-
-## 🔒 Secure API Key Management
-
-Evo AI implements a secure API key management system that protects sensitive credentials:
-
-- **Encrypted Storage**: API keys are encrypted using Fernet symmetric encryption before storage
-- **Secure References**: Agents reference API keys by UUID (api_key_id) instead of storing raw keys
-- **Centralized Management**: API keys can be created, updated, and rotated without changing agent configurations
-- **Client Isolation**: API keys are scoped to specific clients for better security isolation
-
-### Encryption Configuration
-
-The encryption system uses a secure key defined in the `.env` file:
-
-```env
-ENCRYPTION_KEY="your-secure-encryption-key"
-```
-
-If not provided, a secure key will be generated automatically at startup.
-
-### API Key Management
-
-API keys can be managed through dedicated endpoints:
-
-```http
-# Create a new API key
-POST /api/v1/agents/apikeys
-Content-Type: application/json
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-{
-  "client_id": "client-uuid",
-  "name": "My OpenAI Key",
-  "provider": "openai",
-  "key_value": "sk-actual-api-key-value"
-}
-
-# List all API keys for a client
-GET /api/v1/agents/apikeys
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-# Get a specific API key
-GET /api/v1/agents/apikeys/{key_id}
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-# Update an API key
-PUT /api/v1/agents/apikeys/{key_id}
-Content-Type: application/json
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-{
-  "name": "Updated Key Name",
-  "provider": "anthropic",
-  "key_value": "new-key-value",
-  "is_active": true
-}
-
-# Delete an API key (soft delete)
-DELETE /api/v1/agents/apikeys/{key_id}
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-```
-
-## 🤖 Agent Organization
-
-Agents can be organized into folders for better management:
-
-### Creating and Managing Folders
-
-```http
-# Create a new folder
-POST /api/v1/agents/folders
-Content-Type: application/json
-Authorization: Bearer your-token-jwt
-
-{
-  "client_id": "client-uuid",
-  "name": "Marketing Agents",
-  "description": "Agents for content marketing tasks"
-}
-
-# List all folders
-GET /api/v1/agents/folders
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-# Get a specific folder
-GET /api/v1/agents/folders/{folder_id}
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-# Update a folder
-PUT /api/v1/agents/folders/{folder_id}
-Content-Type: application/json
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-{
-  "name": "Updated Folder Name",
-  "description": "Updated folder description"
-}
-
-# Delete a folder
-DELETE /api/v1/agents/folders/{folder_id}
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-# List agents in a folder
-GET /api/v1/agents/folders/{folder_id}/agents
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-# Assign an agent to a folder
-PUT /api/v1/agents/{agent_id}/folder
-Content-Type: application/json
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-{
-  "folder_id": "folder-uuid"
-}
-
-# Remove an agent from any folder
-PUT /api/v1/agents/{agent_id}/folder
-Content-Type: application/json
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-
-{
-  "folder_id": null
-}
-```
-
-### Filtering Agents by Folder
-
-When listing agents, you can filter by folder:
-
-```http
-GET /api/v1/agents?folder_id=folder-uuid
-Authorization: Bearer your-token-jwt
-x-client-id: client-uuid
-```
-
-## 📚 API Documentation
-
-The interactive API documentation is available at:
-
-- Swagger UI: `http://localhost:8000/docs`
-- ReDoc: `http://localhost:8000/redoc`
-
-## 📊 Logs and Audit
-
-- Logs are stored in the `logs/` directory with the following format:
-  - `{logger_name}_{date}.log`
-- The system maintains audit logs for important administrative actions
-- Each action is recorded with information such as user, IP, date/time, and details
+[![Star History Chart](https://api.star-history.com/svg?repos=EvolutionAPI/evo-ai&type=Date)](https://www.star-history.com/#EvolutionAPI/evo-ai&Date)
 
 ## 🤝 Contributing
 
-We welcome contributions from the community! Here's how you can help:
-
-1. Fork the project
-2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
-3. Make your changes and add tests if possible
-4. Run tests and make sure they pass
-5. Commit your changes following conventional commits format (`feat: add amazing feature`)
-6. Push to the branch (`git push origin feature/AmazingFeature`)
-7. Open a Pull Request
-
-Please read our [Contributing Guidelines](CONTRIBUTING.md) for more details.
+We welcome contributions from the community! Please read our [Contributing Guidelines](CONTRIBUTING.md) for more details.
 
 ## 📄 License
 
 This project is licensed under the [Apache License 2.0](./LICENSE).
-
-The use of the name, logo, or trademark "Evolution API" is protected and not automatically granted by the license. See section 6 (Trademarks) of the license for details about trademark usage.
-
-## 📊 Stargazers
-
-[![Stargazers repo roster for @EvolutionAPI/evo-ai](https://reporoster.com/stars/EvolutionAPI/evo-ai)](https://github.com/EvolutionAPI/evo-ai/stargazers)
-
-## 🔄 Forks
-
-[![Forkers repo roster for @EvolutionAPI/evo-ai](https://reporoster.com/forks/EvolutionAPI/evo-ai)](https://github.com/EvolutionAPI/evo-ai/network/members)
-
-## 🙏 Acknowledgments
-
-- [FastAPI](https://fastapi.tiangolo.com/)
-- [SQLAlchemy](https://www.sqlalchemy.org/)
-- [Google ADK](https://github.com/google/adk)
-- [LangGraph](https://github.com/langchain-ai/langgraph)
-- [ReactFlow](https://reactflow.dev/)
diff --git a/docker-compose.yml b/docker-compose.yml
index 07334f1b..8dd9a27b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
   api:
-    image: evo-ai-api:latest
+    image: evoapicloud/evo-ai:latest
     depends_on:
       - postgres
       - redis
diff --git a/frontend/.cursorrules b/frontend/.cursorrules
new file mode 100644
index 00000000..5d384dd9
--- /dev/null
+++ b/frontend/.cursorrules
@@ -0,0 +1,120 @@
+# Next.js Project Rules
+
+## Language
+- All code, comments, documentation, commits, and PRs MUST be written in English.
+
+## Architecture
+
+### Folder Structure
+- `/app`: App router pages and API routes
+  - Route-specific components should be placed in their respective route folders
+- `/components`: Reusable UI components
+  - `/ui`: Shadcn UI components and their derivatives
+- `/contexts`: React Context providers
+- `/hooks`: Custom React hooks
+- `/lib`: Utility functions and configuration
+- `/public`: Static assets
+- `/services`: API service functions
+- `/styles`: Global styles
+- `/types`: TypeScript type definitions
+
+### Component Guidelines
+- Use functional components with TypeScript
+- Use the `.tsx` extension for React components
+- Follow a logical naming convention:
+  - Complex components: Use PascalCase and create folders with an index.tsx file
+  - Simple components: Single PascalCase named files
+
+### State Management
+- Use React Context for global state
+- Use React hooks for local state
+- Avoid prop drilling more than 2 levels deep
+
+### API & Data Fetching
+- Use API service modules in `/services` directory
+- Implement proper error handling and loading states
+- Use React Query or SWR for complex data fetching where appropriate
+
+## Development Patterns
+
+### Code Quality
+- Maintain type safety - avoid using `any` type
+- Write self-documenting code with descriptive names
+- Keep components focused on a single responsibility
+- Extract complex logic into custom hooks
+- Follow DRY (Don't Repeat Yourself) principle
+
+### CSS & Styling
+- Use Tailwind CSS for styling
+- Use Shadcn UI components as base building blocks
+- Maintain consistent spacing and sizing
+
+### Performance
+- Avoid unnecessary re-renders
+- Optimize images and assets
+- Implement code splitting where appropriate
+- Use dynamic imports for large components/pages
+
+### Testing
+- Write tests for critical business logic
+- Test components in isolation
+- Implement end-to-end tests for critical user flows
+
+## Git Workflow
+
+### Branch Naming
+- Features: `feature/short-description`
+- Bugfixes: `fix/short-description`
+- Hotfixes: `hotfix/short-description`
+- Releases: `release/version`
+
+## Conventions
+- Variable and function names in English
+- Log and error messages in English
+- Documentation in English
+- User-facing content (emails, responses) in English
+- Indentation with 4 spaces
+- Maximum of 79 characters per line
+
+## Commit Rules
+- Use Conventional Commits format for all commit messages
+- Format: `<type>(<scope>): <description>`
+- Types:
+  - `feat`: A new feature
+  - `fix`: A bug fix
+  - `docs`: Documentation changes
+  - `style`: Changes that do not affect code meaning (formatting, etc.)
+  - `refactor`: Code changes that neither fix a bug nor add a feature
+  - `perf`: Performance improvements
+  - `test`: Adding or modifying tests
+  - `chore`: Changes to build process or auxiliary tools
+- Scope is optional and should be the module or component affected
+- Description should be concise, in the imperative mood, and not capitalized
+- Use body for more detailed explanations if needed
+- Reference issues in the footer with `Fixes #123` or `Relates to #123`
+- Examples:
+  - `feat(auth): add password reset functionality`
+  - `fix(api): correct validation error in client registration`
+  - `docs: update API documentation for new endpoints`
+  - `refactor(services): improve error handling in authentication`
+
+Format: `type(scope): subject`
+
+Examples:
+- `feat(auth): add login form validation`
+- `fix(api): resolve user data fetching issue`
+- `docs(readme): update installation instructions`
+- `style(components): format according to style guide`
+
+### Pull Requests
+- Keep PRs focused on a single feature or fix
+- Include descriptive titles and descriptions
+- Reference related issues
+- Request code reviews from appropriate team members
+- Ensure CI checks pass before merging
+
+## Code Review Guidelines
+- Focus on code quality, architecture, and maintainability
+- Provide constructive feedback
+- Address all review comments before merging
+- Maintain a respectful and collaborative tone 
\ No newline at end of file
diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 00000000..f9feddb3
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:8000
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 00000000..400e48ed
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Lock files
+package-lock.json
+yarn.lock
+
+# env files
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
\ No newline at end of file
diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md
new file mode 100644
index 00000000..7a1f9205
--- /dev/null
+++ b/frontend/CHANGELOG.md
@@ -0,0 +1,67 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.0.7] - 2025-05-15
+
+### Added
+
+- Add Task agents
+- Add file support for A2A protocol (Agent-to-Agent) endpoints
+- Add entrypoint script for dynamic environment variable handling
+- Add agent card URL input and copy functionality
+
+## [0.0.6] - 2025-05-13
+
+### Added
+
+- Agent sharing functionality with third parties via API keys
+- Dedicated shared-chat page for accessing shared agents
+- Local storage mechanism to save recently used shared agents
+- Public access to shared agents without full authentication
+
+### Changed
+
+- Add example environment file and update .gitignore
+- Add clientId prop to agent-related components and improve agent data processing
+- Refactor middleware to handle shared agent routes as public paths
+- Update API interceptors to prevent forced logout on shared chat pages
+
+### security
+
+- Implement force logout functionality on 401 Unauthorized responses
+
+## [0.0.5] - 2025-05-13
+
+### Changed
+
+- Update author information in multiple files
+
+## [0.0.4] - 2025-05-13
+
+### Added
+- Initial public release
+- User-friendly interface for creating and managing AI agents
+- Integration with multiple language models (e.g., GPT-4, Claude)
+- Client management interface
+- Visual configuration for MCP servers
+- Custom tools management
+- JWT authentication with email verification
+- Agent 2 Agent (A2A) protocol support (Google's A2A spec)
+- Workflow Agent with ReactFlow for visual workflow creation
+- Secure API key management (encrypted storage)
+- Agent organization with folders and categories
+- Dashboard with agent overview, usage stats, and recent activities
+- Agent editor for creating, editing, and configuring agents
+- Workflow editor for building and visualizing agent flows
+- API key manager for adding, encrypting, and rotating keys
+- RESTful API and WebSocket backend integration
+- Docker support for containerized deployment
+- Complete documentation and contribution guidelines
+
+---
+
+Older versions and future releases will be listed here.
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 00000000..1560e70b
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,63 @@
+# Build stage
+FROM node:20.15.1-alpine AS builder
+
+WORKDIR /app
+
+# Define build arguments with default values
+ARG NEXT_PUBLIC_API_URL=https://api-evoai.evoapicloud.com
+
+# Instalar pnpm globalmente
+RUN npm install -g pnpm
+
+# Install dependencies first (caching)
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+# Instalar explicitamente o next-runtime-env
+RUN pnpm add next-runtime-env
+
+# Copy source code
+COPY . .
+
+# Set environment variables from build arguments
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+
+RUN pnpm run build
+
+# Production stage
+FROM node:20.15.1-alpine AS runner
+
+WORKDIR /app
+
+# Define build arguments again for the runner stage
+ARG NEXT_PUBLIC_API_URL=https://api-evoai.evoapicloud.com
+
+# Instalar pnpm globalmente
+RUN npm install -g pnpm
+
+# Install production dependencies only
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --prod --frozen-lockfile
+
+# Instalar explicitamente o next-runtime-env na produção
+RUN pnpm add next-runtime-env
+
+# Copy built assets from builder
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/next.config.mjs ./
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+
+# Script to replace environment variables at runtime - create it diretamente no container
+COPY docker-entrypoint.sh ./
+RUN chmod +x ./docker-entrypoint.sh
+
+# Expose port
+EXPOSE 3000
+
+# Use entrypoint script to initialize environment variables before starting the app
+ENTRYPOINT ["sh", "./docker-entrypoint.sh"] 
\ No newline at end of file
diff --git a/frontend/LICENSE b/frontend/LICENSE
new file mode 100644
index 00000000..727e6b0a
--- /dev/null
+++ b/frontend/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, patent, trademark, and
+    attribution notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+Copyright 2025 Evolution API
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 00000000..baf04986
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,237 @@
+# Evo AI - AI Agents Platform (Frontend)
+
+Evo AI is an open-source platform for creating and managing AI agents, enabling integration with different AI models and services.
+
+## 🚀 Overview
+
+The Evo AI frontend platform enables:
+
+- User-friendly interface for creating and managing AI agents
+- Integration with different language models
+- Client management
+- Visual configuration of MCP servers
+- Custom tools management
+- JWT authentication with email verification
+- **Agent 2 Agent (A2A) Protocol Support**: Interface for interoperability between AI agents following Google's A2A specification
+- **Workflow Agent with ReactFlow**: Visual interface for building complex agent workflows
+- **Secure API Key Management**: Interface for encrypted storage of API keys
+- **Agent Organization**: Folder structure for organizing agents by categories
+
+## 🧩 Agent Creation Interface
+
+The frontend offers intuitive interfaces for creating different types of agents:
+
+### 1. LLM Agent (Language Model)
+
+Interface for configuring agents based on models like GPT-4, Claude, etc. with tools, MCP servers, and sub-agents.
+
+### 2. A2A Agent (Agent-to-Agent)
+
+Interface for implementing Google's A2A protocol for agent interoperability.
+
+### 3. Sequential Agent
+
+Interface for executing sub-agents in a specific order.
+
+### 4. Parallel Agent
+
+Interface for executing multiple sub-agents simultaneously.
+
+### 5. Loop Agent
+
+Interface for executing sub-agents in a loop with a defined number of iterations.
+
+### 6. Workflow Agent
+
+Visual interface based on ReactFlow for creating complex workflows between agents.
+
+## 🛠️ Technologies
+
+- [Next.js](https://nextjs.org/) - React framework for production
+- [React](https://reactjs.org/) - JavaScript library for building user interfaces
+- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
+- [Shadcn UI](https://ui.shadcn.com/) - UI component library
+- [Radix UI](https://www.radix-ui.com/) - Unstyled, accessible components
+- [TypeScript](https://www.typescriptlang.org/) - Typed JavaScript
+- [React Query](https://tanstack.com/query/latest) - Data fetching and state management
+- [Zustand](https://zustand-demo.pmnd.rs/) - Global state management
+- [React Flow](https://reactflow.dev/) - Library for building node-based visual workflows
+- [Axios](https://axios-http.com/) - HTTP client for API communication
+
+## 📋 Requirements
+
+- Node.js 18+ (LTS recommended)
+- npm, yarn, or pnpm package manager
+- Evo AI backend running
+
+## 🔧 Installation
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/EvolutionAPI/evo-ai-frontend.git
+cd evo-ai-frontend
+```
+
+2. Install dependencies:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+```
+
+3. Configure environment variables:
+
+```bash
+cp .env.example .env
+# Edit the .env file with your settings
+```
+
+## 🚀 Running the Project
+
+```bash
+# Development mode
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+
+# Production build
+npm run build
+# or
+yarn build
+# or
+pnpm build
+
+# Start production server
+npm run start
+# or
+yarn start
+# or
+pnpm start
+```
+
+The project will be available at [http://localhost:3000](http://localhost:3000)
+
+## 🔐 Authentication
+
+The frontend implements JWT authentication integrated with the backend:
+
+- **User Registration**: Form for creating new accounts
+- **Email Verification**: Process for verifying via email
+- **Login**: Authentication of existing users
+- **Password Recovery**: Complete password recovery flow
+- **Secure Storage**: Tokens stored in HttpOnly cookies
+
+## 🖥️ Main Interface Features
+
+### Dashboard
+
+Main dashboard showing:
+- Agent overview
+- Usage statistics
+- Recent activities
+- Quick links for agent creation
+
+### Agent Editor
+
+Complete interface for:
+- Creating new agents
+- Editing existing agents
+- Configuring instructions
+- Selecting models
+- Setting up API keys
+
+### Workflow Editor
+
+Visual editor based on ReactFlow for:
+- Creating complex workflows
+- Connecting different agents
+- Defining conditionals and decision flows
+- Visualizing data flow
+
+### API Key Manager
+
+Interface for:
+- Adding new API keys
+- Securely encrypting keys
+- Managing existing keys
+- Rotating and updating keys
+
+### Agent Organization
+
+System for:
+- Creating folders and categories
+- Organizing agents by type or use case
+- Searching and filtering agents
+
+## 🔄 Backend Integration
+
+The frontend communicates with the backend through:
+
+- **RESTful API**: Endpoints for resource management
+- **WebSockets**: Real-time communication for agent messages
+- **Response Streaming**: Support for streaming model responses
+
+## 🐳 Docker Support
+
+The project includes Docker configuration for containerized deployment:
+
+```bash
+# Build the Docker image
+./docker_build.sh
+# or
+docker build -t nextjs-frontend .
+
+# Run the container
+docker run -p 3000:3000 nextjs-frontend
+```
+
+# 🐳 Docker Compose
+```bash
+# Copy the .env file
+cp .env.example .env
+
+# Build and deploy
+ docker-compose up -d --build
+```
+
+## 🤝 Contributing
+
+We welcome contributions from the community! Here's how you can help:
+
+1. Fork the project
+2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
+3. Make your changes and add tests if possible
+4. Run tests and make sure they pass
+5. Commit your changes following conventional commits format (`feat: add amazing feature`)
+6. Push to the branch (`git push origin feature/AmazingFeature`)
+7. Open a Pull Request
+
+Please read our [Contributing Guidelines](CONTRIBUTING.md) for more details.
+
+## 📄 License
+
+This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.
+
+**Trademark Notice:** The name "Evo AI" and related branding are protected trademarks. Unauthorized use is prohibited.
+
+## 👨‍💻 Development Commands
+
+- `npm run dev` - Start the development server
+- `npm run build` - Build the application for production
+- `npm run start` - Start the production server
+- `npm run lint` - Run ESLint to check code quality
+- `npm run format` - Format code with Prettier
+
+## 🙏 Acknowledgments
+
+- [Next.js](https://nextjs.org/)
+- [React](https://reactjs.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Shadcn UI](https://ui.shadcn.com/)
+- [ReactFlow](https://reactflow.dev/) 
diff --git a/frontend/app/agents/AgentCard.tsx b/frontend/app/agents/AgentCard.tsx
new file mode 100644
index 00000000..75a25cb3
--- /dev/null
+++ b/frontend/app/agents/AgentCard.tsx
@@ -0,0 +1,506 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/AgentCard.tsx                                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Folder } from "@/services/agentService";
+import { Agent, AgentType } from "@/types/agent";
+import { MCPServer } from "@/types/mcpServer";
+import {
+  ArrowRight,
+  Bot,
+  BookOpenCheck,
+  ChevronDown,
+  ChevronUp,
+  Code,
+  ExternalLink,
+  GitBranch,
+  MoveRight,
+  Pencil,
+  RefreshCw,
+  Settings,
+  Share2,
+  Trash2,
+  Workflow,
+  TextSelect,
+  Download,
+  FlaskConical,
+} from "lucide-react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { exportAsJson } from "@/lib/utils";
+
+interface AgentCardProps {
+  agent: Agent;
+  onEdit: (agent: Agent) => void;
+  onDelete: (agent: Agent) => void;
+  onMove: (agent: Agent) => void;
+  onShare?: (agent: Agent) => void;
+  onWorkflow?: (agentId: string) => void;
+  availableMCPs?: MCPServer[];
+  getApiKeyNameById?: (id: string | undefined) => string | null;
+  getAgentNameById?: (id: string) => string;
+  folders?: Folder[];
+  agents: Agent[];
+}
+
+export function AgentCard({
+  agent,
+  onEdit,
+  onDelete,
+  onMove,
+  onShare,
+  onWorkflow,
+  availableMCPs = [],
+  getApiKeyNameById = () => null,
+  getAgentNameById = (id) => id,
+  folders = [],
+  agents,
+}: AgentCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const router = useRouter();
+
+  const getAgentTypeInfo = (type: AgentType) => {
+    const types: Record<
+      string,
+      {
+        label: string;
+        icon: React.ElementType;
+        color: string;
+        bgColor: string;
+        badgeClass: string;
+      }
+    > = {
+      llm: {
+        label: "LLM Agent",
+        icon: Code,
+        color: "#00cc7d",
+        bgColor: "bg-green-500/10",
+        badgeClass:
+          "bg-green-900/30 text-green-400 border-green-600/30 hover:bg-green-900/40",
+      },
+      a2a: {
+        label: "A2A Agent",
+        icon: ExternalLink,
+        color: "#6366f1",
+        bgColor: "bg-indigo-500/10",
+        badgeClass:
+          "bg-indigo-900/30 text-indigo-400 border-indigo-600/30 hover:bg-indigo-900/40",
+      },
+      sequential: {
+        label: "Sequential Agent",
+        icon: ArrowRight,
+        color: "#f59e0b",
+        bgColor: "bg-yellow-500/10",
+        badgeClass:
+          "bg-yellow-900/30 text-yellow-400 border-yellow-600/30 hover:bg-yellow-900/40",
+      },
+      parallel: {
+        label: "Parallel Agent",
+        icon: GitBranch,
+        color: "#8b5cf6",
+        bgColor: "bg-purple-500/10",
+        badgeClass:
+          "bg-purple-900/30 text-purple-400 border-purple-600/30 hover:bg-purple-900/40",
+      },
+      loop: {
+        label: "Loop Agent",
+        icon: RefreshCw,
+        color: "#ec4899",
+        bgColor: "bg-pink-500/10",
+        badgeClass:
+          "bg-orange-900/30 text-orange-400 border-orange-600/30 hover:bg-orange-900/40",
+      },
+      workflow: {
+        label: "Workflow Agent",
+        icon: Workflow,
+        color: "#3b82f6",
+        bgColor: "bg-blue-500/10",
+        badgeClass:
+          "bg-blue-900/30 text-blue-400 border-blue-700/40 hover:bg-blue-900/40",
+      },
+      task: {
+        label: "Task Agent",
+        icon: BookOpenCheck,
+        color: "#ef4444",
+        bgColor: "bg-red-500/10",
+        badgeClass:
+          "bg-red-900/30 text-red-400 border-red-600/30 hover:bg-red-900/40",
+      },
+    };
+
+    return (
+      types[type] || {
+        label: type,
+        icon: Bot,
+        color: "#94a3b8",
+        bgColor: "bg-slate-500/10",
+        badgeClass:
+          "bg-slate-900/30 text-slate-400 border-slate-600/30 hover:bg-slate-900/40",
+      }
+    );
+  };
+
+  const getAgentTypeIcon = (type: AgentType) => {
+    const typeInfo = getAgentTypeInfo(type);
+    const IconComponent = typeInfo.icon;
+    return (
+      <IconComponent className="h-5 w-5" style={{ color: typeInfo.color }} />
+    );
+  };
+
+  const getAgentTypeName = (type: AgentType) => {
+    return getAgentTypeInfo(type).label;
+  };
+
+  const getAgentTypeBgColor = (type: AgentType) => {
+    return getAgentTypeInfo(type).bgColor;
+  };
+
+  const getAgentTypeBadgeClass = (type: AgentType) => {
+    return getAgentTypeInfo(type).badgeClass;
+  };
+
+  const getFolderNameById = (id: string) => {
+    const folder = folders?.find((f) => f.id === id);
+    return folder?.name || id;
+  };
+
+  const getTotalTools = () => {
+    if (agent.type === "llm" && agent.config?.mcp_servers) {
+      return agent.config.mcp_servers.reduce(
+        (total, mcp) => total + (mcp.tools?.length || 0),
+        0
+      );
+    }
+    return 0;
+  };
+
+  const getCreatedAtFormatted = () => {
+    return new Date(agent.created_at).toLocaleDateString();
+  };
+
+  // Function to export the agent as JSON
+  const handleExportAgent = () => {
+    try {
+      exportAsJson(
+        agent,
+        `agent-${agent.name
+          .replace(/\s+/g, "-")
+          .toLowerCase()}-${agent.id.substring(0, 8)}`,
+        true,
+        agents
+      );
+    } catch (error) {
+      console.error("Error exporting agent:", error);
+    }
+  };
+
+  // Function to test the A2A agent in the lab
+  const handleTestA2A = () => {
+    // Use the agent card URL as base for A2A tests
+    const agentUrl = agent.agent_card_url?.replace(
+      "/.well-known/agent.json",
+      ""
+    );
+
+    // Use the API key directly from the agent config
+    const apiKey = agent.config?.api_key;
+
+    // Build the URL with parameters for the lab tests
+    const params = new URLSearchParams();
+
+    if (agentUrl) {
+      params.set("agent_url", agentUrl);
+    }
+
+    if (apiKey) {
+      params.set("api_key", apiKey);
+    }
+
+    // Redirect to the lab tests in the "lab" tab
+    const testUrl = `/documentation?${params.toString()}#lab`;
+
+    router.push(testUrl);
+  };
+
+  return (
+    <Card className="w-full overflow-hidden border border-zinc-800 shadow-lg bg-gradient-to-br from-zinc-800 to-zinc-900">
+      <div
+        className={cn(
+          "p-4 flex justify-between items-center border-b border-zinc-800",
+          getAgentTypeBgColor(agent.type)
+        )}
+      >
+        <div className="flex items-center gap-2">
+          {getAgentTypeIcon(agent.type)}
+          <h3 className="font-medium text-white">{agent.name}</h3>
+        </div>
+        <Badge
+          variant="outline"
+          className={cn("border", getAgentTypeBadgeClass(agent.type))}
+        >
+          {getAgentTypeName(agent.type)}
+        </Badge>
+      </div>
+
+      <CardContent className="p-0">
+        <div className="p-4 border-b border-zinc-800">
+          <p className="text-sm text-zinc-300">
+            {agent.description && agent.description.length > 100
+              ? `${agent.description.substring(0, 100)}...`
+              : agent.description}
+          </p>
+        </div>
+
+        <div
+          className={cn(
+            "p-4 flex justify-between items-center",
+            getAgentTypeBgColor(agent.type),
+            "bg-opacity-20"
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-zinc-500">Model:</span>
+            <span className="text-xs font-medium text-zinc-300">
+              {agent.type === "llm" ? agent.model : "N/A"}
+            </span>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn("p-0 h-auto", {
+              "text-green-400 hover:text-green-300": agent.type === "llm",
+              "text-indigo-400 hover:text-indigo-300": agent.type === "a2a",
+              "text-yellow-400 hover:text-yellow-300":
+                agent.type === "sequential",
+              "text-purple-400 hover:text-purple-300":
+                agent.type === "parallel",
+              "text-orange-400 hover:text-orange-300": agent.type === "loop",
+              "text-blue-400 hover:text-blue-300": agent.type === "workflow",
+              "text-red-400 hover:text-red-300": agent.type === "task",
+              "text-zinc-400 hover:text-white": ![
+                "llm",
+                "a2a",
+                "sequential",
+                "parallel",
+                "loop",
+                "workflow",
+                "task",
+              ].includes(agent.type),
+            })}
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+            <span className="ml-1 text-xs">{expanded ? "Less" : "More"}</span>
+          </Button>
+        </div>
+
+        {expanded && (
+          <div className="p-4 bg-zinc-950 text-xs space-y-3 animate-in fade-in-50 duration-200">
+            {agent.folder_id && (
+              <div className="flex justify-between items-center">
+                <span className="text-zinc-500">Folder:</span>
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    "h-5 px-2 bg-transparent",
+                    getAgentTypeBadgeClass(agent.type)
+                  )}
+                >
+                  {getFolderNameById(agent.folder_id)}
+                </Badge>
+              </div>
+            )}
+
+            {agent.type === "llm" && agent.api_key_id && (
+              <div className="flex justify-between items-center">
+                <span className="text-zinc-500">API Key:</span>
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    "h-5 px-2 bg-transparent",
+                    getAgentTypeBadgeClass(agent.type)
+                  )}
+                >
+                  {getApiKeyNameById(agent.api_key_id)}
+                </Badge>
+              </div>
+            )}
+
+            {getTotalTools() > 0 && (
+              <div className="flex justify-between items-center">
+                <span className="text-zinc-500">Tools:</span>
+                <span className="text-zinc-300">{getTotalTools()}</span>
+              </div>
+            )}
+
+            {agent.config?.sub_agents && agent.config.sub_agents.length > 0 && (
+              <div className="flex justify-between items-center">
+                <span className="text-zinc-500">Sub-agents:</span>
+                <span className="text-zinc-300">
+                  {agent.config.sub_agents.length}
+                </span>
+              </div>
+            )}
+
+            {agent.type === "workflow" && agent.config?.workflow && (
+              <div className="flex justify-between items-center">
+                <span className="text-zinc-500">Elements:</span>
+                <span className="text-zinc-300">
+                  {agent.config.workflow.nodes?.length || 0} nodes,{" "}
+                  {agent.config.workflow.edges?.length || 0} connections
+                </span>
+              </div>
+            )}
+
+            <div className="flex justify-between items-center">
+              <span className="text-zinc-500">Created at:</span>
+              <span className="text-zinc-300">{getCreatedAtFormatted()}</span>
+            </div>
+
+            <div className="flex justify-between items-center">
+              <span className="text-zinc-500">ID:</span>
+              <span className="text-zinc-300 text-[10px]">{agent.id}</span>
+            </div>
+          </div>
+        )}
+
+        <div className="flex border-t border-zinc-800">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                className="flex-1 rounded-none h-12 text-zinc-400 hover:text-white hover:bg-zinc-800 focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none"
+              >
+                <Settings className="h-4 w-4 mr-2" />
+                Configure
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="bg-zinc-900 border-zinc-700"
+              side="bottom"
+              align="end"
+            >
+              <DropdownMenuItem
+                className="text-white hover:bg-zinc-800 cursor-pointer"
+                onClick={handleTestA2A}
+              >
+                <FlaskConical className="h-4 w-4 mr-2 text-emerald-400" />
+                Test A2A
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-white hover:bg-zinc-800 cursor-pointer"
+                onClick={() => onEdit(agent)}
+              >
+                <Pencil className="h-4 w-4 mr-2 text-emerald-400" />
+                Edit Agent
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-white hover:bg-zinc-800 cursor-pointer"
+                onClick={() => onMove(agent)}
+              >
+                <MoveRight className="h-4 w-4 mr-2 text-yellow-400" />
+                Move Agent
+              </DropdownMenuItem>
+              {onWorkflow && agent.type === "workflow" && (
+                <DropdownMenuItem
+                  className="text-white hover:bg-zinc-800 cursor-pointer"
+                  onClick={() => onWorkflow(agent.id)}
+                >
+                  <Workflow className="h-4 w-4 mr-2 text-blue-400" />
+                  Open Workflow
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem
+                className="text-white hover:bg-zinc-800 cursor-pointer"
+                onClick={handleExportAgent}
+              >
+                <Download className="h-4 w-4 mr-2 text-purple-400" />
+                Export as JSON
+              </DropdownMenuItem>
+              {onShare && (
+                <DropdownMenuItem
+                  className="text-white hover:bg-zinc-800 cursor-pointer"
+                  onClick={() => onShare(agent)}
+                >
+                  <Share2 className="h-4 w-4 mr-2 text-blue-400" />
+                  Share Agent
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem
+                className="text-red-500 hover:bg-zinc-800 cursor-pointer"
+                onClick={() => onDelete(agent)}
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete Agent
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className="w-px bg-zinc-800" />
+          <a
+            href={agent.agent_card_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              "flex-1 flex items-center justify-center rounded-none h-12 hover:bg-zinc-800",
+              {
+                "text-green-400 hover:text-green-300": agent.type === "llm",
+                "text-indigo-400 hover:text-indigo-300": agent.type === "a2a",
+                "text-yellow-400 hover:text-yellow-300":
+                  agent.type === "sequential",
+                "text-purple-400 hover:text-purple-300":
+                  agent.type === "parallel",
+                "text-orange-400 hover:text-orange-300": agent.type === "loop",
+                "text-blue-400 hover:text-blue-300": agent.type === "workflow",
+                "text-red-400 hover:text-red-300": agent.type === "task",
+              }
+            )}
+          >
+            <ExternalLink className="h-4 w-4 mr-2" />
+            Agent Card
+          </a>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/app/agents/AgentList.tsx b/frontend/app/agents/AgentList.tsx
new file mode 100644
index 00000000..6eb55af8
--- /dev/null
+++ b/frontend/app/agents/AgentList.tsx
@@ -0,0 +1,130 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/AgentList.tsx                                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Agent } from "@/types/agent";
+import { MCPServer } from "@/types/mcpServer";
+import { AgentCard } from "./AgentCard";
+import { EmptyState } from "./EmptyState";
+import { ApiKey, Folder } from "@/services/agentService";
+
+interface AgentListProps {
+  agents: Agent[];
+  isLoading: boolean;
+  searchTerm: string;
+  selectedFolderId: string | null;
+  availableMCPs: MCPServer[];
+  getApiKeyNameById: (id: string | undefined) => string | null;
+  getAgentNameById: (id: string) => string;
+  onEdit: (agent: Agent) => void;
+  onDelete: (agent: Agent) => void;
+  onMove: (agent: Agent) => void;
+  onShare?: (agent: Agent) => void;
+  onWorkflow?: (agentId: string) => void;
+  onClearSearch?: () => void;
+  onCreateAgent?: () => void;
+  apiKeys: ApiKey[];
+  folders: Folder[];
+}
+
+export function AgentList({
+  agents,
+  isLoading,
+  searchTerm,
+  selectedFolderId,
+  availableMCPs,
+  getApiKeyNameById,
+  getAgentNameById,
+  onEdit,
+  onDelete,
+  onMove,
+  onShare,
+  onWorkflow,
+  onClearSearch,
+  onCreateAgent,
+  apiKeys,
+  folders,
+}: AgentListProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-[60vh]">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-emerald-400"></div>
+      </div>
+    );
+  }
+
+  if (agents.length === 0) {
+    if (searchTerm) {
+      return (
+        <EmptyState
+          type="search-no-results"
+          searchTerm={searchTerm}
+          onAction={onClearSearch}
+        />
+      );
+    } else if (selectedFolderId) {
+      return (
+        <EmptyState
+          type="empty-folder"
+          onAction={onCreateAgent}
+          actionLabel="Create Agent"
+        />
+      );
+    } else {
+      return (
+        <EmptyState
+          type="no-agents"
+          onAction={onCreateAgent}
+          actionLabel="Create Agent"
+        />
+      );
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {agents.map((agent) => (
+        <AgentCard
+          key={agent.id}
+          agent={agent}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onMove={onMove}
+          onShare={onShare}
+          onWorkflow={onWorkflow}
+          availableMCPs={availableMCPs}
+          getApiKeyNameById={getApiKeyNameById}
+          getAgentNameById={getAgentNameById}
+          folders={folders}
+          agents={agents}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/app/agents/AgentSidebar.tsx b/frontend/app/agents/AgentSidebar.tsx
new file mode 100644
index 00000000..16358107
--- /dev/null
+++ b/frontend/app/agents/AgentSidebar.tsx
@@ -0,0 +1,186 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/AgentSidebar.tsx                                          │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Folder,
+  FolderPlus,
+  Home,
+  X,
+  CircleEllipsis,
+  Edit,
+  Trash2,
+} from "lucide-react";
+
+interface AgentFolder {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface AgentSidebarProps {
+  visible: boolean;
+  folders: AgentFolder[];
+  selectedFolderId: string | null;
+  onSelectFolder: (id: string | null) => void;
+  onAddFolder: () => void;
+  onEditFolder: (folder: AgentFolder) => void;
+  onDeleteFolder: (folder: AgentFolder) => void;
+  onClose: () => void;
+}
+
+export function AgentSidebar({
+  visible,
+  folders,
+  selectedFolderId,
+  onSelectFolder,
+  onAddFolder,
+  onEditFolder,
+  onDeleteFolder,
+  onClose,
+}: AgentSidebarProps) {
+  return (
+    <>
+      {visible && (
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 z-40 bg-[#222] p-2 rounded-md text-emerald-400 hover:bg-[#333] hover:text-emerald-400 shadow-md transition-all"
+          aria-label="Hide folders"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      )}
+
+      <div
+        className={`fixed top-0 z-30 h-full w-64 bg-[#1a1a1a] p-4 shadow-xl transition-all duration-300 ease-in-out ${
+          visible ? "left-64 translate-x-0" : "left-0 -translate-x-full pointer-events-none"
+        }`}
+      >
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-semibold text-white flex items-center">
+            <Folder className="h-5 w-5 mr-2 text-emerald-400" />
+            Folders
+          </h2>
+          <div className="flex space-x-1">
+            <Button
+              variant="ghost"
+              className="h-8 w-8 p-0 text-neutral-400 hover:text-emerald-400 hover:bg-[#222]"
+              onClick={onAddFolder}
+            >
+              <FolderPlus className="h-5 w-5" />
+            </Button>
+            <Button
+              variant="ghost"
+              className="h-8 w-8 p-0 text-neutral-400 hover:text-emerald-400 hover:bg-[#222]"
+              onClick={onClose}
+            >
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-1">
+          <button
+            className={`w-full text-left px-3 py-2 rounded-md flex items-center ${
+              selectedFolderId === null
+                ? "bg-[#333] text-emerald-400"
+                : "text-neutral-300 hover:bg-[#222] hover:text-white"
+            }`}
+            onClick={() => onSelectFolder(null)}
+          >
+            <Home className="h-4 w-4 mr-2" />
+            <span>All agents</span>
+          </button>
+
+          {folders.map((folder) => (
+            <div key={folder.id} className="flex items-center group">
+              <button
+                className={`flex-1 text-left px-3 py-2 rounded-md flex items-center ${
+                  selectedFolderId === folder.id
+                    ? "bg-[#333] text-emerald-400"
+                    : "text-neutral-300 hover:bg-[#222] hover:text-white"
+                }`}
+                onClick={() => onSelectFolder(folder.id)}
+              >
+                <Folder className="h-4 w-4 mr-2" />
+                <span className="truncate">{folder.name}</span>
+              </button>
+
+              <div className="opacity-0 group-hover:opacity-100">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 p-0 text-neutral-400 hover:text-white hover:bg-[#222]"
+                    >
+                      <CircleEllipsis className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    align="end"
+                    className="bg-[#222] border-[#333] text-white"
+                  >
+                    <DropdownMenuItem
+                      className="cursor-pointer hover:bg-[#333] focus:bg-[#333]"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onEditFolder(folder);
+                      }}
+                    >
+                      <Edit className="h-4 w-4 mr-2" />
+                      Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className="cursor-pointer text-red-500 hover:bg-[#333] hover:text-red-400 focus:bg-[#333]"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteFolder(folder);
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/app/agents/AgentTypeSelector.tsx b/frontend/app/agents/AgentTypeSelector.tsx
new file mode 100644
index 00000000..35db3def
--- /dev/null
+++ b/frontend/app/agents/AgentTypeSelector.tsx
@@ -0,0 +1,96 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/AgentTypeSelector.tsx                                     │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { AgentType } from "@/types/agent";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Code,
+  ExternalLink,
+  GitBranch,
+  RefreshCw,
+  Workflow,
+  Users,
+  BookOpenCheck,
+} from "lucide-react";
+
+interface AgentTypeSelectorProps {
+  value: AgentType;
+  onValueChange: (value: AgentType) => void;
+  className?: string;
+}
+
+export const agentTypes = [
+  { value: "llm", label: "LLM Agent", icon: Code },
+  { value: "a2a", label: "A2A Agent", icon: ExternalLink },
+  { value: "sequential", label: "Sequential Agent", icon: Workflow },
+  { value: "parallel", label: "Parallel Agent", icon: GitBranch },
+  { value: "loop", label: "Loop Agent", icon: RefreshCw },
+  { value: "workflow", label: "Workflow Agent", icon: Workflow },
+  { value: "task", label: "Task Agent", icon: BookOpenCheck },
+];
+
+export function AgentTypeSelector({
+  value,
+  onValueChange,
+  className = "",
+}: AgentTypeSelectorProps) {
+  return (
+    <Select
+      value={value}
+      onValueChange={(value: AgentType) => onValueChange(value)}
+    >
+      <SelectTrigger
+        className={`bg-[#222] border-[#444] text-white ${className}`}
+      >
+        <SelectValue placeholder="Select type" />
+      </SelectTrigger>
+      <SelectContent className="bg-[#222] border-[#444] text-white">
+        {agentTypes.map((type) => (
+          <SelectItem
+            key={type.value}
+            value={type.value}
+            className="data-[selected]:bg-[#333] data-[highlighted]:bg-[#333] text-white focus:!text-white hover:text-emerald-400 data-[selected]:!text-emerald-400"
+          >
+            <div className="flex items-center gap-2">
+              <type.icon className="h-4 w-4 text-emerald-400" />
+              {type.label}
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/frontend/app/agents/EmptyState.tsx b/frontend/app/agents/EmptyState.tsx
new file mode 100644
index 00000000..b084c017
--- /dev/null
+++ b/frontend/app/agents/EmptyState.tsx
@@ -0,0 +1,107 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/EmptyState.tsx                                            │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Folder, Plus, Search, Server } from "lucide-react";
+
+interface EmptyStateProps {
+  type: "no-agents" | "empty-folder" | "search-no-results";
+  searchTerm?: string;
+  onAction?: () => void;
+  actionLabel?: string;
+}
+
+export function EmptyState({
+  type,
+  searchTerm = "",
+  onAction,
+  actionLabel = "Create Agent",
+}: EmptyStateProps) {
+  const getIcon = () => {
+    switch (type) {
+      case "empty-folder":
+        return <Folder className="h-16 w-16 text-emerald-400" />;
+      case "search-no-results":
+        return <Search className="h-16 w-16 text-emerald-400" />;
+      case "no-agents":
+      default:
+        return <Server className="h-16 w-16 text-emerald-400" />;
+    }
+  };
+
+  const getTitle = () => {
+    switch (type) {
+      case "empty-folder":
+        return "Empty folder";
+      case "search-no-results":
+        return "No agents found";
+      case "no-agents":
+      default:
+        return "No agents found";
+    }
+  };
+
+  const getMessage = () => {
+    switch (type) {
+      case "empty-folder":
+        return "This folder is empty. Add agents or create a new one.";
+      case "search-no-results":
+        return `We couldn't find any agents that match your search: "${searchTerm}"`;
+      case "no-agents":
+      default:
+        return "You don't have any agents configured. Create your first agent to start!";
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center h-[60vh] text-center">
+      <div className="mb-6 p-8 rounded-full bg-[#1a1a1a] border border-[#333]">
+        {getIcon()}
+      </div>
+      <h2 className="text-2xl font-semibold text-white mb-3">{getTitle()}</h2>
+      <p className="text-neutral-300 mb-6 max-w-md">{getMessage()}</p>
+      {onAction && (
+        <Button
+          onClick={onAction}
+          className={
+            type === "search-no-results"
+              ? "bg-[#222] text-white hover:bg-[#333]"
+              : "bg-emerald-400 text-black hover:bg-[#00cc7d] px-6 py-2 hover:shadow-[0_0_15px_rgba(0,255,157,0.2)]"
+          }
+        >
+          {type === "search-no-results" ? null : (
+            <Plus className="mr-2 h-5 w-5" />
+          )}
+          {type === "search-no-results" ? "Clear search" : actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/agents/SearchInput.tsx b/frontend/app/agents/SearchInput.tsx
new file mode 100644
index 00000000..f8e30739
--- /dev/null
+++ b/frontend/app/agents/SearchInput.tsx
@@ -0,0 +1,153 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/SearchInput.tsx                                           │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Search, X, Filter } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  selectedAgentType?: string | null;
+  onAgentTypeChange?: (type: string | null) => void;
+  agentTypes?: string[];
+}
+
+// Using "all" as a special value to represent no filter
+const ANY_TYPE_VALUE = "all";
+
+export function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search agents...",
+  className = "",
+  selectedAgentType = null,
+  onAgentTypeChange,
+  agentTypes = [],
+}: SearchInputProps) {
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  const handleTypeChange = (value: string) => {
+    if (onAgentTypeChange) {
+      onAgentTypeChange(value === ANY_TYPE_VALUE ? null : value);
+    }
+  };
+
+  return (
+    <div className={`relative flex items-center gap-2 ${className}`}>
+      <div className="relative flex-1">
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-400" />
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        autoComplete="off"
+        className="pl-10 w-full bg-[#222] border-[#444] text-white focus:border-emerald-400 focus:ring-emerald-400/10"
+      />
+      {value && (
+        <button
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white"
+          onClick={() => onChange("")}
+        >
+          <X className="h-4 w-4" />
+        </button>
+        )}
+      </div>
+
+      {agentTypes.length > 0 && onAgentTypeChange && (
+        <Popover open={isFilterOpen} onOpenChange={setIsFilterOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              className={`px-3 py-2 bg-[#222] border-[#444] hover:bg-[#333] ${
+                selectedAgentType ? "text-emerald-400" : "text-neutral-400"
+              }`}
+            >
+              <Filter className="h-4 w-4 mr-1" />
+              {selectedAgentType ? "Filtered" : "Filter"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-48 p-2 bg-[#222] border-[#444]">
+            <div className="space-y-3">
+              <div className="text-xs font-medium text-neutral-300">
+                Filter by type
+              </div>
+              <Select
+                value={selectedAgentType ? selectedAgentType : ANY_TYPE_VALUE}
+                onValueChange={handleTypeChange}
+              >
+                <SelectTrigger className="bg-[#333] border-[#444] text-white">
+                  <SelectValue placeholder="Any type" />
+                </SelectTrigger>
+                <SelectContent className="bg-[#333] border-[#444] text-white">
+                  <SelectItem value={ANY_TYPE_VALUE}>Any type</SelectItem>
+                  {agentTypes.map((type) => (
+                    <SelectItem key={type} value={type}>
+                      {type}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              {selectedAgentType && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full text-xs text-neutral-300 hover:text-white"
+                  onClick={() => {
+                    onAgentTypeChange(null);
+                    setIsFilterOpen(false);
+                  }}
+                >
+                  Clear filter
+                </Button>
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/agents/config/A2AAgentConfig.tsx b/frontend/app/agents/config/A2AAgentConfig.tsx
new file mode 100644
index 00000000..99f6a5dd
--- /dev/null
+++ b/frontend/app/agents/config/A2AAgentConfig.tsx
@@ -0,0 +1,73 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/config/A2AAgentConfig.tsx                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface A2AAgentConfigProps {
+  values: {
+    agent_card_url?: string;
+  };
+  onChange: (values: any) => void;
+}
+
+export function A2AAgentConfig({ values, onChange }: A2AAgentConfigProps) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="agent_card_url" className="text-right text-neutral-300">
+          Agent Card URL
+        </Label>
+        <Input
+          id="agent_card_url"
+          value={values.agent_card_url || ""}
+          onChange={(e) =>
+            onChange({
+              ...values,
+              agent_card_url: e.target.value,
+            })
+          }
+          placeholder="https://example.com/.well-known/agent-card.json"
+          className="col-span-3 bg-[#222] border-[#444] text-white"
+        />
+      </div>
+      <div className="pl-[25%] text-sm text-neutral-400">
+        <p>
+          Provide the full URL for the JSON file of the Agent Card that describes
+          this agent.
+        </p>
+        <p className="mt-2">
+          Agent Cards contain metadata, capabilities descriptions and supported
+          protocols.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/config/LLMAgentConfig.tsx b/frontend/app/agents/config/LLMAgentConfig.tsx
new file mode 100644
index 00000000..9c3d1449
--- /dev/null
+++ b/frontend/app/agents/config/LLMAgentConfig.tsx
@@ -0,0 +1,367 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/config/LLMAgentConfig.tsx                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { ApiKey } from "@/services/agentService";
+import { Plus, Maximize2, Save } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+interface ModelOption {
+  value: string;
+  label: string;
+  provider: string;
+}
+
+interface LLMAgentConfigProps {
+  apiKeys: ApiKey[];
+  availableModels: ModelOption[];
+  values: {
+    model?: string;
+    api_key_id?: string;
+    instruction?: string;
+    role?: string;
+    goal?: string;
+  };
+  onChange: (values: any) => void;
+  onOpenApiKeysDialog: () => void;
+}
+
+export function LLMAgentConfig({
+  apiKeys,
+  availableModels,
+  values,
+  onChange,
+  onOpenApiKeysDialog,
+}: LLMAgentConfigProps) {
+  const [instructionText, setInstructionText] = useState(values.instruction || "");
+  const [isInstructionModalOpen, setIsInstructionModalOpen] = useState(false);
+  const [expandedInstructionText, setExpandedInstructionText] = useState("");
+  
+  useEffect(() => {
+    setInstructionText(values.instruction || "");
+  }, [values.instruction]);
+  
+  const handleInstructionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setInstructionText(newValue);
+    
+    onChange({
+      ...values,
+      instruction: newValue,
+    });
+  };
+
+  const handleExpandInstruction = () => {
+    setExpandedInstructionText(instructionText);
+    setIsInstructionModalOpen(true);
+  };
+
+  const handleSaveExpandedInstruction = () => {
+    setInstructionText(expandedInstructionText);
+    onChange({
+      ...values,
+      instruction: expandedInstructionText,
+    });
+    setIsInstructionModalOpen(false);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="role" className="text-right text-neutral-300">
+          Role
+        </Label>
+        <div className="col-span-3">
+          <Input
+            id="role"
+            value={values.role || ""}
+            onChange={(e) =>
+              onChange({
+                ...values,
+                role: e.target.value,
+              })
+            }
+            placeholder="Ex: Research Assistant, Customer Support, etc."
+            className="bg-[#222] border-[#444] text-white"
+          />
+          <div className="mt-1 text-xs text-neutral-400">
+            <span className="inline-block h-3 w-3 mr-1">ℹ️</span>
+            <span>Define the role or persona that the agent will assume</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="goal" className="text-right text-neutral-300">
+          Goal
+        </Label>
+        <div className="col-span-3">
+          <Input
+            id="goal"
+            value={values.goal || ""}
+            onChange={(e) =>
+              onChange({
+                ...values,
+                goal: e.target.value,
+              })
+            }
+            placeholder="Ex: Find and organize information, Assist customers with inquiries, etc."
+            className="bg-[#222] border-[#444] text-white"
+          />
+          <div className="mt-1 text-xs text-neutral-400">
+            <span className="inline-block h-3 w-3 mr-1">ℹ️</span>
+            <span>Define the main objective or purpose of this agent</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="api_key" className="text-right text-neutral-300">
+          API Key
+        </Label>
+        <div className="col-span-3 space-y-4">
+          <div className="flex items-center">
+            <Select
+              value={values.api_key_id || ""}
+              onValueChange={(value) =>
+                onChange({
+                  ...values,
+                  api_key_id: value,
+                })
+              }
+            >
+              <SelectTrigger className="flex-1 bg-[#222] border-[#444] text-white">
+                <SelectValue placeholder="Select an API key" />
+              </SelectTrigger>
+              <SelectContent className="bg-[#222] border-[#444] text-white">
+                {apiKeys.length > 0 ? (
+                  apiKeys
+                    .filter((key) => key.is_active !== false)
+                    .map((key) => (
+                      <SelectItem
+                        key={key.id}
+                        value={key.id}
+                        className="data-[selected]:bg-[#333] data-[highlighted]:bg-[#333] !text-white focus:!text-white hover:text-emerald-400 data-[selected]:!text-emerald-400"
+                      >
+                        <div className="flex items-center">
+                          <span>{key.name}</span>
+                          <Badge className="ml-2 bg-[#333] text-emerald-400 text-xs">
+                            {key.provider}
+                          </Badge>
+                        </div>
+                      </SelectItem>
+                    ))
+                ) : (
+                  <div className="text-neutral-500 px-2 py-1.5 pl-8">
+                    No API keys available
+                  </div>
+                )}
+              </SelectContent>
+            </Select>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onOpenApiKeysDialog}
+              className="ml-2 bg-[#222] text-emerald-400 hover:bg-[#333]"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {apiKeys.length === 0 && (
+            <div className="flex items-center text-xs text-neutral-400">
+              <span className="inline-block h-3 w-3 mr-1 text-neutral-400">i</span>
+              <span>
+                You need to{" "}
+                <Button
+                  variant="link"
+                  onClick={onOpenApiKeysDialog}
+                  className="h-auto p-0 text-xs text-emerald-400"
+                >
+                  register API keys
+                </Button>{" "}
+                before creating an agent.
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="model" className="text-right text-neutral-300">
+          Model
+        </Label>
+        <Select
+          value={values.model}
+          onValueChange={(value) =>
+            onChange({
+              ...values,
+              model: value,
+            })
+          }
+        >
+          <SelectTrigger className="col-span-3 bg-[#222] border-[#444] text-white">
+            <SelectValue placeholder="Select the model" />
+          </SelectTrigger>
+          <SelectContent className="bg-[#222] border-[#444] text-white p-0">
+            <div className="sticky top-0 z-10 p-2 bg-[#222] border-b border-[#444]">
+              <Input
+                placeholder="Search models..."
+                className="bg-[#333] border-[#444] text-white h-8"
+                onChange={(e) => {
+                  const searchQuery = e.target.value.toLowerCase();
+                  const items = document.querySelectorAll('[data-model-item="true"]');
+                  items.forEach((item) => {
+                    const text = item.textContent?.toLowerCase() || '';
+                    if (text.includes(searchQuery)) {
+                      (item as HTMLElement).style.display = 'flex';
+                    } else {
+                      (item as HTMLElement).style.display = 'none';
+                    }
+                  });
+                }}
+              />
+            </div>
+            <div className="max-h-[200px] overflow-y-auto py-1">
+              {availableModels
+                .filter((model) => {
+                  if (!values.api_key_id) return true;
+
+                  const selectedKey = apiKeys.find(
+                    (key) => key.id === values.api_key_id
+                  );
+
+                  if (!selectedKey) return true;
+
+                  return model.provider === selectedKey.provider;
+                })
+                .map((model) => (
+                  <SelectItem
+                    key={model.value}
+                    value={model.value}
+                    className="data-[selected]:bg-[#333] data-[highlighted]:bg-[#333] !text-white focus:!text-white hover:text-emerald-400 data-[selected]:!text-emerald-400"
+                    data-model-item="true"
+                  >
+                    {model.label}
+                  </SelectItem>
+                ))}
+            </div>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="instruction" className="text-right text-neutral-300">
+          Instructions
+        </Label>
+        <div className="col-span-3">
+          <div className="relative">
+            <Textarea
+              id="instruction"
+              value={instructionText}
+              onChange={handleInstructionChange}
+              className="w-full bg-[#222] border-[#444] text-white pr-10"
+              rows={4}
+              onClick={handleExpandInstruction}
+            />
+            <button
+              type="button"
+              className="absolute top-3 right-5 text-neutral-400 hover:text-emerald-400 focus:outline-none"
+              onClick={handleExpandInstruction}
+            >
+              <Maximize2 className="h-4 w-4" />
+            </button>
+          </div>
+          <div className="mt-1 text-xs text-neutral-400">
+            <span className="inline-block h-3 w-3 mr-1">ℹ️</span>
+            <span>
+              Characters like {"{"} and {"}"} or {"{{"} and {"}}"} are automatically escaped to avoid errors in Python.
+              <span className="ml-2 text-emerald-400">Click to expand editor.</span>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Expanded Instruction Modal */}
+      <Dialog open={isInstructionModalOpen} onOpenChange={setIsInstructionModalOpen}>
+        <DialogContent className="sm:max-w-[1200px] max-h-[90vh] bg-[#1a1a1a] border-[#333] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle className="text-white">Agent Instructions</DialogTitle>
+          </DialogHeader>
+          
+          <div className="flex-1 overflow-hidden flex flex-col min-h-[60vh]">
+            <Textarea
+              value={expandedInstructionText}
+              onChange={(e) => setExpandedInstructionText(e.target.value)}
+              className="flex-1 min-h-full bg-[#222] border-[#444] text-white p-4 focus:border-emerald-400 focus:ring-emerald-400 focus:ring-opacity-50 resize-none"
+              placeholder="Enter detailed instructions for the agent..."
+            />
+          </div>
+          
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsInstructionModalOpen(false)}
+              className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+            >
+              Cancel
+            </Button>
+            <Button 
+              onClick={handleSaveExpandedInstruction}
+              className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            >
+              <Save className="h-4 w-4 mr-2" />
+              Save Instructions
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/config/LoopAgentConfig copy.tsx b/frontend/app/agents/config/LoopAgentConfig copy.tsx
new file mode 100644
index 00000000..20844c96
--- /dev/null
+++ b/frontend/app/agents/config/LoopAgentConfig copy.tsx	
@@ -0,0 +1,133 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/config/LoopAgentConfig.tsx                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Agent } from "@/types/agent";
+import { ArrowRight } from "lucide-react";
+
+interface LoopAgentConfigProps {
+  values: {
+    config?: {
+      sub_agents?: string[];
+      max_iterations?: number;
+    };
+  };
+  onChange: (values: any) => void;
+  agents: Agent[];
+  getAgentNameById: (id: string) => string;
+}
+
+export function LoopAgentConfig({
+  values,
+  onChange,
+  agents,
+  getAgentNameById,
+}: LoopAgentConfigProps) {
+  const handleMaxIterationsChange = (value: string) => {
+    const maxIterations = parseInt(value);
+    onChange({
+      ...values,
+      config: {
+        ...values.config,
+        max_iterations: isNaN(maxIterations) ? undefined : maxIterations,
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="max_iterations" className="text-right text-neutral-300">
+          Max. Iterations
+        </Label>
+        <Input
+          id="max_iterations"
+          type="number"
+          min={1}
+          max={100}
+          value={values.config?.max_iterations || ""}
+          onChange={(e) => handleMaxIterationsChange(e.target.value)}
+          className="col-span-3 bg-[#222] border-[#444] text-white"
+        />
+      </div>
+
+      <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+        <h3 className="text-sm font-medium text-white mb-4">
+          Execution Order of Agents
+        </h3>
+
+        {values.config?.sub_agents && values.config.sub_agents.length > 0 ? (
+          <div className="space-y-3">
+            {values.config.sub_agents.map((agentId, index) => (
+              <div
+                key={agentId}
+                className="flex items-center space-x-2 bg-[#2a2a2a] p-3 rounded-md"
+              >
+                <div className="flex-1">
+                  <div className="font-medium text-white">
+                    {getAgentNameById(agentId)}
+                  </div>
+                  <div className="text-sm text-neutral-400">
+                    Executed on{" "}
+                    <Badge className="bg-[#333] text-emerald-400 border-none">
+                      Position {index + 1}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-6 text-neutral-400">
+            Add agents in the "Sub-Agents" tab to define the execution order
+          </div>
+        )}
+
+        <div className="mt-3 text-sm text-neutral-400">
+          <p>
+            The agents will be executed sequentially in the order listed above.
+            The output of each agent will be provided as input to the next
+            agent in the sequence.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/config/ParallelAgentConfig.tsx b/frontend/app/agents/config/ParallelAgentConfig.tsx
new file mode 100644
index 00000000..3b1b8b9b
--- /dev/null
+++ b/frontend/app/agents/config/ParallelAgentConfig.tsx
@@ -0,0 +1,125 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/config/ParallelAgentConfig.tsx                            │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Agent } from "@/types/agent";
+import { GitBranch } from "lucide-react";
+
+interface ParallelAgentConfigProps {
+  values: {
+    config?: {
+      sub_agents?: string[];
+      aggregation_method?: string;
+      timeout_seconds?: number;
+      custom_mcp_servers?: any[];
+      wait_for_all?: boolean;
+    };
+  };
+  onChange: (values: any) => void;
+  agents: Agent[];
+  getAgentNameById: (id: string) => string;
+}
+
+export function ParallelAgentConfig({
+  values,
+  onChange,
+  agents,
+  getAgentNameById,
+}: ParallelAgentConfigProps) {
+  const aggregationMethods = [
+    { value: "merge", label: "Merge all responses" },
+    { value: "first", label: "Use only the first response" },
+    { value: "last", label: "Use only the last response" },
+    { value: "custom", label: "Custom aggregation" },
+  ];
+
+  const handleTimeoutChange = (value: string) => {
+    const timeout = parseInt(value);
+    onChange({
+      ...values,
+      config: {
+        ...values.config,
+        timeout_seconds: isNaN(timeout) ? undefined : timeout,
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      
+      <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+        <h3 className="text-sm font-medium text-white mb-4">
+          Agents in Parallel
+        </h3>
+
+        {values.config?.sub_agents && values.config.sub_agents.length > 0 ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {values.config.sub_agents.map((agentId) => (
+              <div
+                key={agentId}
+                className="flex items-center space-x-2 bg-[#2a2a2a] p-3 rounded-md"
+              >
+                <GitBranch className="h-5 w-5 text-emerald-400" />
+                <div className="flex-1">
+                  <div className="font-medium text-white truncate">
+                    {getAgentNameById(agentId)}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-6 text-neutral-400">
+            Add agents in the "Sub-Agents" tab to execute in parallel
+          </div>
+        )}
+
+        <div className="mt-3 text-sm text-neutral-400">
+          <p>
+            All listed agents will be executed simultaneously with the same
+            input. The responses will be aggregated according to the selected
+            method.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/config/SequentialAgentConfig.tsx b/frontend/app/agents/config/SequentialAgentConfig.tsx
new file mode 100644
index 00000000..f34b7f01
--- /dev/null
+++ b/frontend/app/agents/config/SequentialAgentConfig.tsx
@@ -0,0 +1,120 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/config/SequentialAgentConfig.tsx                          │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Agent } from "@/types/agent";
+import { ArrowRight } from "lucide-react";
+
+interface SequentialAgentConfigProps {
+  values: {
+    config?: {
+      sub_agents?: string[];
+      max_iterations?: number;
+      custom_mcp_servers?: any[];
+    };
+  };
+  onChange: (values: any) => void;
+  agents: Agent[];
+  getAgentNameById: (id: string) => string;
+}
+
+export function SequentialAgentConfig({
+  values,
+  onChange,
+  agents,
+  getAgentNameById,
+}: SequentialAgentConfigProps) {
+  const handleMaxIterationsChange = (value: string) => {
+    const maxIterations = parseInt(value);
+    onChange({
+      ...values,
+      config: {
+        ...values.config,
+        max_iterations: isNaN(maxIterations) ? undefined : maxIterations,
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      
+      <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+        <h3 className="text-sm font-medium text-white mb-4">
+          Execution Order of Agents
+        </h3>
+
+        {values.config?.sub_agents && values.config.sub_agents.length > 0 ? (
+          <div className="space-y-3">
+            {values.config.sub_agents.map((agentId, index) => (
+              <div
+                key={agentId}
+                className="flex items-center space-x-2 bg-[#2a2a2a] p-3 rounded-md"
+              >
+                <div className="flex-1">
+                  <div className="font-medium text-white">
+                    {getAgentNameById(agentId)}
+                  </div>
+                  <div className="text-sm text-neutral-400">
+                    Executed on{" "}
+                    <Badge className="bg-[#333] text-emerald-400 border-none">
+                      Position {index + 1}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-6 text-neutral-400">
+            Add agents in the "Sub-Agents" tab to define the execution order
+          </div>
+        )}
+
+        <div className="mt-3 text-sm text-neutral-400">
+          <p>
+            The agents will be executed sequentially in the order listed above.
+            The output of each agent will be provided as input to the next
+            agent in the sequence.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/config/TaskAgentConfig.tsx b/frontend/app/agents/config/TaskAgentConfig.tsx
new file mode 100644
index 00000000..9029cc6c
--- /dev/null
+++ b/frontend/app/agents/config/TaskAgentConfig.tsx
@@ -0,0 +1,801 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/config/TaskAgentConfig.tsx                                   │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Agent, TaskConfig } from "@/types/agent";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Maximize2,
+  Save,
+  X,
+  ArrowDown,
+  List,
+  Search,
+  Edit,
+  PenTool,
+} from "lucide-react";
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface TaskAgentConfigProps {
+  values: Partial<Agent>;
+  onChange: (values: Partial<Agent>) => void;
+  agents: Agent[];
+  getAgentNameById: (id: string) => string;
+  singleTask?: boolean;
+}
+
+const getAgentTypeLabel = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    llm: "LLM",
+    a2a: "A2A",
+    sequential: "Sequential",
+    parallel: "Parallel",
+    loop: "Loop",
+    workflow: "Workflow",
+    task: "Task",
+  };
+  return typeMap[type] || type;
+};
+
+const getAgentTypeColor = (type: string): string => {
+  const colorMap: Record<string, string> = {
+    llm: "bg-blue-800 text-white",
+    a2a: "bg-purple-800 text-white",
+    sequential: "bg-orange-800 text-white",
+    parallel: "bg-green-800 text-white",
+    loop: "bg-pink-800 text-white",
+    workflow: "bg-yellow-800 text-black",
+    task: "bg-green-800 text-white",
+  };
+  return colorMap[type] || "bg-neutral-800 text-white";
+};
+
+export function TaskAgentConfig({
+  values,
+  onChange,
+  agents,
+  getAgentNameById,
+  singleTask = false,
+}: TaskAgentConfigProps) {
+  const [newTask, setNewTask] = useState<TaskConfig>({
+    agent_id: "",
+    description: "",
+    expected_output: "",
+    enabled_tools: [],
+  });
+
+  const [taskAgentSearchQuery, setTaskAgentSearchQuery] = useState<string>("");
+  const [filteredTaskAgents, setFilteredTaskAgents] = useState<Agent[]>([]);
+  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState(false);
+  const [expandedDescription, setExpandedDescription] = useState("");
+  const [editingTaskIndex, setEditingTaskIndex] = useState<number | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const [toolSearchQuery, setToolSearchQuery] = useState<string>("");
+  const [filteredTools, setFilteredTools] = useState<{id: string, name: string}[]>([]);
+  const [isToolsModalOpen, setIsToolsModalOpen] = useState(false);
+  const [tempSelectedTools, setTempSelectedTools] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isToolsModalOpen) {
+      if (isEditing && editingTaskIndex !== null && values.config?.tasks) {
+        setTempSelectedTools(
+          values.config.tasks[editingTaskIndex]?.enabled_tools || []
+        );
+      } else {
+        setTempSelectedTools([...newTask.enabled_tools || []]);
+      }
+    }
+  }, [isToolsModalOpen]);
+
+  const getAvailableTaskAgents = (currentTaskAgentId?: string) =>
+    agents.filter(
+      (agent) =>
+        agent.id !== values.id &&
+        (!values.config?.tasks?.some((task) => task.agent_id === agent.id) ||
+          agent.id === currentTaskAgentId)
+    );
+
+  useEffect(() => {
+    const currentTaskAgentId =
+      isEditing && editingTaskIndex !== null && values.config?.tasks
+        ? values.config.tasks[editingTaskIndex].agent_id
+        : undefined;
+
+    const availableAgents = getAvailableTaskAgents(currentTaskAgentId);
+
+    if (taskAgentSearchQuery.trim() === "") {
+      setFilteredTaskAgents(availableAgents);
+    } else {
+      const query = taskAgentSearchQuery.toLowerCase();
+      setFilteredTaskAgents(
+        availableAgents.filter(
+          (agent) =>
+            agent.name.toLowerCase().includes(query) ||
+            (agent.description?.toLowerCase() || "").includes(query)
+        )
+      );
+    }
+  }, [
+    taskAgentSearchQuery,
+    agents,
+    values.config?.tasks,
+    isEditing,
+    editingTaskIndex,
+  ]);
+
+  useEffect(() => {
+    // Reset editing state when values change externally
+    if (!isEditing) {
+      const currentTaskAgentId =
+        editingTaskIndex !== null && values.config?.tasks
+          ? values.config.tasks[editingTaskIndex]?.agent_id
+          : undefined;
+      setFilteredTaskAgents(getAvailableTaskAgents(currentTaskAgentId));
+    }
+  }, [agents, values.config?.tasks]);
+
+  const getAvailableTools = () => {
+    if (!values.config?.tasks || values.config.tasks.length === 0) {
+      return [];
+    }
+
+    const taskAgentIds = values.config.tasks.map(task => task.agent_id);
+    
+    const toolsList: {id: string, name: string}[] = [];
+    const toolsMap: Record<string, boolean> = {};
+    
+    taskAgentIds.forEach(agentId => {
+      const agent = agents.find(a => a.id === agentId);
+      
+      if (agent?.type === "llm" && agent.config?.tools) {
+        agent.config.tools.forEach(tool => {
+          if (!toolsMap[tool.id]) {
+            toolsList.push({ id: tool.id, name: tool.id });
+            toolsMap[tool.id] = true;
+          }
+        });
+      }
+      
+      if (agent?.type === "llm" && agent.config?.mcp_servers) {
+        agent.config.mcp_servers.forEach(mcp => {
+          if (mcp.tools) {
+            mcp.tools.forEach(toolId => {
+              if (!toolsMap[toolId]) {
+                toolsList.push({ id: toolId, name: toolId });
+                toolsMap[toolId] = true;
+              }
+            });
+          }
+        });
+      }
+    });
+    
+    return toolsList;
+  };
+
+  useEffect(() => {
+    const availableTools = getAvailableTools();
+    
+    if (toolSearchQuery.trim() === "") {
+      setFilteredTools(availableTools);
+    } else {
+      const query = toolSearchQuery.toLowerCase();
+      setFilteredTools(
+        availableTools.filter(
+          (tool) =>
+            tool.name.toLowerCase().includes(query) ||
+            tool.id.toLowerCase().includes(query)
+        )
+      );
+    }
+  }, [toolSearchQuery, values.config?.tasks, agents]);
+
+  const handleAddTask = () => {
+    if (!newTask.agent_id || !newTask.description) {
+      return;
+    }
+
+    if (isEditing && editingTaskIndex !== null) {
+      const tasks = [...(values.config?.tasks || [])];
+      tasks[editingTaskIndex] = { ...newTask };
+
+      onChange({
+        ...values,
+        config: {
+          ...(values.config || {}),
+          tasks,
+        },
+      });
+
+      setIsEditing(false);
+      setEditingTaskIndex(null);
+    } else {
+      const tasks = [...(values.config?.tasks || [])];
+
+      if (singleTask) {
+        tasks.splice(0, tasks.length, newTask);
+      } else {
+        tasks.push(newTask);
+      }
+
+      onChange({
+        ...values,
+        config: {
+          ...(values.config || {}),
+          tasks,
+        },
+      });
+    }
+
+    setNewTask({
+      agent_id: "",
+      description: "",
+      expected_output: "",
+      enabled_tools: [],
+    });
+  };
+
+  const handleEditTask = (index: number) => {
+    const task = values.config?.tasks?.[index];
+    if (task) {
+      setNewTask({ ...task });
+      setIsEditing(true);
+      setEditingTaskIndex(index);
+    }
+  };
+
+  const handleCancelEdit = () => {
+    setNewTask({
+      agent_id: "",
+      description: "",
+      expected_output: "",
+      enabled_tools: [],
+    });
+    setIsEditing(false);
+    setEditingTaskIndex(null);
+  };
+
+  const handleRemoveTask = (index: number) => {
+    if (editingTaskIndex === index) {
+      handleCancelEdit();
+    }
+
+    const tasks = [...(values.config?.tasks || [])];
+    tasks.splice(index, 1);
+
+    onChange({
+      ...values,
+      config: {
+        ...(values.config || {}),
+        tasks,
+      },
+    });
+  };
+
+  const handleDescriptionChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    const newValue = e.target.value;
+    setNewTask({
+      ...newTask,
+      description: newValue,
+    });
+  };
+
+  const handleExpandDescription = () => {
+    setExpandedDescription(newTask.description);
+    setIsDescriptionModalOpen(true);
+  };
+
+  const handleSaveExpandedDescription = () => {
+    setNewTask({
+      ...newTask,
+      description: expandedDescription,
+    });
+    setIsDescriptionModalOpen(false);
+  };
+
+  const handleToggleTool = (toolId: string) => {
+    const index = tempSelectedTools.indexOf(toolId);
+    
+    if (index > -1) {
+      setTempSelectedTools(tempSelectedTools.filter(id => id !== toolId));
+    } else {
+      setTempSelectedTools([...tempSelectedTools, toolId]);
+    }
+  };
+
+  const isToolEnabled = (toolId: string) => {
+    return tempSelectedTools.includes(toolId);
+  };
+
+  const handleSaveTools = () => {
+    if (isEditing && editingTaskIndex !== null && values.config?.tasks) {
+      const tasks = [...(values.config?.tasks || [])];
+      
+      const updatedTask = {
+        ...tasks[editingTaskIndex],
+        enabled_tools: [...tempSelectedTools]
+      };
+      
+      tasks[editingTaskIndex] = updatedTask;
+      
+      const newConfig = {
+        ...(values.config || {}),
+        tasks: tasks
+      };
+      
+      onChange({
+        ...values,
+        config: newConfig
+      });
+      
+    } else if (newTask.agent_id) {
+      const updatedNewTask = {
+        ...newTask,
+        enabled_tools: [...tempSelectedTools]
+      };
+      
+      setNewTask(updatedNewTask);
+    }
+    
+    setIsToolsModalOpen(false);
+  };
+
+  const renderAgentTypeBadge = (agentId: string) => {
+    const agent = agents.find((a) => a.id === agentId);
+    if (!agent) {
+      return null;
+    }
+
+    return (
+      <Badge className={`ml-2 ${getAgentTypeColor(agent.type)} text-xs`}>
+        {getAgentTypeLabel(agent.type)}
+      </Badge>
+    );
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-medium text-white flex items-center">
+            <List className="mr-2 h-5 w-5 text-emerald-400" />
+            {singleTask ? "Task" : "Tasks"}
+          </h3>
+        </div>
+
+        <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+          <p className="text-sm text-neutral-400 mb-4">
+            {singleTask
+              ? "Configure the task that will be executed by the agent."
+              : "Configure the sequential tasks that will be executed by the team of agents."}
+          </p>
+
+          {values.config?.tasks && values.config.tasks.length > 0 ? (
+            <div className="space-y-4 mb-4">
+              {values.config.tasks.map((task, index) => (
+                <div
+                  key={index}
+                  className={`border border-[#333] rounded-md p-3 ${
+                    editingTaskIndex === index ? "bg-[#1e3a3a]" : "bg-[#2a2a2a]"
+                  }`}
+                >
+                  <div className="flex items-start justify-between mb-2">
+                    <div className="flex-1">
+                      <div className="flex items-center">
+                        <span className="inline-flex items-center justify-center rounded-full bg-[#333] px-2 py-1 text-xs text-white mr-2">
+                          {index + 1}
+                        </span>
+                        <h4 className="font-medium text-white flex items-center">
+                          {getAgentNameById(task.agent_id)}
+                          {renderAgentTypeBadge(task.agent_id)}
+                        </h4>
+                      </div>
+                      <p className="text-sm text-neutral-300 mt-1">
+                        {task.description}
+                      </p>
+                      {task.expected_output && (
+                        <div className="mt-2">
+                          <span className="text-xs text-neutral-400">
+                            Expected output:
+                          </span>
+                          <Badge
+                            variant="outline"
+                            className="ml-2 bg-[#333] text-emerald-400 border-emerald-400/30"
+                          >
+                            {task.expected_output}
+                          </Badge>
+                        </div>
+                      )}
+                      {task.enabled_tools && task.enabled_tools.length > 0 && (
+                        <div className="mt-2">
+                          <span className="text-xs text-neutral-400">
+                            Enabled tools:
+                          </span>
+                          <div className="flex flex-wrap gap-1 mt-1">
+                            {task.enabled_tools.map((toolId) => (
+                              <Badge
+                                key={toolId}
+                                className="bg-[#333] text-emerald-400 border border-emerald-400/30 text-xs"
+                              >
+                                {toolId}
+                              </Badge>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleEditTask(index)}
+                        className="text-neutral-400 hover:text-emerald-400 hover:bg-[#333] mr-1"
+                      >
+                        <Edit className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemoveTask(index)}
+                        className="text-red-500 hover:text-red-400 hover:bg-[#333]"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  {!singleTask &&
+                    index < (values.config?.tasks?.length || 0) - 1 && (
+                      <div className="flex justify-center my-2">
+                        <ArrowDown className="h-4 w-4 text-neutral-400" />
+                      </div>
+                    )}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-4 mb-4 bg-[#2a2a2a] rounded-md">
+              <p className="text-neutral-400">No tasks configured</p>
+              <p className="text-xs text-neutral-500">
+                {singleTask
+                  ? "Add a task to define the agent's behavior"
+                  : "Add tasks to define the workflow of the team"}
+              </p>
+            </div>
+          )}
+
+          {(!singleTask ||
+            !values.config?.tasks ||
+            values.config.tasks.length === 0 ||
+            isEditing) && (
+            <div className="space-y-3 border-t border-[#333] pt-4">
+              <h4 className="text-sm font-medium text-white flex items-center justify-between">
+                <span>
+                  {isEditing
+                    ? "Edit task"
+                    : `Add ${singleTask ? "one" : "new"} task`}
+                </span>
+                {isEditing && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleCancelEdit}
+                    className="text-neutral-400 hover:text-emerald-400 hover:bg-[#333]"
+                  >
+                    <X className="h-4 w-4 mr-1" /> Cancel
+                  </Button>
+                )}
+              </h4>
+
+              <div className="grid grid-cols-3 gap-3">
+                <div>
+                  <Label
+                    htmlFor="agent_id"
+                    className="text-xs text-neutral-400 mb-1 block"
+                  >
+                    Agent
+                  </Label>
+                  <Select
+                    value={newTask.agent_id}
+                    onValueChange={(value) =>
+                      setNewTask({ ...newTask, agent_id: value })
+                    }
+                  >
+                    <SelectTrigger className="bg-[#2a2a2a] border-[#444] text-white">
+                      <SelectValue placeholder="Select agent" />
+                    </SelectTrigger>
+                    <SelectContent className="bg-[#2a2a2a] border-[#444] text-white p-0">
+                      <div className="sticky top-0 z-10 p-2 bg-[#2a2a2a] border-b border-[#444]">
+                        <div className="relative">
+                          <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-neutral-400" />
+                          <Input
+                            placeholder="Search agents..."
+                            className="bg-[#333] border-[#444] text-white h-8 pl-8"
+                            value={taskAgentSearchQuery}
+                            onChange={(e) =>
+                              setTaskAgentSearchQuery(e.target.value)
+                            }
+                          />
+                        </div>
+                      </div>
+
+                      <div className="max-h-[200px] overflow-y-auto py-1">
+                        {filteredTaskAgents.length > 0 ? (
+                          filteredTaskAgents.map((agent) => (
+                            <SelectItem
+                              key={agent.id}
+                              value={agent.id}
+                              className="hover:bg-[#333] focus:bg-[#333] flex items-center justify-between px-2"
+                              data-agent-item="true"
+                            >
+                              <div className="flex items-center">
+                                <span className="mr-2">{agent.name}</span>
+                                <Badge
+                                  className={`${getAgentTypeColor(
+                                    agent.type
+                                  )} text-xs`}
+                                >
+                                  {getAgentTypeLabel(agent.type)}
+                                </Badge>
+                              </div>
+                            </SelectItem>
+                          ))
+                        ) : (
+                          <div className="text-neutral-500 px-4 py-2 text-center">
+                            No agents found
+                          </div>
+                        )}
+                      </div>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="col-span-2">
+                  <Label
+                    htmlFor="description"
+                    className="text-xs text-neutral-400 mb-1 block"
+                  >
+                    Task description
+                  </Label>
+                  <div className="relative">
+                    <Textarea
+                      id="description"
+                      value={newTask.description}
+                      onChange={handleDescriptionChange}
+                      className="w-full bg-[#2a2a2a] border-[#444] text-white pr-10"
+                      rows={3}
+                      onClick={handleExpandDescription}
+                    />
+                    <button
+                      type="button"
+                      className="absolute top-3 right-5 text-neutral-400 hover:text-emerald-400 focus:outline-none"
+                      onClick={handleExpandDescription}
+                    >
+                      <Maximize2 className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <div className="mt-1 text-xs text-neutral-400">
+                    <span className="inline-block h-3 w-3 mr-1">ℹ️</span>
+                    <span>
+                      Use {"{"}content{"}"} to insert the user's input.
+                      <span className="ml-2 text-emerald-400">
+                        Click to expand editor.
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <Label
+                  htmlFor="expected_output"
+                  className="text-xs text-neutral-400 mb-1 block"
+                >
+                  Expected output (optional)
+                </Label>
+                <Input
+                  id="expected_output"
+                  placeholder="Ex: JSON report, List of recommendations, etc."
+                  value={newTask.expected_output}
+                  onChange={(e) =>
+                    setNewTask({ ...newTask, expected_output: e.target.value })
+                  }
+                  className="bg-[#2a2a2a] border-[#444] text-white"
+                />
+              </div>
+
+              {newTask.enabled_tools && newTask.enabled_tools.length > 0 && (
+                <div className="mt-3">
+                  <Label className="text-xs text-neutral-400 mb-1 block">
+                    Selected tools:
+                  </Label>
+                  <div className="flex flex-wrap gap-1">
+                    {newTask.enabled_tools.map((toolId) => (
+                      <Badge
+                        key={toolId}
+                        className="bg-[#333] text-emerald-400 border border-emerald-400/30"
+                      >
+                        {toolId}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div className="flex items-center justify-between mt-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    if (newTask.agent_id) setIsToolsModalOpen(true);
+                  }}
+                  disabled={!newTask.agent_id}
+                  className="border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 px-3"
+                >
+                  <PenTool className="h-4 w-4 mr-2" /> 
+                  Configure tools
+                </Button>
+                
+                <Button
+                  onClick={handleAddTask}
+                  disabled={!newTask.agent_id || !newTask.description}
+                  className="bg-[#222] text-emerald-400 border border-emerald-400 hover:bg-emerald-400/10"
+                >
+                  <Save className="h-4 w-4 mr-1" />{" "}
+                  {isEditing ? "Update task" : "Add task"}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Dialog
+        open={isDescriptionModalOpen}
+        onOpenChange={setIsDescriptionModalOpen}
+      >
+        <DialogContent className="sm:max-w-[1200px] max-h-[90vh] bg-[#1a1a1a] border-[#333] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle className="text-white">Task Description</DialogTitle>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-hidden flex flex-col min-h-[60vh]">
+            <Textarea
+              value={expandedDescription}
+              onChange={(e) => setExpandedDescription(e.target.value)}
+              className="flex-1 min-h-full bg-[#222] border-[#444] text-white p-4 focus:border-emerald-400 focus:ring-emerald-400 focus:ring-opacity-50 resize-none"
+              placeholder="Enter detailed description for the task..."
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsDescriptionModalOpen(false)}
+              className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSaveExpandedDescription}
+              className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            >
+              <Save className="h-4 w-4 mr-2" />
+              Save description
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isToolsModalOpen} onOpenChange={setIsToolsModalOpen}>
+        <DialogContent className="sm:max-w-[600px] max-h-[90vh] bg-[#1a1a1a] border-[#333] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle className="text-white">
+              Available tools
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="relative mb-4">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-neutral-400" />
+            <Input
+              placeholder="Search tools..."
+              className="bg-[#222] border-[#444] text-white pl-9"
+              value={toolSearchQuery}
+              onChange={(e) => setToolSearchQuery(e.target.value)}
+            />
+          </div>
+
+          <div className="flex-1 overflow-y-auto space-y-2 pr-1">
+            {filteredTools.length > 0 ? (
+              filteredTools.map((tool) => (
+                <div
+                  key={tool.id}
+                  className="flex items-center space-x-2 p-2 rounded-md hover:bg-[#333] transition duration-150"
+                >
+                  <Checkbox
+                    id={tool.id}
+                    checked={isToolEnabled(tool.id)}
+                    onCheckedChange={() => handleToggleTool(tool.id)}
+                    className="border-[#444] data-[state=checked]:bg-emerald-400 data-[state=checked]:text-black"
+                  />
+                  <Label
+                    htmlFor={tool.id}
+                    className="cursor-pointer text-white flex-1"
+                  >
+                    {tool.name}
+                  </Label>
+                  <Badge className="bg-[#333] text-emerald-400">{tool.id}</Badge>
+                </div>
+              ))
+            ) : (
+              <div className="text-center py-8">
+                <p className="text-neutral-400">No tools available</p>
+                <p className="text-xs text-neutral-500">
+                  The tools are obtained from the selected agents in the tasks.
+                </p>
+              </div>
+            )}
+          </div>
+          
+          <DialogFooter>
+            <Button
+              onClick={handleSaveTools}
+              className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            >
+              <Save className="h-4 w-4 mr-2" />
+              Save settings
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/dialogs/AgentToolDialog.tsx b/frontend/app/agents/dialogs/AgentToolDialog.tsx
new file mode 100644
index 00000000..a0c4b8a1
--- /dev/null
+++ b/frontend/app/agents/dialogs/AgentToolDialog.tsx
@@ -0,0 +1,184 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/AgentToolDialog.tsx                               │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Agent } from "@/types/agent";
+import { useState, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { listAgents } from "@/services/agentService";
+import { Loader2 } from "lucide-react";
+
+interface AgentToolDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (tool: { id: string; envs: Record<string, string> }) => void;
+  currentAgentId?: string;
+  folderId?: string | null;
+  clientId: string;
+}
+
+export function AgentToolDialog({
+  open,
+  onOpenChange,
+  onSave,
+  currentAgentId,
+  folderId,
+  clientId,
+}: AgentToolDialogProps) {
+  const [selectedAgentId, setSelectedAgentId] = useState<string>("");
+  const [search, setSearch] = useState("");
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setSelectedAgentId("");
+      setSearch("");
+      loadAgents();
+    }
+  }, [open, folderId, clientId]);
+  
+  const loadAgents = async () => {
+    if (!clientId) return;
+    
+    setIsLoading(true);
+    try {
+      const res = await listAgents(
+        clientId,
+        0,
+        100,
+        folderId || undefined
+      );
+      
+      // Filter out the current agent to avoid self-reference
+      const filteredAgents = res.data.filter(agent => 
+        agent.id !== currentAgentId
+      );
+      
+      setAgents(filteredAgents);
+    } catch (error) {
+      console.error("Error loading agents:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSave = () => {
+    if (!selectedAgentId) return;
+    onSave({ id: selectedAgentId, envs: {} });
+    onOpenChange(false);
+  };
+
+  const filteredAgents = agents.filter((agent) =>
+    agent.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[420px] max-h-[90vh] overflow-hidden flex flex-col bg-[#1a1a1a] border-[#333]">
+        <DialogHeader>
+          <DialogTitle className="text-white">Add Agent Tool</DialogTitle>
+          <DialogDescription className="text-neutral-400">
+            Select an agent to add as a tool.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-auto px-2 pb-2 space-y-4">
+          <Input
+            placeholder="Search agent by name..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="mb-2 bg-[#222] border-[#444] text-white placeholder:text-neutral-400"
+          />
+          <div className="space-y-2 max-h-60 overflow-y-auto pr-1">
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center py-6">
+                <Loader2 className="h-6 w-6 text-emerald-400 animate-spin" />
+                <div className="mt-2 text-sm text-neutral-400">Loading agents...</div>
+              </div>
+            ) : filteredAgents.length === 0 ? (
+              <div className="text-neutral-400 text-sm text-center py-6">
+                {search ? `No agents found matching "${search}"` : "No agents found in this folder."}
+              </div>
+            ) : (
+              filteredAgents.map((agent) => (
+              <button
+                key={agent.id}
+                type="button"
+                onClick={() => setSelectedAgentId(agent.id)}
+                className={cn(
+                  "w-full flex items-start gap-3 p-3 rounded-md border border-[#333] bg-[#232323] hover:bg-[#222] transition text-left cursor-pointer",
+                  selectedAgentId === agent.id && "border-emerald-400 bg-[#1a1a1a] shadow-md"
+                )}
+              >
+                <div className="flex-1">
+                  <div className="font-medium text-white text-base">{agent.name}</div>
+                  <div className="text-xs text-neutral-400 mt-1">
+                    {agent.description || "No description"}
+                  </div>
+                  <div className="text-[10px] text-neutral-500 mt-1">ID: {agent.id}</div>
+                </div>
+                {selectedAgentId === agent.id && (
+                  <span className="ml-2 text-emerald-400 font-bold">Selected</span>
+                )}
+              </button>
+              ))
+            )}
+          </div>
+        </div>
+        <DialogFooter className="p-4 pt-2 border-t border-[#333]">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            disabled={!selectedAgentId || isLoading}
+          >
+            Add Tool
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/dialogs/ApiKeysDialog.tsx b/frontend/app/agents/dialogs/ApiKeysDialog.tsx
new file mode 100644
index 00000000..952126ea
--- /dev/null
+++ b/frontend/app/agents/dialogs/ApiKeysDialog.tsx
@@ -0,0 +1,445 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/ApiKeysDialog.tsx                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ConfirmationDialog } from "./ConfirmationDialog";
+import { ApiKey } from "@/services/agentService";
+import { Edit, Eye, Key, Plus, Trash2, X } from "lucide-react";
+import { useState, useEffect } from "react";
+import { availableModelProviders } from "@/types/aiModels";
+
+interface ApiKeysDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  apiKeys: ApiKey[];
+  isLoading: boolean;
+  onAddApiKey: (apiKey: {
+    name: string;
+    provider: string;
+    key_value: string;
+  }) => Promise<void>;
+  onUpdateApiKey: (
+    id: string,
+    apiKey: {
+      name: string;
+      provider: string;
+      key_value?: string;
+      is_active: boolean;
+    }
+  ) => Promise<void>;
+  onDeleteApiKey: (id: string) => Promise<void>;
+}
+
+export function ApiKeysDialog({
+  open,
+  onOpenChange,
+  apiKeys,
+  isLoading,
+  onAddApiKey,
+  onUpdateApiKey,
+  onDeleteApiKey,
+}: ApiKeysDialogProps) {
+  const [isAddingApiKey, setIsAddingApiKey] = useState(false);
+  const [isEditingApiKey, setIsEditingApiKey] = useState(false);
+  const [currentApiKey, setCurrentApiKey] = useState<
+    Partial<ApiKey & { key_value?: string }>
+  >({});
+
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [apiKeyToDelete, setApiKeyToDelete] = useState<ApiKey | null>(null);
+  const [isApiKeyVisible, setIsApiKeyVisible] = useState(false);
+
+  const handleAddClick = () => {
+    setCurrentApiKey({});
+    setIsAddingApiKey(true);
+    setIsEditingApiKey(false);
+  };
+
+  const handleEditClick = (apiKey: ApiKey) => {
+    setCurrentApiKey({ ...apiKey, key_value: "" });
+    setIsAddingApiKey(true);
+    setIsEditingApiKey(true);
+  };
+
+  const handleDeleteClick = (apiKey: ApiKey) => {
+    setApiKeyToDelete(apiKey);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const handleSaveApiKey = async () => {
+    if (
+      !currentApiKey.name ||
+      !currentApiKey.provider ||
+      (!isEditingApiKey && !currentApiKey.key_value)
+    ) {
+      return;
+    }
+
+    try {
+      if (currentApiKey.id) {
+        await onUpdateApiKey(currentApiKey.id, {
+          name: currentApiKey.name,
+          provider: currentApiKey.provider,
+          key_value: currentApiKey.key_value,
+          is_active: currentApiKey.is_active !== false,
+        });
+      } else {
+        await onAddApiKey({
+          name: currentApiKey.name,
+          provider: currentApiKey.provider,
+          key_value: currentApiKey.key_value!,
+        });
+      }
+
+      setCurrentApiKey({});
+      setIsAddingApiKey(false);
+      setIsEditingApiKey(false);
+    } catch (error) {
+      console.error("Error saving API key:", error);
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!apiKeyToDelete) return;
+
+    try {
+      await onDeleteApiKey(apiKeyToDelete.id);
+      setApiKeyToDelete(null);
+      setIsDeleteDialogOpen(false);
+    } catch (error) {
+      console.error("Error deleting API key:", error);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-hidden flex flex-col bg-[#1a1a1a] border-[#333]">
+        <DialogHeader>
+          <DialogTitle className="text-white">Manage API Keys</DialogTitle>
+          <DialogDescription className="text-neutral-400">
+            Add and manage API keys for use in your agents
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-auto p-1">
+          {isAddingApiKey ? (
+            <div className="space-y-4 p-4 bg-[#222] rounded-md">
+              <div className="flex justify-between items-center">
+                <h3 className="text-lg font-medium text-white">
+                  {isEditingApiKey ? "Edit Key" : "New Key"}
+                </h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setIsAddingApiKey(false);
+                    setIsEditingApiKey(false);
+                    setCurrentApiKey({});
+                  }}
+                  className="text-neutral-400 hover:text-white"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div className="space-y-4">
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right text-neutral-300">
+                    Name
+                  </Label>
+                  <Input
+                    id="name"
+                    value={currentApiKey.name || ""}
+                    onChange={(e) =>
+                      setCurrentApiKey({
+                        ...currentApiKey,
+                        name: e.target.value,
+                      })
+                    }
+                    className="col-span-3 bg-[#333] border-[#444] text-white"
+                    placeholder="OpenAI GPT-4"
+                  />
+                </div>
+
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <Label
+                    htmlFor="provider"
+                    className="text-right text-neutral-300"
+                  >
+                    Provider
+                  </Label>
+                  <Select
+                    value={currentApiKey.provider}
+                    onValueChange={(value) =>
+                      setCurrentApiKey({
+                        ...currentApiKey,
+                        provider: value,
+                      })
+                    }
+                  >
+                    <SelectTrigger className="col-span-3 bg-[#333] border-[#444] text-white">
+                      <SelectValue placeholder="Select Provider" />
+                    </SelectTrigger>
+                    <SelectContent className="bg-[#222] border-[#444] text-white">
+                      {availableModelProviders.map((provider) => (
+                        <SelectItem
+                          key={provider.value}
+                          value={provider.value}
+                          className="data-[selected]:bg-[#333] data-[highlighted]:bg-[#333] !text-white focus:!text-white hover:text-emerald-400 data-[selected]:!text-emerald-400"
+                        >
+                          {provider.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <Label
+                    htmlFor="key_value"
+                    className="text-right text-neutral-300"
+                  >
+                    Key Value
+                  </Label>
+                  <div className="col-span-3 relative">
+                    <Input
+                      id="key_value"
+                      value={currentApiKey.key_value || ""}
+                      onChange={(e) =>
+                        setCurrentApiKey({
+                          ...currentApiKey,
+                          key_value: e.target.value,
+                        })
+                      }
+                      className="bg-[#333] border-[#444] text-white pr-10"
+                      type={isApiKeyVisible ? "text" : "password"}
+                      placeholder={
+                        isEditingApiKey
+                          ? "Leave blank to keep the current value"
+                          : "sk-..."
+                      }
+                    />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      type="button"
+                      className="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 text-neutral-400 hover:text-white"
+                      onClick={() => setIsApiKeyVisible(!isApiKeyVisible)}
+                    >
+                      <Eye className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                {isEditingApiKey && (
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <Label
+                      htmlFor="is_active"
+                      className="text-right text-neutral-300"
+                    >
+                      Status
+                    </Label>
+                    <div className="col-span-3 flex items-center">
+                      <Checkbox
+                        id="is_active"
+                        checked={currentApiKey.is_active !== false}
+                        onCheckedChange={(checked) =>
+                          setCurrentApiKey({
+                            ...currentApiKey,
+                            is_active: !!checked,
+                          })
+                        }
+                        className="mr-2 data-[state=checked]:bg-emerald-400 data-[state=checked]:border-emerald-400"
+                      />
+                      <Label htmlFor="is_active" className="text-neutral-300">
+                        Active
+                      </Label>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex justify-end gap-2 mt-4">
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setIsAddingApiKey(false);
+                    setIsEditingApiKey(false);
+                    setCurrentApiKey({});
+                  }}
+                  className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleSaveApiKey}
+                  className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                  disabled={isLoading}
+                >
+                  {isLoading && (
+                    <div className="animate-spin h-4 w-4 border-2 border-black border-t-transparent rounded-full mr-1"></div>
+                  )}
+                  {isEditingApiKey ? "Update" : "Add"}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="flex justify-between items-center mb-4">
+                <h3 className="text-lg font-medium text-white">
+                  Available Keys
+                </h3>
+                <Button
+                  onClick={handleAddClick}
+                  className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  New Key
+                </Button>
+              </div>
+
+              {isLoading ? (
+                <div className="flex items-center justify-center h-40">
+                  <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-emerald-400"></div>
+                </div>
+              ) : apiKeys.length > 0 ? (
+                <div className="space-y-2">
+                  {apiKeys.map((apiKey) => (
+                    <div
+                      key={apiKey.id}
+                      className="flex items-center justify-between p-3 bg-[#222] rounded-md border border-[#333] hover:border-emerald-400/30"
+                    >
+                      <div>
+                        <p className="font-medium text-white">{apiKey.name}</p>
+                        <div className="flex items-center gap-2 mt-1">
+                          <Badge
+                            variant="outline"
+                            className="bg-[#333] text-emerald-400 border-emerald-400/30"
+                          >
+                            {apiKey.provider.toUpperCase()}
+                          </Badge>
+                          <p className="text-xs text-neutral-400">
+                            Created on{" "}
+                            {new Date(apiKey.created_at).toLocaleDateString()}
+                          </p>
+                          {!apiKey.is_active && (
+                            <Badge
+                              variant="outline"
+                              className="bg-[#333] text-red-400 border-red-400/30"
+                            >
+                              Inactive
+                            </Badge>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleEditClick(apiKey)}
+                          className="text-neutral-300 hover:text-emerald-400 hover:bg-[#333]"
+                        >
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleDeleteClick(apiKey)}
+                          className="text-red-500 hover:text-red-400 hover:bg-[#333]"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-10 border border-dashed border-[#333] rounded-md bg-[#222] text-neutral-400">
+                  <Key className="mx-auto h-10 w-10 text-neutral-500 mb-3" />
+                  <p>You don't have any API keys registered</p>
+                  <p className="text-sm mt-1">
+                    Add your API keys to use them in your agents
+                  </p>
+                  <Button
+                    onClick={handleAddClick}
+                    className="mt-4 bg-[#333] text-emerald-400 hover:bg-[#444]"
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Add Key
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <DialogFooter className="border-t border-[#333] pt-4">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+          >
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+
+      <ConfirmationDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+        title="Confirm Delete"
+        description={`Are you sure you want to delete the key "${apiKeyToDelete?.name}"? This action cannot be undone.`}
+        confirmText="Delete"
+        confirmVariant="destructive"
+        onConfirm={handleDeleteConfirm}
+      />
+    </Dialog>
+  );
+}
diff --git a/frontend/app/agents/dialogs/ConfirmationDialog.tsx b/frontend/app/agents/dialogs/ConfirmationDialog.tsx
new file mode 100644
index 00000000..4771fb2c
--- /dev/null
+++ b/frontend/app/agents/dialogs/ConfirmationDialog.tsx
@@ -0,0 +1,93 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/ConfirmationDialog.tsx                           │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface ConfirmationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  cancelText?: string;
+  confirmText?: string;
+  confirmVariant?: "default" | "destructive";
+  onConfirm: () => void;
+}
+
+export function ConfirmationDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  cancelText = "Cancel",
+  confirmText = "Confirm",
+  confirmVariant = "default",
+  onConfirm,
+}: ConfirmationDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="bg-[#1a1a1a] border-[#333] text-white">
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription className="text-neutral-400">
+            {description}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white">
+            {cancelText}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault();
+              onConfirm();
+            }}
+            className={
+              confirmVariant === "destructive"
+                ? "bg-red-600 text-white hover:bg-red-700"
+                : "bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            }
+          >
+            {confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/frontend/app/agents/dialogs/CustomMCPDialog.tsx b/frontend/app/agents/dialogs/CustomMCPDialog.tsx
new file mode 100644
index 00000000..470d204e
--- /dev/null
+++ b/frontend/app/agents/dialogs/CustomMCPDialog.tsx
@@ -0,0 +1,237 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/CustomMCPDialog.tsx                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { X, Plus } from "lucide-react";
+import { useState, useEffect } from "react";
+
+interface CustomMCPHeader {
+  id: string;
+  key: string;
+  value: string;
+}
+
+interface CustomMCPServer {
+  url: string;
+  headers: Record<string, string>;
+}
+
+interface CustomMCPDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (customMCP: CustomMCPServer) => void;
+  initialCustomMCP?: CustomMCPServer | null;
+  clientId: string;
+}
+
+export function CustomMCPDialog({
+  open,
+  onOpenChange,
+  onSave,
+  initialCustomMCP = null,
+  clientId,
+}: CustomMCPDialogProps) {
+  const [customMCP, setCustomMCP] = useState<Partial<CustomMCPServer>>({
+    url: "",
+    headers: {},
+  });
+
+  const [headersList, setHeadersList] = useState<CustomMCPHeader[]>([]);
+
+  useEffect(() => {
+    if (open) {
+      if (initialCustomMCP) {
+        setCustomMCP(initialCustomMCP);
+        const headersList = Object.entries(initialCustomMCP.headers || {}).map(
+          ([key, value], index) => ({
+            id: `header-${index}`,
+            key,
+            value,
+          })
+        );
+        setHeadersList(headersList);
+      } else {
+        setCustomMCP({ url: "", headers: {} });
+        setHeadersList([]);
+      }
+    }
+  }, [open, initialCustomMCP]);
+
+  const handleAddHeader = () => {
+    setHeadersList([
+      ...headersList,
+      { id: `header-${Date.now()}`, key: "", value: "" },
+    ]);
+  };
+
+  const handleRemoveHeader = (id: string) => {
+    setHeadersList(headersList.filter((header) => header.id !== id));
+  };
+
+  const handleHeaderChange = (
+    id: string,
+    field: "key" | "value",
+    value: string
+  ) => {
+    setHeadersList(
+      headersList.map((header) =>
+        header.id === id ? { ...header, [field]: value } : header
+      )
+    );
+  };
+
+  const handleSave = () => {
+    if (!customMCP.url) return;
+
+    const headersObject: Record<string, string> = {};
+    headersList.forEach((header) => {
+      if (header.key.trim()) {
+        headersObject[header.key] = header.value;
+      }
+    });
+
+    onSave({
+      url: customMCP.url,
+      headers: headersObject,
+    });
+
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col bg-[#1a1a1a] border-[#333]">
+        <DialogHeader>
+          <DialogTitle className="text-white">
+            Configure Custom MCP
+          </DialogTitle>
+          <DialogDescription className="text-neutral-400">
+            Configure the URL and HTTP headers for the custom MCP.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-auto p-4">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="custom-mcp-url" className="text-neutral-300">
+                MCP URL
+              </Label>
+              <Input
+                id="custom-mcp-url"
+                value={customMCP.url || ""}
+                onChange={(e) =>
+                  setCustomMCP({
+                    ...customMCP,
+                    url: e.target.value,
+                  })
+                }
+                className="bg-[#222] border-[#444] text-white"
+                placeholder="https://meu-servidor-mcp.com/api"
+              />
+            </div>
+
+            <div className="space-y-3">
+              <h3 className="text-sm font-medium text-white">HTTP Headers</h3>
+              <div className="border border-[#444] rounded-md p-3 bg-[#222]">
+                {headersList.map((header) => (
+                  <div
+                    key={header.id}
+                    className="grid grid-cols-5 items-center gap-2 mb-2"
+                  >
+                    <Input
+                      value={header.key}
+                      onChange={(e) =>
+                        handleHeaderChange(header.id, "key", e.target.value)
+                      }
+                      className="col-span-2 bg-[#333] border-[#444] text-white"
+                      placeholder="Header Name"
+                    />
+                    <Input
+                      value={header.value}
+                      onChange={(e) =>
+                        handleHeaderChange(header.id, "value", e.target.value)
+                      }
+                      className="col-span-2 bg-[#333] border-[#444] text-white"
+                      placeholder="Header Value"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRemoveHeader(header.id)}
+                      className="col-span-1 h-8 text-red-500 hover:text-red-400 hover:bg-[#444]"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleAddHeader}
+                  className="w-full mt-2 border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add Header
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="p-4 pt-2 border-t border-[#333]">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            disabled={!customMCP.url}
+          >
+            {initialCustomMCP?.url ? "Save Custom MCP" : "Add Custom MCP"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/agents/dialogs/CustomToolDialog.tsx b/frontend/app/agents/dialogs/CustomToolDialog.tsx
new file mode 100644
index 00000000..5413545f
--- /dev/null
+++ b/frontend/app/agents/dialogs/CustomToolDialog.tsx
@@ -0,0 +1,864 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/CustomToolDialog.tsx                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { 
+  X, 
+  Plus, 
+  Info, 
+  Trash, 
+  Globe, 
+  FileJson, 
+  LayoutList, 
+  Settings, 
+  Database,
+  Code,
+  Server,
+  Wand
+} from "lucide-react";
+import { useState, useEffect } from "react";
+import { HTTPTool, HTTPToolParameter } from "@/types/agent";
+import { sanitizeAgentName } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+interface CustomToolDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (tool: HTTPTool) => void;
+  initialTool?: HTTPTool | null;
+}
+
+export function CustomToolDialog({
+  open,
+  onOpenChange,
+  onSave,
+  initialTool = null,
+}: CustomToolDialogProps) {
+  const [tool, setTool] = useState<Partial<HTTPTool>>({
+    name: "",
+    method: "GET",
+    endpoint: "",
+    description: "",
+    headers: {},
+    values: {},
+    parameters: {},
+    error_handling: {
+      timeout: 30,
+      retry_count: 0,
+      fallback_response: {},
+    },
+  });
+
+  const [headersList, setHeadersList] = useState<{ id: string; key: string; value: string }[]>([]);
+  const [bodyParams, setBodyParams] = useState<{ id: string; key: string; param: HTTPToolParameter }[]>([]);
+  const [pathParams, setPathParams] = useState<{ id: string; key: string; desc: string }[]>([]);
+  const [queryParams, setQueryParams] = useState<{ id: string; key: string; value: string }[]>([]);
+  const [valuesList, setValuesList] = useState<{ id: string; key: string; value: string }[]>([]);
+  const [timeout, setTimeout] = useState<number>(30);
+  const [fallbackError, setFallbackError] = useState<string>("");
+  const [fallbackMessage, setFallbackMessage] = useState<string>("");
+  const [activeTab, setActiveTab] = useState("basics");
+
+  useEffect(() => {
+    if (open) {
+      if (initialTool) {
+        setTool(initialTool);
+        setHeadersList(
+          Object.entries(initialTool.headers || {}).map(([key, value], idx) => ({
+            id: `header-${idx}`,
+            key,
+            value,
+          }))
+        );
+        setBodyParams(
+          Object.entries(initialTool.parameters?.body_params || {}).map(([key, param], idx) => ({
+            id: `body-${idx}`,
+            key,
+            param,
+          }))
+        );
+        setPathParams(
+          Object.entries(initialTool.parameters?.path_params || {}).map(([key, desc], idx) => ({
+            id: `path-${idx}`,
+            key,
+            desc: desc as string,
+          }))
+        );
+        setQueryParams(
+          Object.entries(initialTool.parameters?.query_params || {}).map(([key, value], idx) => ({
+            id: `query-${idx}`,
+            key,
+            value: value as string,
+          }))
+        );
+        setValuesList(
+          Object.entries(initialTool.values || {}).map(([key, value], idx) => ({
+            id: `val-${idx}`,
+            key,
+            value: value as string,
+          }))
+        );
+        setTimeout(initialTool.error_handling?.timeout || 30);
+        setFallbackError(initialTool.error_handling?.fallback_response?.error || "");
+        setFallbackMessage(initialTool.error_handling?.fallback_response?.message || "");
+      } else {
+        setTool({
+          name: "",
+          method: "GET",
+          endpoint: "",
+          description: "",
+          headers: {},
+          values: {},
+          parameters: {},
+          error_handling: {
+            timeout: 30,
+            retry_count: 0,
+            fallback_response: {},
+          },
+        });
+        setHeadersList([]);
+        setBodyParams([]);
+        setPathParams([]);
+        setQueryParams([]);
+        setValuesList([]);
+        setTimeout(30);
+        setFallbackError("");
+        setFallbackMessage("");
+      }
+      setActiveTab("basics");
+    }
+  }, [open, initialTool]);
+
+  const handleAddHeader = () => {
+    setHeadersList([...headersList, { id: `header-${Date.now()}`, key: "", value: "" }]);
+  };
+  const handleRemoveHeader = (id: string) => {
+    setHeadersList(headersList.filter((h) => h.id !== id));
+  };
+  const handleHeaderChange = (id: string, field: "key" | "value", value: string) => {
+    setHeadersList(headersList.map((h) => (h.id === id ? { ...h, [field]: value } : h)));
+  };
+
+  const handleAddBodyParam = () => {
+    setBodyParams([
+      ...bodyParams,
+      {
+        id: `body-${Date.now()}`,
+        key: "",
+        param: { type: "string", required: false, description: "" },
+      },
+    ]);
+  };
+  const handleRemoveBodyParam = (id: string) => {
+    setBodyParams(bodyParams.filter((p) => p.id !== id));
+  };
+  const handleBodyParamChange = (id: string, field: "key" | keyof HTTPToolParameter, value: string | boolean) => {
+    setBodyParams(
+      bodyParams.map((p) =>
+        p.id === id
+          ? field === "key"
+            ? { ...p, key: value as string }
+            : { ...p, param: { ...p.param, [field]: value } }
+          : p
+      )
+    );
+  };
+
+  // Path Params
+  const handleAddPathParam = () => {
+    setPathParams([...pathParams, { id: `path-${Date.now()}`, key: "", desc: "" }]);
+  };
+  const handleRemovePathParam = (id: string) => {
+    setPathParams(pathParams.filter((p) => p.id !== id));
+  };
+  const handlePathParamChange = (id: string, field: "key" | "desc", value: string) => {
+    setPathParams(pathParams.map((p) => (p.id === id ? { ...p, [field]: value } : p)));
+  };
+
+  // Query Params
+  const handleAddQueryParam = () => {
+    setQueryParams([...queryParams, { id: `query-${Date.now()}`, key: "", value: "" }]);
+  };
+  const handleRemoveQueryParam = (id: string) => {
+    setQueryParams(queryParams.filter((q) => q.id !== id));
+  };
+  const handleQueryParamChange = (id: string, field: "key" | "value", value: string) => {
+    setQueryParams(queryParams.map((q) => (q.id === id ? { ...q, [field]: value } : q)));
+  };
+
+  // Values
+  const handleAddValue = () => {
+    setValuesList([...valuesList, { id: `val-${Date.now()}`, key: "", value: "" }]);
+  };
+  const handleRemoveValue = (id: string) => {
+    setValuesList(valuesList.filter((v) => v.id !== id));
+  };
+  const handleValueChange = (id: string, field: "key" | "value", value: string) => {
+    setValuesList(valuesList.map((v) => (v.id === id ? { ...v, [field]: value } : v)));
+  };
+
+  const handleSave = () => {
+    if (!tool.name || !tool.endpoint) return;
+    const headersObject: Record<string, string> = {};
+    headersList.forEach((h) => {
+      if (h.key.trim()) headersObject[h.key] = h.value;
+    });
+    const bodyParamsObject: Record<string, HTTPToolParameter> = {};
+    bodyParams.forEach((p) => {
+      if (p.key.trim()) bodyParamsObject[p.key] = p.param;
+    });
+    const pathParamsObject: Record<string, string> = {};
+    pathParams.forEach((p) => {
+      if (p.key.trim()) pathParamsObject[p.key] = p.desc;
+    });
+    const queryParamsObject: Record<string, string> = {};
+    queryParams.forEach((q) => {
+      if (q.key.trim()) queryParamsObject[q.key] = q.value;
+    });
+    const valuesObject: Record<string, string> = {};
+    valuesList.forEach((v) => {
+      if (v.key.trim()) valuesObject[v.key] = v.value;
+    });
+    
+    // Sanitize the tool name
+    const sanitizedName = sanitizeAgentName(tool.name);
+    
+    onSave({
+      ...(tool as HTTPTool),
+      name: sanitizedName,
+      headers: headersObject,
+      values: valuesObject,
+      parameters: {
+        ...tool.parameters,
+        body_params: bodyParamsObject,
+        path_params: pathParamsObject,
+        query_params: queryParamsObject,
+      },
+      error_handling: {
+        timeout,
+        retry_count: tool.error_handling?.retry_count ?? 0,
+        fallback_response: {
+          error: fallbackError,
+          message: fallbackMessage,
+        },
+      },
+    } as HTTPTool);
+    onOpenChange(false);
+  };
+
+  const ParamField = ({ 
+    children, 
+    label, 
+    tooltip
+  }: { 
+    children: React.ReactNode, 
+    label: string, 
+    tooltip?: string 
+  }) => (
+    <div className="space-y-1.5">
+      <div className="flex items-center gap-1.5">
+        <Label className="text-sm font-medium text-neutral-200">
+          {label}
+        </Label>
+        {tooltip && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-3.5 w-3.5 text-neutral-400 cursor-help" />
+              </TooltipTrigger>
+              <TooltipContent className="bg-neutral-800 border-neutral-700 text-white p-3 max-w-sm">
+                <p className="text-xs">{tooltip}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+
+  const FieldList = <T extends Record<string, any>>({ 
+    items, 
+    onAdd, 
+    onRemove, 
+    onChange, 
+    fields, 
+    addText, 
+    emptyText, 
+    icon 
+  }: { 
+    items: T[], 
+    onAdd: () => void, 
+    onRemove: (id: string) => void, 
+    onChange: (id: string, field: string, value: any) => void, 
+    fields: { name: string, field: string, placeholder: string, width: number, type?: string }[],
+    addText: string,
+    emptyText: string,
+    icon: React.ReactNode
+  }) => (
+    <div className="border border-neutral-700 rounded-md p-3 bg-neutral-800/50">
+      {items.length > 0 ? (
+        <div className="space-y-2 mb-3">
+          {items.map((item) => (
+            <div key={item.id} className="flex items-center gap-2 group">
+              <div className="flex-1 flex gap-2 w-full">
+                {fields.map(field => {
+                  // Calculate percentage width based on the field's width value
+                  const widthPercent = (field.width / 12) * 100;
+                  
+                  return (
+                    <div 
+                      key={field.name} 
+                      className="flex-shrink-0"
+                      style={{ width: `${widthPercent}%` }}
+                    >
+                      {field.type === 'select' ? (
+                        <select
+                          value={(field.field.includes('.') 
+                            ? item.param?.[field.field.split('.')[1]] 
+                            : item[field.field]) || ''}
+                          onChange={(e) => onChange(
+                            item.id, 
+                            field.field,
+                            e.target.value
+                          )}
+                          className="w-full h-9 px-3 py-1 rounded-md bg-neutral-900 border border-neutral-700 text-white text-sm"
+                        >
+                          <option value="string">string</option>
+                          <option value="number">number</option>
+                          <option value="boolean">boolean</option>
+                        </select>
+                      ) : field.type === 'checkbox' ? (
+                        <div className="flex items-center h-9 w-full justify-center">
+                          <label className="flex items-center gap-1.5">
+                            <input
+                              type="checkbox"
+                              checked={item.param?.required || false}
+                              onChange={(e) => onChange(
+                                item.id, 
+                                field.field,
+                                (e.target as HTMLInputElement).checked
+                              )}
+                              className="accent-emerald-400 rounded"
+                            />
+                            <span className="text-xs text-neutral-300">Required</span>
+                          </label>
+                        </div>
+                      ) : (
+                        <Input
+                          value={(field.field.includes('.') 
+                            ? item.param?.[field.field.split('.')[1]] 
+                            : item[field.field]) || ''}
+                          onChange={(e) => onChange(
+                            item.id, 
+                            field.field,
+                            e.target.value
+                          )}
+                          className="h-9 w-full bg-neutral-900 border-neutral-700 text-white placeholder:text-neutral-500 text-sm"
+                          placeholder={field.placeholder}
+                        />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => onRemove(item.id)}
+                className="h-9 w-9 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-300 hover:bg-red-900/20"
+              >
+                <Trash className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="py-6 flex flex-col items-center justify-center text-center">
+          {icon}
+          <p className="mt-2 text-neutral-400 text-sm">{emptyText}</p>
+        </div>
+      )}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={onAdd}
+        className="w-full border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10 bg-neutral-800/30"
+      >
+        <Plus className="h-4 w-4 mr-1.5" /> {addText}
+      </Button>
+    </div>
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[850px] max-h-[90vh] overflow-hidden flex flex-col bg-neutral-900 border-neutral-700 p-0">
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Header Area */}
+          <div className="flex items-start justify-between p-6 border-b border-neutral-800">
+            <div>
+              <h2 className="text-xl font-semibold text-white flex items-center gap-2">
+                <Wand className="h-5 w-5 text-emerald-400" />
+                {initialTool ? "Edit Custom Tool" : "Create Custom Tool"}
+              </h2>
+              <p className="text-neutral-400 text-sm mt-1">
+                Configure an HTTP tool for your agent to interact with external APIs
+              </p>
+            </div>
+            
+            <div className="flex items-center gap-3">
+              <Badge variant="outline" className="bg-neutral-800 text-emerald-400 border-emerald-500/30 uppercase text-xs font-semibold px-2 py-0.5">
+                {tool.method || "GET"}
+              </Badge>
+            </div>
+          </div>
+          
+          {/* Main Content Area */}
+          <div className="flex-1 flex overflow-hidden">
+            {/* Left Side - Navigation */}
+            <div className="w-[200px] bg-neutral-800/50 border-r border-neutral-800 flex-shrink-0">
+              <div className="py-4">
+                <nav className="space-y-1 px-2">
+                  {[
+                    { id: 'basics', label: 'Basic Info', icon: <Info className="h-4 w-4" /> },
+                    { id: 'endpoint', label: 'Endpoint', icon: <Globe className="h-4 w-4" /> },
+                    { id: 'headers', label: 'Headers', icon: <Server className="h-4 w-4" /> },
+                    { id: 'body', label: 'Body Params', icon: <FileJson className="h-4 w-4" /> },
+                    { id: 'path', label: 'Path Params', icon: <Code className="h-4 w-4" /> },
+                    { id: 'query', label: 'Query Params', icon: <LayoutList className="h-4 w-4" /> },
+                    { id: 'defaults', label: 'Default Values', icon: <Database className="h-4 w-4" /> },
+                    { id: 'error', label: 'Error Handling', icon: <Settings className="h-4 w-4" /> },
+                  ].map(item => (
+                    <button
+                      key={item.id}
+                      className={cn(
+                        "w-full flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors",
+                        activeTab === item.id 
+                          ? "bg-emerald-500/10 text-emerald-400" 
+                          : "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
+                      )}
+                      onClick={() => setActiveTab(item.id)}
+                    >
+                      {item.icon}
+                      <span>{item.label}</span>
+                      {(
+                        (item.id === 'headers' && headersList.length > 0) ||
+                        (item.id === 'body' && bodyParams.length > 0) ||
+                        (item.id === 'path' && pathParams.length > 0) ||
+                        (item.id === 'query' && queryParams.length > 0) ||
+                        (item.id === 'defaults' && valuesList.length > 0)
+                      ) && (
+                        <span className="ml-auto bg-emerald-500/20 text-emerald-400 text-xs rounded-full px-1.5 py-0.5 min-w-[18px]">
+                          {item.id === 'headers' && headersList.length}
+                          {item.id === 'body' && bodyParams.length}
+                          {item.id === 'path' && pathParams.length}
+                          {item.id === 'query' && queryParams.length}
+                          {item.id === 'defaults' && valuesList.length}
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                </nav>
+              </div>
+            </div>
+            
+            {/* Right Side - Content */}
+            <div className="flex-1 overflow-auto">
+              {activeTab === 'basics' && (
+                <div className="p-6">
+                  <div className="space-y-6">
+                    <ParamField 
+                      label="Tool Name" 
+                      tooltip="A unique identifier for this tool. Will be used by the agent to reference this tool."
+                    >
+              <Input
+                value={tool.name || ""}
+                onChange={(e) => setTool({ ...tool, name: e.target.value })}
+                onBlur={(e) => {
+                  const sanitizedName = sanitizeAgentName(e.target.value);
+                  if (sanitizedName !== e.target.value) {
+                    setTool({ ...tool, name: sanitizedName });
+                  }
+                }}
+                        className="bg-neutral-800 border-neutral-700 text-white"
+                        placeholder="e.g. weatherApi, searchTool"
+                      />
+                    </ParamField>
+
+                    <ParamField 
+                      label="Description" 
+                      tooltip="A clear description of what this tool does. The agent will use this to determine when to use the tool."
+                    >
+            <Input
+              value={tool.description || ""}
+              onChange={(e) => setTool({ ...tool, description: e.target.value })}
+                        className="bg-neutral-800 border-neutral-700 text-white"
+                        placeholder="Provides weather information for a given location"
+            />
+                    </ParamField>
+          </div>
+                </div>
+              )}
+
+              {activeTab === 'endpoint' && (
+                <div className="p-6">
+                  <div className="space-y-6">
+                    <ParamField 
+                      label="HTTP Method" 
+                      tooltip="The HTTP method to use for the request."
+                    >
+                      <div className="flex gap-1">
+                        {['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map(method => (
+              <Button
+                            key={method}
+                            type="button"
+                            onClick={() => setTool({ ...tool, method })}
+                            className={cn(
+                              "px-4 py-2 rounded font-medium text-sm flex-1",
+                              tool.method === method
+                                ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
+                                : "bg-neutral-800 text-neutral-400 border border-neutral-700 hover:bg-neutral-700 hover:text-neutral-200"
+                            )}
+                          >
+                            {method}
+              </Button>
+                        ))}
+                      </div>
+                    </ParamField>
+
+                    <ParamField 
+                      label="Endpoint URL" 
+                      tooltip="The complete URL to call. Can include path parameters with the format {paramName}."
+                    >
+                      <div className="space-y-1">
+                        <Input
+                          value={tool.endpoint || ""}
+                          onChange={(e) => setTool({ ...tool, endpoint: e.target.value })}
+                          className="bg-neutral-800 border-neutral-700 text-white font-mono"
+                          placeholder="https://api.example.com/v1/resource/{id}"
+                        />
+                        {tool.endpoint && tool.endpoint.includes('{') && (
+                          <p className="text-xs text-amber-400">
+                            <Info className="h-3 w-3 inline-block mr-1" /> 
+                            URL contains path variables. Don't forget to define them in the Path Parameters section.
+                          </p>
+                        )}
+                      </div>
+                    </ParamField>
+
+                    <div className="p-4 bg-neutral-800/80 border border-emerald-600/20 rounded-md mt-6">
+                      <h3 className="text-emerald-400 text-sm font-medium mb-2 flex items-center">
+                        <Info className="h-4 w-4 mr-2" /> How to use variables in your endpoint
+                      </h3>
+                      <p className="text-neutral-300 text-sm mb-3">
+                        You can use dynamic variables in your endpoint using the <code className="bg-neutral-700 px-1.5 py-0.5 rounded text-emerald-300">{"{VARIABLE_NAME}"}</code> syntax.
+                      </p>
+                      <div className="grid grid-cols-1 gap-4 text-xs">
+                        <div>
+                          <h4 className="font-medium text-white mb-1">Example:</h4>
+                          <code className="block bg-neutral-900 text-neutral-200 p-2 rounded">
+                            https://api.example.com/users/<span className="text-emerald-400">{"{userId}"}</span>/profile
+                          </code>
+                          <p className="mt-1 text-neutral-400">Define <code className="bg-neutral-700 px-1 py-0.5 rounded text-emerald-300">userId</code> as a Path Parameter</p>
+                        </div>
+                      </div>
+                    </div>
+            </div>
+          </div>
+              )}
+
+              {activeTab === 'headers' && (
+                <div className="p-6">
+                  <ParamField 
+                    label="HTTP Headers" 
+                    tooltip="Headers to send with each request. Common examples include Authorization, Content-Type, Accept, etc."
+                  >
+                    <FieldList
+                      items={headersList}
+                      onAdd={handleAddHeader}
+                      onRemove={handleRemoveHeader}
+                      onChange={(id, field, value) => {
+                        handleHeaderChange(
+                          id, 
+                          field as "key" | "value", 
+                          value as string
+                        );
+                      }}
+                      fields={[
+                        { name: "Header Name", field: "key", placeholder: "e.g. Authorization", width: 6 },
+                        { name: "Header Value", field: "value", placeholder: "e.g. Bearer token123", width: 6 }
+                      ]}
+                      addText="Add Header"
+                      emptyText="No headers configured. Add headers to customize your HTTP requests."
+                      icon={<Server className="h-10 w-10 text-neutral-700" />}
+                    />
+                  </ParamField>
+                </div>
+              )}
+
+              {activeTab === 'body' && (
+                <div className="p-6">
+                  <div className="mb-6 p-4 bg-neutral-800/80 border border-emerald-600/20 rounded-md">
+                    <h3 className="text-emerald-400 text-sm font-medium mb-2 flex items-center">
+                      <Info className="h-4 w-4 mr-2" /> About Body Parameters
+                    </h3>
+                    <p className="text-neutral-300 text-sm">
+                      Parameters that will be sent in the request body. Only applicable for POST, PUT, and PATCH methods.
+                      You can use variables like <code className="bg-neutral-700 px-1.5 py-0.5 rounded text-emerald-300">{"{variableName}"}</code> that will be replaced at runtime.
+                    </p>
+            </div>
+                  
+                  <FieldList
+                    items={bodyParams}
+                    onAdd={handleAddBodyParam}
+                    onRemove={handleRemoveBodyParam}
+                    onChange={(id, field, value) => {
+                      if (field === "key") {
+                        handleBodyParamChange(id, "key", value as string);
+                      } else if (field.startsWith("param.")) {
+                        const paramField = field.split('.')[1] as keyof HTTPToolParameter;
+                        handleBodyParamChange(id, paramField, 
+                          paramField === "required" ? value as boolean : value as string
+                        );
+                      }
+                    }}
+                    fields={[
+                      { name: "Parameter Name", field: "key", placeholder: "e.g. userId", width: 4 },
+                      { name: "Type", field: "param.type", placeholder: "", width: 2, type: "select" },
+                      { name: "Description", field: "param.description", placeholder: "What this parameter does", width: 4 },
+                      { name: "Required", field: "param.required", placeholder: "", width: 2, type: "checkbox" }
+                    ]}
+                    addText="Add Body Parameter"
+                    emptyText="No body parameters configured. Add parameters for POST/PUT/PATCH requests."
+                    icon={<FileJson className="h-10 w-10 text-neutral-700" />}
+                  />
+                </div>
+              )}
+
+              {activeTab === 'path' && (
+                <div className="p-6">
+                  <div className="mb-6 p-4 bg-neutral-800/80 border border-emerald-600/20 rounded-md">
+                    <h3 className="text-emerald-400 text-sm font-medium mb-2 flex items-center">
+                      <Info className="h-4 w-4 mr-2" /> About Path Parameters
+                    </h3>
+                    <p className="text-neutral-300 text-sm">
+                      Path parameters are placeholders in your URL path that will be replaced with actual values.
+                      For example, in <code className="bg-neutral-700 px-1.5 py-0.5 rounded text-emerald-300">https://api.example.com/users/{"{userId}"}</code>,
+                      <code className="bg-neutral-700 px-1 py-0.5 rounded text-emerald-300">userId</code> is a path parameter.
+                    </p>
+                  </div>
+
+                  <FieldList
+                    items={pathParams}
+                    onAdd={handleAddPathParam}
+                    onRemove={handleRemovePathParam}
+                    onChange={(id, field, value) => {
+                      handlePathParamChange(
+                        id, 
+                        field as "key" | "desc", 
+                        value as string
+                      );
+                    }}
+                    fields={[
+                      { name: "Parameter Name", field: "key", placeholder: "e.g. userId", width: 4 },
+                      { name: "Description", field: "desc", placeholder: "What this parameter represents", width: 6 },
+                      { name: "Required", field: "required", placeholder: "", width: 2, type: "checkbox" }
+                    ]}
+                    addText="Add Path Parameter"
+                    emptyText="No path parameters configured. Add parameters if your endpoint URL contains {placeholders}."
+                    icon={<Code className="h-10 w-10 text-neutral-700" />}
+                  />
+                </div>
+              )}
+
+              {activeTab === 'query' && (
+                <div className="p-6">
+                  <div className="mb-6 p-4 bg-neutral-800/80 border border-emerald-600/20 rounded-md">
+                    <h3 className="text-emerald-400 text-sm font-medium mb-2 flex items-center">
+                      <Info className="h-4 w-4 mr-2" /> About Query Parameters
+                    </h3>
+                    <p className="text-neutral-300 text-sm">
+                      Query parameters are added to the URL after a question mark (?) to filter or customize the request.
+                      For example: <code className="bg-neutral-700 px-1.5 py-0.5 rounded text-emerald-300">https://api.example.com/search?query=term&limit=10</code>
+                    </p>
+            </div>
+
+                  <FieldList
+                    items={queryParams}
+                    onAdd={handleAddQueryParam}
+                    onRemove={handleRemoveQueryParam}
+                    onChange={(id, field, value) => {
+                      handleQueryParamChange(
+                        id, 
+                        field as "key" | "value", 
+                        value as string
+                      );
+                    }}
+                    fields={[
+                      { name: "Parameter Name", field: "key", placeholder: "e.g. search", width: 4 },
+                      { name: "Description", field: "value", placeholder: "What this parameter does", width: 6 },
+                      { name: "Required", field: "required", placeholder: "", width: 2, type: "checkbox" }
+                    ]}
+                    addText="Add Query Parameter"
+                    emptyText="No query parameters configured. Add parameters to customize your URL query string."
+                    icon={<LayoutList className="h-10 w-10 text-neutral-700" />}
+                  />
+                </div>
+              )}
+
+              {activeTab === 'defaults' && (
+                <div className="p-6">
+                  <div className="mb-6 p-4 bg-neutral-800/80 border border-emerald-600/20 rounded-md">
+                    <h3 className="text-emerald-400 text-sm font-medium mb-2 flex items-center">
+                      <Info className="h-4 w-4 mr-2" /> About Default Values
+                    </h3>
+                    <p className="text-neutral-300 text-sm">
+                      Set default values for parameters you've defined in the Body, Path, or Query sections.
+                      These values will be used when the parameter isn't explicitly provided during a tool call.
+                    </p>
+            </div>
+
+                  <FieldList
+                    items={valuesList}
+                    onAdd={handleAddValue}
+                    onRemove={handleRemoveValue}
+                    onChange={(id, field, value) => {
+                      handleValueChange(
+                        id, 
+                        field as "key" | "value", 
+                        value as string
+                      );
+                    }}
+                    fields={[
+                      { name: "Parameter Name", field: "key", placeholder: "Name of an existing parameter", width: 5 },
+                      { name: "Default Value", field: "value", placeholder: "Value to use if not provided", width: 7 }
+                    ]}
+                    addText="Add Default Value"
+                    emptyText="No default values configured. Add default values for your previously defined parameters."
+                    icon={<Database className="h-10 w-10 text-neutral-700" />}
+                  />
+                </div>
+              )}
+
+              {activeTab === 'error' && (
+                <div className="p-6">
+                  <div className="mb-6 p-4 bg-neutral-800/80 border border-emerald-600/20 rounded-md">
+                    <h3 className="text-emerald-400 text-sm font-medium mb-2 flex items-center">
+                      <Info className="h-4 w-4 mr-2" /> About Error Handling
+                    </h3>
+                    <p className="text-neutral-300 text-sm">
+                      Configure how the tool should handle errors and timeouts when making HTTP requests.
+                      Proper error handling ensures reliable operation of your agent.
+                    </p>
+                  </div>
+                  
+                  <div className="space-y-6">
+                    <ParamField 
+                      label="Timeout (seconds)" 
+                      tooltip="Maximum time to wait for a response before considering the request failed."
+                    >
+                <Input
+                  type="number"
+                  min={1}
+                  value={timeout}
+                  onChange={(e) => setTimeout(Number(e.target.value))}
+                        className="w-32 bg-neutral-800 border-neutral-700 text-white"
+                />
+                    </ParamField>
+
+                    <ParamField 
+                      label="Fallback Error Code" 
+                      tooltip="Error code to return if the request fails."
+                    >
+                <Input
+                  value={fallbackError}
+                  onChange={(e) => setFallbackError(e.target.value)}
+                        className="bg-neutral-800 border-neutral-700 text-white"
+                        placeholder="e.g. API_ERROR"
+                />
+                    </ParamField>
+
+                    <ParamField 
+                      label="Fallback Error Message" 
+                      tooltip="Human-readable message to return if the request fails."
+                    >
+                <Input
+                  value={fallbackMessage}
+                  onChange={(e) => setFallbackMessage(e.target.value)}
+                        className="bg-neutral-800 border-neutral-700 text-white"
+                        placeholder="e.g. Failed to retrieve data from the API."
+                />
+                    </ParamField>
+                  </div>
+              </div>
+              )}
+            </div>
+          </div>
+          
+          {/* Footer Area */}
+          <div className="border-t border-neutral-800 p-4 flex items-center justify-between">
+          <Button
+              variant="ghost"
+            onClick={() => onOpenChange(false)}
+              className="text-neutral-400 hover:text-neutral-100 hover:bg-neutral-800"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+              className="bg-emerald-500 text-neutral-950 hover:bg-emerald-400"
+            disabled={!tool.name || !tool.endpoint}
+          >
+              {initialTool ? "Save Changes" : "Create Tool"}
+          </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/dialogs/FolderDialog.tsx b/frontend/app/agents/dialogs/FolderDialog.tsx
new file mode 100644
index 00000000..1d7c1a74
--- /dev/null
+++ b/frontend/app/agents/dialogs/FolderDialog.tsx
@@ -0,0 +1,158 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/FolderDialog.tsx                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useState, useEffect } from "react";
+
+interface Folder {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface FolderDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (folder: { name: string; description: string }) => Promise<void>;
+  editingFolder: Folder | null;
+  isLoading?: boolean;
+}
+
+export function FolderDialog({
+  open,
+  onOpenChange,
+  onSave,
+  editingFolder,
+  isLoading = false,
+}: FolderDialogProps) {
+  const [folder, setFolder] = useState<{
+    name: string;
+    description: string;
+  }>({
+    name: "",
+    description: "",
+  });
+
+  useEffect(() => {
+    if (editingFolder) {
+      setFolder({
+        name: editingFolder.name,
+        description: editingFolder.description,
+      });
+    } else {
+      setFolder({
+        name: "",
+        description: "",
+      });
+    }
+  }, [editingFolder, open]);
+
+  const handleSave = async () => {
+    await onSave(folder);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px] bg-[#1a1a1a] border-[#333] text-white">
+        <DialogHeader>
+          <DialogTitle>
+            {editingFolder ? "Edit Folder" : "New Folder"}
+          </DialogTitle>
+          <DialogDescription className="text-neutral-400">
+            {editingFolder
+              ? "Update the existing folder information"
+              : "Fill in the information to create a new folder"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="folder-name" className="text-neutral-300">
+              Folder Name
+            </Label>
+            <Input
+              id="folder-name"
+              value={folder.name}
+              onChange={(e) =>
+                setFolder({ ...folder, name: e.target.value })
+              }
+              className="bg-[#222] border-[#444] text-white"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="folder-description" className="text-neutral-300">
+              Description (optional)
+            </Label>
+            <Textarea
+              id="folder-description"
+              value={folder.description}
+              onChange={(e) =>
+                setFolder({ ...folder, description: e.target.value })
+              }
+              className="bg-[#222] border-[#444] text-white resize-none h-20"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            disabled={!folder.name || isLoading}
+          >
+            {isLoading ? (
+              <div className="animate-spin h-4 w-4 border-2 border-black border-t-transparent rounded-full mr-1"></div>
+            ) : null}
+            {editingFolder ? "Save Changes" : "Create Folder"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/agents/dialogs/ImportAgentDialog.tsx b/frontend/app/agents/dialogs/ImportAgentDialog.tsx
new file mode 100644
index 00000000..bbdd46b2
--- /dev/null
+++ b/frontend/app/agents/dialogs/ImportAgentDialog.tsx
@@ -0,0 +1,239 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/ImportAgentDialog.tsx                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 15, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Loader2, Upload, FileJson } from "lucide-react";
+import { importAgentFromJson } from "@/services/agentService";
+import { useToast } from "@/hooks/use-toast";
+
+interface ImportAgentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+  clientId: string;
+  folderId?: string | null;
+}
+
+export function ImportAgentDialog({
+  open,
+  onOpenChange,
+  onSuccess,
+  clientId,
+  folderId,
+}: ImportAgentDialogProps) {
+  const { toast } = useToast();
+  const [file, setFile] = useState<File | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    
+    const droppedFile = e.dataTransfer.files?.[0];
+    if (droppedFile && droppedFile.type === "application/json") {
+      setFile(droppedFile);
+    } else {
+      toast({
+        title: "Invalid file",
+        description: "Please upload a JSON file",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleSelectFile = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleImport = async () => {
+    if (!file || !clientId) return;
+    
+    try {
+      setIsLoading(true);
+      
+      await importAgentFromJson(file, clientId, folderId);
+      
+      toast({
+        title: "Import successful",
+        description: folderId 
+          ? "Agent was imported successfully and added to the current folder" 
+          : "Agent was imported successfully",
+      });
+      
+      // Call the success callback to refresh the agent list
+      onSuccess();
+      
+      // Close the dialog
+      onOpenChange(false);
+      
+      // Reset state
+      setFile(null);
+    } catch (error) {
+      console.error("Error importing agent:", error);
+      toast({
+        title: "Import failed",
+        description: "There was an error importing the agent",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const resetState = () => {
+    if (!isLoading) {
+      setFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  return (
+    <Dialog 
+      open={open} 
+      onOpenChange={(newOpen) => {
+        if (!newOpen) {
+          resetState();
+        }
+        onOpenChange(newOpen);
+      }}
+    >
+      <DialogContent className="sm:max-w-[500px] bg-[#1a1a1a] border-[#333] text-white">
+        <DialogHeader>
+          <DialogTitle className="text-white">Import Agent</DialogTitle>
+          <DialogDescription className="text-neutral-400">
+            Upload a JSON file to import an agent
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col space-y-4 py-4">
+          <div
+            className={`h-40 border-2 border-dashed rounded-md flex flex-col items-center justify-center p-4 transition-colors cursor-pointer ${
+              dragActive 
+                ? "border-emerald-400 bg-emerald-900/20" 
+                : file 
+                  ? "border-emerald-600 bg-emerald-900/10" 
+                  : "border-[#444] hover:border-emerald-600/50"
+            }`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={handleSelectFile}
+          >
+            {file ? (
+              <div className="flex flex-col items-center space-y-2">
+                <FileJson className="h-10 w-10 text-emerald-400" />
+                <span className="text-emerald-400 font-medium">{file.name}</span>
+                <span className="text-neutral-400 text-xs">
+                  {Math.round(file.size / 1024)} KB
+                </span>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center space-y-2">
+                <Upload className="h-10 w-10 text-neutral-500" />
+                <p className="text-neutral-400 text-center">
+                  Drag & drop your JSON file here or click to browse
+                </p>
+                <span className="text-neutral-500 text-xs">
+                  Only JSON files are accepted
+                </span>
+              </div>
+            )}
+          </div>
+          
+          <input
+            type="file"
+            ref={fileInputRef}
+            accept=".json,application/json"
+            style={{ display: "none" }}
+            onChange={handleFileChange}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleImport}
+            className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            disabled={!file || isLoading}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Importing...
+              </>
+            ) : (
+              "Import Agent"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/dialogs/MCPDialog.tsx b/frontend/app/agents/dialogs/MCPDialog.tsx
new file mode 100644
index 00000000..d1d69eb2
--- /dev/null
+++ b/frontend/app/agents/dialogs/MCPDialog.tsx
@@ -0,0 +1,278 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/MCPDialog.tsx                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { MCPServer } from "@/types/mcpServer";
+import { Server } from "lucide-react";
+import { useState, useEffect } from "react";
+
+interface MCPDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (mcpConfig: {
+    id: string;
+    envs: Record<string, string>;
+    tools: string[];
+  }) => void;
+  availableMCPs: MCPServer[];
+  selectedMCP?: MCPServer | null;
+  initialEnvs?: Record<string, string>;
+  initialTools?: string[];
+  clientId: string;
+}
+
+export function MCPDialog({
+  open,
+  onOpenChange,
+  onSave,
+  availableMCPs,
+  selectedMCP: initialSelectedMCP = null,
+  initialEnvs = {},
+  initialTools = [],
+  clientId,
+}: MCPDialogProps) {
+  const [selectedMCP, setSelectedMCP] = useState<MCPServer | null>(null);
+  const [mcpEnvs, setMcpEnvs] = useState<Record<string, string>>({});
+  const [selectedMCPTools, setSelectedMCPTools] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (open) {
+      if (initialSelectedMCP) {
+        setSelectedMCP(initialSelectedMCP);
+        setMcpEnvs(initialEnvs);
+        setSelectedMCPTools(initialTools);
+      } else {
+        setSelectedMCP(null);
+        setMcpEnvs({});
+        setSelectedMCPTools([]);
+      }
+    }
+  }, [open, initialSelectedMCP, initialEnvs, initialTools]);
+
+  const handleSelectMCP = (value: string) => {
+    const mcp = availableMCPs.find((m) => m.id === value);
+    if (mcp) {
+      setSelectedMCP(mcp);
+      const initialEnvs: Record<string, string> = {};
+      Object.keys(mcp.environments || {}).forEach((key) => {
+        initialEnvs[key] = "";
+      });
+      setMcpEnvs(initialEnvs);
+      setSelectedMCPTools([]);
+    }
+  };
+
+  const toggleMCPTool = (tool: string) => {
+    if (selectedMCPTools.includes(tool)) {
+      setSelectedMCPTools(selectedMCPTools.filter((t) => t !== tool));
+    } else {
+      setSelectedMCPTools([...selectedMCPTools, tool]);
+    }
+  };
+
+  const handleSave = () => {
+    if (!selectedMCP) return;
+    
+    onSave({
+      id: selectedMCP.id,
+      envs: mcpEnvs,
+      tools: selectedMCPTools,
+    });
+    
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col bg-[#1a1a1a] border-[#333]">
+        <DialogHeader>
+          <DialogTitle className="text-white">
+            Configure MCP Server
+          </DialogTitle>
+          <DialogDescription className="text-neutral-400">
+            Select a MCP server and configure its tools.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-auto p-4">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="mcp-select" className="text-neutral-300">
+                MCP Server
+              </Label>
+              <Select
+                value={selectedMCP?.id}
+                onValueChange={handleSelectMCP}
+              >
+                <SelectTrigger className="bg-[#222] border-[#444] text-white">
+                  <SelectValue placeholder="Select a MCP server" />
+                </SelectTrigger>
+                <SelectContent className="bg-[#222] border-[#444] text-white">
+                  {availableMCPs.map((mcp) => (
+                    <SelectItem
+                      key={mcp.id}
+                      value={mcp.id}
+                      className="data-[selected]:bg-[#333] data-[highlighted]:bg-[#333] !text-white focus:!text-white hover:text-emerald-400 data-[selected]:!text-emerald-400"
+                    >
+                      <div className="flex items-center gap-2">
+                        <Server className="h-4 w-4 text-emerald-400" />
+                        {mcp.name}
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {selectedMCP && (
+              <>
+                <div className="border border-[#444] rounded-md p-3 bg-[#222]">
+                  <p className="font-medium text-white">{selectedMCP.name}</p>
+                  <p className="text-sm text-neutral-400">
+                    {selectedMCP.description?.substring(0, 100)}...
+                  </p>
+                  <div className="mt-2 text-xs text-neutral-400">
+                    <p>
+                      <strong>Type:</strong> {selectedMCP.type}
+                    </p>
+                    <p>
+                      <strong>Configuration:</strong>{" "}
+                      {selectedMCP.config_type === "sse" ? "SSE" : "Studio"}
+                    </p>
+                  </div>
+                </div>
+
+                {selectedMCP.environments &&
+                  Object.keys(selectedMCP.environments).length > 0 && (
+                    <div className="space-y-3">
+                      <h3 className="text-sm font-medium text-white">
+                        Environment Variables
+                      </h3>
+                      {Object.entries(selectedMCP.environments || {}).map(
+                        ([key, value]) => (
+                          <div
+                            key={key}
+                            className="grid grid-cols-3 items-center gap-4"
+                          >
+                            <Label
+                              htmlFor={`env-${key}`}
+                              className="text-right text-neutral-300"
+                            >
+                              {key}
+                            </Label>
+                            <Input
+                              id={`env-${key}`}
+                              value={mcpEnvs[key] || ""}
+                              onChange={(e) =>
+                                setMcpEnvs({
+                                  ...mcpEnvs,
+                                  [key]: e.target.value,
+                                })
+                              }
+                              className="col-span-2 bg-[#222] border-[#444] text-white"
+                              placeholder={value as string}
+                            />
+                          </div>
+                        )
+                      )}
+                    </div>
+                  )}
+
+                {selectedMCP.tools && selectedMCP.tools.length > 0 && (
+                  <div className="space-y-3">
+                    <h3 className="text-sm font-medium text-white">
+                      Available Tools
+                    </h3>
+                    <div className="border border-[#444] rounded-md p-3 bg-[#222]">
+                      {selectedMCP.tools.map((tool: any) => (
+                        <div
+                          key={tool.id}
+                          className="flex items-center space-x-2 py-1"
+                        >
+                          <Checkbox
+                            id={`tool-${tool.id}`}
+                            checked={selectedMCPTools.includes(tool.id)}
+                            onCheckedChange={() => toggleMCPTool(tool.id)}
+                            className="data-[state=checked]:bg-emerald-400 data-[state=checked]:border-emerald-400"
+                          />
+                          <Label
+                            htmlFor={`tool-${tool.id}`}
+                            className="text-sm text-neutral-300"
+                          >
+                            {tool.name}
+                          </Label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="p-4 pt-2 border-t border-[#333]">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+            disabled={!selectedMCP}
+          >
+            Add MCP
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/agents/dialogs/MoveAgentDialog.tsx b/frontend/app/agents/dialogs/MoveAgentDialog.tsx
new file mode 100644
index 00000000..3a3cdf6d
--- /dev/null
+++ b/frontend/app/agents/dialogs/MoveAgentDialog.tsx
@@ -0,0 +1,136 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/MoveAgentDialog.tsx                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Agent } from "@/types/agent";
+import { Folder, Home } from "lucide-react";
+
+interface Folder {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface MoveAgentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  agent: Agent | null;
+  folders: Folder[];
+  onMove: (folderId: string | null) => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function MoveAgentDialog({
+  open,
+  onOpenChange,
+  agent,
+  folders,
+  onMove,
+  isLoading = false,
+}: MoveAgentDialogProps) {
+  const handleMove = async (folderId: string | null) => {
+    await onMove(folderId);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px] bg-[#1a1a1a] border-[#333] text-white">
+        <DialogHeader>
+          <DialogTitle>Move Agent</DialogTitle>
+          <DialogDescription className="text-neutral-400">
+            Choose a folder to move the agent "{agent?.name}"
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4">
+          <div className="space-y-2">
+            <button
+              className="w-full text-left px-4 py-3 rounded-md flex items-center bg-[#222] border border-[#444] hover:bg-[#333] hover:border-emerald-400/50 transition-colors"
+              onClick={() => handleMove(null)}
+              disabled={isLoading}
+            >
+              <Home className="h-5 w-5 mr-3 text-neutral-400" />
+              <div>
+                <div className="font-medium">Remove from folder</div>
+                <p className="text-sm text-neutral-400">
+                  The agent will be visible in "All agents"
+                </p>
+              </div>
+            </button>
+
+            {folders.map((folder) => (
+              <button
+                key={folder.id}
+                className="w-full text-left px-4 py-3 rounded-md flex items-center bg-[#222] border border-[#444] hover:bg-[#333] hover:border-emerald-400/50 transition-colors"
+                onClick={() => handleMove(folder.id)}
+                disabled={isLoading}
+              >
+                <Folder className="h-5 w-5 mr-3 text-emerald-400" />
+                <div>
+                  <div className="font-medium">{folder.name}</div>
+                  {folder.description && (
+                    <p className="text-sm text-neutral-400 truncate">
+                      {folder.description}
+                    </p>
+                  )}
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+          >
+            Cancel
+          </Button>
+          {isLoading && (
+            <div className="flex items-center">
+              <div className="animate-spin h-4 w-4 border-2 border-emerald-400 border-t-transparent rounded-full mr-2"></div>
+              <span className="text-neutral-400">Moving...</span>
+            </div>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/agents/dialogs/ShareAgentDialog.tsx b/frontend/app/agents/dialogs/ShareAgentDialog.tsx
new file mode 100644
index 00000000..c7ff57d9
--- /dev/null
+++ b/frontend/app/agents/dialogs/ShareAgentDialog.tsx
@@ -0,0 +1,172 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/dialogs/ShareAgentDialog.tsx                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Agent } from "@/types/agent";
+import { Input } from "@/components/ui/input";
+import { Copy, Share2, ExternalLink } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+interface ShareAgentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  agent: Agent;
+  apiKey?: string;
+}
+
+export function ShareAgentDialog({
+  open,
+  onOpenChange,
+  agent,
+  apiKey,
+}: ShareAgentDialogProps) {
+  const [copied, setCopied] = useState(false);
+  const [shareLink, setShareLink] = useState("");
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (open && agent && apiKey) {
+      const baseUrl = window.location.origin;
+      setShareLink(`${baseUrl}/shared-chat?agent=${agent.id}&key=${apiKey}`);
+    }
+  }, [open, agent, apiKey]);
+
+  const handleCopyLink = () => {
+    if (shareLink) {
+      navigator.clipboard.writeText(shareLink);
+      setCopied(true);
+      toast({
+        title: "Link copied!",
+        description: "The share link has been copied to the clipboard.",
+      });
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleCopyApiKey = () => {
+    if (apiKey) {
+      navigator.clipboard.writeText(apiKey);
+      setCopied(true);
+      toast({
+        title: "API Key copied!",
+        description: "The API Key has been copied to the clipboard.",
+      });
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px] bg-[#1a1a1a] border-[#333] text-white">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Share2 className="h-5 w-5 text-emerald-400" />
+            Share Agent
+          </DialogTitle>
+          <DialogDescription className="text-neutral-400">
+            Share this agent with others without the need to login.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium text-white">Share Link</h3>
+            <div className="flex gap-2">
+              <Input
+                readOnly
+                value={shareLink}
+                className="bg-[#222] border-[#444] text-white"
+              />
+              <Button
+                variant="outline"
+                className="shrink-0 bg-[#222] border-[#444] hover:bg-[#333] text-emerald-400 hover:text-emerald-300"
+                onClick={handleCopyLink}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+            <p className="text-xs text-neutral-400">
+              Any person with this link can access the agent using the included API key.
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium text-white">API Key</h3>
+            <div className="flex gap-2">
+              <Input
+                readOnly
+                value={apiKey}
+                type="password"
+                className="bg-[#222] border-[#444] text-white"
+              />
+              <Button
+                variant="outline"
+                className="shrink-0 bg-[#222] border-[#444] hover:bg-[#333] text-emerald-400 hover:text-emerald-300"
+                onClick={handleCopyApiKey}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+            <p className="text-xs text-neutral-400">
+              The API key allows access to the agent. Do not share with untrusted people.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter className="border-t border-[#333] pt-4">
+          <Button
+            variant="outline"
+            onClick={() => window.open(shareLink, "_blank")}
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white flex gap-2"
+          >
+            <ExternalLink className="h-4 w-4" />
+            Open Link
+          </Button>
+          <Button
+            onClick={() => onOpenChange(false)}
+            className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+          >
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/forms/AgentForm.tsx b/frontend/app/agents/forms/AgentForm.tsx
new file mode 100644
index 00000000..01e0f2e7
--- /dev/null
+++ b/frontend/app/agents/forms/AgentForm.tsx
@@ -0,0 +1,331 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/forms/AgentForm.tsx                                       │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Agent } from "@/types/agent";
+import { ApiKey } from "@/services/agentService";
+import { MCPServer } from "@/types/mcpServer";
+import { useState, useEffect } from "react";
+import { BasicInfoTab } from "./BasicInfoTab";
+import { ConfigurationTab } from "./ConfigurationTab";
+import { SubAgentsTab } from "./SubAgentsTab";
+import { MCPDialog } from "../dialogs/MCPDialog";
+import { CustomMCPDialog } from "../dialogs/CustomMCPDialog";
+
+interface ModelOption {
+  value: string;
+  label: string;
+  provider: string;
+}
+
+interface AgentFormProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialValues: Partial<Agent>;
+  apiKeys: ApiKey[];
+  availableModels: ModelOption[];
+  availableMCPs: MCPServer[];
+  agents: Agent[];
+  onOpenApiKeysDialog: () => void;
+  onOpenMCPDialog: (mcp?: any) => void;
+  onOpenCustomMCPDialog: (customMCP?: any) => void;
+  onSave: (values: Partial<Agent>) => Promise<void>;
+  isLoading?: boolean;
+  getAgentNameById: (id: string) => string;
+  clientId: string;
+}
+
+export function AgentForm({
+  open,
+  onOpenChange,
+  initialValues,
+  apiKeys,
+  availableModels,
+  availableMCPs,
+  agents,
+  onOpenApiKeysDialog,
+  onOpenMCPDialog: externalOnOpenMCPDialog,
+  onOpenCustomMCPDialog: externalOnOpenCustomMCPDialog,
+  onSave,
+  isLoading = false,
+  getAgentNameById,
+  clientId,
+}: AgentFormProps) {
+  const [values, setValues] = useState<Partial<Agent>>(initialValues);
+  const [activeTab, setActiveTab] = useState("basic");
+
+  const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+  const [selectedMCP, setSelectedMCP] = useState<any>(null);
+  const [customMcpDialogOpen, setCustomMcpDialogOpen] = useState(false);
+  const [selectedCustomMCP, setSelectedCustomMCP] = useState<any>(null);
+
+  useEffect(() => {
+    if (open) {
+      setValues(initialValues);
+      setActiveTab("basic");
+    }
+  }, [open, initialValues]);
+
+  const handleOpenMCPDialog = (mcpConfig: any = null) => {
+    setSelectedMCP(mcpConfig);
+    setMcpDialogOpen(true);
+  };
+
+  const handleOpenCustomMCPDialog = (customMCP: any = null) => {
+    setSelectedCustomMCP(customMCP);
+    setCustomMcpDialogOpen(true);
+  };
+
+  const handleConfigureMCP = (mcpConfig: any) => {
+    handleOpenMCPDialog(mcpConfig);
+  };
+
+  const handleRemoveMCP = (mcpId: string) => {
+    setValues({
+      ...values,
+      config: {
+        ...values.config,
+        mcp_servers:
+          values.config?.mcp_servers?.filter((mcp) => mcp.id !== mcpId) || [],
+      },
+    });
+  };
+
+  const handleConfigureCustomMCP = (customMCP: any) => {
+    handleOpenCustomMCPDialog(customMCP);
+  };
+
+  const handleRemoveCustomMCP = (url: string) => {
+    setValues({
+      ...values,
+      config: {
+        ...values.config,
+        custom_mcp_servers:
+          values.config?.custom_mcp_servers?.filter(
+            (customMCP) => customMCP.url !== url
+          ) || [],
+      },
+    });
+  };
+
+  const handleSaveMCP = (mcpConfig: any) => {
+    const updatedMcpServers = [...(values.config?.mcp_servers || [])];
+    const existingIndex = updatedMcpServers.findIndex(
+      (mcp) => mcp.id === mcpConfig.id
+    );
+
+    if (existingIndex >= 0) {
+      updatedMcpServers[existingIndex] = mcpConfig;
+    } else {
+      updatedMcpServers.push(mcpConfig);
+    }
+
+    setValues({
+      ...values,
+      config: {
+        ...(values.config || {}),
+        mcp_servers: updatedMcpServers,
+      },
+    });
+  };
+
+  const handleSaveCustomMCP = (customMCP: any) => {
+    const updatedCustomMCPs = [...(values.config?.custom_mcp_servers || [])];
+    const existingIndex = updatedCustomMCPs.findIndex(
+      (mcp) => mcp.url === customMCP.url
+    );
+
+    if (existingIndex >= 0) {
+      updatedCustomMCPs[existingIndex] = customMCP;
+    } else {
+      updatedCustomMCPs.push(customMCP);
+    }
+
+    setValues({
+      ...values,
+      config: {
+        ...(values.config || {}),
+        custom_mcp_servers: updatedCustomMCPs,
+      },
+    });
+  };
+
+  const handleSave = async () => {
+    const finalValues = {
+      ...values,
+      client_id: clientId,
+      name: values.name,
+    };
+
+    await onSave(finalValues);
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-hidden flex flex-col bg-[#1a1a1a] border-[#333]">
+          <DialogHeader>
+            <DialogTitle className="text-white">
+              {initialValues.id ? "Edit Agent" : "New Agent"}
+            </DialogTitle>
+            <DialogDescription className="text-neutral-400">
+              {initialValues.id
+                ? "Edit the existing agent information"
+                : "Fill in the information to create a new agent"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className="flex-1 overflow-hidden flex flex-col"
+          >
+            <TabsList className="grid grid-cols-3 bg-[#222]">
+              <TabsTrigger
+                value="basic"
+                className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+              >
+                Basic Information
+              </TabsTrigger>
+              <TabsTrigger
+                value="config"
+                className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+              >
+                Configuration
+              </TabsTrigger>
+              <TabsTrigger
+                value="subagents"
+                className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+              >
+                Sub-Agents
+              </TabsTrigger>
+            </TabsList>
+
+            <ScrollArea className="flex-1 overflow-auto">
+              <TabsContent value="basic" className="p-4 space-y-4">
+                <BasicInfoTab
+                  values={values}
+                  onChange={setValues}
+                  apiKeys={apiKeys}
+                  availableModels={availableModels}
+                  onOpenApiKeysDialog={onOpenApiKeysDialog}
+                  clientId={clientId}
+                />
+              </TabsContent>
+
+              <TabsContent value="config" className="p-4 space-y-4">
+                <ConfigurationTab
+                  values={values}
+                  onChange={setValues}
+                  agents={agents}
+                  availableMCPs={availableMCPs}
+                  apiKeys={apiKeys}
+                  availableModels={availableModels}
+                  getAgentNameById={getAgentNameById}
+                  onOpenApiKeysDialog={onOpenApiKeysDialog}
+                  onConfigureMCP={handleConfigureMCP}
+                  onRemoveMCP={handleRemoveMCP}
+                  onConfigureCustomMCP={handleConfigureCustomMCP}
+                  onRemoveCustomMCP={handleRemoveCustomMCP}
+                  onOpenMCPDialog={handleOpenMCPDialog}
+                  onOpenCustomMCPDialog={handleOpenCustomMCPDialog}
+                  clientId={clientId}
+                />
+              </TabsContent>
+
+              <TabsContent value="subagents" className="p-4 space-y-4">
+                <SubAgentsTab
+                  values={values}
+                  onChange={setValues}
+                  getAgentNameById={getAgentNameById}
+                  editingAgentId={initialValues.id}
+                  clientId={clientId}
+                />
+              </TabsContent>
+            </ScrollArea>
+          </Tabs>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSave}
+              className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+              disabled={!values.name || isLoading}
+            >
+              {isLoading && (
+                <div className="animate-spin h-4 w-4 border-2 border-black border-t-transparent rounded-full mr-2"></div>
+              )}
+              {initialValues.id ? "Save Changes" : "Add Agent"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* MCP Dialog */}
+      <MCPDialog
+        open={mcpDialogOpen}
+        onOpenChange={setMcpDialogOpen}
+        onSave={handleSaveMCP}
+        availableMCPs={availableMCPs}
+        selectedMCP={
+          availableMCPs.find((m) => selectedMCP?.id === m.id) || null
+        }
+        initialEnvs={selectedMCP?.envs || {}}
+        initialTools={selectedMCP?.tools || []}
+        clientId={clientId}
+      />
+
+      {/* Custom MCP Dialog */}
+      <CustomMCPDialog
+        open={customMcpDialogOpen}
+        onOpenChange={setCustomMcpDialogOpen}
+        onSave={handleSaveCustomMCP}
+        initialCustomMCP={selectedCustomMCP}
+        clientId={clientId}
+      />
+    </>
+  );
+}
diff --git a/frontend/app/agents/forms/BasicInfoTab.tsx b/frontend/app/agents/forms/BasicInfoTab.tsx
new file mode 100644
index 00000000..e5801002
--- /dev/null
+++ b/frontend/app/agents/forms/BasicInfoTab.tsx
@@ -0,0 +1,243 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/forms/BasicInfoTab.tsx                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { AgentTypeSelector } from "@/app/agents/AgentTypeSelector";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Agent, AgentType } from "@/types/agent";
+import { ApiKey } from "@/services/agentService";
+import { A2AAgentConfig } from "../config/A2AAgentConfig";
+import { LLMAgentConfig } from "../config/LLMAgentConfig";
+import { sanitizeAgentName } from "@/lib/utils";
+
+interface ModelOption {
+  value: string;
+  label: string;
+  provider: string;
+}
+
+interface BasicInfoTabProps {
+  values: Partial<Agent>;
+  onChange: (values: Partial<Agent>) => void;
+  apiKeys: ApiKey[];
+  availableModels: ModelOption[];
+  onOpenApiKeysDialog: () => void;
+  clientId: string;
+}
+
+export function BasicInfoTab({
+  values,
+  onChange,
+  apiKeys,
+  availableModels,
+  onOpenApiKeysDialog,
+}: BasicInfoTabProps) {
+  const handleNameBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const sanitizedName = sanitizeAgentName(e.target.value);
+    if (sanitizedName !== e.target.value) {
+      onChange({ ...values, name: sanitizedName });
+    }
+  };
+
+  const handleTypeChange = (type: AgentType) => {
+    let newValues: Partial<Agent> = { ...values, type };
+
+    if (type === "llm") {
+      newValues = {
+        ...newValues,
+        model: "openai/gpt-4.1-nano",
+        instruction: "",
+        role: "",
+        goal: "",
+        agent_card_url: undefined,
+        config: {
+          tools: [],
+          mcp_servers: [],
+          custom_mcp_servers: [],
+          custom_tools: {
+            http_tools: [],
+          },
+          sub_agents: [],
+        },
+      };
+    } else if (type === "a2a") {
+      newValues = {
+        ...newValues,
+        model: undefined,
+        instruction: undefined,
+        role: undefined,
+        goal: undefined,
+        agent_card_url: "",
+        api_key_id: undefined,
+        config: undefined,
+      };
+    } else if (type === "loop") {
+      newValues = {
+        ...newValues,
+        model: undefined,
+        instruction: undefined,
+        role: undefined,
+        goal: undefined,
+        agent_card_url: undefined,
+        api_key_id: undefined,
+        config: {
+          sub_agents: [],
+          custom_mcp_servers: [],
+        },
+      };
+    } else if (type === "workflow") {
+      newValues = {
+        ...newValues,
+        model: undefined,
+        instruction: undefined,
+        role: undefined,
+        goal: undefined,
+        agent_card_url: undefined,
+        api_key_id: undefined,
+        config: {
+          sub_agents: [],
+          workflow: {
+            nodes: [],
+            edges: [],
+          },
+        },
+      };
+    } else if (type === "task") {
+      newValues = {
+        ...newValues,
+        model: undefined,
+        instruction: undefined,
+        role: undefined,
+        goal: undefined,
+        agent_card_url: undefined,
+        api_key_id: undefined,
+        config: {
+          tasks: [],
+          sub_agents: [],
+        },
+      };
+    } else {
+      newValues = {
+        ...newValues,
+        model: undefined,
+        instruction: undefined,
+        role: undefined,
+        goal: undefined,
+        agent_card_url: undefined,
+        api_key_id: undefined,
+        config: {
+          sub_agents: [],
+          custom_mcp_servers: [],
+        },
+      };
+    }
+
+    onChange(newValues);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="type" className="text-right text-neutral-300">
+          Agent Type
+        </Label>
+        <div className="col-span-3">
+          <AgentTypeSelector
+            value={values.type || "llm"}
+            onValueChange={handleTypeChange}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="name" className="text-right text-neutral-300">
+          Name
+        </Label>
+        <Input
+          id="name"
+          value={values.name || ""}
+          onChange={(e) => onChange({ ...values, name: e.target.value })}
+          onBlur={handleNameBlur}
+          className="col-span-3 bg-[#222] border-[#444] text-white"
+        />
+      </div>
+
+      {values.type !== "a2a" && (
+        <div className="grid grid-cols-4 items-center gap-4">
+          <Label htmlFor="description" className="text-right text-neutral-300">
+            Description
+          </Label>
+          <Input
+            id="description"
+            value={values.description || ""}
+            onChange={(e) =>
+              onChange({ ...values, description: e.target.value })
+            }
+            className="col-span-3 bg-[#222] border-[#444] text-white"
+          />
+        </div>
+      )}
+
+      {values.type === "llm" && (
+        <LLMAgentConfig
+          apiKeys={apiKeys}
+          availableModels={availableModels}
+          values={values}
+          onChange={onChange}
+          onOpenApiKeysDialog={onOpenApiKeysDialog}
+        />
+      )}
+
+      {values.type === "loop" && values.config?.max_iterations && (
+        <div className="space-y-1 text-xs text-neutral-400">
+          <div>
+            <strong>Max. Iterations:</strong> {values.config.max_iterations}
+          </div>
+        </div>
+      )}
+
+      {values.type === "workflow" && (
+        <div className="space-y-1 text-xs text-neutral-400">
+          <div>
+            <strong>Type:</strong> Visual Flow
+          </div>
+          {values.config?.workflow && (
+            <div>
+              <strong>Elements:</strong>{" "}
+              {values.config.workflow.nodes?.length || 0} nodes,{" "}
+              {values.config.workflow.edges?.length || 0} connections
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/agents/forms/ConfigurationTab.tsx b/frontend/app/agents/forms/ConfigurationTab.tsx
new file mode 100644
index 00000000..bcf4518b
--- /dev/null
+++ b/frontend/app/agents/forms/ConfigurationTab.tsx
@@ -0,0 +1,722 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/forms/ConfigurationTab.tsx                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Agent } from "@/types/agent";
+import { MCPServer } from "@/types/mcpServer";
+import {
+  Check,
+  Copy,
+  Eye,
+  EyeOff,
+  Plus,
+  Server,
+  Settings,
+  X,
+} from "lucide-react";
+import { ParallelAgentConfig } from "../config/ParallelAgentConfig";
+import { SequentialAgentConfig } from "../config/SequentialAgentConfig";
+import { ApiKey } from "@/services/agentService";
+import { LoopAgentConfig } from "../config/LoopAgentConfig copy";
+import { A2AAgentConfig } from "../config/A2AAgentConfig";
+import { TaskAgentConfig } from "../config/TaskAgentConfig";
+import { useState } from "react";
+import { MCPDialog } from "../dialogs/MCPDialog";
+import { CustomMCPDialog } from "../dialogs/CustomMCPDialog";
+import { AgentToolDialog } from "../dialogs/AgentToolDialog";
+import { CustomToolDialog } from "../dialogs/CustomToolDialog";
+import { useToast } from "@/hooks/use-toast";
+
+interface ConfigurationTabProps {
+  values: Partial<Agent>;
+  onChange: (values: Partial<Agent>) => void;
+  agents: Agent[];
+  availableMCPs: MCPServer[];
+  apiKeys: ApiKey[];
+  availableModels: any[];
+  getAgentNameById: (id: string) => string;
+  onOpenApiKeysDialog: () => void;
+  onConfigureMCP: (mcpConfig: any) => void;
+  onRemoveMCP: (mcpId: string) => void;
+  onConfigureCustomMCP: (customMCP: any) => void;
+  onRemoveCustomMCP: (url: string) => void;
+  onOpenMCPDialog: (mcpConfig?: any) => void;
+  onOpenCustomMCPDialog: (customMCP?: any) => void;
+  clientId: string;
+}
+
+export function ConfigurationTab({
+  values,
+  onChange,
+  agents,
+  availableMCPs,
+  apiKeys,
+  availableModels,
+  getAgentNameById,
+  onOpenApiKeysDialog,
+  onConfigureMCP,
+  onRemoveMCP,
+  onConfigureCustomMCP,
+  onRemoveCustomMCP,
+  onOpenMCPDialog,
+  onOpenCustomMCPDialog,
+  clientId,
+}: ConfigurationTabProps) {
+  const [agentToolDialogOpen, setAgentToolDialogOpen] = useState(false);
+  const [customToolDialogOpen, setCustomToolDialogOpen] = useState(false);
+  const [editingCustomTool, setEditingCustomTool] = useState<any>(null);
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [copiedCardUrl, setCopiedCardUrl] = useState(false);
+  const { toast } = useToast();
+
+  const handleAddAgentTool = (tool: { id: string }) => {
+    const updatedAgentTools = [...(values.config?.agent_tools || [])];
+    if (!updatedAgentTools.includes(tool.id)) {
+      updatedAgentTools.push(tool.id);
+      onChange({
+        ...values,
+        config: {
+          ...(values.config || {}),
+          agent_tools: updatedAgentTools,
+        },
+      });
+    }
+  };
+  const handleRemoveAgentTool = (id: string) => {
+    onChange({
+      ...values,
+      config: {
+        ...(values.config || {}),
+        agent_tools: (values.config?.agent_tools || []).filter(
+          (toolId) => toolId !== id
+        ),
+      },
+    });
+  };
+
+  // Custom Tools handlers
+  const handleAddCustomTool = (tool: any) => {
+    const updatedTools = [...(values.config?.custom_tools?.http_tools || [])];
+    updatedTools.push(tool);
+    onChange({
+      ...values,
+      config: {
+        ...(values.config || {}),
+        custom_tools: {
+          ...(values.config?.custom_tools || { http_tools: [] }),
+          http_tools: updatedTools,
+        },
+      },
+    });
+  };
+  const handleEditCustomTool = (tool: any, idx: number) => {
+    setEditingCustomTool({ ...tool, idx });
+    setCustomToolDialogOpen(true);
+  };
+  const handleSaveEditCustomTool = (tool: any) => {
+    const updatedTools = [...(values.config?.custom_tools?.http_tools || [])];
+    if (editingCustomTool && typeof editingCustomTool.idx === "number") {
+      updatedTools[editingCustomTool.idx] = tool;
+    }
+    onChange({
+      ...values,
+      config: {
+        ...(values.config || {}),
+        custom_tools: {
+          ...(values.config?.custom_tools || { http_tools: [] }),
+          http_tools: updatedTools,
+        },
+      },
+    });
+    setEditingCustomTool(null);
+  };
+  const handleRemoveCustomTool = (idx: number) => {
+    const updatedTools = [...(values.config?.custom_tools?.http_tools || [])];
+    updatedTools.splice(idx, 1);
+    onChange({
+      ...values,
+      config: {
+        ...(values.config || {}),
+        custom_tools: {
+          ...(values.config?.custom_tools || { http_tools: [] }),
+          http_tools: updatedTools,
+        },
+      },
+    });
+  };
+
+  const apiKeyField = (
+    <div className="space-y-2 mb-4">
+      <h3 className="text-lg font-medium text-white">Credentials</h3>
+      <div className="border border-[#444] rounded-md p-4 bg-[#222] flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <label
+            className="text-sm text-neutral-400 mb-1"
+            htmlFor="agent-card-url"
+          >
+            Agent URL. This URL can be used to access the agent card externally.
+          </label>
+          <div className="relative flex items-center">
+            <input
+              id="agent-card-url"
+              type="text"
+              className="w-full bg-[#2a2a2a] border border-[#444] rounded-md px-3 py-2 text-white pr-12 focus:outline-none focus:ring-2 focus:ring-emerald-400/40"
+              value={
+                values?.agent_card_url?.replace(
+                  "/.well-known/agent.json",
+                  ""
+                ) || ""
+              }
+              disabled
+              autoComplete="off"
+            />
+            <button
+              type="button"
+              className="absolute right-2 text-neutral-400 hover:text-emerald-400 px-1 py-1"
+              onClick={async () => {
+                if (values?.agent_card_url) {
+                  await navigator.clipboard.writeText(
+                    values.agent_card_url.replace("/.well-known/agent.json", "")
+                  );
+                  setCopiedCardUrl(true);
+                  setTimeout(() => setCopiedCardUrl(false), 1200);
+                  toast({
+                    title: "Copied!",
+                    description:
+                      "The agent URL was copied to the clipboard.",
+                  });
+                }
+              }}
+              tabIndex={-1}
+            >
+              {copiedCardUrl ? (
+                <Check className="w-4 h-4" />
+              ) : (
+                <Copy className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <label className="text-sm text-neutral-400 mb-1" htmlFor="agent-api_key">
+            Configure the API Key for this agent. This key will be used for
+            authentication with external services.
+          </label>
+          <div className="relative flex items-center">
+            <input
+              id="agent-api_key"
+              type={showApiKey ? "text" : "password"}
+              className="w-full bg-[#2a2a2a] border border-[#444] rounded-md px-3 py-2 text-white pr-24 focus:outline-none focus:ring-2 focus:ring-emerald-400/40"
+              value={values.config?.api_key || ""}
+              onChange={(e) =>
+                onChange({
+                  ...values,
+                  config: {
+                    ...(values.config || {}),
+                    api_key: e.target.value,
+                  },
+                })
+              }
+              autoComplete="off"
+            />
+            <button
+              type="button"
+              className="absolute right-9 text-neutral-400 hover:text-emerald-400 px-1 py-1"
+              onClick={() => setShowApiKey((v) => !v)}
+              tabIndex={-1}
+            >
+              {showApiKey ? (
+                <EyeOff className="w-4 h-4" />
+              ) : (
+                <Eye className="w-4 h-4" />
+              )}
+            </button>
+            <button
+              type="button"
+              className="absolute right-2 text-neutral-400 hover:text-emerald-400 px-1 py-1"
+              onClick={async () => {
+                if (values.config?.api_key) {
+                  await navigator.clipboard.writeText(values.config.api_key);
+                  setCopied(true);
+                  setTimeout(() => setCopied(false), 1200);
+                  toast({
+                    title: "Copied!",
+                    description:
+                      "The API key was copied to the clipboard.",
+                  });
+                }
+              }}
+              tabIndex={-1}
+            >
+              {copied ? (
+                <Check className="w-4 h-4" />
+              ) : (
+                <Copy className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (values.type === "llm") {
+    return (
+      <div className="space-y-4">
+        {apiKeyField}
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium text-white">MCP Servers</h3>
+          <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+            <p className="text-sm text-neutral-400 mb-4">
+              Configure the MCP servers that this agent can use.
+            </p>
+
+            {values.config?.mcp_servers &&
+            values.config.mcp_servers.length > 0 ? (
+              <div className="space-y-2">
+                {values.config.mcp_servers.map((mcpConfig) => {
+                  const mcpServer = availableMCPs.find(
+                    (mcp) => mcp.id === mcpConfig.id
+                  );
+                  return (
+                    <div
+                      key={mcpConfig.id}
+                      className="flex items-center justify-between p-2 bg-[#2a2a2a] rounded-md"
+                    >
+                      <div>
+                        <p className="font-medium text-white">
+                          {mcpServer?.name || mcpConfig.id}
+                        </p>
+                        <p className="text-sm text-neutral-400">
+                          {mcpServer?.description?.substring(0, 100)}
+                          ...
+                        </p>
+                        {mcpConfig.tools && mcpConfig.tools.length > 0 && (
+                          <div className="flex flex-wrap gap-1 mt-1">
+                            {mcpConfig.tools.map((toolId) => (
+                              <Badge
+                                key={toolId}
+                                variant="outline"
+                                className="text-xs bg-[#333] text-emerald-400 border-emerald-400/30"
+                              >
+                                {toolId}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => onConfigureMCP(mcpConfig)}
+                          className="flex items-center text-neutral-300 hover:text-emerald-400 hover:bg-[#333]"
+                        >
+                          <Settings className="h-4 w-4 mr-1" /> Configure
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => onRemoveMCP(mcpConfig.id)}
+                          className="text-red-500 hover:text-red-400 hover:bg-[#333]"
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onOpenMCPDialog(null)}
+                  className="w-full mt-2 border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add MCP Server
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between p-2 bg-[#2a2a2a] rounded-md mb-2">
+                <div>
+                  <p className="font-medium text-white">
+                    No MCP servers configured
+                  </p>
+                  <p className="text-sm text-neutral-400">
+                    Add MCP servers for this agent
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onOpenMCPDialog(null)}
+                  className="border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium text-white">Custom MCPs</h3>
+          <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+            <p className="text-sm text-neutral-400 mb-4">
+              Configure custom MCPs with URL and HTTP headers.
+            </p>
+
+            {values.config?.custom_mcp_servers &&
+            values.config.custom_mcp_servers.length > 0 ? (
+              <div className="space-y-2">
+                {values.config.custom_mcp_servers.map((customMCP) => (
+                  <div
+                    key={customMCP.url}
+                    className="flex items-center justify-between p-2 bg-[#2a2a2a] rounded-md"
+                  >
+                    <div>
+                      <p className="font-medium text-white">{customMCP.url}</p>
+                      <p className="text-sm text-neutral-400">
+                        {Object.keys(customMCP.headers || {}).length > 0
+                          ? `${
+                              Object.keys(customMCP.headers || {}).length
+                            } headers configured`
+                          : "No headers configured"}
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onConfigureCustomMCP(customMCP)}
+                        className="flex items-center text-neutral-300 hover:text-emerald-400 hover:bg-[#333]"
+                      >
+                        <Settings className="h-4 w-4 mr-1" /> Configure
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onRemoveCustomMCP(customMCP.url)}
+                        className="text-red-500 hover:text-red-400 hover:bg-[#333]"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onOpenCustomMCPDialog(null)}
+                  className="w-full mt-2 border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add Custom MCP
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between p-2 bg-[#2a2a2a] rounded-md mb-2">
+                <div>
+                  <p className="font-medium text-white">
+                    No custom MCPs configured
+                  </p>
+                  <p className="text-sm text-neutral-400">
+                    Add custom MCPs for this agent
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onOpenCustomMCPDialog(null)}
+                  className="border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium text-white">Agent Tools</h3>
+          <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+            <p className="text-sm text-neutral-400 mb-4">
+              Configure other agents as tools for this agent.
+            </p>
+            {values.config?.agent_tools &&
+            values.config.agent_tools.length > 0 ? (
+              <div className="space-y-2">
+                {values.config.agent_tools.map((toolId) => {
+                  const agent = agents.find((a) => a.id === toolId);
+                  return (
+                    <div
+                      key={toolId}
+                      className="flex items-center justify-between p-2 bg-[#2a2a2a] rounded-md"
+                    >
+                      <div>
+                        <p className="font-medium text-white">
+                          {agent?.name || toolId}
+                        </p>
+                        <p className="text-sm text-neutral-400">
+                          {agent?.description || "No description"}
+                        </p>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemoveAgentTool(toolId)}
+                        className="text-red-500 hover:text-red-400 hover:bg-[#333]"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  );
+                })}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setAgentToolDialogOpen(true)}
+                  className="w-full mt-2 border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add Agent Tool
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between p-2 bg-[#2a2a2a] rounded-md mb-2">
+                <div>
+                  <p className="font-medium text-white">
+                    No agent tools configured
+                  </p>
+                  <p className="text-sm text-neutral-400">
+                    Add agent tools for this agent
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setAgentToolDialogOpen(true)}
+                  className="border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium text-white">
+            Custom Tools (HTTP Tools)
+          </h3>
+          <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+            <p className="text-sm text-neutral-400 mb-4">
+              Configure HTTP tools for this agent.
+            </p>
+            {values.config?.custom_tools?.http_tools &&
+            values.config.custom_tools.http_tools.length > 0 ? (
+              <div className="space-y-2">
+                {values.config.custom_tools.http_tools.map((tool, idx) => (
+                  <div
+                    key={tool.name + idx}
+                    className="flex items-center justify-between p-2 bg-[#2a2a2a] rounded-md"
+                  >
+                    <div>
+                      <p className="font-medium text-white">{tool.name}</p>
+                      <p className="text-xs text-neutral-400">
+                        {tool.method} {tool.endpoint}
+                      </p>
+                      <p className="text-xs text-neutral-400">
+                        {tool.description}
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleEditCustomTool(tool, idx)}
+                        className="flex items-center text-neutral-300 hover:text-emerald-400 hover:bg-[#333]"
+                      >
+                        <span className="mr-1">Edit</span>
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemoveCustomTool(idx)}
+                        className="text-red-500 hover:text-red-400 hover:bg-[#333]"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setEditingCustomTool(null);
+                    setCustomToolDialogOpen(true);
+                  }}
+                  className="w-full mt-2 border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add Custom Tool
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between p-2 bg-[#2a2a2a] rounded-md mb-2">
+                <div>
+                  <p className="font-medium text-white">
+                    No custom tools configured
+                  </p>
+                  <p className="text-sm text-neutral-400">
+                    Add HTTP tools for this agent
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setEditingCustomTool(null);
+                    setCustomToolDialogOpen(true);
+                  }}
+                  className="border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+        <CustomToolDialog
+          open={customToolDialogOpen}
+          onOpenChange={(open) => {
+            setCustomToolDialogOpen(open);
+            if (!open) setEditingCustomTool(null);
+          }}
+          onSave={
+            editingCustomTool ? handleSaveEditCustomTool : handleAddCustomTool
+          }
+          initialTool={editingCustomTool}
+        />
+        {agentToolDialogOpen && (
+        <AgentToolDialog
+          open={agentToolDialogOpen}
+          onOpenChange={setAgentToolDialogOpen}
+          onSave={handleAddAgentTool}
+            currentAgentId={values.id}
+            folderId={values.folder_id}
+          clientId={clientId}
+        />
+        )}
+      </div>
+    );
+  }
+
+  if (values.type === "a2a") {
+    return (
+      <div className="space-y-4">
+        {apiKeyField}
+        <A2AAgentConfig values={values} onChange={onChange} />
+      </div>
+    );
+  }
+
+  if (values.type === "sequential") {
+    return (
+      <div className="space-y-4">
+        {apiKeyField}
+        <SequentialAgentConfig
+          values={values}
+          onChange={onChange}
+          agents={agents}
+          getAgentNameById={getAgentNameById}
+        />
+      </div>
+    );
+  }
+
+  if (values.type === "parallel") {
+    return (
+      <div className="space-y-4">
+        {apiKeyField}
+        <ParallelAgentConfig
+          values={values}
+          onChange={onChange}
+          agents={agents}
+          getAgentNameById={getAgentNameById}
+        />
+      </div>
+    );
+  }
+
+  if (values.type === "loop") {
+    return (
+      <div className="space-y-4">
+        {apiKeyField}
+        <LoopAgentConfig
+          values={values}
+          onChange={onChange}
+          agents={agents}
+          getAgentNameById={getAgentNameById}
+        />
+      </div>
+    );
+  }
+
+  if (values.type === "task") {
+    return (
+      <div className="space-y-4">
+        {apiKeyField}
+        <TaskAgentConfig
+          values={values}
+          onChange={onChange}
+          agents={agents}
+          getAgentNameById={getAgentNameById}
+          singleTask={values.type === "task"}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {apiKeyField}
+      <div className="flex items-center justify-center h-40">
+        <div className="text-center">
+          <p className="text-neutral-400">
+            Configure the sub-agents in the "Sub-Agents" tab
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/forms/SubAgentsTab.tsx b/frontend/app/agents/forms/SubAgentsTab.tsx
new file mode 100644
index 00000000..2b88be61
--- /dev/null
+++ b/frontend/app/agents/forms/SubAgentsTab.tsx
@@ -0,0 +1,246 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/forms/SubAgentsTab.tsx                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Agent } from "@/types/agent";
+import { listAgents } from "@/services/agentService";
+import { Loader2, Search, X } from "lucide-react";
+
+interface SubAgentsTabProps {
+  values: Partial<Agent>;
+  onChange: (values: Partial<Agent>) => void;
+  getAgentNameById: (id: string) => string;
+  editingAgentId?: string;
+  clientId: string;
+}
+
+export function SubAgentsTab({
+  values,
+  onChange,
+  getAgentNameById,
+  editingAgentId,
+  clientId,
+}: SubAgentsTabProps) {
+  const [availableAgents, setAvailableAgents] = useState<Agent[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [search, setSearch] = useState("");
+
+  // Get folder ID from current agent
+  const folderId = values.folder_id;
+  
+  useEffect(() => {
+    loadAgents();
+  }, [clientId, folderId, editingAgentId]);
+  
+  const loadAgents = async () => {
+    if (!clientId) return;
+    
+    setIsLoading(true);
+    try {
+      const res = await listAgents(
+        clientId,
+        0,
+        100,
+        folderId || undefined
+      );
+      
+      // Filter out the current agent to avoid self-reference
+      const filteredAgents = res.data.filter(agent => 
+        agent.id !== editingAgentId
+      );
+      
+      setAvailableAgents(filteredAgents);
+    } catch (error) {
+      console.error("Error loading agents:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleAddSubAgent = (agentId: string) => {
+    if (!values.config?.sub_agents?.includes(agentId)) {
+      onChange({
+        ...values,
+        config: {
+          ...values.config,
+          sub_agents: [...(values.config?.sub_agents || []), agentId],
+        },
+      });
+    }
+  };
+
+  const handleRemoveSubAgent = (agentId: string) => {
+    onChange({
+      ...values,
+      config: {
+        ...values.config,
+        sub_agents:
+          values.config?.sub_agents?.filter((id) => id !== agentId) || [],
+      },
+    });
+  };
+  
+  const filteredAgents = availableAgents.filter(agent => 
+    agent.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-medium text-white">Sub-Agents</h3>
+        <div className="text-sm text-neutral-400">
+          {values.config?.sub_agents?.length || 0} sub-agents selected
+        </div>
+      </div>
+
+      <div className="border border-[#444] rounded-md p-4 bg-[#222]">
+        <p className="text-sm text-neutral-400 mb-4">
+          Select the agents that will be used as sub-agents.
+        </p>
+
+        {values.config?.sub_agents && values.config.sub_agents.length > 0 ? (
+          <div className="space-y-2 mb-4">
+            <h4 className="text-sm font-medium text-white">
+              Selected sub-agents:
+            </h4>
+            <div className="flex flex-wrap gap-2">
+              {values.config.sub_agents.map((agentId) => (
+                <Badge
+                  key={agentId}
+                  variant="secondary"
+                  className="flex items-center gap-1 bg-[#333] text-emerald-400"
+                >
+                  {getAgentNameById(agentId)}
+                  <button
+                    onClick={() => handleRemoveSubAgent(agentId)}
+                    className="ml-1 h-4 w-4 rounded-full hover:bg-[#444] inline-flex items-center justify-center"
+                  >
+                    ×
+                  </button>
+                </Badge>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="text-center py-4 text-neutral-400 mb-4">
+            No sub-agents selected
+          </div>
+        )}
+
+        <div className="mb-4">
+        <h4 className="text-sm font-medium text-white mb-2">
+          Available agents:
+        </h4>
+          <div className="relative mb-3">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-neutral-500" />
+            <Input
+              placeholder="Search agents by name..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9 bg-[#1a1a1a] border-[#444] text-white"
+            />
+            {search && (
+              <button
+                onClick={() => setSearch("")}
+                className="absolute right-2.5 top-2.5 text-neutral-400 hover:text-white"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="flex flex-col items-center justify-center py-6">
+            <Loader2 className="h-6 w-6 text-emerald-400 animate-spin" />
+            <div className="mt-2 text-sm text-neutral-400">Loading agents...</div>
+          </div>
+        ) : (
+        <div className="space-y-2 max-h-60 overflow-y-auto">
+            {filteredAgents.length === 0 ? (
+              <div className="text-center py-4 text-neutral-400">
+                {search ? `No agents found matching "${search}"` : "No other agents found in this folder"}
+              </div>
+            ) : (
+              filteredAgents.map((agent) => (
+              <div
+                key={agent.id}
+                className="flex items-center justify-between p-2 hover:bg-[#2a2a2a] rounded-md"
+              >
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-white">{agent.name}</span>
+                  <Badge
+                    variant="outline"
+                    className="ml-2 border-[#444] text-emerald-400"
+                  >
+                    {agent.type === "llm"
+                      ? "LLM Agent"
+                      : agent.type === "a2a"
+                      ? "A2A Agent"
+                      : agent.type === "sequential"
+                      ? "Sequential Agent"
+                      : agent.type === "parallel"
+                      ? "Parallel Agent"
+                      : agent.type === "loop"
+                      ? "Loop Agent"
+                      : agent.type === "workflow"
+                      ? "Workflow Agent"
+                      : agent.type === "task"
+                      ? "Task Agent"
+                      : agent.type}
+                  </Badge>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleAddSubAgent(agent.id)}
+                  disabled={values.config?.sub_agents?.includes(agent.id)}
+                  className={
+                    values.config?.sub_agents?.includes(agent.id)
+                      ? "text-neutral-500 bg-[#222] hover:bg-[#333]"
+                      : "text-emerald-400 hover:bg-[#333] bg-[#222]"
+                  }
+                >
+                  {values.config?.sub_agents?.includes(agent.id)
+                    ? "Added"
+                    : "Add"}
+                </Button>
+              </div>
+              ))
+            )}
+        </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/page.tsx b/frontend/app/agents/page.tsx
new file mode 100644
index 00000000..7580be17
--- /dev/null
+++ b/frontend/app/agents/page.tsx
@@ -0,0 +1,754 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/page.tsx                                                  │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Key, Plus, Folder, Download, Upload } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { useRouter } from "next/navigation";
+import { exportAsJson } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { Agent, AgentCreate } from "@/types/agent";
+import { Folder as AgentFolder } from "@/services/agentService";
+import {
+  listAgents,
+  createAgent,
+  updateAgent,
+  deleteAgent,
+  listFolders,
+  createFolder,
+  updateFolder,
+  deleteFolder,
+  assignAgentToFolder,
+  ApiKey,
+  listApiKeys,
+  createApiKey,
+  updateApiKey,
+  deleteApiKey,
+  shareAgent,
+  importAgentFromJson,
+} from "@/services/agentService";
+import { listMCPServers } from "@/services/mcpServerService";
+import { AgentSidebar } from "./AgentSidebar";
+import { SearchInput } from "./SearchInput";
+import { AgentList } from "./AgentList";
+import { EmptyState } from "./EmptyState";
+import { AgentForm } from "./forms/AgentForm";
+import { FolderDialog } from "./dialogs/FolderDialog";
+import { MoveAgentDialog } from "./dialogs/MoveAgentDialog";
+import { ConfirmationDialog } from "./dialogs/ConfirmationDialog";
+import { ApiKeysDialog } from "./dialogs/ApiKeysDialog";
+import { ShareAgentDialog } from "./dialogs/ShareAgentDialog";
+import { MCPServer } from "@/types/mcpServer";
+import { availableModels } from "@/types/aiModels";
+import { ImportAgentDialog } from "./dialogs/ImportAgentDialog";
+
+export default function AgentsPage() {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const user =
+    typeof window !== "undefined"
+      ? JSON.parse(localStorage.getItem("user") || "{}")
+      : {};
+  const clientId = user?.client_id || "";
+
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [filteredAgents, setFilteredAgents] = useState<Agent[]>([]);
+  const [folders, setFolders] = useState<AgentFolder[]>([]);
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [availableMCPs, setAvailableMCPs] = useState<MCPServer[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedAgentType, setSelectedAgentType] = useState<string | null>(null);
+  const [agentTypes, setAgentTypes] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [isSidebarVisible, setIsSidebarVisible] = useState(false);
+  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isFolderDialogOpen, setIsFolderDialogOpen] = useState(false);
+  const [isMovingDialogOpen, setIsMovingDialogOpen] = useState(false);
+  const [isDeleteAgentDialogOpen, setIsDeleteAgentDialogOpen] = useState(false);
+  const [isDeleteFolderDialogOpen, setIsDeleteFolderDialogOpen] =
+    useState(false);
+  const [isApiKeysDialogOpen, setIsApiKeysDialogOpen] = useState(false);
+  const [isMCPDialogOpen, setIsMCPDialogOpen] = useState(false);
+  const [isCustomMCPDialogOpen, setIsCustomMCPDialogOpen] = useState(false);
+  const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
+
+  const [editingAgent, setEditingAgent] = useState<Agent | null>(null);
+  const [editingFolder, setEditingFolder] = useState<AgentFolder | null>(null);
+  const [agentToDelete, setAgentToDelete] = useState<Agent | null>(null);
+  const [agentToMove, setAgentToMove] = useState<Agent | null>(null);
+  const [agentToShare, setAgentToShare] = useState<Agent | null>(null);
+  const [sharedApiKey, setSharedApiKey] = useState<string>("");
+  const [folderToDelete, setFolderToDelete] = useState<AgentFolder | null>(null);
+
+  const [newAgent, setNewAgent] = useState<Partial<Agent>>({
+    client_id: clientId || "",
+    name: "",
+    description: "",
+    type: "llm",
+    model: "openai/gpt-4.1-nano",
+    instruction: "",
+    api_key_id: "",
+    config: {
+      tools: [],
+      mcp_servers: [],
+      custom_mcp_servers: [],
+      custom_tools: {
+        http_tools: [],
+      },
+      sub_agents: [],
+      agent_tools: [],
+    },
+  });
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isImporting, setIsImporting] = useState(false);
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
+
+  useEffect(() => {
+    if (!clientId) return;
+    loadAgents();
+    loadFolders();
+    loadApiKeys();
+  }, [clientId, selectedFolderId]);
+
+  useEffect(() => {
+    const loadMCPs = async () => {
+      try {
+        const res = await listMCPServers();
+        setAvailableMCPs(res.data);
+      } catch (error) {
+        toast({
+          title: "Error loading MCP servers",
+          variant: "destructive",
+        });
+      }
+    };
+
+    loadMCPs();
+  }, []);
+
+  const loadAgents = async () => {
+    setIsLoading(true);
+    try {
+      const res = await listAgents(
+        clientId,
+        0,
+        100,
+        selectedFolderId || undefined
+      );
+      setAgents(res.data);
+      setFilteredAgents(res.data);
+      
+      // Extract unique agent types
+      const types = [...new Set(res.data.map(agent => agent.type))].filter(Boolean);
+      setAgentTypes(types);
+    } catch (error) {
+      toast({ title: "Error loading agents", variant: "destructive" });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadFolders = async () => {
+    setIsLoading(true);
+    try {
+      const res = await listFolders(clientId);
+      setFolders(res.data);
+    } catch (error) {
+      toast({ title: "Error loading folders", variant: "destructive" });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadApiKeys = async () => {
+    try {
+      const res = await listApiKeys(clientId);
+      setApiKeys(res.data);
+    } catch (error) {
+      toast({ title: "Error loading API keys", variant: "destructive" });
+    }
+  };
+
+  useEffect(() => {
+    // Apply both search term and type filters
+    let filtered = [...agents];
+    
+    // Apply search term filter
+    if (searchTerm.trim() !== "") {
+      const lowercaseSearch = searchTerm.toLowerCase();
+      filtered = filtered.filter(
+        (agent) =>
+          agent.name.toLowerCase().includes(lowercaseSearch) ||
+          agent.description?.toLowerCase().includes(lowercaseSearch)
+      );
+    }
+    
+    // Apply agent type filter
+    if (selectedAgentType) {
+      filtered = filtered.filter(agent => agent.type === selectedAgentType);
+    }
+    
+      setFilteredAgents(filtered);
+  }, [searchTerm, selectedAgentType, agents]);
+
+  const handleAddAgent = async (agentData: Partial<Agent>) => {
+    try {
+      setIsLoading(true);
+      if (editingAgent) {
+        await updateAgent(editingAgent.id, {
+          ...agentData,
+          client_id: clientId,
+        });
+        toast({
+          title: "Agent updated",
+          description: `${agentData.name} was updated successfully`,
+        });
+      } else {
+        const createdAgent = await createAgent({
+          ...(agentData as AgentCreate),
+          client_id: clientId,
+        });
+
+        if (selectedFolderId && createdAgent.data.id) {
+          await assignAgentToFolder(
+            createdAgent.data.id,
+            selectedFolderId,
+            clientId
+          );
+        }
+
+        toast({
+          title: "Agent added",
+          description: `${agentData.name} was added successfully`,
+        });
+      }
+      loadAgents();
+      setIsDialogOpen(false);
+      resetForm();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to save agent",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteAgent = async () => {
+    if (!agentToDelete) return;
+    try {
+      setIsLoading(true);
+      await deleteAgent(agentToDelete.id);
+      toast({
+        title: "Agent deleted",
+        description: "The agent was deleted successfully",
+      });
+      loadAgents();
+      setAgentToDelete(null);
+      setIsDeleteAgentDialogOpen(false);
+    } catch {
+      toast({
+        title: "Error",
+        description: "Unable to delete agent",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleEditAgent = (agent: Agent) => {
+    setEditingAgent(agent);
+    setNewAgent({ ...agent });
+    setIsDialogOpen(true);
+  };
+
+  const handleMoveAgent = async (targetFolderId: string | null) => {
+    if (!agentToMove) return;
+    try {
+      setIsLoading(true);
+      await assignAgentToFolder(agentToMove.id, targetFolderId, clientId);
+      toast({
+        title: "Agent moved",
+        description: targetFolderId
+          ? `Agent moved to folder successfully`
+          : "Agent removed from folder successfully",
+      });
+      setIsMovingDialogOpen(false);
+      loadAgents();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to move agent",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+      setAgentToMove(null);
+    }
+  };
+
+  const handleAddFolder = async (folderData: {
+    name: string;
+    description: string;
+  }) => {
+    try {
+      setIsLoading(true);
+      if (editingFolder) {
+        await updateFolder(editingFolder.id, folderData, clientId);
+        toast({
+          title: "Folder updated",
+          description: `${folderData.name} was updated successfully`,
+        });
+      } else {
+        await createFolder({
+          ...folderData,
+          client_id: clientId,
+        });
+        toast({
+          title: "Folder created",
+          description: `${folderData.name} was created successfully`,
+        });
+      }
+      loadFolders();
+      setIsFolderDialogOpen(false);
+      setEditingFolder(null);
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to save folder",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteFolder = async () => {
+    if (!folderToDelete) return;
+    try {
+      setIsLoading(true);
+      await deleteFolder(folderToDelete.id, clientId);
+      toast({
+        title: "Folder deleted",
+        description: "The folder was deleted successfully",
+      });
+      loadFolders();
+      if (selectedFolderId === folderToDelete.id) {
+        setSelectedFolderId(null);
+      }
+      setFolderToDelete(null);
+      setIsDeleteFolderDialogOpen(false);
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to delete folder",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleShareAgent = async (agent: Agent) => {
+    try {
+      setIsLoading(true);
+      setAgentToShare(agent);
+      const response = await shareAgent(agent.id, clientId);
+      
+      if (response.data && response.data.api_key) {
+        setSharedApiKey(response.data.api_key);
+        setIsShareDialogOpen(true);
+        
+        toast({
+          title: "Agent shared",
+          description: "API key generated successfully",
+        });
+      }
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to share agent",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const resetForm = () => {
+    setNewAgent({
+      client_id: clientId || "",
+      name: "",
+      description: "",
+      type: "llm",
+      model: "openai/gpt-4.1-nano",
+      instruction: "",
+      api_key_id: "",
+      config: {
+        tools: [],
+        mcp_servers: [],
+        custom_mcp_servers: [],
+        custom_tools: {
+          http_tools: [],
+        },
+        sub_agents: [],
+        agent_tools: [],
+      },
+    });
+    setEditingAgent(null);
+  };
+
+  // Function to export all agents as JSON
+  const handleExportAllAgents = () => {
+    try {
+      // Create file name with current date
+      const date = new Date();
+      const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+      const filename = `agents-export-${formattedDate}`;
+      
+      // Use the utility function to export
+      // Pass agents both as the data and as allAgents parameter to properly resolve references
+      const result = exportAsJson({ agents: filteredAgents }, filename, true, agents);
+      
+      if (result) {
+        toast({
+          title: "Export complete",
+          description: `${filteredAgents.length} agent(s) exported to JSON`,
+        });
+      } else {
+        throw new Error("Export failed");
+      }
+    } catch (error) {
+      console.error("Error exporting agents:", error);
+      
+      toast({
+        title: "Export failed",
+        description: "There was an error exporting the agents",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleImportAgentJSON = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file || !clientId) return;
+    
+    try {
+      setIsImporting(true);
+      
+      await importAgentFromJson(file, clientId);
+      
+      toast({
+        title: "Import successful",
+        description: "Agent was imported successfully",
+      });
+      
+      // Refresh the agent list
+      loadAgents();
+      
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    } catch (error) {
+      console.error("Error importing agent:", error);
+      toast({
+        title: "Import failed",
+        description: "There was an error importing the agent",
+        variant: "destructive",
+      });
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-6 bg-[#121212] min-h-screen flex relative">
+      <AgentSidebar
+        visible={isSidebarVisible}
+        folders={folders}
+        selectedFolderId={selectedFolderId}
+        onSelectFolder={setSelectedFolderId}
+        onAddFolder={() => {
+          setEditingFolder(null);
+          setIsFolderDialogOpen(true);
+        }}
+        onEditFolder={(folder) => {
+          setEditingFolder(folder as AgentFolder);
+          setIsFolderDialogOpen(true);
+        }}
+        onDeleteFolder={(folder) => {
+          setFolderToDelete(folder as AgentFolder);
+          setIsDeleteFolderDialogOpen(true);
+        }}
+        onClose={() => setIsSidebarVisible(!isSidebarVisible)}
+      />
+
+      <div
+        className={`w-full transition-all duration-300 ease-in-out ${
+          isSidebarVisible ? "pl-64" : "pl-0"
+        }`}
+      >
+        <div className="mb-6 flex items-center justify-between">
+          <div className="flex items-center">
+            {!isSidebarVisible && (
+              <button
+                onClick={() => setIsSidebarVisible(true)}
+                className="mr-2 bg-[#222] p-2 rounded-md text-emerald-400 hover:bg-[#333] hover:text-emerald-400 shadow-md transition-all"
+                aria-label="Show folders"
+              >
+                <Folder className="h-5 w-5" />
+              </button>
+            )}
+            <h1 className="text-3xl font-bold text-white flex items-center ml-2">
+              {selectedFolderId
+                ? folders.find((f) => f.id === selectedFolderId)?.name
+                : "Agents"}
+            </h1>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <SearchInput
+              value={searchTerm}
+              onChange={setSearchTerm}
+              placeholder="Search agents..."
+              selectedAgentType={selectedAgentType}
+              onAgentTypeChange={setSelectedAgentType}
+              agentTypes={agentTypes}
+            />
+
+            <Button
+              onClick={() => setIsApiKeysDialogOpen(true)}
+              className="bg-[#222] text-white hover:bg-[#333] border border-[#444]"
+            >
+              <Key className="mr-2 h-4 w-4 text-emerald-400" />
+              API Keys
+            </Button>
+
+            <Button
+              onClick={handleExportAllAgents}
+              className="bg-[#222] text-white hover:bg-[#333] border border-[#444]"
+              title="Export all agents as JSON"
+            >
+              <Download className="mr-2 h-4 w-4 text-purple-400" />
+              Export All
+            </Button>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button className="bg-emerald-400 text-black hover:bg-[#00cc7d]">
+                  <Plus className="mr-2 h-4 w-4" />
+                  New Agent
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="bg-zinc-900 border-zinc-700">
+                <DropdownMenuItem
+                  className="text-white hover:bg-zinc-800 cursor-pointer"
+              onClick={() => {
+                resetForm();
+                setIsDialogOpen(true);
+              }}
+            >
+                  <Plus className="h-4 w-4 mr-2 text-emerald-400" />
+              New Agent
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="text-white hover:bg-zinc-800 cursor-pointer"
+                  onClick={() => setIsImportDialogOpen(true)}
+                >
+                  <Upload className="h-4 w-4 mr-2 text-indigo-400" />
+                  Import Agent JSON
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center h-[60vh]">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-emerald-400"></div>
+          </div>
+        ) : filteredAgents.length > 0 ? (
+          <AgentList
+            agents={filteredAgents}
+            isLoading={isLoading}
+            searchTerm={searchTerm}
+            selectedFolderId={selectedFolderId}
+            availableMCPs={availableMCPs}
+            getApiKeyNameById={(id) =>
+              apiKeys.find((k) => k.id === id)?.name || null
+            }
+            getAgentNameById={(id) =>
+              agents.find((a) => a.id === id)?.name || id
+            }
+            onEdit={handleEditAgent}
+            onDelete={(agent) => {
+              setAgentToDelete(agent);
+              setIsDeleteAgentDialogOpen(true);
+            }}
+            onMove={(agent) => {
+              setAgentToMove(agent);
+              setIsMovingDialogOpen(true);
+            }}
+            onShare={handleShareAgent}
+            onClearSearch={() => {
+              setSearchTerm("");
+              setSelectedAgentType(null);
+            }}
+            onCreateAgent={() => {
+              resetForm();
+              setIsDialogOpen(true);
+            }}
+            onWorkflow={(agentId) => {
+              router.push(`/agents/workflows?agentId=${agentId}`);
+            }}
+            apiKeys={apiKeys}
+            folders={folders}
+          />
+        ) : (
+          <EmptyState
+            type={
+              searchTerm || selectedAgentType
+                ? "search-no-results"
+                : selectedFolderId
+                ? "empty-folder"
+                : "no-agents"
+            }
+            searchTerm={searchTerm}
+            onAction={() => {
+              searchTerm || selectedAgentType
+                ? (setSearchTerm(""), setSelectedAgentType(null))
+                : (resetForm(), setIsDialogOpen(true));
+            }}
+            actionLabel={searchTerm || selectedAgentType ? "Clear filters" : "Create Agent"}
+          />
+        )}
+      </div>
+
+      <AgentForm
+        open={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        initialValues={newAgent}
+        apiKeys={apiKeys}
+        availableModels={availableModels}
+        availableMCPs={availableMCPs}
+        agents={agents}
+        onOpenApiKeysDialog={() => setIsApiKeysDialogOpen(true)}
+        onOpenMCPDialog={() => setIsMCPDialogOpen(true)}
+        onOpenCustomMCPDialog={() => setIsCustomMCPDialogOpen(true)}
+        onSave={handleAddAgent}
+        getAgentNameById={(id) => agents.find((a) => a.id === id)?.name || id}
+        clientId={clientId}
+      />
+
+      <FolderDialog
+        open={isFolderDialogOpen}
+        onOpenChange={setIsFolderDialogOpen}
+        editingFolder={editingFolder}
+        onSave={handleAddFolder}
+      />
+
+      <MoveAgentDialog
+        open={isMovingDialogOpen}
+        onOpenChange={setIsMovingDialogOpen}
+        agent={agentToMove}
+        folders={folders}
+        onMove={handleMoveAgent}
+      />
+
+      <ConfirmationDialog
+        open={isDeleteAgentDialogOpen}
+        onOpenChange={setIsDeleteAgentDialogOpen}
+        title="Confirm deletion"
+        description={`Are you sure you want to delete the agent "${agentToDelete?.name}"? This action cannot be undone.`}
+        onConfirm={handleDeleteAgent}
+      />
+
+      <ConfirmationDialog
+        open={isDeleteFolderDialogOpen}
+        onOpenChange={setIsDeleteFolderDialogOpen}
+        title="Confirm deletion"
+        description={`Are you sure you want to delete the folder "${folderToDelete?.name}"? This action cannot be undone.`}
+        confirmText="Delete"
+        confirmVariant="destructive"
+        onConfirm={handleDeleteFolder}
+      />
+
+      <ApiKeysDialog
+        open={isApiKeysDialogOpen}
+        onOpenChange={setIsApiKeysDialogOpen}
+        apiKeys={apiKeys}
+        isLoading={isLoading}
+        onAddApiKey={async (keyData) => {
+          await createApiKey({ ...keyData, client_id: clientId });
+          loadApiKeys();
+        }}
+        onUpdateApiKey={async (id, keyData) => {
+          await updateApiKey(id, keyData, clientId);
+          loadApiKeys();
+        }}
+        onDeleteApiKey={async (id) => {
+          await deleteApiKey(id, clientId);
+          loadApiKeys();
+        }}
+      />
+
+      <ShareAgentDialog
+        open={isShareDialogOpen}
+        onOpenChange={setIsShareDialogOpen}
+        agent={agentToShare || ({} as Agent)}
+        apiKey={sharedApiKey}
+      />
+
+      <ImportAgentDialog
+        open={isImportDialogOpen}
+        onOpenChange={setIsImportDialogOpen}
+        onSuccess={loadAgents}
+        clientId={clientId}
+        folderId={selectedFolderId}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/agents/workflows/Canva.tsx b/frontend/app/agents/workflows/Canva.tsx
new file mode 100644
index 00000000..3d386be8
--- /dev/null
+++ b/frontend/app/agents/workflows/Canva.tsx
@@ -0,0 +1,689 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/Canva.tsx                                       │
+│ Developed by: Davidson Gomes                                                 │
+│ Delay node integration developed by: Victor Calazans                         │
+│ Creation date: May 13, 2025                                                  |
+│ Delay implementation date: May 17, 2025                                      │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+
+import {
+  Controls,
+  ReactFlow,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  type OnConnect,
+  ConnectionMode,
+  ConnectionLineType,
+  useReactFlow,
+  ProOptions,
+  applyNodeChanges,
+  NodeChange,
+  OnNodesChange,
+  MiniMap,
+  Panel,
+  Background,
+} from "@xyflow/react";
+import { useDnD } from "@/contexts/DnDContext";
+
+import { Edit, X, ChevronLeft, ChevronRight } from "lucide-react";
+
+import "@xyflow/react/dist/style.css";
+import "./canva.css";
+
+import { getHelperLines } from "./utils";
+
+import { NodePanel } from "./NodePanel";
+import ContextMenu from "./ContextMenu";
+import { initialEdges, edgeTypes } from "./edges";
+import HelperLines from "./HelperLines";
+import { initialNodes, nodeTypes } from "./nodes";
+import { AgentForm } from "./nodes/components/agent/AgentForm";
+import { ConditionForm } from "./nodes/components/condition/ConditionForm";
+import { Agent, WorkflowData } from "@/types/agent";
+import { updateAgent } from "@/services/agentService";
+import { useToast } from "@/hooks/use-toast";
+import { MessageForm } from "./nodes/components/message/MessageForm";
+import { DelayForm } from "./nodes/components/delay/DelayForm";
+import { Button } from "@/components/ui/button";
+
+const proOptions: ProOptions = { account: "paid-pro", hideAttribution: true };
+
+const NodeFormWrapper = ({
+  selectedNode,
+  editingLabel,
+  setEditingLabel,
+  handleUpdateNode,
+  setSelectedNode,
+  children,
+}: {
+  selectedNode: any;
+  editingLabel: boolean;
+  setEditingLabel: (value: boolean) => void;
+  handleUpdateNode: (node: any) => void;
+  setSelectedNode: (node: any) => void;
+  children: React.ReactNode;
+}) => {
+  // Handle ESC key to close the panel
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !editingLabel) {
+        setSelectedNode(null);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [setSelectedNode, editingLabel]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-shrink-0 sticky top-0 z-20 bg-neutral-800 shadow-md border-b border-neutral-700">
+        <div className="p-4 text-center relative">
+          <button
+            className="absolute right-2 top-2 text-neutral-200 hover:text-white p-1 rounded-full hover:bg-neutral-700"
+            onClick={() => setSelectedNode(null)}
+            aria-label="Close panel"
+          >
+            <X size={18} />
+          </button>
+          {!editingLabel ? (
+            <div className="flex items-center justify-center text-xl font-bold text-neutral-200">
+              <span>{selectedNode.data.label}</span>
+              {selectedNode.type !== "start-node" && (
+                <Edit
+                  size={16}
+                  className="ml-2 cursor-pointer hover:text-indigo-300"
+                  onClick={() => setEditingLabel(true)}
+                />
+              )}
+            </div>
+          ) : (
+            <input
+              type="text"
+              value={selectedNode.data.label}
+              className="w-full p-2 text-center text-xl font-bold bg-neutral-800 text-neutral-200 border border-neutral-600 rounded"
+              onChange={(e) => {
+                handleUpdateNode({
+                  ...selectedNode,
+                  data: {
+                    ...selectedNode.data,
+                    label: e.target.value,
+                  },
+                });
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  setEditingLabel(false);
+                }
+              }}
+              onBlur={() => setEditingLabel(false)}
+              autoFocus
+            />
+          )}
+        </div>
+      </div>
+      <div className="flex-1 min-h-0 overflow-hidden">{children}</div>
+    </div>
+  );
+};
+
+const Canva = forwardRef(({ agent }: { agent: Agent | null }, ref) => {
+  const { toast } = useToast();
+  const [nodes, setNodes] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const { screenToFlowPosition } = useReactFlow();
+  const { type, setPointerEvents } = useDnD();
+  const [menu, setMenu] = useState<any>(null);
+  const localRef = useRef<any>(null);
+  const [selectedNode, setSelectedNode] = useState<any>(null);
+  const [activeExecutionNodeId, setActiveExecutionNodeId] = useState<
+    string | null
+  >(null);
+
+  const [editingLabel, setEditingLabel] = useState(false);
+
+  const [hasChanges, setHasChanges] = useState(false);
+
+  const [nodePanelOpen, setNodePanelOpen] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    getFlowData: () => ({
+      nodes,
+      edges,
+    }),
+    setHasChanges,
+    setActiveExecutionNodeId,
+  }));
+
+  // Effect to clear the active node after a timeout
+  useEffect(() => {
+    if (activeExecutionNodeId) {
+      const timer = setTimeout(() => {
+        setActiveExecutionNodeId(null);
+      }, 5000); // Increase to 5 seconds to give more time to visualize
+
+      return () => clearTimeout(timer);
+    }
+  }, [activeExecutionNodeId]);
+
+  useEffect(() => {
+    if (
+      agent?.config?.workflow &&
+      agent.config.workflow.nodes.length > 0 &&
+      agent.config.workflow.edges.length > 0
+    ) {
+      setNodes(
+        (agent.config.workflow.nodes as typeof initialNodes) || initialNodes
+      );
+      setEdges(
+        (agent.config.workflow.edges as typeof initialEdges) || initialEdges
+      );
+    } else {
+      setNodes(initialNodes);
+      setEdges(initialEdges);
+    }
+  }, [agent, setNodes, setEdges]);
+
+  // Update nodes when the active node changes to add visual class
+  useEffect(() => {
+    if (nodes.length > 0) {
+      setNodes((nds: any) =>
+        nds.map((node: any) => {
+          if (node.id === activeExecutionNodeId) {
+            // Add a class to highlight the active node
+            return {
+              ...node,
+              className: "active-execution-node",
+              data: {
+                ...node.data,
+                isExecuting: true,
+              },
+            };
+          } else {
+            // Remove the highlight class
+            const { isExecuting, ...restData } = node.data || {};
+            return {
+              ...node,
+              className: "",
+              data: restData,
+            };
+          }
+        })
+      );
+    }
+  }, [activeExecutionNodeId, setNodes]);
+
+  useEffect(() => {
+    if (agent?.config?.workflow) {
+      const initialNodes = agent.config.workflow.nodes || [];
+      const initialEdges = agent.config.workflow.edges || [];
+
+      if (
+        JSON.stringify(nodes) !== JSON.stringify(initialNodes) ||
+        JSON.stringify(edges) !== JSON.stringify(initialEdges)
+      ) {
+        setHasChanges(true);
+      } else {
+        setHasChanges(false);
+      }
+    }
+  }, [nodes, edges, agent]);
+
+  const [helperLineHorizontal, setHelperLineHorizontal] = useState<
+    number | undefined
+  >(undefined);
+  const [helperLineVertical, setHelperLineVertical] = useState<
+    number | undefined
+  >(undefined);
+
+  const onConnect: OnConnect = useCallback(
+    (connection) => {
+      setEdges((currentEdges) => {
+        if (connection.source === connection.target) {
+          return currentEdges;
+        }
+
+        return addEdge(connection, currentEdges);
+      });
+    },
+    [setEdges]
+  );
+
+  const onConnectEnd = useCallback(
+    (_event: any, connectionState: any) => {
+      setPointerEvents("none");
+
+      if (connectionState.fromHandle?.type === "target") {
+        return;
+      }
+
+      if (!connectionState.isValid) {
+        // Since we're using NodePanel now, we don't need to do anything here
+        // The panel will handle node creation through drag and drop
+      }
+    },
+    [setPointerEvents]
+  );
+
+  const onConnectStart = useCallback(() => {
+    setPointerEvents("auto");
+  }, [setPointerEvents]);
+
+  const customApplyNodeChanges = useCallback(
+    (changes: NodeChange[], nodes: any): any => {
+      // reset the helper lines (clear existing lines, if any)
+      setHelperLineHorizontal(undefined);
+      setHelperLineVertical(undefined);
+
+      // this will be true if it's a single node being dragged
+      // inside we calculate the helper lines and snap position for the position where the node is being moved to
+      if (
+        changes.length === 1 &&
+        changes[0].type === "position" &&
+        changes[0].dragging &&
+        changes[0].position
+      ) {
+        const helperLines = getHelperLines(changes[0], nodes);
+
+        // if we have a helper line, we snap the node to the helper line position
+        // this is being done by manipulating the node position inside the change object
+        changes[0].position.x =
+          helperLines.snapPosition.x ?? changes[0].position.x;
+        changes[0].position.y =
+          helperLines.snapPosition.y ?? changes[0].position.y;
+
+        // if helper lines are returned, we set them so that they can be displayed
+        setHelperLineHorizontal(helperLines.horizontal);
+        setHelperLineVertical(helperLines.vertical);
+      }
+
+      return applyNodeChanges(changes, nodes);
+    },
+    []
+  );
+
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) => {
+      setNodes((nodes) => customApplyNodeChanges(changes, nodes));
+    },
+    [setNodes, customApplyNodeChanges]
+  );
+
+  const getLabelFromNode = (type: string) => {
+    const order = nodes.length;
+
+    switch (type) {
+      case "start-node":
+        return "Start";
+      case "agent-node":
+        return `Agent #${order}`;
+      case "condition-node":
+        return `Condition #${order}`;
+      case "message-node":
+        return `Message #${order}`;
+      case "delay-node":
+        return `Delay #${order}`;
+      default:
+        return "Node";
+    }
+  };
+
+  const handleAddNode = useCallback(
+    (type: any, node: any) => {
+      const newNode: any = {
+        id: String(Date.now()),
+        type,
+        position: node.position,
+        data: {
+          label: getLabelFromNode(type),
+        },
+      };
+
+      setNodes((nodes) => [...nodes, newNode]);
+
+      if (node.targetId) {
+        const newEdge: any = {
+          source: node.targetId,
+          sourceHandle: node.handleId,
+          target: newNode.id,
+          type: "default",
+        };
+
+        const newsEdges: any = [...edges, newEdge];
+
+        setEdges(newsEdges);
+      }
+    },
+    [nodes, setNodes, edges, setEdges]
+  );
+
+  const handleUpdateNode = useCallback(
+    (node: any) => {
+      setNodes((nodes) => {
+        const index = nodes.findIndex((n) => n.id === node.id);
+        if (index !== -1) {
+          nodes[index] = node;
+        }
+        return [...nodes];
+      });
+
+      if (selectedNode && selectedNode.id === node.id) {
+        setSelectedNode(node);
+      }
+    },
+    [setNodes, selectedNode]
+  );
+
+  const handleDeleteEdge = useCallback(
+    (id: any) => {
+      setEdges((edges) => {
+        const left = edges.filter((edge: any) => edge.id !== id);
+        return left;
+      });
+    },
+    [setEdges]
+  );
+
+  const onDragOver = useCallback((event: any) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }, []);
+
+  const onDrop = useCallback(
+    (event: any) => {
+      event.preventDefault();
+
+      if (!type) {
+        return;
+      }
+
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      const newNode: any = {
+        id: String(Date.now()),
+        type,
+        position,
+        data: {
+          label: getLabelFromNode(type),
+        },
+      };
+
+      setNodes((nodes) => [...nodes, newNode]);
+    },
+    [screenToFlowPosition, setNodes, type, getLabelFromNode]
+  );
+
+  const onNodeContextMenu = useCallback(
+    (event: any, node: any) => {
+      event.preventDefault();
+
+      if (node.id === "start-node") {
+        return;
+      }
+
+      if (!localRef.current) {
+        return;
+      }
+
+      const paneBounds = localRef.current.getBoundingClientRect();
+
+      const x = event.clientX - paneBounds.left;
+      const y = event.clientY - paneBounds.top;
+
+      const menuWidth = 200;
+      const menuHeight = 200;
+
+      const left = x + menuWidth > paneBounds.width ? undefined : x;
+      const top = y + menuHeight > paneBounds.height ? undefined : y;
+      const right =
+        x + menuWidth > paneBounds.width ? paneBounds.width - x : undefined;
+      const bottom =
+        y + menuHeight > paneBounds.height ? paneBounds.height - y : undefined;
+
+      setMenu({
+        id: node.id,
+        left,
+        top,
+        right,
+        bottom,
+      });
+    },
+    [setMenu]
+  );
+
+  const onNodeClick = useCallback((event: any, node: any) => {
+    event.preventDefault();
+
+    if (node.type === "start-node") {
+      return;
+    }
+
+    setSelectedNode(node);
+  }, []);
+
+  const onPaneClick = useCallback(() => {
+    setMenu(null);
+    setSelectedNode(null);
+    setNodePanelOpen(false);
+  }, [setMenu, setSelectedNode]);
+
+  return (
+    <div className="h-full w-full bg-[#121212]">
+      <div
+        style={{ position: "relative", height: "100%", width: "100%" }}
+        ref={localRef}
+        className="overflow-hidden"
+      >
+        <ReactFlow
+          nodes={nodes}
+          nodeTypes={nodeTypes}
+          onNodesChange={onNodesChange}
+          edges={edges}
+          edgeTypes={edgeTypes}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          onConnectStart={onConnectStart}
+          onConnectEnd={onConnectEnd}
+          connectionMode={ConnectionMode.Strict}
+          connectionLineType={ConnectionLineType.Bezier}
+          onDrop={onDrop}
+          onDragOver={onDragOver}
+          onPaneClick={onPaneClick}
+          onNodeClick={onNodeClick}
+          onNodeContextMenu={onNodeContextMenu}
+          colorMode="dark"
+          minZoom={0.1}
+          maxZoom={10}
+          fitView={false}
+          defaultViewport={{
+            x: 0,
+            y: 0,
+            zoom: 1,
+          }}
+          elevateEdgesOnSelect
+          elevateNodesOnSelect
+          proOptions={proOptions}
+          connectionLineStyle={{
+            stroke: "gray",
+            strokeWidth: 2,
+            strokeDashoffset: 5,
+            strokeDasharray: 5,
+          }}
+          defaultEdgeOptions={{
+            type: "default",
+            style: {
+              strokeWidth: 3,
+            },
+            data: {
+              handleDeleteEdge,
+            },
+          }}
+        >
+          <Background color="#334155" gap={24} size={1.5} />
+          <MiniMap
+            className="bg-neutral-800/80 border border-neutral-700 rounded-lg shadow-lg"
+            nodeColor={(node) => {
+              switch (node.type) {
+                case "start-node":
+                  return "#10b981";
+                case "agent-node":
+                  return "#3b82f6";
+                case "message-node":
+                  return "#f97316";
+                case "condition-node":
+                  return "#3b82f6";
+                case "delay-node":
+                  return "#eab308";
+                default:
+                  return "#64748b";
+              }
+            }}
+            maskColor="rgba(15, 23, 42, 0.6)"
+          />
+
+          <Controls
+            showInteractive={true}
+            showFitView={true}
+            orientation="vertical"
+            position="bottom-left"
+          />
+          <HelperLines
+            horizontal={helperLineHorizontal}
+            vertical={helperLineVertical}
+          />
+          {menu && <ContextMenu onClick={onPaneClick} {...menu} />}
+
+          {nodePanelOpen ? (
+            <Panel position="top-right">
+              <div className="flex items-start">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setNodePanelOpen(false)}
+                  className="mr-2 h-8 w-8 rounded-full bg-slate-800 border-slate-700 text-slate-400 hover:text-white hover:bg-slate-700"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+                <NodePanel />
+              </div>
+            </Panel>
+          ) : (
+            <Panel position="top-right">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setNodePanelOpen(true)}
+                className="h-8 w-8 rounded-full bg-slate-800 border-slate-700 text-slate-400 hover:text-white hover:bg-slate-700"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+            </Panel>
+          )}
+        </ReactFlow>
+
+        {/* Overlay when form is open on smaller screens */}
+        {selectedNode && (
+          <div
+            className="md:hidden fixed inset-0 bg-black bg-opacity-50 z-[5] transition-opacity duration-300"
+            onClick={() => setSelectedNode(null)}
+          />
+        )}
+
+        <div
+          className="absolute left-0 top-0 z-10 h-full w-[350px] bg-neutral-900 shadow-lg transition-all duration-300 ease-in-out border-r border-neutral-700 flex flex-col"
+          style={{
+            transform: selectedNode ? "translateX(0)" : "translateX(-100%)",
+            opacity: selectedNode ? 1 : 0,
+          }}
+        >
+          {selectedNode ? (
+            <NodeFormWrapper
+              selectedNode={selectedNode}
+              editingLabel={editingLabel}
+              setEditingLabel={setEditingLabel}
+              handleUpdateNode={handleUpdateNode}
+              setSelectedNode={setSelectedNode}
+            >
+              {selectedNode.type === "agent-node" && (
+                <AgentForm
+                  selectedNode={selectedNode}
+                  handleUpdateNode={handleUpdateNode}
+                  setEdges={setEdges}
+                  setIsOpen={() => {}}
+                  setSelectedNode={setSelectedNode}
+                />
+              )}
+              {selectedNode.type === "condition-node" && (
+                <ConditionForm
+                  selectedNode={selectedNode}
+                  handleUpdateNode={handleUpdateNode}
+                  setEdges={setEdges}
+                  setIsOpen={() => {}}
+                  setSelectedNode={setSelectedNode}
+                />
+              )}
+              {selectedNode.type === "message-node" && (
+                <MessageForm
+                  selectedNode={selectedNode}
+                  handleUpdateNode={handleUpdateNode}
+                  setEdges={setEdges}
+                  setIsOpen={() => {}}
+                  setSelectedNode={setSelectedNode}
+                />
+              )}
+              {selectedNode.type === "delay-node" && (
+                <DelayForm
+                  selectedNode={selectedNode}
+                  handleUpdateNode={handleUpdateNode}
+                  setEdges={setEdges}
+                  setIsOpen={() => {}}
+                  setSelectedNode={setSelectedNode}
+                />
+              )}
+            </NodeFormWrapper>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+Canva.displayName = "Canva";
+
+export default Canva;
diff --git a/frontend/app/agents/workflows/ContextMenu.tsx b/frontend/app/agents/workflows/ContextMenu.tsx
new file mode 100644
index 00000000..1792ae63
--- /dev/null
+++ b/frontend/app/agents/workflows/ContextMenu.tsx
@@ -0,0 +1,118 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/ContextMenu.tsx                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { useReactFlow, Node, Edge } from "@xyflow/react";
+import { Copy, Trash2 } from "lucide-react";
+import React, { useCallback } from "react";
+
+interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  id: string;
+  top?: number | string;
+  left?: number | string;
+  right?: number | string;
+  bottom?: number | string;
+}
+
+export default function ContextMenu({
+  id,
+  top,
+  left,
+  right,
+  bottom,
+  ...props
+}: ContextMenuProps) {
+  const { getNode, setNodes, addNodes, setEdges } = useReactFlow();
+
+  const duplicateNode = useCallback(() => {
+    const node = getNode(id);
+
+    if (!node) {
+      console.error(`Node with id ${id} not found.`);
+      return;
+    }
+
+    const position = {
+      x: node.position.x + 50,
+      y: node.position.y + 50,
+    };
+
+    addNodes({
+      ...node,
+      id: `${node.id}-copy`,
+      position,
+      selected: false,
+      dragging: false,
+    });
+  }, [id, getNode, addNodes]);
+
+  const deleteNode = useCallback(() => {
+    setNodes((nodes: Node[]) => nodes.filter((node) => node.id !== id));
+    setEdges((edges: Edge[]) =>
+      edges.filter((edge) => edge.source !== id && edge.target !== id),
+    );
+  }, [id, setNodes, setEdges]);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: top !== undefined ? `${top}px` : undefined,
+        left: left !== undefined ? `${left}px` : undefined,
+        right: right !== undefined ? `${right}px` : undefined,
+        bottom: bottom !== undefined ? `${bottom}px` : undefined,
+        zIndex: 10,
+      }}
+      className="context-menu rounded-md border p-3 shadow-lg border-neutral-700 bg-neutral-800"
+      {...props}
+    >
+      <p className="mb-2 text-sm font-semibold text-neutral-200">
+        Actions
+      </p>
+      <button
+        onClick={duplicateNode}
+        className="mb-1 flex w-full flex-row items-center rounded-md px-2 py-1 text-sm hover:bg-neutral-700"
+      >
+        <Copy
+          size={16}
+          className="mr-2 flex-shrink-0 text-blue-300"
+        />
+        <span className="text-neutral-300">Duplicate</span>
+      </button>
+      <button
+        onClick={deleteNode}
+        className="flex w-full flex-row items-center rounded-md px-2 py-1 text-sm hover:bg-neutral-700"
+      >
+        <Trash2
+          size={16}
+          className="mr-2 flex-shrink-0 text-red-300"
+        />
+        <span className="text-neutral-300">Delete</span>
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/workflows/HelperLines.tsx b/frontend/app/agents/workflows/HelperLines.tsx
new file mode 100644
index 00000000..79c36990
--- /dev/null
+++ b/frontend/app/agents/workflows/HelperLines.tsx
@@ -0,0 +1,98 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/HelperLines.tsx                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { ReactFlowState, useStore } from "@xyflow/react";
+import { CSSProperties, useEffect, useRef } from "react";
+
+const canvasStyle: CSSProperties = {
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  zIndex: 10,
+  pointerEvents: "none",
+};
+
+const storeSelector = (state: ReactFlowState) => ({
+  width: state.width,
+  height: state.height,
+  transform: state.transform,
+});
+
+export type HelperLinesProps = {
+  horizontal?: number;
+  vertical?: number;
+};
+
+// a simple component to display the helper lines
+// it puts a canvas on top of the React Flow pane and draws the lines using the canvas API
+function HelperLinesRenderer({ horizontal, vertical }: HelperLinesProps) {
+  const { width, height, transform } = useStore(storeSelector);
+
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+
+    if (!ctx || !canvas) {
+      return;
+    }
+
+    const dpi = window.devicePixelRatio;
+    canvas.width = width * dpi;
+    canvas.height = height * dpi;
+
+    ctx.scale(dpi, dpi);
+    ctx.clearRect(0, 0, width, height);
+    ctx.strokeStyle = "#1d5ade";
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 5]);
+
+    if (typeof vertical === "number") {
+      ctx.moveTo(vertical * transform[2] + transform[0], 0);
+      ctx.lineTo(vertical * transform[2] + transform[0], height);
+      ctx.stroke();
+    }
+
+    if (typeof horizontal === "number") {
+      ctx.moveTo(0, horizontal * transform[2] + transform[1]);
+      ctx.lineTo(width, horizontal * transform[2] + transform[1]);
+      ctx.stroke();
+    }
+  }, [width, height, transform, horizontal, vertical]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="react-flow__canvas"
+      style={canvasStyle}
+    />
+  );
+}
+
+export default HelperLinesRenderer;
diff --git a/frontend/app/agents/workflows/NodePanel.tsx b/frontend/app/agents/workflows/NodePanel.tsx
new file mode 100644
index 00000000..070624c3
--- /dev/null
+++ b/frontend/app/agents/workflows/NodePanel.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import {
+  User,
+  MessageSquare,
+  Filter,
+  Clock,
+  Plus,
+  MenuSquare,
+  Layers,
+  MoveRight,
+} from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useDnD } from "@/contexts/DnDContext";
+
+export function NodePanel() {
+  const [activeTab, setActiveTab] = useState("content");
+  const { setType } = useDnD();
+
+  const nodeTypes = {
+    content: [
+      {
+        id: "agent-node",
+        name: "Agent",
+        icon: User,
+        color: "text-blue-400",
+        bgColor: "bg-blue-950/40",
+        borderColor: "border-blue-500/30",
+        hoverColor: "group-hover:bg-blue-900/50",
+        glowColor: "group-hover:shadow-blue-500/20",
+        description: "Add an AI agent to process messages and execute tasks",
+      },
+      {
+        id: "message-node",
+        name: "Message",
+        icon: MessageSquare,
+        color: "text-orange-400",
+        bgColor: "bg-orange-950/40",
+        borderColor: "border-orange-500/30",
+        hoverColor: "group-hover:bg-orange-900/50",
+        glowColor: "group-hover:shadow-orange-500/20",
+        description: "Send a message to users or other nodes in the workflow",
+      },
+    ],
+    logic: [
+      {
+        id: "condition-node",
+        name: "Condition",
+        icon: Filter,
+        color: "text-purple-400",
+        bgColor: "bg-purple-950/40",
+        borderColor: "border-purple-500/30",
+        hoverColor: "group-hover:bg-purple-900/50",
+        glowColor: "group-hover:shadow-purple-500/20",
+        description:
+          "Create a decision point with multiple outcomes based on conditions",
+      },
+      {
+        id: "delay-node",
+        name: "Delay",
+        icon: Clock,
+        color: "text-yellow-400",
+        bgColor: "bg-yellow-950/40",
+        borderColor: "border-yellow-500/30",
+        hoverColor: "group-hover:bg-yellow-900/50",
+        glowColor: "group-hover:shadow-yellow-500/20",
+        description: "Add a time delay between workflow operations",
+      },
+    ],
+  };
+
+  const onDragStart = (event: React.DragEvent, nodeType: string) => {
+    event.dataTransfer.setData("application/reactflow", nodeType);
+    event.dataTransfer.effectAllowed = "move";
+    setType(nodeType);
+  };
+
+  const handleNodeAdd = (nodeType: string) => {
+    setType(nodeType);
+  };
+
+  return (
+    <div className="bg-slate-900/70 backdrop-blur-md border border-slate-700/50 rounded-xl shadow-xl w-[320px] transition-all duration-300 ease-in-out overflow-hidden">
+      <div className="px-4 pt-4 pb-2 border-b border-slate-700/50">
+        <div className="flex items-center gap-2 text-slate-200">
+          <Layers className="h-5 w-5 text-indigo-400" />
+          <h3 className="font-medium">Workflow Nodes</h3>
+        </div>
+        <p className="text-xs text-slate-400 mt-1">
+          Drag nodes to the canvas or click to add
+        </p>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <div className="px-4 pt-3">
+          <TabsList className="w-full bg-slate-800/50 grid grid-cols-2 p-1 rounded-lg">
+            <TabsTrigger
+              value="content"
+              className={cn(
+                "rounded-md text-xs font-medium transition-all",
+                "data-[state=active]:bg-gradient-to-br data-[state=active]:from-blue-900/30 data-[state=active]:to-indigo-900/30",
+                "data-[state=active]:text-blue-300 data-[state=active]:shadow-sm",
+                "data-[state=inactive]:text-slate-400"
+              )}
+            >
+              <MenuSquare className="h-3.5 w-3.5 mr-1.5" />
+              Content
+            </TabsTrigger>
+            <TabsTrigger
+              value="logic"
+              className={cn(
+                "rounded-md text-xs font-medium transition-all",
+                "data-[state=active]:bg-gradient-to-br data-[state=active]:from-yellow-900/30 data-[state=active]:to-orange-900/30",
+                "data-[state=active]:text-yellow-300 data-[state=active]:shadow-sm",
+                "data-[state=inactive]:text-slate-400"
+              )}
+            >
+              <Filter className="h-3.5 w-3.5 mr-1.5" />
+              Logic
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        <TabsContent value="content" className="p-3 space-y-2 mt-0">
+          {nodeTypes.content.map((node) => (
+            <TooltipProvider key={node.id} delayDuration={300}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    draggable
+                    onDragStart={(event) => onDragStart(event, node.id)}
+                    className={cn(
+                      "group flex items-center gap-3 p-3.5 border rounded-lg cursor-grab transition-all duration-300",
+                      "backdrop-blur-sm hover:shadow-lg",
+                      node.borderColor,
+                      node.bgColor,
+                      node.glowColor
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300",
+                        "bg-slate-800/80 group-hover:scale-105",
+                        node.hoverColor
+                      )}
+                    >
+                      <node.icon className={cn("h-5 w-5", node.color)} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <span
+                        className={cn("font-medium block text-sm", node.color)}
+                      >
+                        {node.name}
+                      </span>
+                      <span className="text-xs text-slate-400 truncate block">
+                        {node.description}
+                      </span>
+                    </div>
+                    <div
+                      onClick={() => handleNodeAdd(node.id)}
+                      className={cn(
+                        "flex items-center justify-center h-7 w-7 rounded-md bg-slate-800/60 text-slate-400",
+                        "hover:bg-gradient-to-r hover:text-white transition-all",
+                        node.id === "agent-node"
+                          ? "hover:from-blue-800 hover:to-blue-600"
+                          : "hover:from-orange-800 hover:to-orange-600"
+                      )}
+                    >
+                      <Plus size={16} />
+                    </div>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="right"
+                  className="bg-slate-900 border-slate-700 text-slate-200"
+                >
+                  <div className="p-1 max-w-[200px]">
+                    <p className="font-medium text-sm">{node.name} Node</p>
+                    <p className="text-xs text-slate-400 mt-1">
+                      {node.description}
+                    </p>
+                    <div className="flex items-center mt-2 pt-2 border-t border-slate-700/50 text-xs text-slate-400">
+                      <MoveRight className="h-3 w-3 mr-1.5" />
+                      <span>Drag to canvas or click + to add</span>
+                    </div>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ))}
+        </TabsContent>
+
+        <TabsContent value="logic" className="p-3 space-y-2 mt-0">
+          {nodeTypes.logic.map((node) => (
+            <TooltipProvider key={node.id} delayDuration={300}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    draggable
+                    onDragStart={(event) => onDragStart(event, node.id)}
+                    className={cn(
+                      "group flex items-center gap-3 p-3.5 border rounded-lg cursor-grab transition-all duration-300",
+                      "backdrop-blur-sm hover:shadow-lg",
+                      node.borderColor,
+                      node.bgColor,
+                      node.glowColor
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300",
+                        "bg-slate-800/80 group-hover:scale-105",
+                        node.hoverColor
+                      )}
+                    >
+                      <node.icon className={cn("h-5 w-5", node.color)} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <span
+                        className={cn("font-medium block text-sm", node.color)}
+                      >
+                        {node.name}
+                      </span>
+                      <span className="text-xs text-slate-400 truncate block">
+                        {node.description}
+                      </span>
+                    </div>
+                    <div
+                      onClick={() => handleNodeAdd(node.id)}
+                      className={cn(
+                        "flex items-center justify-center h-7 w-7 rounded-md bg-slate-800/60 text-slate-400",
+                        "hover:bg-gradient-to-r hover:text-white transition-all",
+                        node.id === "condition-node"
+                          ? "hover:from-purple-800 hover:to-purple-600"
+                          : "hover:from-yellow-800 hover:to-yellow-600"
+                      )}
+                    >
+                      <Plus size={16} />
+                    </div>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="right"
+                  className="bg-slate-900 border-slate-700 text-slate-200"
+                >
+                  <div className="p-1 max-w-[200px]">
+                    <p className="font-medium text-sm">{node.name} Node</p>
+                    <p className="text-xs text-slate-400 mt-1">
+                      {node.description}
+                    </p>
+                    <div className="flex items-center mt-2 pt-2 border-t border-slate-700/50 text-xs text-slate-400">
+                      <MoveRight className="h-3 w-3 mr-1.5" />
+                      <span>Drag to canvas or click + to add</span>
+                    </div>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ))}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/frontend/app/agents/workflows/canva.css b/frontend/app/agents/workflows/canva.css
new file mode 100644
index 00000000..bd309762
--- /dev/null
+++ b/frontend/app/agents/workflows/canva.css
@@ -0,0 +1,188 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/canva.css                                       │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+.react-flow.dark {
+  --xy-background-color-default: transparent;
+}
+
+.react-flow__panel {
+  box-shadow: none;
+  padding: 5px;
+}
+
+.react-flow__controls {
+  background-color: rgba(30, 30, 30, 0.8);
+  backdrop-filter: blur(4px);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(70, 70, 70, 0.5);
+  padding: 4px;
+}
+
+.react-flow__controls-button {
+  padding: 6px;
+  width: 32px;
+  height: 32px;
+  margin: 4px 0;
+  border: none !important;
+  background-color: rgba(40, 40, 40, 0.8) !important;
+  color: #a0a0a0 !important;
+  border-radius: 6px !important;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.react-flow__controls-button:hover {
+  background-color: rgba(60, 60, 60, 0.9) !important;
+  color: #ffffff !important;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.react-flow__controls-button svg {
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
+.react-flow__controls-button[data-action="zoom-in"] {
+  border-bottom: 1px solid rgba(70, 70, 70, 0.5) !important;
+}
+
+.react-flow__controls-button[data-action="zoom-out"] {
+  border-bottom: 1px solid rgba(70, 70, 70, 0.5) !important;
+}
+
+/* Hide scrollbar for all browsers while maintaining scroll functionality */
+.scrollbar-hide {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+  width: 0;
+  height: 0;
+  background: transparent;
+}
+
+/* Animated dashed edge for flow edges */
+.edge-dashed-animated {
+  stroke-dasharray: 6;
+  stroke-dashoffset: 0;
+  animation: dash 0.5s linear infinite;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: -12;
+  }
+}
+
+/* Edges styling */
+.react-flow__edge-path {
+  stroke: #10b981; /* Emerald color for edges */
+  stroke-width: 2;
+}
+
+.react-flow__edge.selected .react-flow__edge-path {
+  stroke: #3b82f6; /* Blue color for selected edges */
+  stroke-width: 3;
+}
+
+/* Node handle styling */
+.react-flow__handle {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #10b981;
+  border: 2px solid #0d9488;
+}
+
+.react-flow__handle:hover {
+  background-color: #3b82f6;
+  border-color: #2563eb;
+}
+
+/* Nó em execução */
+.active-execution-node {
+  animation: pulse-execution 1.5s infinite;
+  filter: drop-shadow(0 0 15px rgba(5, 212, 114, 0.9));
+  z-index: 10;
+  transform: scale(1.03);
+  transition: transform 0.3s ease-in-out;
+}
+
+@keyframes pulse-execution {
+  0% {
+    box-shadow: 0 0 0 0 rgba(5, 212, 114, 0.9);
+  }
+  70% {
+    box-shadow: 0 0 0 15px rgba(5, 212, 114, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(5, 212, 114, 0);
+  }
+}
+
+.react-flow__node[data-is-executing="true"] {
+  filter: drop-shadow(0 0 15px rgba(5, 212, 114, 0.9));
+  transform: scale(1.03);
+  transition: transform 0.3s ease-in-out;
+}
+
+.react-flow__node[data-is-executing="true"]::before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  right: -5px;
+  bottom: -5px;
+  border: 2px solid #05d472;
+  border-radius: 8px;
+  animation: pulse-border 1.5s infinite;
+  z-index: -1;
+}
+
+@keyframes pulse-border {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  70% {
+    opacity: 0.3;
+    transform: scale(1.03);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/agents/workflows/edges/DefaultEdge.tsx b/frontend/app/agents/workflows/edges/DefaultEdge.tsx
new file mode 100644
index 00000000..5b8080dd
--- /dev/null
+++ b/frontend/app/agents/workflows/edges/DefaultEdge.tsx
@@ -0,0 +1,119 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/edges/DefaultEdge.tsx                           │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getSmoothStepPath,
+  useReactFlow,
+} from "@xyflow/react";
+import { Trash2 } from "lucide-react";
+
+export default function DefaultEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  selected,
+}: EdgeProps) {
+  const { setEdges } = useReactFlow();
+
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 15,
+  });
+
+  const onEdgeClick = () => {
+    console.log("onEdgeClick", id);
+    setEdges((edges) => edges.filter((edge) => edge.id !== id));
+  };
+
+  return (
+    <>
+      <svg>
+        <defs>
+          <marker
+            id="arrowhead"
+            viewBox="0 0 10 16"
+            refX="12"
+            refY="8"
+            markerWidth="4"
+            markerHeight="5"
+            orient="auto"
+          >
+            <path d="M 0 0 L 10 8 L 0 16 z" fill="gray" />
+          </marker>
+        </defs>
+      </svg>
+
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        className="edge-dashed-animated"
+        style={{
+          ...style,
+          stroke: '#10B981',
+          strokeWidth: 3,
+        }}
+        markerEnd="url(#arrowhead)"
+      />
+
+      {selected && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: "absolute",
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              fontSize: 12,
+              pointerEvents: "all",
+              zIndex: 1000,
+            }}
+            className="nodrag nopan"
+          >
+            <button
+              className="rounded-full bg-white p-1 shadow-md"
+              onClick={onEdgeClick}
+            >
+              <Trash2 className="text-red-500" size={16} />
+            </button>
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}
diff --git a/frontend/app/agents/workflows/edges/index.ts b/frontend/app/agents/workflows/edges/index.ts
new file mode 100644
index 00000000..89ddac61
--- /dev/null
+++ b/frontend/app/agents/workflows/edges/index.ts
@@ -0,0 +1,41 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/edges/index.ts                                  │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import type { Edge, EdgeTypes } from "@xyflow/react";
+
+import DefaultEdge from "./DefaultEdge";
+
+export const initialEdges = [
+  // { id: "a->c", source: "a", target: "c", animated: true },
+  // { id: "b->d", source: "b", target: "d" },
+  // { id: "c->d", source: "c", target: "d", animated: true },
+] satisfies Edge[];
+
+export const edgeTypes = {
+  default: DefaultEdge,
+} satisfies EdgeTypes;
diff --git a/frontend/app/agents/workflows/nodes/BaseNode.tsx b/frontend/app/agents/workflows/nodes/BaseNode.tsx
new file mode 100644
index 00000000..673551fd
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/BaseNode.tsx
@@ -0,0 +1,166 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/BaseNode.tsx                              │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { Handle, Position } from "@xyflow/react";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { useDnD } from "@/contexts/DnDContext";
+
+export function BaseNode({
+  selected,
+  hasTarget,
+  children,
+  borderColor,
+  isExecuting
+}: {
+  selected: boolean;
+  hasTarget: boolean;
+  children: React.ReactNode;
+  borderColor: string;
+  isExecuting?: boolean;
+}) {
+  const { pointerEvents } = useDnD();
+
+  // Border and background color mapping
+  const colorStyles = {
+    blue: {
+      border: "border-blue-700/70 hover:border-blue-500",
+      gradient: "bg-gradient-to-br from-blue-950/40 to-neutral-900/90", 
+      glow: "shadow-[0_0_15px_rgba(59,130,246,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(59,130,246,0.3)]"
+    },
+    orange: {
+      border: "border-orange-700/70 hover:border-orange-500",
+      gradient: "bg-gradient-to-br from-orange-950/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(249,115,22,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(249,115,22,0.3)]"
+    },
+    green: {
+      border: "border-green-700/70 hover:border-green-500",
+      gradient: "bg-gradient-to-br from-green-950/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(34,197,94,0.15)]", 
+      selectedGlow: "shadow-[0_0_25px_rgba(34,197,94,0.3)]"
+    },
+    red: {
+      border: "border-red-700/70 hover:border-red-500", 
+      gradient: "bg-gradient-to-br from-red-950/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(239,68,68,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(239,68,68,0.3)]"
+    },
+    yellow: {
+      border: "border-yellow-700/70 hover:border-yellow-500",
+      gradient: "bg-gradient-to-br from-yellow-950/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(234,179,8,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(234,179,8,0.3)]"
+    },
+    purple: {
+      border: "border-purple-700/70 hover:border-purple-500",
+      gradient: "bg-gradient-to-br from-purple-950/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(168,85,247,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(168,85,247,0.3)]"
+    },
+    indigo: {
+      border: "border-indigo-700/70 hover:border-indigo-500",
+      gradient: "bg-gradient-to-br from-indigo-950/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(99,102,241,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(99,102,241,0.3)]"
+    },
+    pink: {
+      border: "border-pink-700/70 hover:border-pink-500",
+      gradient: "bg-gradient-to-br from-pink-950/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(236,72,153,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(236,72,153,0.3)]"
+    },
+    emerald: {
+      border: "border-emerald-700/70 hover:border-emerald-500",
+      gradient: "bg-gradient-to-br from-emerald-950/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(16,185,129,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(16,185,129,0.3)]"
+    },
+    slate: {
+      border: "border-slate-700/70 hover:border-slate-500",
+      gradient: "bg-gradient-to-br from-slate-800/40 to-neutral-900/90",
+      glow: "shadow-[0_0_15px_rgba(100,116,139,0.15)]",
+      selectedGlow: "shadow-[0_0_25px_rgba(100,116,139,0.3)]"
+    },
+  };
+
+  // Default to blue if color not in mapping
+  const colorStyle = colorStyles[borderColor as keyof typeof colorStyles] || colorStyles.blue;
+  
+  // Selected styles
+  const selectedStyle = {
+    border: "border-green-500/90",
+    glow: colorStyle.selectedGlow
+  };
+  
+  // Executing styles
+  const executingStyle = {
+    border: "border-emerald-500",
+    glow: "shadow-[0_0_25px_rgba(5,212,114,0.5)]"
+  };
+
+  return (
+    <>
+      <div
+        className={cn(
+          "relative z-0 w-[350px] rounded-2xl p-4 border-2 backdrop-blur-sm transition-all duration-300",
+          "shadow-lg hover:shadow-xl",
+          isExecuting ? executingStyle.glow : selected ? selectedStyle.glow : colorStyle.glow,
+          isExecuting ? executingStyle.border : selected ? selectedStyle.border : colorStyle.border,
+          colorStyle.gradient,
+          isExecuting && "active-execution-node"
+        )}
+        style={{
+          backdropFilter: "blur(12px)",
+        }}
+        data-is-executing={isExecuting ? "true" : "false"}
+      >
+        {hasTarget && (
+          <Handle
+            style={{
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              width: "100%",
+              borderRadius: "15px",
+              height: "100%",
+              backgroundColor: "transparent",
+              border: "none",
+              pointerEvents: pointerEvents === "none" ? "none" : "auto",
+            }}
+            type="target"
+            position={Position.Left}
+          />
+        )}
+
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/frontend/app/agents/workflows/nodes/components/agent/AgentChatMessageList.tsx b/frontend/app/agents/workflows/nodes/components/agent/AgentChatMessageList.tsx
new file mode 100644
index 00000000..3eab2058
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/agent/AgentChatMessageList.tsx
@@ -0,0 +1,347 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/agent/AgentChatMessageList.tsx │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 14, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ChevronDown, ChevronRight, Copy, Check } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useState } from "react";
+import { Agent } from "@/types/agent";
+import { InlineDataAttachments } from "@/app/chat/components/InlineDataAttachments";
+
+interface FunctionMessageContent {
+    title: string;
+    content: string;
+    author?: string;
+}
+
+interface ChatMessage {
+    id: string;
+    content: {
+        parts: any[];
+        role: string;
+    };
+    author: string;
+    timestamp: number;
+}
+
+interface AgentChatMessageListProps {
+    messages: ChatMessage[];
+    agent: Agent;
+    expandedFunctions: Record<string, boolean>;
+    toggleFunctionExpansion: (messageId: string) => void;
+    getMessageText: (message: ChatMessage) => string | FunctionMessageContent;
+    containsMarkdown: (text: string) => boolean;
+}
+
+export function AgentChatMessageList({
+    messages,
+    agent,
+    expandedFunctions,
+    toggleFunctionExpansion,
+    getMessageText,
+    containsMarkdown,
+}: AgentChatMessageListProps) {
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    // Scroll to bottom whenever messages change
+    useEffect(() => {
+        if (messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [messages]);
+
+    return (
+        <div className="space-y-6">
+            {messages.map((message) => {
+                const messageContent = getMessageText(message);
+                const isExpanded = expandedFunctions[message.id] || false;
+                const isUser = message.author === "user";
+                const agentColor = "bg-emerald-400";
+                const hasFunctionCall = message.content.parts.some(
+                    (part) => part.functionCall || part.function_call
+                );
+                const hasFunctionResponse = message.content.parts.some(
+                    (part) => part.functionResponse || part.function_response
+                );
+                const isFunctionMessage = hasFunctionCall || hasFunctionResponse;
+                const isTaskExecutor = typeof messageContent === "object" &&
+                    "author" in messageContent &&
+                    typeof messageContent.author === "string" &&
+                    messageContent.author.endsWith("- Task executor");
+                
+                const inlineDataParts = message.content.parts.filter(part => part.inline_data);
+                const hasInlineData = inlineDataParts.length > 0;
+                
+                const isWorkflowNode = message.author && message.author.startsWith('workflow-node:');
+                const nodeId = isWorkflowNode ? message.author.split(':')[1] : null;
+
+                return (
+                    <div
+                        key={message.id}
+                        className="flex w-full"
+                        style={{
+                            justifyContent: isUser ? "flex-end" : "flex-start"
+                        }}
+                    >
+                        <div
+                            className="flex gap-3 max-w-[90%]"
+                            style={{
+                                flexDirection: isUser ? "row-reverse" : "row"
+                            }}
+                        >
+                            <Avatar className={isUser ? "bg-[#333]" : agentColor}>
+                                <AvatarFallback>
+                                    {isUser ? "U" : agent.name[0] || "A"}
+                                </AvatarFallback>
+                            </Avatar>
+                            <div
+                                className={`rounded-lg p-3 ${isFunctionMessage || isTaskExecutor
+                                    ? "bg-[#333] text-emerald-400 font-mono text-sm"
+                                    : isUser
+                                        ? "bg-emerald-400 text-black"
+                                        : "bg-[#222] text-white"
+                                    } overflow-hidden relative group`}
+                                style={{
+                                    wordBreak: "break-word",
+                                    maxWidth: "calc(100% - 3rem)",
+                                    width: "100%",
+                                    ...(isWorkflowNode ? {
+                                        borderLeft: '3px solid #05d472',
+                                        boxShadow: '0 0 10px rgba(5, 212, 114, 0.2)'
+                                    } : {})
+                                }}
+                            >
+                                {isWorkflowNode && (
+                                    <div className="text-xs text-emerald-500 mb-1 flex items-center space-x-1 bg-emerald-950/30 p-1 rounded">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3 mr-1">
+                                            <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                                        </svg>
+                                        <span>Node {nodeId} is running</span>
+                                    </div>
+                                )}
+                                
+                                {isFunctionMessage || isTaskExecutor ? (
+                                    <div className="w-full">
+                                        <div
+                                            className="flex items-center gap-2 cursor-pointer hover:bg-[#444] rounded px-1 py-0.5 transition-colors"
+                                            onClick={() => toggleFunctionExpansion(message.id)}
+                                        >
+                                            {typeof messageContent === "object" &&
+                                                "title" in messageContent && (
+                                                    <>
+                                                        <div className="flex-1 font-semibold">
+                                                            {(messageContent as FunctionMessageContent).title}
+                                                        </div>
+                                                        <div className="flex items-center justify-center w-5 h-5 text-emerald-400">
+                                                            {isExpanded ? (
+                                                                <ChevronDown className="h-4 w-4" />
+                                                            ) : (
+                                                                <ChevronRight className="h-4 w-4" />
+                                                            )}
+                                                        </div>
+                                                    </>
+                                                )}
+                                            {isTaskExecutor && (
+                                                <>
+                                                    <div className="flex-1 font-semibold">
+                                                        Task Execution
+                                                    </div>
+                                                    <div className="flex items-center justify-center w-5 h-5 text-emerald-400">
+                                                        {isExpanded ? (
+                                                            <ChevronDown className="h-4 w-4" />
+                                                        ) : (
+                                                            <ChevronRight className="h-4 w-4" />
+                                                        )}
+                                                    </div>
+                                                </>
+                                            )}
+                                        </div>
+
+                                        {isExpanded && (
+                                            <div className="mt-2 pt-2 border-t border-[#555]">
+                                                {typeof messageContent === "object" &&
+                                                    "content" in messageContent && (
+                                                        <div className="max-w-full overflow-x-auto">
+                                                            <pre className="whitespace-pre-wrap text-xs max-w-full" style={{
+                                                                wordWrap: "break-word",
+                                                                maxWidth: "100%",
+                                                                wordBreak: "break-all"
+                                                            }}>
+                                                                {(messageContent as FunctionMessageContent).content}
+                                                            </pre>
+                                                        </div>
+                                                    )}
+                                            </div>
+                                        )}
+                                    </div>
+                                ) : (
+                                    <div className="markdown-content break-words max-w-full overflow-x-auto">
+                                        {typeof messageContent === "object" &&
+                                            "author" in messageContent &&
+                                            messageContent.author !== "user" &&
+                                            !isTaskExecutor && (
+                                                <div className="text-xs text-neutral-400 mb-1">
+                                                    {messageContent.author}
+                                                </div>
+                                            )}
+                                        {((typeof messageContent === "string" &&
+                                            containsMarkdown(messageContent)) ||
+                                            (typeof messageContent === "object" &&
+                                                "content" in messageContent &&
+                                                typeof messageContent.content === "string" &&
+                                                containsMarkdown(messageContent.content))) &&
+                                            !isTaskExecutor ? (
+                                            <ReactMarkdown
+                                                remarkPlugins={[remarkGfm]}
+                                                components={{
+                                                    h1: ({ ...props }) => (
+                                                        <h1 className="text-xl font-bold my-4" {...props} />
+                                                    ),
+                                                    h2: ({ ...props }) => (
+                                                        <h2 className="text-lg font-bold my-3" {...props} />
+                                                    ),
+                                                    h3: ({ ...props }) => (
+                                                        <h3 className="text-base font-bold my-2" {...props} />
+                                                    ),
+                                                    h4: ({ ...props }) => (
+                                                        <h4 className="font-semibold my-2" {...props} />
+                                                    ),
+                                                    p: ({ ...props }) => <p className="mb-3" {...props} />,
+                                                    ul: ({ ...props }) => (
+                                                        <ul
+                                                            className="list-disc pl-6 mb-3 space-y-1"
+                                                            {...props}
+                                                        />
+                                                    ),
+                                                    ol: ({ ...props }) => (
+                                                        <ol
+                                                            className="list-decimal pl-6 mb-3 space-y-1"
+                                                            {...props}
+                                                        />
+                                                    ),
+                                                    li: ({ ...props }) => <li className="mb-1" {...props} />,
+                                                    a: ({ ...props }) => (
+                                                        <a
+                                                            className="text-emerald-400 underline hover:opacity-80 transition-opacity"
+                                                            target="_blank"
+                                                            rel="noopener noreferrer"
+                                                            {...props}
+                                                        />
+                                                    ),
+                                                    blockquote: ({ ...props }) => (
+                                                        <blockquote
+                                                            className="border-l-4 border-[#444] pl-4 py-1 italic my-3 text-neutral-300"
+                                                            {...props}
+                                                        />
+                                                    ),
+                                                    code: ({ className, children, ...props }: any) => {
+                                                        const match = /language-(\w+)/.exec(className || "");
+                                                        const isInline = !match && typeof children === "string" && !children.includes("\n");
+                                                        
+                                                        if (isInline) {
+                                                            return (
+                                                                <code
+                                                                    className="bg-[#333] px-1.5 py-0.5 rounded text-emerald-400 text-sm font-mono"
+                                                                    {...props}
+                                                                >
+                                                                    {children}
+                                                                </code>
+                                                            );
+                                                        }
+                                                        
+                                                        return (
+                                                            <div className="my-3 relative">
+                                                                <div className="bg-[#1a1a1a] rounded-t-md border-b border-[#333] p-2 text-xs text-neutral-400">
+                                                                    <span>{match?.[1] || "Code"}</span>
+                                                                </div>
+                                                                <pre className="bg-[#1a1a1a] p-3 rounded-b-md overflow-x-auto whitespace-pre text-sm">
+                                                                    <code {...props}>{children}</code>
+                                                                </pre>
+                                                            </div>
+                                                        );
+                                                    },
+                                                    table: ({ ...props }) => (
+                                                        <div className="overflow-x-auto my-3">
+                                                            <table
+                                                                className="min-w-full border border-[#333] rounded"
+                                                                {...props}
+                                                            />
+                                                        </div>
+                                                    ),
+                                                    thead: ({ ...props }) => (
+                                                        <thead className="bg-[#1a1a1a]" {...props} />
+                                                    ),
+                                                    tbody: ({ ...props }) => <tbody {...props} />,
+                                                    tr: ({ ...props }) => (
+                                                        <tr
+                                                            className="border-b border-[#333] last:border-0"
+                                                            {...props}
+                                                        />
+                                                    ),
+                                                    th: ({ ...props }) => (
+                                                        <th
+                                                            className="px-4 py-2 text-left text-xs font-semibold text-neutral-300"
+                                                            {...props}
+                                                        />
+                                                    ),
+                                                    td: ({ ...props }) => (
+                                                        <td className="px-4 py-2 text-sm" {...props} />
+                                                    ),
+                                                }}
+                                            >
+                                                {typeof messageContent === "string"
+                                                    ? messageContent
+                                                    : messageContent.content}
+                                            </ReactMarkdown>
+                                        ) : (
+                                            <div className="whitespace-pre-wrap">
+                                                {typeof messageContent === "string"
+                                                    ? messageContent
+                                                    : messageContent.content}
+                                            </div>
+                                        )}
+                                        
+                                        {hasInlineData && (
+                                            <InlineDataAttachments parts={inlineDataParts} />
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+            {/* Empty div at the end for auto-scrolling */}
+            <div ref={messagesEndRef} />
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/workflows/nodes/components/agent/AgentForm.tsx b/frontend/app/agents/workflows/nodes/components/agent/AgentForm.tsx
new file mode 100644
index 00000000..604c3ffa
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/agent/AgentForm.tsx
@@ -0,0 +1,631 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/agent/AgentForm.tsx            │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable jsx-a11y/alt-text */
+import { useEdges, useNodes } from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { Agent } from "@/types/agent";
+import { listAgents, listFolders, Folder, getAgent } from "@/services/agentService";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { User, Loader2, Search, FolderIcon, Trash2, Play, MessageSquare, PlayIcon, Plus, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { AgentForm as GlobalAgentForm } from "@/app/agents/forms/AgentForm";
+import { ApiKey, listApiKeys } from "@/services/agentService";
+import { listMCPServers } from "@/services/mcpServerService";
+import { availableModels } from "@/types/aiModels";
+import { MCPServer } from "@/types/mcpServer";
+import { AgentTestChatModal } from "./AgentTestChatModal";
+import { sanitizeAgentName, escapePromptBraces } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const user = typeof window !== "undefined" ? JSON.parse(localStorage.getItem("user") || '{}') : {};
+const clientId: string = user?.client_id ? String(user.client_id) : "";
+
+const agentListStyles = {
+  scrollbarWidth: 'none', /* Firefox */
+  msOverflowStyle: 'none', /* IE and Edge */
+  '::-webkit-scrollbar': {
+    display: 'none' /* Chrome, Safari and Opera */
+  }
+};
+
+export function AgentForm({ selectedNode, handleUpdateNode, setEdges, setIsOpen, setSelectedNode }: {
+  selectedNode: any;
+  handleUpdateNode: any;
+  setEdges: any;
+  setIsOpen: any;
+  setSelectedNode: any;
+}) {
+  const [node, setNode] = useState(selectedNode);
+  const [loading, setLoading] = useState(true);
+  const [loadingFolders, setLoadingFolders] = useState(true);
+  const [loadingCurrentAgent, setLoadingCurrentAgent] = useState(false);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [allAgents, setAllAgents] = useState<Agent[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [folders, setFolders] = useState<Folder[]>([]);
+  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
+  const [selectedAgentType, setSelectedAgentType] = useState<string | null>(null);
+  const [agentTypes, setAgentTypes] = useState<string[]>([]);
+  const [agentFolderId, setAgentFolderId] = useState<string | null>(null);
+  const edges = useEdges();
+  const nodes = useNodes();
+  const [isAgentDialogOpen, setIsAgentDialogOpen] = useState(false);
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [availableMCPs, setAvailableMCPs] = useState<MCPServer[]>([]);
+  const [newAgent, setNewAgent] = useState<Partial<Agent>>({
+    client_id: clientId || "",
+    name: "",
+    description: "",
+    type: "llm",
+    model: "openai/gpt-4.1-nano",
+    instruction: "",
+    api_key_id: "",
+    config: {
+      tools: [],
+      mcp_servers: [],
+      custom_mcp_servers: [],
+      custom_tools: { http_tools: [] },
+      sub_agents: [],
+      agent_tools: [],
+    },
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [isTestModalOpen, setIsTestModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  
+  // Access the canvas reference from localStorage
+  const canvasRef = useRef<any>(null);
+  
+  useEffect(() => {
+    // When the component is mounted, check if there is a canvas reference in the global context
+    if (typeof window !== "undefined") {
+      const workflowsPage = document.querySelector('[data-workflow-page="true"]');
+      if (workflowsPage) {
+        // If we are on the workflows page, try to access the canvas ref
+        const canvasElement = workflowsPage.querySelector('[data-canvas-ref="true"]');
+        if (canvasElement && (canvasElement as any).__reactRef) {
+          canvasRef.current = (canvasElement as any).__reactRef.current;
+        }
+      }
+    }
+  }, []);
+
+  const connectedNode = useMemo(() => {
+    const edge = edges.find((edge: any) => edge.source === selectedNode.id);
+    if (!edge) return null;
+    const node = nodes.find((node: any) => node.id === edge.target);
+    return node || null;
+  }, [edges, nodes, selectedNode.id]);
+  
+  const currentAgent = typeof window !== "undefined" ? 
+    JSON.parse(localStorage.getItem("current_workflow_agent") || '{}') : {};
+  const currentAgentId = currentAgent?.id;
+
+  useEffect(() => {
+    if (selectedNode) {
+      setNode(selectedNode);
+    }
+  }, [selectedNode]);
+
+  useEffect(() => {
+    if (!clientId) return;
+    setLoadingFolders(true);
+    listFolders(clientId)
+      .then((res) => {
+        setFolders(res.data);
+      })
+      .catch((error) => console.error("Error loading folders:", error))
+      .finally(() => setLoadingFolders(false));
+  }, [clientId]);
+
+  useEffect(() => {
+    if (!currentAgentId || !clientId) {
+      return;
+    }
+    
+    setLoadingCurrentAgent(true);
+    
+    getAgent(currentAgentId, clientId)
+      .then((res) => {
+        const agent = res.data;
+        if (agent.folder_id) {
+          setAgentFolderId(agent.folder_id);
+          setSelectedFolderId(agent.folder_id);
+        }
+      })
+      .catch((error) => console.error("Error loading current agent:", error))
+      .finally(() => setLoadingCurrentAgent(false));
+  }, [currentAgentId, clientId]);
+
+  useEffect(() => {
+    if (!clientId) return;
+    
+    if (loadingFolders || loadingCurrentAgent) return;
+    
+    setLoading(true);
+    
+    listAgents(clientId, 0, 100, selectedFolderId || undefined)
+      .then((res) => {
+        const filteredAgents = res.data.filter((agent: Agent) => agent.id !== currentAgentId);
+        setAllAgents(filteredAgents);
+        setAgents(filteredAgents);
+        
+        // Extract unique agent types
+        const types = [...new Set(filteredAgents.map(agent => agent.type))].filter(Boolean);
+        setAgentTypes(types);
+      })
+      .catch((error) => console.error("Error loading agents:", error))
+      .finally(() => setLoading(false));
+  }, [clientId, currentAgentId, selectedFolderId, loadingFolders, loadingCurrentAgent]);
+
+  useEffect(() => {
+    // Apply all filters: search, folder, and type
+    let filtered = allAgents;
+    
+    // Search filter is applied in a separate effect
+    if (searchQuery.trim() !== "") {
+      filtered = filtered.filter((agent) => 
+        agent.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        agent.description?.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+    
+    // Apply agent type filter
+    if (selectedAgentType) {
+      filtered = filtered.filter(agent => agent.type === selectedAgentType);
+    }
+    
+      setAgents(filtered);
+  }, [searchQuery, selectedAgentType, allAgents]);
+
+  useEffect(() => {
+    if (!clientId) return;
+    listApiKeys(clientId).then((res) => setApiKeys(res.data));
+    listMCPServers().then((res) => setAvailableMCPs(res.data));
+  }, [clientId]);
+
+  const handleDeleteEdge = useCallback(() => {
+    const id = edges.find((edge: any) => edge.source === selectedNode.id)?.id;
+    setEdges((edges: any) => {
+      const left = edges.filter((edge: any) => edge.id !== id);
+      return left;
+    });
+  }, [nodes, edges, selectedNode, setEdges]);
+
+  const handleSelectAgent = (agent: Agent) => {
+    const updatedNode = {
+      ...node,
+      data: {
+        ...node.data,
+        agent,
+      },
+    };
+    setNode(updatedNode);
+    handleUpdateNode(updatedNode);
+  };
+
+  const getAgentTypeName = (type: string) => {
+    const agentTypes: Record<string, string> = {
+      llm: "LLM Agent",
+      a2a: "A2A Agent",
+      sequential: "Sequential Agent",
+      parallel: "Parallel Agent",
+      loop: "Loop Agent",
+      workflow: "Workflow Agent",
+      task: "Task Agent",
+    };
+    return agentTypes[type] || type;
+  };
+
+  const handleOpenAgentDialog = () => {
+    setNewAgent({
+      client_id: clientId || "",
+      name: "",
+      description: "",
+      type: "llm",
+      model: "openai/gpt-4.1-nano",
+      instruction: "",
+      api_key_id: "",
+      config: {
+        tools: [],
+        mcp_servers: [],
+        custom_mcp_servers: [],
+        custom_tools: { http_tools: [] },
+        sub_agents: [],
+        agent_tools: [],
+      },
+      folder_id: selectedFolderId || undefined,
+    });
+    setIsAgentDialogOpen(true);
+  };
+
+  const handleSaveAgent = async (agentData: Partial<Agent>) => {
+    setIsLoading(true);
+    try {
+      const sanitizedData = {
+        ...agentData,
+        client_id: clientId,
+        name: agentData.name ? sanitizeAgentName(agentData.name) : agentData.name,
+        instruction: agentData.instruction ? escapePromptBraces(agentData.instruction) : agentData.instruction
+      };
+
+      if (isEditMode && node.data.agent?.id) {
+        // Update existing agent
+        const { updateAgent } = await import("@/services/agentService");
+        const updated = await updateAgent(node.data.agent.id, sanitizedData as any);
+        
+        // Refresh the agent list
+        const res = await listAgents(clientId, 0, 100, selectedFolderId || undefined);
+        const filteredAgents = res.data.filter((agent: Agent) => agent.id !== currentAgentId);
+        setAllAgents(filteredAgents);
+        setAgents(filteredAgents);
+        
+        if (updated.data) {
+          handleSelectAgent(updated.data);
+        }
+      } else {
+        // Create new agent
+        const { createAgent } = await import("@/services/agentService");
+        const created = await createAgent(sanitizedData as any);
+
+        const res = await listAgents(clientId, 0, 100, selectedFolderId || undefined);
+        const filteredAgents = res.data.filter((agent: Agent) => agent.id !== currentAgentId);
+        setAllAgents(filteredAgents);
+        setAgents(filteredAgents);
+
+        if (created.data) {
+          handleSelectAgent(created.data);
+        }
+      }
+      
+      setIsAgentDialogOpen(false);
+      setIsEditMode(false);
+    } catch (e) {
+      console.error("Error saving agent:", e);
+      setIsAgentDialogOpen(false);
+      setIsEditMode(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFolderChange = (value: string) => {
+    setSelectedFolderId(value === "all" ? null : value);
+  };
+  
+  const handleAgentTypeChange = (value: string) => {
+    setSelectedAgentType(value === "all" ? null : value);
+  };
+
+  const getFolderNameById = (id: string) => {
+    const folder = folders.find((f) => f.id === id);
+    return folder?.name || id;
+  };
+
+  const handleEditAgent = () => {
+    if (!node.data.agent) return;
+    
+    setNewAgent({
+      ...node.data.agent,
+      client_id: clientId || "",
+    });
+    
+    setIsEditMode(true);
+    setIsAgentDialogOpen(true);
+  };
+
+  return (
+    <>
+      {isAgentDialogOpen && (
+        <GlobalAgentForm
+          open={isAgentDialogOpen}
+          onOpenChange={(open) => {
+            setIsAgentDialogOpen(open);
+            if (!open) setIsEditMode(false);
+          }}
+          initialValues={newAgent}
+          apiKeys={apiKeys}
+          availableModels={availableModels}
+          availableMCPs={availableMCPs}
+          agents={allAgents}
+          onOpenApiKeysDialog={() => {}}
+          onOpenMCPDialog={() => {}}
+          onOpenCustomMCPDialog={() => {}}
+          onSave={handleSaveAgent}
+          isLoading={isLoading}
+          getAgentNameById={(id) => allAgents.find((a) => a.id === id)?.name || id}
+          clientId={clientId}
+        />
+      )}
+      
+      {/* Agent Test Chat Modal - moved outside of nested divs to render properly */}
+      {isTestModalOpen && node.data.agent && (
+        <AgentTestChatModal
+          open={isTestModalOpen}
+          onOpenChange={setIsTestModalOpen}
+          agent={node.data.agent}
+        />
+      )}
+      
+      <div className="flex flex-col h-full">
+        <div className="p-4 border-b border-neutral-700 flex-shrink-0">
+          <div className="mb-3">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-neutral-500" />
+            <Input
+              placeholder="Search agents..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9 bg-neutral-800 border-neutral-700 text-neutral-200 focus-visible:ring-emerald-500"
+            />
+            </div>
+          </div>
+          
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <Select 
+                value={selectedFolderId ? selectedFolderId : "all"} 
+                onValueChange={handleFolderChange}
+              >
+                <SelectTrigger className="w-full h-9 bg-neutral-800 border-neutral-700 text-neutral-200 focus:ring-emerald-500 focus:ring-offset-0">
+                  <SelectValue placeholder="All folders" />
+                </SelectTrigger>
+                <SelectContent className="bg-neutral-800 border-neutral-700 text-neutral-200">
+                  <SelectItem value="all">All folders</SelectItem>
+                  {folders.map((folder) => (
+                    <SelectItem key={folder.id} value={folder.id}>
+                      {folder.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div className="flex-1">
+              <Select 
+                value={selectedAgentType ? selectedAgentType : "all"} 
+                onValueChange={handleAgentTypeChange}
+              >
+                <SelectTrigger className="w-full h-9 bg-neutral-800 border-neutral-700 text-neutral-200 focus:ring-emerald-500 focus:ring-offset-0">
+                  <SelectValue placeholder="All types" />
+                </SelectTrigger>
+                <SelectContent className="bg-neutral-800 border-neutral-700 text-neutral-200">
+                  <SelectItem value="all">All types</SelectItem>
+                  {agentTypes.map((type) => (
+                    <SelectItem key={type} value={type}>
+                      {getAgentTypeName(type)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col flex-1 min-h-0">
+          <div className="px-4 pt-4 pb-2 flex items-center justify-between flex-shrink-0">
+            <h3 className="text-md font-medium text-neutral-200">
+              {searchQuery ? "Search Results" : "Select an Agent"}
+            </h3>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8 bg-emerald-800 hover:bg-emerald-700 border-emerald-700 text-emerald-100"
+              onClick={() => {
+                setNewAgent({
+                  id: "",
+                  name: "",
+                  client_id: clientId || "",
+                  type: "llm",
+                  model: "",
+                  config: {},
+                  description: "",
+                });
+                setIsEditMode(false);
+                setIsAgentDialogOpen(true);
+              }}
+              aria-label="New Agent"
+            >
+              <Plus size={14} />
+            </Button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto px-4 scrollbar-hide">
+            <div className="space-y-2 pr-2">
+              {agents.length > 0 ? (
+                agents.map((agent) => (
+                  <div
+                    key={agent.id}
+                    className={`p-3 rounded-md cursor-pointer transition-colors group relative ${
+                      node.data.agent?.id === agent.id
+                        ? "bg-emerald-800/20 border border-emerald-600/40"
+                        : "bg-neutral-800 hover:bg-neutral-700 border border-transparent"
+                    }`}
+                    onClick={() => handleSelectAgent(agent)}
+                  >
+                    <div className="flex items-start gap-2">
+                      <div className="bg-neutral-700 rounded-full p-1.5 flex-shrink-0">
+                        <User size={18} className="text-neutral-300" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center justify-between">
+                          <h3 className="font-medium text-neutral-200 truncate">{agent.name}</h3>
+                          <div 
+                            className="ml-auto text-neutral-400 opacity-0 group-hover:opacity-100 hover:text-yellow-500 transition-colors p-1 rounded hover:bg-yellow-900/20"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setNewAgent({
+                                ...agent,
+                                client_id: clientId || "",
+                              });
+                              setIsEditMode(true);
+                              setIsAgentDialogOpen(true);
+                            }}
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="14"
+                              height="14"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            >
+                              <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                              <path d="m15 5 4 4" />
+                            </svg>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2 mt-1">
+                          <Badge
+                            variant="outline"
+                            className="text-xs bg-neutral-700 text-emerald-400 border-neutral-600"
+                          >
+                            {getAgentTypeName(agent.type)}
+                          </Badge>
+                          {agent.model && (
+                            <span className="text-xs text-neutral-400">{agent.model}</span>
+                          )}
+                        </div>
+                        {agent.description && (
+                          <p className="text-sm text-neutral-400 mt-1.5 line-clamp-2">
+                            {agent.description.slice(0, 30)} {agent.description.length > 30 ? "..." : ""}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <div className="text-center py-4 text-neutral-400">
+                  No agents found
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {node.data.agent && (
+          <div className="p-4 border-t border-neutral-700 flex-shrink-0">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-md font-medium text-neutral-200">Selected Agent</h3>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8 bg-neutral-700 hover:bg-neutral-600 border-neutral-600 text-neutral-200"
+                  onClick={() => {
+                    handleUpdateNode({
+                      ...node,
+                      data: {
+                        ...node.data,
+                        agent: null,
+                      },
+                    });
+                  }}
+                  aria-label="Clear agent"
+                >
+                  <X size={14} />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8 bg-neutral-700 hover:bg-neutral-600 border-neutral-600 text-neutral-200"
+                  onClick={handleEditAgent}
+                  aria-label="Edit agent"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                    <path d="m15 5 4 4" />
+                  </svg>
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8 bg-emerald-800 hover:bg-emerald-700 border-emerald-700 text-emerald-100"
+                  onClick={() => setIsTestModalOpen(true)}
+                  aria-label="Test agent"
+                >
+                  <PlayIcon size={14} />
+                </Button>
+              </div>
+            </div>
+            <div className="p-3 rounded-md bg-emerald-800/20 border border-emerald-600/40">
+              <div className="flex items-start gap-2">
+                <div className="bg-emerald-900/50 rounded-full p-1.5 flex-shrink-0">
+                  <User size={18} className="text-emerald-300" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-medium text-neutral-200 truncate">{node.data.agent.name}</h3>
+                  <div className="flex items-center gap-2 mt-1">
+                    <Badge
+                      variant="outline"
+                      className="text-xs bg-emerald-900/50 text-emerald-400 border-emerald-700/50"
+                    >
+                      {getAgentTypeName(node.data.agent.type)}
+                    </Badge>
+                    {node.data.agent.model && (
+                      <span className="text-xs text-neutral-400">{node.data.agent.model}</span>
+                    )}
+                  </div>
+                  {node.data.agent.description && (
+                    <p className="text-sm text-neutral-400 mt-1.5 line-clamp-2">
+                      {node.data.agent.description.slice(0, 30)} {node.data.agent.description.length > 30 ? "..." : ""}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/frontend/app/agents/workflows/nodes/components/agent/AgentNode.tsx b/frontend/app/agents/workflows/nodes/components/agent/AgentNode.tsx
new file mode 100644
index 00000000..513d0e42
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/agent/AgentNode.tsx
@@ -0,0 +1,176 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/agent/AgentNode.tsx            │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Handle, NodeProps, Position, useEdges } from "@xyflow/react";
+import { MessageCircle, User, Code, ExternalLink, Workflow, GitBranch, RefreshCw, BookOpenCheck, ArrowRight } from "lucide-react";
+import { Agent } from "@/types/agent";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+import { BaseNode } from "../../BaseNode";
+
+export function AgentNode(props: NodeProps) {
+  const { selected, data } = props;
+
+  const edges = useEdges();
+
+  const isHandleConnected = (handleId: string) => {
+    return edges.some(
+      (edge) => edge.source === props.id && edge.sourceHandle === handleId
+    );
+  };
+
+  const isBottomHandleConnected = isHandleConnected("bottom-handle");
+  
+  const agent = data.agent as Agent | undefined;
+  const isExecuting = data.isExecuting as boolean | undefined;
+
+  const getAgentTypeName = (type: string) => {
+    const agentTypes: Record<string, string> = {
+      llm: "LLM Agent",
+      a2a: "A2A Agent",
+      sequential: "Sequential Agent",
+      parallel: "Parallel Agent",
+      loop: "Loop Agent",
+      workflow: "Workflow Agent",
+      task: "Task Agent",
+    };
+    return agentTypes[type] || type;
+  };
+
+  const getAgentTypeIcon = (type: string) => {
+    switch (type) {
+      case "llm":
+        return <Code className="h-4 w-4 text-green-400" />;
+      case "a2a":
+        return <ExternalLink className="h-4 w-4 text-indigo-400" />;
+      case "sequential":
+        return <Workflow className="h-4 w-4 text-yellow-400" />;
+      case "parallel":
+        return <GitBranch className="h-4 w-4 text-purple-400" />;
+      case "loop":
+        return <RefreshCw className="h-4 w-4 text-orange-400" />;
+      case "workflow":
+        return <Workflow className="h-4 w-4 text-blue-400" />;
+      case "task":
+        return <BookOpenCheck className="h-4 w-4 text-red-400" />;
+      default:
+        return <User className="h-4 w-4 text-neutral-400" />;
+    }
+  };
+
+  const getModelBadgeColor = (model: string) => {
+    if (model?.includes('gpt-4')) return 'bg-green-900/30 text-green-400 border-green-600/30';
+    if (model?.includes('gpt-3')) return 'bg-yellow-900/30 text-yellow-400 border-yellow-600/30';
+    if (model?.includes('claude')) return 'bg-orange-900/30 text-orange-400 border-orange-600/30';
+    if (model?.includes('gemini')) return 'bg-blue-900/30 text-blue-400 border-blue-600/30';
+    return 'bg-neutral-800 text-neutral-400 border-neutral-600/50';
+  };
+
+  return (
+    <BaseNode hasTarget={true} selected={selected || false} borderColor="blue" isExecuting={isExecuting}>
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-900/40 shadow-sm">
+            <User className="h-5 w-5 text-blue-400" />
+          </div>
+          <div>
+            <p className="text-lg font-medium text-blue-400">
+              {data.label as string}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {agent ? (
+        <div className="mb-3 rounded-lg border border-blue-700/40 bg-blue-950/10 p-3 transition-all duration-200 hover:border-blue-600/50 hover:bg-blue-900/10">
+          <div className="flex flex-col">
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex items-center">
+                {getAgentTypeIcon(agent.type)}
+                <span className="ml-1.5 font-medium text-white">{agent.name}</span>
+              </div>
+              <Badge
+                variant="outline"
+                className="px-1.5 py-0 text-xs bg-blue-900/30 text-blue-400 border-blue-700/40"
+              >
+                {getAgentTypeName(agent.type)}
+              </Badge>
+            </div>
+            
+            {agent.model && (
+              <div className="mt-2 flex items-center">
+                <Badge
+                  variant="outline"
+                  className={cn("px-1.5 py-0 text-xs", getModelBadgeColor(agent.model))}
+                >
+                  {agent.model}
+                </Badge>
+              </div>
+            )}
+            
+            {agent.description && (
+              <p className="mt-2 text-xs text-neutral-400 line-clamp-2">
+                {agent.description.slice(0, 30)} {agent.description.length > 30 && '...'}
+              </p>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="mb-3 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-blue-700/40 bg-blue-950/10 p-5 text-center transition-all duration-200 hover:border-blue-600/50 hover:bg-blue-900/20">
+          <User className="h-8 w-8 text-blue-700/50 mb-2" />
+          <p className="text-blue-400">Select an agent</p>
+          <p className="mt-1 text-xs text-neutral-500">Click to configure</p>
+        </div>
+      )}
+
+      <div className="mt-2 flex items-center justify-end text-sm text-neutral-400 transition-colors">
+        <div className="flex items-center space-x-1 rounded-md py-1 px-2">
+          <span>Next step</span>
+          <ArrowRight className="h-3.5 w-3.5" />
+        </div>
+        <Handle
+          className={cn(
+            "!w-3 !h-3 !rounded-full transition-all duration-300",
+            isBottomHandleConnected ? "!bg-blue-500 !border-blue-400" : "!bg-neutral-400 !border-neutral-500",
+            selected && isBottomHandleConnected && "!bg-blue-400 !border-blue-300"
+          )}
+          style={{
+            right: "-8px",
+            top: "calc(100% - 25px)",
+          }}
+          type="source"
+          position={Position.Right}
+          id="bottom-handle"
+        />
+      </div>
+    </BaseNode>
+  );
+}
diff --git a/frontend/app/agents/workflows/nodes/components/agent/AgentTestChatModal.tsx b/frontend/app/agents/workflows/nodes/components/agent/AgentTestChatModal.tsx
new file mode 100644
index 00000000..c39800f5
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/agent/AgentTestChatModal.tsx
@@ -0,0 +1,470 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/agent/AgentTestChatModal.tsx   │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { useState, useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { useAgentWebSocket } from "@/hooks/use-agent-webSocket";
+import { getAccessTokenFromCookie, cn } from "@/lib/utils";
+import { Agent } from "@/types/agent";
+import { ChatInput } from "@/app/chat/components/ChatInput";
+import { ChatMessage as ChatMessageComponent } from "@/app/chat/components/ChatMessage";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ChatPart } from "@/services/sessionService";
+import { FileData } from "@/lib/file-utils";
+import { X, User, Bot, Zap, MessageSquare, Loader2, Code, ExternalLink, Workflow, RefreshCw } from "lucide-react";
+
+interface FunctionMessageContent {
+    title: string;
+    content: string;
+    author?: string;
+}
+
+interface ChatMessage {
+    id: string;
+    content: any;
+    author: string;
+    timestamp: number;
+}
+
+interface AgentTestChatModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    agent: Agent;
+    canvasRef?: React.RefObject<any>;
+}
+
+export function AgentTestChatModal({ open, onOpenChange, agent, canvasRef }: AgentTestChatModalProps) {
+    const [messages, setMessages] = useState<ChatMessage[]>([]);
+    const [isSending, setIsSending] = useState(false);
+    const [expandedFunctions, setExpandedFunctions] = useState<Record<string, boolean>>({});
+    const [isInitializing, setIsInitializing] = useState(true);
+    const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+    const user = typeof window !== "undefined" ? JSON.parse(localStorage.getItem("user") || "{}") : {};
+    const clientId = user?.client_id || "test";
+
+    const generateExternalId = () => {
+        const now = new Date();
+        return (
+            now.getFullYear().toString() +
+            (now.getMonth() + 1).toString().padStart(2, "0") +
+            now.getDate().toString().padStart(2, "0") +
+            now.getHours().toString().padStart(2, "0") +
+            now.getMinutes().toString().padStart(2, "0") +
+            now.getSeconds().toString().padStart(2, "0") +
+            now.getMilliseconds().toString().padStart(3, "0")
+        );
+    };
+
+    const [externalId, setExternalId] = useState(generateExternalId());
+    const jwt = getAccessTokenFromCookie();
+
+    const onEvent = useCallback((event: any) => {
+        setMessages((prev) => [...prev, event]);
+        
+        // Check if the message comes from a workflow node and highlight the node
+        // only if the canvasRef is available (called from Test Workflow on the main page)
+        if (event.author && event.author.startsWith('workflow-node:') && canvasRef?.current) {
+            const nodeId = event.author.split(':')[1];
+            canvasRef.current.setActiveExecutionNodeId(nodeId);
+        }
+    }, [canvasRef]);
+
+    const onTurnComplete = useCallback(() => {
+        setIsSending(false);
+    }, []);
+
+    const { sendMessage: wsSendMessage, disconnect } = useAgentWebSocket({
+        agentId: agent.id,
+        externalId,
+        jwt,
+        onEvent,
+        onTurnComplete,
+    });
+
+    // Handle ESC key to close the panel
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape" && open) {
+                onOpenChange(false);
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [onOpenChange, open]);
+    
+    // Show initialization state for better UX
+    useEffect(() => {
+        if (open) {
+            setIsInitializing(true);
+            const timer = setTimeout(() => {
+                setIsInitializing(false);
+            }, 1200);
+            return () => clearTimeout(timer);
+        }
+    }, [open, externalId]);
+
+    const handleRestartChat = () => {
+        if (disconnect) disconnect();
+        setMessages([]);
+        setExpandedFunctions({});
+        setExternalId(generateExternalId());
+        setIsInitializing(true);
+        
+        // Short delay to show the initialization status
+        const timer = setTimeout(() => {
+            setIsInitializing(false);
+        }, 1200);
+    };
+
+    const handleSendMessageWithFiles = (message: string, files?: FileData[]) => {
+        if ((!message.trim() && (!files || files.length === 0))) return;
+        setIsSending(true);
+        
+        const messageParts: ChatPart[] = [];
+        
+        if (message.trim()) {
+          messageParts.push({ text: message });
+        }
+        
+        if (files && files.length > 0) {
+          files.forEach(file => {
+            messageParts.push({
+              inline_data: {
+                data: file.data,
+                mime_type: file.content_type,
+                metadata: {
+                  filename: file.filename
+                }
+              }
+            });
+          });
+        }
+
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: `temp-${Date.now()}`,
+                content: {
+                    parts: messageParts,
+                    role: "user"
+                },
+                author: "user",
+                timestamp: Date.now() / 1000,
+            },
+        ]);
+        
+        wsSendMessage(message, files);
+    };
+
+    const containsMarkdown = (text: string): boolean => {
+        if (!text || text.length < 3) return false;
+        const markdownPatterns = [
+            /[*_]{1,2}[^*_]+[*_]{1,2}/, // bold/italic
+            /\[[^\]]+\]\([^)]+\)/, // links
+            /^#{1,6}\s/m, // headers
+            /^[-*+]\s/m, // unordered lists
+            /^[0-9]+\.\s/m, // ordered lists
+            /^>\s/m, // block quotes
+            /`[^`]+`/, // inline code
+            /```[\s\S]*?```/, // code blocks
+            /^\|(.+\|)+$/m, // tables
+            /!\[[^\]]*\]\([^)]+\)/, // images
+        ];
+        return markdownPatterns.some((pattern) => pattern.test(text));
+    };
+
+    const getMessageText = (message: ChatMessage): string | FunctionMessageContent => {
+        const author = message.author;
+        const parts = message.content.parts;
+        if (!parts || parts.length === 0) return "Empty content";
+        const functionCallPart = parts.find((part: any) => part.functionCall || part.function_call);
+        const functionResponsePart = parts.find((part: any) => part.functionResponse || part.function_response);
+        
+        const inlineDataParts = parts.filter((part: any) => part.inline_data);
+        
+        if (functionCallPart) {
+            const funcCall = functionCallPart.functionCall || functionCallPart.function_call || {};
+            const args = funcCall.args || {};
+            const name = funcCall.name || "unknown";
+            const id = funcCall.id || "no-id";
+            return {
+                author,
+                title: `📞 Function call: ${name}`,
+                content: `ID: ${id}\nArgs: ${Object.keys(args).length > 0 ? `\n${JSON.stringify(args, null, 2)}` : "{}"}`,
+            } as FunctionMessageContent;
+        }
+        if (functionResponsePart) {
+            const funcResponse = functionResponsePart.functionResponse || functionResponsePart.function_response || {};
+            const response = funcResponse.response || {};
+            const name = funcResponse.name || "unknown";
+            const id = funcResponse.id || "no-id";
+            const status = response.status || "unknown";
+            const statusEmoji = status === "error" ? "❌" : "✅";
+            let resultText = "";
+            if (status === "error") {
+                resultText = `Error: ${response.error_message || "Unknown error"}`;
+            } else if (response.report) {
+                resultText = `Result: ${response.report}`;
+            } else if (response.result && response.result.content) {
+                const content = response.result.content;
+                if (Array.isArray(content) && content.length > 0 && content[0].text) {
+                    try {
+                        const textContent = content[0].text;
+                        const parsedJson = JSON.parse(textContent);
+                        resultText = `Result: \n${JSON.stringify(parsedJson, null, 2)}`;
+                    } catch (e) {
+                        resultText = `Result: ${content[0].text}`;
+                    }
+                } else {
+                    resultText = `Result:\n${JSON.stringify(response, null, 2)}`;
+                }
+            } else {
+                resultText = `Result:\n${JSON.stringify(response, null, 2)}`;
+            }
+            return {
+                author,
+                title: `${statusEmoji} Function response: ${name}`,
+                content: `ID: ${id}\n${resultText}`,
+            } as FunctionMessageContent;
+        }
+        
+        if (parts.length === 1 && parts[0].text) {
+            return {
+                author,
+                content: parts[0].text,
+                title: "Message",
+            } as FunctionMessageContent;
+        }
+        const textParts = parts.filter((part: any) => part.text).map((part: any) => part.text).filter((text: string) => text);
+        if (textParts.length > 0) {
+            return {
+                author,
+                content: textParts.join("\n\n"),
+                title: "Message",
+            } as FunctionMessageContent;
+        }
+        try {
+            return JSON.stringify(parts, null, 2).replace(/\\n/g, "\n");
+        } catch (error) {
+            return "Unable to interpret message content";
+        }
+    };
+
+    const toggleFunctionExpansion = (messageId: string) => {
+        setExpandedFunctions((prev) => ({ ...prev, [messageId]: !prev[messageId] }));
+    };
+    
+    const getAgentTypeIcon = (type: string) => {
+        switch (type) {
+            case "llm":
+                return <Code className="h-4 w-4 text-green-400" />;
+            case "a2a":
+                return <ExternalLink className="h-4 w-4 text-indigo-400" />;
+            case "sequential":
+            case "workflow":
+                return <Workflow className="h-4 w-4 text-blue-400" />;
+            default:
+                return <Bot className="h-4 w-4 text-emerald-400" />;
+        }
+    };
+
+    // Scroll to bottom whenever messages change
+    useEffect(() => {
+        if (messagesContainerRef.current) {
+            messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+        }
+    }, [messages]);
+
+    if (!open) return null;
+
+    // Use React Portal to render directly to document body, bypassing all parent containers
+    const modalContent = (
+        <>
+            {/* Overlay for mobile */}
+            <div
+                className="md:hidden fixed inset-0 bg-black bg-opacity-50 z-[15] transition-opacity duration-300"
+                onClick={() => onOpenChange(false)}
+            />
+            
+            {/* Side panel */}
+            <div 
+                className="fixed right-0 top-0 z-[1000] h-full w-[450px] bg-gradient-to-b from-neutral-900 to-neutral-950 border-l border-neutral-800 shadow-2xl flex flex-col transition-all duration-300 ease-in-out transform"
+                style={{
+                    transform: open ? 'translateX(0)' : 'translateX(100%)',
+                    boxShadow: '0 0 25px rgba(0, 0, 0, 0.3)',
+                }}
+            >
+                {/* Header */}
+                <div className="flex-shrink-0 p-5 bg-gradient-to-r from-neutral-900 to-neutral-800 border-b border-neutral-800">
+                    <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                            <div className="flex items-center mb-1">
+                                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-emerald-600 to-emerald-900 flex items-center justify-center shadow-lg mr-3">
+                                    {getAgentTypeIcon(agent.type)}
+                                </div>
+                                <div>
+                                    <h2 className="text-lg font-semibold text-white">{agent.name}</h2>
+                                    <div className="flex items-center gap-2 mt-1">
+                                        <Badge 
+                                            className="bg-emerald-900/40 text-emerald-400 border border-emerald-700/50 px-2"
+                                        >
+                                            {agent.type.toUpperCase()} Agent
+                                        </Badge>
+                                        {agent.model && (
+                                            <span className="text-xs text-neutral-400 bg-neutral-800/60 px-2 py-0.5 rounded-md">
+                                                {agent.model}
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                            <button
+                                onClick={handleRestartChat}
+                                className="p-1.5 rounded-full hover:bg-neutral-700/50 text-neutral-400 hover:text-white transition-colors group relative"
+                                title="Restart chat"
+                                disabled={isInitializing}
+                            >
+                                <RefreshCw size={18} className={isInitializing ? "animate-spin text-emerald-400" : ""} />
+                                <span className="absolute -bottom-8 right-0 bg-neutral-800 text-neutral-200 text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">
+                                    Restart chat
+                                </span>
+                            </button>
+                            <button
+                                onClick={() => onOpenChange(false)}
+                                className="p-1.5 rounded-full hover:bg-neutral-700/50 text-neutral-400 hover:text-white transition-colors group relative"
+                            >
+                                <X size={18} />
+                                <span className="absolute -bottom-8 right-0 bg-neutral-800 text-neutral-200 text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">
+                                    Close
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    {agent.description && (
+                        <div className="mt-3 text-sm text-neutral-400 bg-neutral-800/30 p-3 rounded-md border border-neutral-800">
+                            {agent.description}
+                        </div>
+                    )}
+                </div>
+                
+                {/* Chat content */}
+                <div className="flex-1 overflow-y-auto overflow-x-hidden p-3 bg-gradient-to-b from-neutral-900/50 to-neutral-950" ref={messagesContainerRef}>
+                    {isInitializing ? (
+                        <div className="flex flex-col items-center justify-center h-full">
+                            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center shadow-lg mb-4 animate-pulse">
+                                <Zap className="h-5 w-5 text-white" />
+                            </div>
+                            <p className="text-neutral-400 mb-2">Initializing connection...</p>
+                            <div className="flex items-center space-x-2">
+                                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce" 
+                                    style={{ animationDelay: '0ms' }}></span>
+                                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
+                                    style={{ animationDelay: '150ms' }}></span>
+                                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
+                                    style={{ animationDelay: '300ms' }}></span>
+                            </div>
+                        </div>
+                    ) : messages.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-full text-center px-6">
+                            <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500/20 to-emerald-500/20 flex items-center justify-center shadow-lg mb-5 border border-emerald-500/30">
+                                <MessageSquare className="h-6 w-6 text-emerald-400" />
+                            </div>
+                            <h3 className="text-lg font-medium text-neutral-300 mb-2">Start the conversation</h3>
+                            <p className="text-neutral-500 text-sm max-w-xs">
+                                Type a message below to begin chatting with {agent.name}
+                            </p>
+                        </div>
+                    ) : (
+                        <div className="space-y-4 w-full max-w-full">
+                            {messages.map((message) => {
+                                const messageContent = getMessageText(message);
+                                const agentColor = message.author === "user" ? "bg-emerald-500" : "bg-gradient-to-br from-neutral-800 to-neutral-900";
+                                const isExpanded = expandedFunctions[message.id] || false;
+
+                                return (
+                                    <ChatMessageComponent
+                                        key={message.id}
+                                        message={message}
+                                        agentColor={agentColor}
+                                        isExpanded={isExpanded}
+                                        toggleExpansion={toggleFunctionExpansion}
+                                        containsMarkdown={containsMarkdown}
+                                        messageContent={messageContent}
+                                    />
+                                );
+                            })}
+                            
+                            {isSending && (
+                                <div className="flex justify-start">
+                                    <div className="flex gap-3 max-w-[80%]">
+                                        <Avatar
+                                            className="bg-gradient-to-br from-purple-600 to-purple-800 shadow-md border-0"
+                                        >
+                                            <AvatarFallback className="bg-transparent">
+                                                <Bot className="h-4 w-4 text-white" />
+                                            </AvatarFallback>
+                                        </Avatar>
+                                        <div className="rounded-lg p-3 bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700/50">
+                                            <div className="flex space-x-2">
+                                                <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce"></div>
+                                                <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce [animation-delay:0.2s]"></div>
+                                                <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce [animation-delay:0.4s]"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+                
+                {/* Message input */}
+                <div className="p-3 border-t border-neutral-800 bg-neutral-900">
+                    <ChatInput
+                        onSendMessage={handleSendMessageWithFiles}
+                        isLoading={isSending}
+                        placeholder="Type your message..."
+                        autoFocus={true}
+                    />
+                </div>
+            </div>
+        </>
+    );
+
+    // Use createPortal to render the modal directly to the document body
+    return typeof document !== 'undefined' 
+        ? createPortal(modalContent, document.body) 
+        : null;
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/workflows/nodes/components/agent/styles.css b/frontend/app/agents/workflows/nodes/components/agent/styles.css
new file mode 100644
index 00000000..19031bc1
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/agent/styles.css
@@ -0,0 +1,68 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/agent/styles.css               │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+.markdown-content {
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.markdown-content pre {
+  white-space: pre-wrap;
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.markdown-content code {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.markdown-content p {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
+.markdown-content table {
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+  border-collapse: collapse;
+}
+
+.markdown-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+.overflow-wrap-anywhere {
+  overflow-wrap: anywhere;
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/workflows/nodes/components/condition/ConditionDialog.tsx b/frontend/app/agents/workflows/nodes/components/condition/ConditionDialog.tsx
new file mode 100644
index 00000000..5fdd172f
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/condition/ConditionDialog.tsx
@@ -0,0 +1,283 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/condition/ConditionDialog.tsx  │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader,
+  DialogTitle,
+  DialogFooter
+} from "@/components/ui/dialog";
+
+import { ConditionType, ConditionTypeEnum } from "../../nodeFunctions";
+import { Button } from "@/components/ui/button";
+import { Filter, ArrowRight } from "lucide-react";
+import { 
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+
+const conditionTypes = [
+  {
+    id: "previous-output",
+    name: "Previous output",
+    description: "Validate the result returned by the previous node",
+    icon: <Filter className="h-5 w-5 text-blue-400" />,
+    color: "bg-blue-900/30 border-blue-700/50",
+  },
+];
+
+const operators = [
+  { value: "is_defined", label: "is defined" },
+  { value: "is_not_defined", label: "is not defined" },
+  { value: "equals", label: "is equal to" },
+  { value: "not_equals", label: "is not equal to" },
+  { value: "contains", label: "contains" },
+  { value: "not_contains", label: "does not contain" },
+  { value: "starts_with", label: "starts with" },
+  { value: "ends_with", label: "ends with" },
+  { value: "greater_than", label: "is greater than" },
+  { value: "greater_than_or_equal", label: "is greater than or equal to" },
+  { value: "less_than", label: "is less than" },
+  { value: "less_than_or_equal", label: "is less than or equal to" },
+  { value: "matches", label: "matches the regex" },
+  { value: "not_matches", label: "does not match the regex" },
+];
+
+const outputFields = [
+  { value: "content", label: "Content" },
+  { value: "status", label: "Status" },
+];
+
+function ConditionDialog({
+  open,
+  onOpenChange,
+  selectedNode,
+  handleUpdateNode,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedNode: any;
+  handleUpdateNode: any;
+}) {
+  const [selectedType, setSelectedType] = useState("previous-output");
+  const [selectedField, setSelectedField] = useState(outputFields[0].value);
+  const [selectedOperator, setSelectedOperator] = useState(operators[0].value);
+  const [comparisonValue, setComparisonValue] = useState("");
+
+  const handleConditionSave = (condition: ConditionType) => {
+    const newConditions = selectedNode.data.conditions
+      ? [...selectedNode.data.conditions]
+      : [];
+    newConditions.push(condition);
+
+    const updatedNode = {
+      ...selectedNode,
+      data: {
+        ...selectedNode.data,
+        conditions: newConditions,
+      },
+    };
+
+    handleUpdateNode(updatedNode);
+    onOpenChange(false);
+  };
+
+  const getOperatorLabel = (value: string) => {
+    return operators.find(op => op.value === value)?.label || value;
+  };
+
+  const getFieldLabel = (value: string) => {
+    return outputFields.find(field => field.value === value)?.label || value;
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-neutral-800 border-neutral-700 text-neutral-200 sm:max-w-[650px]">
+        <DialogHeader>
+          <DialogTitle>Add New Condition</DialogTitle>
+        </DialogHeader>
+        
+        <div className="grid gap-6 py-4">
+          <div className="grid gap-4">
+            <Label className="text-sm font-medium">Condition Type</Label>
+            <div className="grid grid-cols-1 gap-2">
+              {conditionTypes.map((type) => (
+                <div
+                  key={type.id}
+                  className={`flex items-center space-x-3 rounded-md border p-3 cursor-pointer transition-all ${
+                    selectedType === type.id
+                      ? "bg-blue-900/30 border-blue-600"
+                      : "border-neutral-700 hover:border-blue-700/50 hover:bg-neutral-700/50"
+                  }`}
+                  onClick={() => setSelectedType(type.id)}
+                >
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-900/40">
+                    {type.icon}
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="font-medium">{type.name}</h4>
+                    <p className="text-xs text-neutral-400">{type.description}</p>
+                  </div>
+                  {selectedType === type.id && (
+                    <Badge className="bg-blue-600 text-neutral-100">Selected</Badge>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-medium">Configuration</Label>
+              {selectedType === "previous-output" && (
+                <div className="flex items-center gap-2 text-sm text-neutral-400">
+                  <span>Output field</span>
+                  <ArrowRight className="h-3 w-3" />
+                  <span>Operator</span>
+                  {!["is_defined", "is_not_defined"].includes(selectedOperator) && (
+                    <>
+                      <ArrowRight className="h-3 w-3" />
+                      <span>Value</span>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {selectedType === "previous-output" && (
+              <div className="space-y-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="field">Output Field</Label>
+                  <Select 
+                    value={selectedField} 
+                    onValueChange={setSelectedField}
+                  >
+                    <SelectTrigger id="field" className="bg-neutral-700 border-neutral-600">
+                      <SelectValue placeholder="Select field" />
+                    </SelectTrigger>
+                    <SelectContent className="bg-neutral-700 border-neutral-600">
+                      {outputFields.map((field) => (
+                        <SelectItem key={field.value} value={field.value}>
+                          {field.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="operator">Operator</Label>
+                  <Select 
+                    value={selectedOperator} 
+                    onValueChange={setSelectedOperator}
+                  >
+                    <SelectTrigger id="operator" className="bg-neutral-700 border-neutral-600">
+                      <SelectValue placeholder="Select operator" />
+                    </SelectTrigger>
+                    <SelectContent className="bg-neutral-700 border-neutral-600">
+                      {operators.map((op) => (
+                        <SelectItem key={op.value} value={op.value}>
+                          {op.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {!["is_defined", "is_not_defined"].includes(selectedOperator) && (
+                  <div className="grid gap-2">
+                    <Label htmlFor="value">Comparison Value</Label>
+                    <Input
+                      id="value"
+                      value={comparisonValue}
+                      onChange={(e) => setComparisonValue(e.target.value)}
+                      className="bg-neutral-700 border-neutral-600"
+                    />
+                  </div>
+                )}
+
+                <div className="rounded-md bg-neutral-700/50 border border-neutral-600 p-3 mt-4">
+                  <div className="text-sm font-medium text-neutral-400 mb-1">Preview</div>
+                  <div className="text-sm">
+                    <span className="text-blue-400 font-medium">{getFieldLabel(selectedField)}</span>
+                    {" "}
+                    <span className="text-neutral-300">{getOperatorLabel(selectedOperator)}</span>
+                    {" "}
+                    {!["is_defined", "is_not_defined"].includes(selectedOperator) && (
+                      <span className="text-emerald-400 font-medium">"{comparisonValue || "(empty)"}"</span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button 
+            variant="outline" 
+            onClick={() => onOpenChange(false)}
+            className="border-neutral-600 text-neutral-200 hover:bg-neutral-700"
+          >
+            Cancel
+          </Button>
+          <Button 
+            onClick={() => {
+              handleConditionSave({
+                id: uuidv4(),
+                type: ConditionTypeEnum.PREVIOUS_OUTPUT,
+                data: {
+                  field: selectedField,
+                  operator: selectedOperator,
+                  value: comparisonValue,
+                },
+              });
+            }}
+            className="bg-blue-700 hover:bg-blue-600 text-white"
+          >
+            Add Condition
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ConditionDialog };
diff --git a/frontend/app/agents/workflows/nodes/components/condition/ConditionForm.tsx b/frontend/app/agents/workflows/nodes/components/condition/ConditionForm.tsx
new file mode 100644
index 00000000..ff224f3c
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/condition/ConditionForm.tsx
@@ -0,0 +1,290 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/condition/ConditionForm.tsx    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import { ConditionType, ConditionTypeEnum } from "../../nodeFunctions";
+import { ConditionDialog } from "./ConditionDialog";
+import { Button } from "@/components/ui/button";
+import { Filter, Trash2, Plus } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function ConditionForm({
+  selectedNode,
+  handleUpdateNode,
+}: {
+  selectedNode: any;
+  handleUpdateNode: any;
+  setEdges: any;
+  setIsOpen: any;
+  setSelectedNode: any;
+}) {
+  const [node, setNode] = useState(selectedNode);
+
+  const [conditions, setConditions] = useState<ConditionType[]>(
+    selectedNode.data.conditions || []
+  );
+
+  const [open, setOpen] = useState(false);
+  const [deleteDialog, setDeleteDialog] = useState(false);
+  const [conditionToDelete, setConditionToDelete] =
+    useState<ConditionType | null>(null);
+
+  useEffect(() => {
+    if (selectedNode) {
+      setNode(selectedNode);
+      setConditions(selectedNode.data.conditions || []);
+    }
+  }, [selectedNode]);
+
+  const handleDelete = (condition: ConditionType) => {
+    setConditionToDelete(condition);
+    setDeleteDialog(true);
+  };
+
+  const confirmDelete = () => {
+    if (!conditionToDelete) return;
+
+    const newConditions = conditions.filter(
+      (c) => c.id !== conditionToDelete.id
+    );
+    setConditions(newConditions);
+    handleUpdateNode({
+      ...node,
+      data: { ...node.data, conditions: newConditions },
+    });
+    setDeleteDialog(false);
+    setConditionToDelete(null);
+  };
+
+  const renderCondition = (condition: ConditionType) => {
+    if (condition.type === ConditionTypeEnum.PREVIOUS_OUTPUT) {
+      type OperatorType =
+        | "is_defined"
+        | "is_not_defined"
+        | "equals"
+        | "not_equals"
+        | "contains"
+        | "not_contains"
+        | "starts_with"
+        | "ends_with"
+        | "greater_than"
+        | "greater_than_or_equal"
+        | "less_than"
+        | "less_than_or_equal"
+        | "matches"
+        | "not_matches";
+
+      const operatorText: Record<OperatorType, string> = {
+        is_defined: "is defined",
+        is_not_defined: "is not defined",
+        equals: "is equal to",
+        not_equals: "is not equal to",
+        contains: "contains",
+        not_contains: "does not contain",
+        starts_with: "starts with",
+        ends_with: "ends with",
+        greater_than: "is greater than",
+        greater_than_or_equal: "is greater than or equal to",
+        less_than: "is less than",
+        less_than_or_equal: "is less than or equal to",
+        matches: "matches the regex",
+        not_matches: "does not match the regex",
+      };
+
+      return (
+        <div
+          key={condition.id}
+          className="p-3 rounded-md cursor-pointer transition-colors bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 mb-2 group"
+        >
+          <div className="flex items-start gap-2">
+            <div className="bg-blue-900/50 rounded-full p-1.5 flex-shrink-0">
+              <Filter size={18} className="text-blue-300" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between">
+                <h3 className="font-medium text-neutral-200">Condition</h3>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => handleDelete(condition)}
+                  className="h-7 w-7 text-neutral-400 opacity-0 group-hover:opacity-100 hover:text-red-500 hover:bg-red-900/20"
+                >
+                  <Trash2 size={14} />
+                </Button>
+              </div>
+              <div className="flex items-center gap-2 mt-1">
+                <Badge
+                  variant="outline"
+                  className="text-xs bg-blue-900/20 text-blue-400 border-blue-700/50"
+                >
+                  Field
+                </Badge>
+                <span className="text-sm text-neutral-300 font-medium">{condition.data.field}</span>
+              </div>
+              <div className="flex flex-wrap items-center gap-1 mt-1.5">
+                <span className="text-sm text-neutral-400">{operatorText[condition.data.operator as OperatorType]}</span>
+                {!["is_defined", "is_not_defined"].includes(condition.data.operator) && (
+                  <span className="text-sm font-medium text-emerald-400">
+                    "{condition.data.value}"
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 border-b border-neutral-700 flex-shrink-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-md font-medium text-neutral-200">Logic Type</h3>
+            <Badge
+              variant="outline"
+              className="text-xs bg-blue-900/20 text-blue-400 border-blue-700/50"
+            >
+              {node.data.type === "or" ? "ANY" : "ALL"}
+            </Badge>
+          </div>
+          <Select 
+            value={node.data.type || "and"}
+            onValueChange={(value) => {
+              const updatedNode = {
+                ...node,
+                data: {
+                  ...node.data,
+                  type: value,
+                },
+              };
+              setNode(updatedNode);
+              handleUpdateNode(updatedNode);
+            }}
+          >
+            <SelectTrigger className="w-[120px] h-8 bg-neutral-800 border-neutral-700 text-neutral-200">
+              <SelectValue placeholder="Select type" />
+            </SelectTrigger>
+            <SelectContent className="bg-neutral-800 border-neutral-700 text-neutral-200">
+              <SelectItem value="and">ALL (AND)</SelectItem>
+              <SelectItem value="or">ANY (OR)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <p className="text-sm text-neutral-400 mt-2">
+          {node.data.type === "or" 
+            ? "Any of the following conditions must be true to proceed."
+            : "All of the following conditions must be true to proceed."}
+        </p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-4 py-4 min-h-0">
+        <div className="mb-4">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-md font-medium text-neutral-200">Conditions</h3>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 bg-blue-800/20 hover:bg-blue-700/30 border-blue-700/50 text-blue-300"
+              onClick={() => setOpen(true)}
+            >
+              <Plus size={14} className="mr-1" />
+              Add Condition
+            </Button>
+          </div>
+
+          {conditions.length > 0 ? (
+            <div className="space-y-2">
+              {conditions.map((condition) => renderCondition(condition))}
+            </div>
+          ) : (
+            <div 
+              onClick={() => setOpen(true)}
+              className="flex flex-col items-center justify-center p-6 rounded-lg border-2 border-dashed border-neutral-700 hover:border-blue-600/50 hover:bg-neutral-800/50 transition-colors cursor-pointer text-center"
+            >
+              <Filter className="h-10 w-10 text-neutral-500 mb-2" />
+              <p className="text-neutral-400">No conditions yet</p>
+              <p className="text-sm text-neutral-500 mt-1">Click to add a condition</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <ConditionDialog
+        open={open}
+        onOpenChange={setOpen}
+        selectedNode={selectedNode}
+        handleUpdateNode={handleUpdateNode}
+      />
+
+      <Dialog open={deleteDialog} onOpenChange={setDeleteDialog}>
+        <DialogContent className="bg-neutral-800 border-neutral-700 text-neutral-200">
+          <DialogHeader>
+            <DialogTitle>Confirm Delete</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <p>Are you sure you want to delete this condition?</p>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              className="border-neutral-600 text-neutral-300 hover:bg-neutral-700"
+              onClick={() => {
+                setDeleteDialog(false);
+                setConditionToDelete(null);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button 
+              variant="destructive"
+              className="bg-red-900 hover:bg-red-800 text-white"
+              onClick={confirmDelete}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export { ConditionForm };
diff --git a/frontend/app/agents/workflows/nodes/components/condition/ConditionNode.tsx b/frontend/app/agents/workflows/nodes/components/condition/ConditionNode.tsx
new file mode 100644
index 00000000..ca8235ae
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/condition/ConditionNode.tsx
@@ -0,0 +1,204 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/condition/ConditionNode.tsx    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Handle, Node, NodeProps, Position, useEdges } from "@xyflow/react";
+import { FilterIcon, ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+import { BaseNode } from "../../BaseNode";
+import { ConditionType, ConditionTypeEnum } from "../../nodeFunctions";
+
+export type ConditionNodeType = Node<
+  {
+    label?: string;
+    type?: "and" | "or";
+    conditions?: ConditionType[];
+  },
+  "condition-node"
+>;
+
+export type OperatorType =
+  | "is_defined"
+  | "is_not_defined"
+  | "equals"
+  | "not_equals"
+  | "contains"
+  | "not_contains"
+  | "starts_with"
+  | "ends_with"
+  | "greater_than"
+  | "greater_than_or_equal"
+  | "less_than"
+  | "less_than_or_equal"
+  | "matches"
+  | "not_matches";
+
+const operatorText: Record<OperatorType, string> = {
+  equals: "is equal to",
+  not_equals: "is not equal to",
+  contains: "contains",
+  not_contains: "does not contain",
+  starts_with: "starts with",
+  ends_with: "ends with",
+  greater_than: "is greater than",
+  greater_than_or_equal: "is greater than or equal to",
+  less_than: "is less than",
+  less_than_or_equal: "is less than or equal to",
+  matches: "matches the pattern",
+  not_matches: "does not match the pattern",
+  is_defined: "is defined",
+  is_not_defined: "is not defined",
+};
+
+export function ConditionNode(props: NodeProps) {
+  const { selected, data } = props;
+  const edges = useEdges();
+  const isExecuting = data.isExecuting as boolean | undefined;
+
+  const typeText = {
+    and: "all of the following conditions",
+    or: "any of the following conditions",
+  };
+
+  const isHandleConnected = (handleId: string) => {
+    return edges.some(
+      (edge) => edge.source === props.id && edge.sourceHandle === handleId,
+    );
+  };
+
+  const isBottomHandleConnected = isHandleConnected("bottom-handle");
+
+  const conditions: ConditionType[] = data.conditions as ConditionType[];
+  // const statistics: StatisticType = data.statistics as StatisticType;
+
+  const renderCondition = (condition: ConditionType) => {
+    const isConnected = isHandleConnected(condition.id);
+
+    if (condition.type === ConditionTypeEnum.PREVIOUS_OUTPUT) {
+      return (
+        <div
+          className="mb-3 cursor-pointer rounded-lg border border-purple-700/40 bg-purple-950/10 p-3 text-left transition-all duration-200 hover:border-purple-600/50 hover:bg-purple-900/10"
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <p className="font-medium text-neutral-300">
+                O campo{" "}
+                <span className="font-semibold text-purple-400">
+                  {condition.data.field}
+                </span>{" "}
+                <span className="text-neutral-400">
+                  {operatorText[condition.data.operator as OperatorType]}
+                </span>{" "}
+                {!["is_defined", "is_not_defined"].includes(
+                  condition.data.operator,
+                ) && (
+                  <span className="font-semibold text-green-400">
+                    &quot;{condition.data.value}&quot;
+                  </span>
+                )}
+              </p>
+            </div>
+            <Handle
+              className={cn(
+                "!rounded-full transition-all duration-300",
+                isConnected ? "!bg-purple-500 !border-purple-400" : "!bg-neutral-400 !border-neutral-500"
+              )}
+              style={{
+                top: "50%",
+                right: "-5px",
+                transform: "translateY(-50%)",
+                height: "14px",
+                position: "relative",
+                width: "14px",
+              }}
+              type="source"
+              position={Position.Right}
+              id={condition.id}
+            />
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <BaseNode hasTarget={true} selected={selected || false} borderColor="purple" isExecuting={isExecuting}>
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-purple-900/40 shadow-sm">
+            <FilterIcon className="h-5 w-5 text-purple-400" />
+          </div>
+          <div>
+            <p className="text-lg font-medium text-purple-400">
+              {data.label as string}
+            </p>
+            <p className="text-xs text-neutral-400">
+              Matches {typeText[(data.type as "and" | "or") || "and"]}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {conditions && conditions.length > 0 && Array.isArray(conditions) ? (
+        conditions.map((condition) => (
+          <div key={condition.id}>{renderCondition(condition)}</div>
+        ))
+      ) : (
+        <div className="mb-3 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-purple-700/40 bg-purple-950/10 p-5 text-center transition-all duration-200 hover:border-purple-600/50 hover:bg-purple-900/20">
+          <FilterIcon className="h-8 w-8 text-purple-700/50 mb-2" />
+          <p className="text-purple-400">No conditions configured</p>
+          <p className="mt-1 text-xs text-neutral-500">Click to add a condition</p>
+        </div>
+      )}
+
+      <div className="mt-2 flex items-center justify-end text-sm text-neutral-400 transition-colors">
+        <div className="flex items-center space-x-1 rounded-md py-1 px-2">
+          <span>Next step</span>
+          <ArrowRight className="h-3.5 w-3.5" />
+        </div>
+        <Handle
+          className={cn(
+            "!w-3 !h-3 !rounded-full transition-all duration-300",
+            isBottomHandleConnected ? "!bg-purple-500 !border-purple-400" : "!bg-neutral-400 !border-neutral-500",
+            selected && isBottomHandleConnected && "!bg-purple-400 !border-purple-300"
+          )}
+          style={{
+            right: "0px",
+            top: "calc(100% - 25px)",
+          }}
+          type="source"
+          position={Position.Right}
+          id="bottom-handle"
+        />
+      </div>
+    </BaseNode>
+  );
+}
diff --git a/frontend/app/agents/workflows/nodes/components/delay/DelayForm.tsx b/frontend/app/agents/workflows/nodes/components/delay/DelayForm.tsx
new file mode 100644
index 00000000..e5ce6b65
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/delay/DelayForm.tsx
@@ -0,0 +1,256 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @author: Victor Calazans - Implementation of Delay node form                 │
+│ @file: /app/agents/workflows/nodes/components/delay/DelayForm.tsx            │
+│ Developed by: Davidson Gomes                                                 │
+│ Delay form developed by: Victor Calazans                                     │
+│ Creation date: May 13, 2025                                                  │
+│ Delay form implementation date: May 17, 2025                                 │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useEffect } from "react";
+import { Dispatch, SetStateAction } from "react";
+import { Clock, Trash2, Save, AlertCircle, HourglassIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { DelayType, DelayUnitEnum } from "../../nodeFunctions";
+import { cn } from "@/lib/utils";
+
+export function DelayForm({
+  selectedNode,
+  handleUpdateNode,
+  setEdges,
+  setIsOpen,
+  setSelectedNode,
+}: {
+  selectedNode: any;
+  handleUpdateNode: (node: any) => void;
+  setEdges: any;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  setSelectedNode: Dispatch<SetStateAction<any>>;
+}) {
+  const [delay, setDelay] = useState<DelayType>({
+    value: 1,
+    unit: DelayUnitEnum.SECONDS,
+    description: "",
+  });
+
+  useEffect(() => {
+    if (selectedNode?.data?.delay) {
+      setDelay(selectedNode.data.delay);
+    }
+  }, [selectedNode]);
+
+  const handleSave = () => {
+    handleUpdateNode({
+      ...selectedNode,
+      data: {
+        ...selectedNode.data,
+        delay,
+      },
+    });
+  };
+
+  const handleDelete = () => {
+    setEdges((edges: any) => {
+      return edges.filter(
+        (edge: any) => edge.source !== selectedNode.id && edge.target !== selectedNode.id
+      );
+    });
+
+    setIsOpen(false);
+    setSelectedNode(null);
+  };
+
+  const getUnitLabel = (unit: DelayUnitEnum) => {
+    const units = {
+      [DelayUnitEnum.SECONDS]: "Seconds",
+      [DelayUnitEnum.MINUTES]: "Minutes",
+      [DelayUnitEnum.HOURS]: "Hours",
+      [DelayUnitEnum.DAYS]: "Days",
+    };
+    return units[unit] || unit;
+  };
+
+  const getTimeDescription = () => {
+    const value = delay.value || 0;
+    
+    if (value <= 0) return "Invalid time";
+    
+    if (value === 1) {
+      return `1 ${getUnitLabel(delay.unit).slice(0, -1)}`;
+    }
+    
+    return `${value} ${getUnitLabel(delay.unit)}`;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 border-b border-neutral-700 flex-shrink-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-md font-medium text-neutral-200">Delay Duration</h3>
+            <Badge
+              variant="outline"
+              className="text-xs bg-yellow-900/20 text-yellow-400 border-yellow-700/50"
+            >
+              {getTimeDescription().toUpperCase()}
+            </Badge>
+          </div>
+          <Select 
+            value={delay.unit}
+            onValueChange={(value) =>
+              setDelay({
+                ...delay,
+                unit: value as DelayUnitEnum,
+              })
+            }
+          >
+            <SelectTrigger className="w-[120px] h-8 bg-neutral-800 border-neutral-700 text-neutral-200">
+              <SelectValue placeholder="Unit" />
+            </SelectTrigger>
+            <SelectContent className="bg-neutral-800 border-neutral-700 text-neutral-200">
+              <SelectItem value={DelayUnitEnum.SECONDS}>Seconds</SelectItem>
+              <SelectItem value={DelayUnitEnum.MINUTES}>Minutes</SelectItem>
+              <SelectItem value={DelayUnitEnum.HOURS}>Hours</SelectItem>
+              <SelectItem value={DelayUnitEnum.DAYS}>Days</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 min-h-0">
+        <div className="grid gap-4">
+          <div className="p-3 rounded-md bg-yellow-900/10 border border-yellow-700/30 mb-2">
+            <div className="flex items-start gap-2">
+              <div className="bg-yellow-900/50 rounded-full p-1.5 flex-shrink-0">
+                <Clock size={18} className="text-yellow-300" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="font-medium text-neutral-200">Time Delay</h3>
+                <p className="text-sm text-neutral-400 mt-1">
+                  Pause workflow execution for a specified amount of time
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="delay-value">Delay Value</Label>
+            <Input
+              id="delay-value"
+              type="number"
+              min="1"
+              className="bg-neutral-700 border-neutral-600"
+              value={delay.value}
+              onChange={(e) =>
+                setDelay({
+                  ...delay,
+                  value: parseInt(e.target.value) || 1,
+                })
+              }
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="delay-description">Description (optional)</Label>
+            <Textarea
+              id="delay-description"
+              className="bg-neutral-700 border-neutral-600 min-h-[100px] resize-none"
+              value={delay.description}
+              onChange={(e) =>
+                setDelay({
+                  ...delay,
+                  description: e.target.value,
+                })
+              }
+              placeholder="Add a description for this delay"
+            />
+          </div>
+
+          {delay.value > 0 ? (
+            <div className="rounded-md bg-neutral-700/50 border border-neutral-600 p-3 mt-2">
+              <div className="text-sm font-medium text-neutral-400 mb-1">Preview</div>
+              <div className="flex items-start gap-2 p-2 rounded-md bg-neutral-800/70">
+                <div className="rounded-full bg-yellow-900/30 p-1.5 mt-0.5">
+                  <HourglassIcon size={15} className="text-yellow-400" />
+                </div>
+                <div className="flex-1">
+                  <div className="flex flex-col">
+                    <span className="text-sm text-yellow-400 font-medium">
+                      {getTimeDescription()} delay
+                    </span>
+                    {delay.description && (
+                      <span className="text-xs text-neutral-400 mt-1">
+                        {delay.description}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="rounded-md bg-neutral-700/30 border border-neutral-600/50 p-4 flex flex-col items-center justify-center text-center">
+              <AlertCircle className="h-6 w-6 text-neutral-500 mb-2" />
+              <p className="text-neutral-400 text-sm">Please set a valid delay time</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="p-4 border-t border-neutral-700 flex-shrink-0">
+        <div className="flex gap-2 justify-between">
+          <Button
+            variant="outline"
+            className="border-red-700/50 bg-red-900/20 text-red-400 hover:bg-red-900/30 hover:text-red-300"
+            onClick={handleDelete}
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            Delete Node
+          </Button>
+          <Button
+            className="bg-yellow-700 hover:bg-yellow-600 text-white flex items-center gap-2"
+            onClick={handleSave}
+          >
+            <Save size={16} />
+            Save Delay
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/workflows/nodes/components/delay/DelayNode.tsx b/frontend/app/agents/workflows/nodes/components/delay/DelayNode.tsx
new file mode 100644
index 00000000..9e095bd2
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/delay/DelayNode.tsx
@@ -0,0 +1,146 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @author: Victor Calazans - Implementation of Delay node functionality        │
+│ @file: /app/agents/workflows/nodes/components/delay/DelayNode.tsx            │
+│ Developed by: Davidson Gomes                                                 │
+│ Delay node developed by: Victor Calazans                                     │
+│ Creation date: May 13, 2025                                                  │
+│ Delay node implementation date: May 17, 2025                                 │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Handle, NodeProps, Position, useEdges } from "@xyflow/react";
+import { Clock, ArrowRight, Timer } from "lucide-react";
+import { DelayType } from "../../nodeFunctions";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+import { BaseNode } from "../../BaseNode";
+
+export function DelayNode(props: NodeProps) {
+  const { selected, data } = props;
+
+  const edges = useEdges();
+  const isExecuting = data.isExecuting as boolean | undefined;
+
+  const isHandleConnected = (handleId: string) => {
+    return edges.some(
+      (edge) => edge.source === props.id && edge.sourceHandle === handleId
+    );
+  };
+
+  const isBottomHandleConnected = isHandleConnected("bottom-handle");
+  
+  const delay = data.delay as DelayType | undefined;
+
+  const getUnitLabel = (unit: string) => {
+    switch (unit) {
+      case 'seconds':
+        return 'Seconds';
+      case 'minutes':
+        return 'Minutes';
+      case 'hours':
+        return 'Hours';
+      case 'days':
+        return 'Days';
+      default:
+        return unit;
+    }
+  };
+
+  return (
+    <BaseNode hasTarget={true} selected={selected || false} borderColor="yellow" isExecuting={isExecuting}>
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-yellow-900/40 shadow-sm">
+            <Clock className="h-5 w-5 text-yellow-400" />
+          </div>
+          <div>
+            <p className="text-lg font-medium text-yellow-400">
+              {data.label as string}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {delay ? (
+        <div className="mb-3 rounded-lg border border-yellow-700/40 bg-yellow-950/10 p-3 transition-all duration-200 hover:border-yellow-600/50 hover:bg-yellow-900/10">
+          <div className="flex flex-col">
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex items-center">
+                <Timer className="h-4 w-4 text-yellow-400" />
+                <span className="ml-1.5 font-medium text-white">Delay</span>
+              </div>
+              <Badge
+                variant="outline"
+                className="px-1.5 py-0 text-xs bg-yellow-900/30 text-yellow-400 border-yellow-700/40"
+              >
+                {getUnitLabel(delay.unit)}
+              </Badge>
+            </div>
+            
+            <div className="mt-2 flex items-center">
+              <span className="text-lg font-semibold text-yellow-300">{delay.value}</span>
+              <span className="ml-1 text-sm text-neutral-400">{delay.unit}</span>
+            </div>
+            
+            {delay.description && (
+              <p className="mt-2 text-xs text-neutral-400 line-clamp-2">
+                {delay.description.slice(0, 80)} {delay.description.length > 80 && '...'}
+              </p>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="mb-3 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-yellow-700/40 bg-yellow-950/10 p-5 text-center transition-all duration-200 hover:border-yellow-600/50 hover:bg-yellow-900/20">
+          <Clock className="h-8 w-8 text-yellow-700/50 mb-2" />
+          <p className="text-yellow-400">No delay configured</p>
+          <p className="mt-1 text-xs text-neutral-500">Click to configure</p>
+        </div>
+      )}
+
+      <div className="mt-2 flex items-center justify-end text-sm text-neutral-400 transition-colors">
+        <div className="flex items-center space-x-1 rounded-md py-1 px-2">
+          <span>Next step</span>
+          <ArrowRight className="h-3.5 w-3.5" />
+        </div>
+        <Handle
+          className={cn(
+            "!w-3 !h-3 !rounded-full transition-all duration-300",
+            isBottomHandleConnected ? "!bg-yellow-500 !border-yellow-400" : "!bg-neutral-400 !border-neutral-500",
+            selected && isBottomHandleConnected && "!bg-yellow-400 !border-yellow-300"
+          )}
+          style={{
+            right: "-8px",
+            top: "calc(100% - 25px)",
+          }}
+          type="source"
+          position={Position.Right}
+          id="bottom-handle"
+        />
+      </div>
+    </BaseNode>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/agents/workflows/nodes/components/message/MessageForm.tsx b/frontend/app/agents/workflows/nodes/components/message/MessageForm.tsx
new file mode 100644
index 00000000..ffdbef6f
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/message/MessageForm.tsx
@@ -0,0 +1,292 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/message/MessageForm.tsx        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable jsx-a11y/alt-text */
+import { useEdges, useNodes } from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Agent } from "@/types/agent";
+import { listAgents } from "@/services/agentService";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { 
+  MessageSquare, 
+  Save, 
+  Text, 
+  Image, 
+  File, 
+  Video,
+  AlertCircle
+} from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { 
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function MessageForm({
+  selectedNode,
+  handleUpdateNode,
+  setEdges,
+  setIsOpen,
+  setSelectedNode,
+}: {
+  selectedNode: any;
+  handleUpdateNode: any;
+  setEdges: any;
+  setIsOpen: any;
+  setSelectedNode: any;
+}) {
+  const [node, setNode] = useState(selectedNode);
+  const [messageType, setMessageType] = useState("text");
+  const [content, setContent] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [allAgents, setAllAgents] = useState<Agent[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const edges = useEdges();
+  const nodes = useNodes();
+
+  const connectedNode = useMemo(() => {
+    const edge = edges.find((edge) => edge.source === selectedNode.id);
+    if (!edge) return null;
+    const node = nodes.find((node) => node.id === edge.target);
+    return node || null;
+  }, [edges, nodes, selectedNode.id]);
+  
+  const user = typeof window !== "undefined" ? JSON.parse(localStorage.getItem("user") || '{}') : {};
+  const clientId = user?.client_id || "";
+  
+  const currentAgent = typeof window !== "undefined" ? 
+    JSON.parse(localStorage.getItem("current_workflow_agent") || '{}') : {};
+  const currentAgentId = currentAgent?.id;
+
+  useEffect(() => {
+    if (selectedNode) {
+      setNode(selectedNode);
+      setMessageType(selectedNode.data.message?.type || "text");
+      setContent(selectedNode.data.message?.content || "");
+    }
+  }, [selectedNode]);
+
+  useEffect(() => {
+    if (!clientId) return;
+    setLoading(true);
+    listAgents(clientId)
+      .then((res) => {
+        const filteredAgents = res.data.filter((agent: Agent) => agent.id !== currentAgentId);
+        setAllAgents(filteredAgents);
+        setAgents(filteredAgents);
+      })
+      .catch((error) => console.error("Error loading agents:", error))
+      .finally(() => setLoading(false));
+  }, [clientId, currentAgentId]);
+
+  useEffect(() => {
+    if (searchTerm.trim() === "") {
+      setAgents(allAgents);
+    } else {
+      const filtered = allAgents.filter((agent) => 
+        agent.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setAgents(filtered);
+    }
+  }, [searchTerm, allAgents]);
+
+  const handleDeleteEdge = useCallback(() => {
+    const id = edges.find((edge: any) => edge.source === selectedNode.id)?.id;
+    setEdges((edges: any) => {
+      const left = edges.filter((edge: any) => edge.id !== id);
+      return left;
+    });
+  }, [nodes, edges, selectedNode, setEdges]);
+
+  const handleSelectAgent = (agent: Agent) => {
+    const updatedNode = {
+      ...node,
+      data: {
+        ...node.data,
+        agent,
+      },
+    };
+    setNode(updatedNode);
+    handleUpdateNode(updatedNode);
+  };
+
+  const getAgentTypeName = (type: string) => {
+    const agentTypes: Record<string, string> = {
+      llm: "LLM Agent",
+      a2a: "A2A Agent",
+      sequential: "Sequential Agent",
+      parallel: "Parallel Agent",
+      loop: "Loop Agent",
+      workflow: "Workflow Agent",
+      task: "Task Agent",
+    };
+    return agentTypes[type] || type;
+  };
+
+  const handleSave = () => {
+    const updatedNode = {
+      ...node,
+      data: {
+        ...node.data,
+        message: {
+          type: messageType,
+          content,
+        },
+      },
+    };
+    setNode(updatedNode);
+    handleUpdateNode(updatedNode);
+  };
+  
+  const messageTypeInfo = {
+    text: {
+      icon: <Text className="h-5 w-5 text-orange-400" />,
+      name: "Text Message",
+      description: "Simple text message",
+      color: "bg-orange-900/30 border-orange-700/50",
+    },
+    image: {
+      icon: <Image className="h-5 w-5 text-blue-400" />,
+      name: "Image",
+      description: "Image URL or base64",
+      color: "bg-blue-900/30 border-blue-700/50",
+    },
+    file: {
+      icon: <File className="h-5 w-5 text-emerald-400" />,
+      name: "File",
+      description: "File URL or base64",
+      color: "bg-emerald-900/30 border-emerald-700/50",
+    },
+    video: {
+      icon: <Video className="h-5 w-5 text-purple-400" />,
+      name: "Video",
+      description: "Video URL or base64",
+      color: "bg-purple-900/30 border-purple-700/50",
+    },
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 border-b border-neutral-700 flex-shrink-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-md font-medium text-neutral-200">Message Type</h3>
+            <Badge
+              variant="outline"
+              className="text-xs bg-orange-900/20 text-orange-400 border-orange-700/50"
+            >
+              {messageType === "text" ? "TEXT" : messageType.toUpperCase()}
+            </Badge>
+          </div>
+          <Select 
+            value={messageType}
+            onValueChange={setMessageType}
+          >
+            <SelectTrigger className="w-[120px] h-8 bg-neutral-800 border-neutral-700 text-neutral-200">
+              <SelectValue placeholder="Select type" />
+            </SelectTrigger>
+            <SelectContent className="bg-neutral-800 border-neutral-700 text-neutral-200">
+              <SelectItem value="text">Text</SelectItem>
+              {/* Other options can be enabled in the future */}
+              {/* <SelectItem value="image">Image</SelectItem>
+              <SelectItem value="file">File</SelectItem>
+              <SelectItem value="video">Video</SelectItem> */}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 min-h-0">
+        <div className="grid gap-4">
+          <div className="p-3 rounded-md bg-orange-900/10 border border-orange-700/30 mb-2">
+            <div className="flex items-start gap-2">
+              <div className="bg-orange-900/50 rounded-full p-1.5 flex-shrink-0">
+                <MessageSquare size={18} className="text-orange-300" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="font-medium text-neutral-200">{messageTypeInfo.text.name}</h3>
+                <p className="text-sm text-neutral-400 mt-1">{messageTypeInfo.text.description}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="content">Message Content</Label>
+            <Textarea
+              id="content"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Type your message here..."
+              className="min-h-[150px] bg-neutral-700 border-neutral-600 resize-none"
+            />
+          </div>
+
+          {content.trim() !== "" ? (
+            <div className="rounded-md bg-neutral-700/50 border border-neutral-600 p-3 mt-2">
+              <div className="text-sm font-medium text-neutral-400 mb-1">Preview</div>
+              <div className="flex items-start gap-2 p-2 rounded-md bg-neutral-800/70">
+                <div className="rounded-full bg-orange-900/30 p-1.5 mt-0.5">
+                  <MessageSquare size={15} className="text-orange-400" />
+                </div>
+                <div className="text-sm text-neutral-300 whitespace-pre-wrap">{content}</div>
+              </div>
+            </div>
+          ) : (
+            <div className="rounded-md bg-neutral-700/30 border border-neutral-600/50 p-4 flex flex-col items-center justify-center text-center">
+              <AlertCircle className="h-6 w-6 text-neutral-500 mb-2" />
+              <p className="text-neutral-400 text-sm">Your message will appear here</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="p-4 border-t border-neutral-700 flex-shrink-0">
+        <Button
+          className="w-full bg-orange-700 hover:bg-orange-600 text-white flex items-center gap-2 justify-center"
+          onClick={handleSave}
+        >
+          <Save size={16} />
+          Save Message
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { MessageForm };
diff --git a/frontend/app/agents/workflows/nodes/components/message/MessageNode.tsx b/frontend/app/agents/workflows/nodes/components/message/MessageNode.tsx
new file mode 100644
index 00000000..200b527c
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/message/MessageNode.tsx
@@ -0,0 +1,162 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/message/MessageNode.tsx        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Handle, NodeProps, Position, useEdges } from "@xyflow/react";
+import { MessageCircle, Text, Image, File, Video, ArrowRight } from "lucide-react";
+import { MessageType, MessageTypeEnum } from "../../nodeFunctions";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+import { BaseNode } from "../../BaseNode";
+
+export function MessageNode(props: NodeProps) {
+  const { selected, data } = props;
+  const edges = useEdges();
+  const isExecuting = data.isExecuting as boolean | undefined;
+
+  const isHandleConnected = (handleId: string) => {
+    return edges.some(
+      (edge) => edge.source === props.id && edge.sourceHandle === handleId
+    );
+  };
+
+  const isBottomHandleConnected = isHandleConnected("bottom-handle");
+  
+  const message = data.message as MessageType | undefined;
+
+  const getMessageTypeIcon = (type: string) => {
+    switch (type) {
+      case MessageTypeEnum.TEXT:
+        return <Text className="h-4 w-4 text-orange-400" />;
+      case "image":
+        return <Image className="h-4 w-4 text-blue-400" />;
+      case "file":
+        return <File className="h-4 w-4 text-emerald-400" />;
+      case "video":
+        return <Video className="h-4 w-4 text-purple-400" />;
+      default:
+        return <MessageCircle className="h-4 w-4 text-orange-400" />;
+    }
+  };
+
+  const getMessageTypeColor = (type: string) => {
+    switch (type) {
+      case MessageTypeEnum.TEXT:
+        return 'bg-orange-900/30 text-orange-400 border-orange-700/40';
+      case "image":
+        return 'bg-blue-900/30 text-blue-400 border-blue-700/40';
+      case "file":
+        return 'bg-emerald-900/30 text-emerald-400 border-emerald-700/40';
+      case "video":
+        return 'bg-purple-900/30 text-purple-400 border-purple-700/40';
+      default:
+        return 'bg-orange-900/30 text-orange-400 border-orange-700/40';
+    }
+  };
+
+  const getMessageTypeName = (type: string) => {
+    const messageTypes: Record<string, string> = {
+      text: "Text Message",
+      image: "Image",
+      file: "File",
+      video: "Video",
+    };
+    return messageTypes[type] || type;
+  };
+
+  return (
+    <BaseNode hasTarget={true} selected={selected || false} borderColor="orange" isExecuting={isExecuting}>
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-900/40 shadow-sm">
+            <MessageCircle className="h-5 w-5 text-orange-400" />
+          </div>
+          <div>
+            <p className="text-lg font-medium text-orange-400">
+              {data.label as string}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {message ? (
+        <div className="mb-3 rounded-lg border border-orange-700/40 bg-orange-950/10 p-3 transition-all duration-200 hover:border-orange-600/50 hover:bg-orange-900/10">
+          <div className="flex flex-col">
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex items-center">
+                {getMessageTypeIcon(message.type)}
+                <span className="ml-1.5 font-medium text-white">{getMessageTypeName(message.type)}</span>
+              </div>
+              <Badge
+                variant="outline"
+                className={cn("px-1.5 py-0 text-xs", getMessageTypeColor(message.type))}
+              >
+                {message.type}
+              </Badge>
+            </div>
+            
+            {message.content && (
+              <p className="mt-2 text-xs text-neutral-400 line-clamp-2">
+                {message.content.slice(0, 80)} {message.content.length > 80 && '...'}
+              </p>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="mb-3 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-orange-700/40 bg-orange-950/10 p-5 text-center transition-all duration-200 hover:border-orange-600/50 hover:bg-orange-900/20">
+          <MessageCircle className="h-8 w-8 text-orange-700/50 mb-2" />
+          <p className="text-orange-400">No message configured</p>
+          <p className="mt-1 text-xs text-neutral-500">Click to configure</p>
+        </div>
+      )}
+
+      <div className="mt-2 flex items-center justify-end text-sm text-neutral-400 transition-colors">
+        <div className="flex items-center space-x-1 rounded-md py-1 px-2">
+          <span>Next step</span>
+          <ArrowRight className="h-3.5 w-3.5" />
+        </div>
+        <Handle
+          className={cn(
+            "!w-3 !h-3 !rounded-full transition-all duration-300",
+            isBottomHandleConnected ? "!bg-orange-500 !border-orange-400" : "!bg-neutral-400 !border-neutral-500",
+            selected && isBottomHandleConnected && "!bg-orange-400 !border-orange-300"
+          )}
+          style={{
+            right: "-8px",
+            top: "calc(100% - 25px)",
+          }}
+          type="source"
+          position={Position.Right}
+          id="bottom-handle"
+        />
+      </div>
+    </BaseNode>
+  );
+}
diff --git a/frontend/app/agents/workflows/nodes/components/start/StartNode.tsx b/frontend/app/agents/workflows/nodes/components/start/StartNode.tsx
new file mode 100644
index 00000000..5a9c2889
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/components/start/StartNode.tsx
@@ -0,0 +1,100 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/start/StartNode.tsx            │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Handle, Node, NodeProps, Position, useEdges } from "@xyflow/react";
+import { Zap, ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+import { BaseNode } from "../../BaseNode";
+
+export type StartNodeType = Node<
+  {
+    label?: string;
+  },
+  "start-node"
+>;
+
+export function StartNode(props: NodeProps) {
+  const { selected, data } = props;
+  const edges = useEdges();
+  const isExecuting = data.isExecuting as boolean | undefined;
+
+  const isSourceHandleConnected = edges.some(
+    (edge) => edge.source === props.id
+  );
+
+  return (
+    <BaseNode hasTarget={true} selected={selected || false} borderColor="emerald" isExecuting={isExecuting}>
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-900/40 shadow-sm">
+            <Zap className="h-5 w-5 text-emerald-400" />
+          </div>
+          <div>
+            <p className="text-lg font-medium text-emerald-400">Start</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-3 rounded-lg border border-emerald-700/40 bg-emerald-950/10 p-3 transition-all duration-200 hover:border-emerald-600/50 hover:bg-emerald-900/10">
+        <div className="flex flex-col">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex items-center">
+              <span className="font-medium text-white">Input: User content</span>
+            </div>
+          </div>
+          
+          <p className="mt-2 text-xs text-neutral-400">
+            The workflow begins when a user sends a message to the agent
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-2 flex items-center justify-end text-sm text-neutral-400 transition-colors">
+        <div className="flex items-center space-x-1 rounded-md py-1 px-2">
+          <span>Next step</span>
+          <ArrowRight className="h-3.5 w-3.5" />
+        </div>
+        <Handle
+          className={cn(
+            "!w-3 !h-3 !rounded-full transition-all duration-300",
+            isSourceHandleConnected ? "!bg-emerald-500 !border-emerald-400" : "!bg-neutral-400 !border-neutral-500",
+            selected && isSourceHandleConnected && "!bg-emerald-400 !border-emerald-300"
+          )}
+          style={{
+            right: "-8px",
+            top: "calc(100% - 25px)",
+          }}
+          type="source"
+          position={Position.Right}
+        />
+      </div>
+    </BaseNode>
+  );
+}
diff --git a/frontend/app/agents/workflows/nodes/index.ts b/frontend/app/agents/workflows/nodes/index.ts
new file mode 100644
index 00000000..47bc3267
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/index.ts
@@ -0,0 +1,109 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @author: Victor Calazans - Implementation of Delay node type                 │
+│ @file: /app/agents/workflows/nodes/index.ts                                  │
+│ Developed by: Davidson Gomes                                                 │
+│ Delay node functionality developed by: Victor Calazans                       │
+│ Creation date: May 13, 2025                                                  │
+│ Delay implementation date: May 17, 2025                                      │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import type { NodeTypes, BuiltInNode, Node } from "@xyflow/react";
+
+import { ConditionNode } from "./components/condition/ConditionNode";
+import { AgentNode } from "./components/agent/AgentNode";
+import { StartNode, StartNodeType } from "./components/start/StartNode";
+import { MessageNode } from "./components/message/MessageNode";
+import { DelayNode } from "./components/delay/DelayNode";
+
+import "./style.css";
+import {
+  ConditionType,
+  MessageType,
+  DelayType,
+} from "./nodeFunctions";
+import { Agent } from "@/types/agent";
+
+type AgentNodeType = Node<
+  {
+    label?: string;
+    agent?: Agent;
+  },
+  "agent-node"
+>;
+
+type MessageNodeType = Node<
+  {
+    label?: string;
+    message?: MessageType;
+  },
+  "message-node"
+>;
+
+type DelayNodeType = Node<
+  {
+    label?: string;
+    delay?: DelayType;
+  },
+  "delay-node"
+>;
+
+type ConditionNodeType = Node<
+  {
+    label?: string;
+    integration?: string;
+    icon?: string;
+    conditions?: ConditionType[];
+  },
+  "condition-node"
+>;
+
+export type AppNode =
+  | BuiltInNode
+  | StartNodeType
+  | AgentNodeType
+  | ConditionNodeType
+  | MessageNodeType
+  | DelayNodeType;
+
+export type NodeType = AppNode["type"];
+
+export const initialNodes: AppNode[] = [
+  {
+    id: "start-node",
+    type: "start-node",
+    position: { x: -100, y: 100 },
+    data: {
+      label: "Start",
+    },
+  },
+];
+
+export const nodeTypes = {
+  "start-node": StartNode,
+  "agent-node": AgentNode,
+  "message-node": MessageNode,
+  "condition-node": ConditionNode,
+  "delay-node": DelayNode,
+} satisfies NodeTypes;
diff --git a/frontend/app/agents/workflows/nodes/nodeFunctions.ts b/frontend/app/agents/workflows/nodes/nodeFunctions.ts
new file mode 100644
index 00000000..48006aff
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/nodeFunctions.ts
@@ -0,0 +1,65 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @author: Victor Calazans - Implementation of Delay types                     │
+│ @file: /app/agents/workflows/nodes/nodeFunctions.ts                          │
+│ Developed by: Davidson Gomes                                                 │
+│ Delay node functionality developed by: Victor Calazans                       │
+│ Creation date: May 13, 2025                                                  │
+│ Delay implementation date: May 17, 2025                                      │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-unused-vars */
+export enum ConditionTypeEnum {
+  PREVIOUS_OUTPUT = "previous-output",
+}
+
+export enum MessageTypeEnum {
+  TEXT = "text",
+}
+
+export enum DelayUnitEnum {
+  SECONDS = "seconds",
+  MINUTES = "minutes",
+  HOURS = "hours",
+  DAYS = "days",
+}
+
+export type MessageType = {
+  type: MessageTypeEnum;
+  content: string;
+};
+
+export type DelayType = {
+  value: number;
+  unit: DelayUnitEnum;
+  description?: string;
+};
+
+export type ConditionType = {
+  id: string;
+  type: ConditionTypeEnum;
+  data?: any;
+};
+
diff --git a/frontend/app/agents/workflows/nodes/style.css b/frontend/app/agents/workflows/nodes/style.css
new file mode 100644
index 00000000..beaf80fa
--- /dev/null
+++ b/frontend/app/agents/workflows/nodes/style.css
@@ -0,0 +1,54 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/style.css                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* .react-flow__handle {
+  background-color: #8492A6;
+  border-radius: 50%;
+  height: 16px;
+  position: absolute;
+  width: 16px;
+} */
+
+/* .react-flow__handle-right {
+  right: -6px;
+  top: 88%;
+  transform: translateY(-75%);
+  background-color: #f5f5f5 !important;
+  border: 3px solid #8492A6 !important;
+} */
+
+/* .react-flow__handle-left {
+  left: 0px;
+  top: 40%;
+  width: 60px;
+  border-radius: 0;
+  height: 50%;
+  transform: translateY(-75%);
+  background-color: transparent;
+  border: none;
+} */
\ No newline at end of file
diff --git a/frontend/app/agents/workflows/page.tsx b/frontend/app/agents/workflows/page.tsx
new file mode 100644
index 00000000..f5bcaf08
--- /dev/null
+++ b/frontend/app/agents/workflows/page.tsx
@@ -0,0 +1,218 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/page.tsx                                        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useEffect, useState, useRef, Suspense } from "react";
+import { useSearchParams } from "next/navigation";
+import Canva from "./Canva";
+import { Agent } from "@/types/agent";
+import { getAgent, updateAgent } from "@/services/agentService";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Save, Download, PlayIcon } from "lucide-react";
+import Link from "next/link";
+import { ReactFlowProvider } from "@xyflow/react";
+import { DnDProvider } from "@/contexts/DnDContext";
+import { NodeDataProvider } from "@/contexts/NodeDataContext";
+import { SourceClickProvider } from "@/contexts/SourceClickContext";
+import { useToast } from "@/hooks/use-toast";
+import { AgentTestChatModal } from "./nodes/components/agent/AgentTestChatModal";
+
+function WorkflowsContent() {
+  const searchParams = useSearchParams();
+  const agentId = searchParams.get("agentId");
+  const [agent, setAgent] = useState<Agent | null>(null);
+  const [loading, setLoading] = useState(false);
+  const canvaRef = useRef<any>(null);
+  const { toast } = useToast();
+  const [isTestModalOpen, setIsTestModalOpen] = useState(false);
+
+  const user =
+    typeof window !== "undefined"
+      ? JSON.parse(localStorage.getItem("user") || "{}")
+      : {};
+  const clientId = user?.client_id || "";
+
+  useEffect(() => {
+    if (agentId && clientId) {
+      setLoading(true);
+      getAgent(agentId, clientId)
+        .then((res) => {
+          setAgent(res.data);
+          if (typeof window !== "undefined") {
+            localStorage.setItem(
+              "current_workflow_agent",
+              JSON.stringify(res.data)
+            );
+          }
+        })
+        .catch((err) => {
+          console.error("Error loading agent:", err);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [agentId, clientId]);
+
+  useEffect(() => {
+    return () => {
+      if (typeof window !== "undefined") {
+        localStorage.removeItem("current_workflow_agent");
+      }
+    };
+  }, []);
+
+  const handleSaveWorkflow = async () => {
+    if (!agent || !canvaRef.current) return;
+
+    try {
+      const { nodes, edges } = canvaRef.current.getFlowData();
+
+      const workflow = {
+        nodes,
+        edges,
+      };
+
+      await updateAgent(agent.id, {
+        ...agent,
+        config: {
+          ...agent.config,
+          workflow,
+        },
+      });
+
+      toast({
+        title: "Workflow saved",
+        description: "The changes were saved successfully",
+      });
+
+      canvaRef.current.setHasChanges(false);
+    } catch (error) {
+      console.error("Error saving workflow:", error);
+      toast({
+        title: "Error saving workflow",
+        description: "Unable to save the changes",
+        variant: "destructive",
+      });
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full h-screen bg-[#121212] flex items-center justify-center">
+        <div className="text-white text-xl">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative w-full h-screen flex flex-col" data-workflow-page="true">
+      {/* Header with controls */}
+      <div className="w-full bg-[#121212] py-4 px-6 z-10 flex items-center justify-between border-b border-neutral-800">
+        <div className="flex items-center gap-2">
+          <Link href="/agents">
+            <Button
+              variant="outline"
+              className="bg-neutral-800 border-neutral-700 text-neutral-200 hover:bg-neutral-700"
+            >
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Agents
+            </Button>
+          </Link>
+
+          {agent && (
+            <div className="bg-neutral-800 px-4 py-2 rounded-md">
+              <h2 className="text-neutral-200 font-medium">
+                {agent.name} -{" "}
+                <span className="text-neutral-400 text-sm">{agent.type}</span>
+              </h2>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            className="bg-neutral-800 border-neutral-700 text-neutral-200 hover:bg-neutral-700"
+            onClick={handleSaveWorkflow}
+          >
+            <Save className="mr-2 h-4 w-4" />
+            Save
+          </Button>
+          {agent && (
+            <Button
+              variant="outline"
+              className="bg-green-800 border-green-700 text-green-200 hover:bg-green-700"
+              onClick={() => setIsTestModalOpen(true)}
+            >
+              <PlayIcon className="h-4 w-4 mr-2" />
+              Test Workflow
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Main content area */}
+      <div className="flex-1 relative overflow-hidden">
+        {agent && isTestModalOpen && (
+          <AgentTestChatModal
+            open={isTestModalOpen}
+            onOpenChange={setIsTestModalOpen}
+            agent={agent}
+            canvasRef={canvaRef} // Pass the canvas reference to allow visualization of running nodes
+          />
+        )}
+
+        <NodeDataProvider>
+          <SourceClickProvider>
+            <DnDProvider>
+              <ReactFlowProvider>
+                <Canva agent={agent} ref={canvaRef} data-canvas-ref="true" />
+              </ReactFlowProvider>
+            </DnDProvider>
+          </SourceClickProvider>
+        </NodeDataProvider>
+      </div>
+    </div>
+  );
+}
+
+export default function WorkflowsPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="w-full h-screen bg-[#121212] flex items-center justify-center">
+          <div className="text-white text-xl">Loading...</div>
+        </div>
+      }
+    >
+      <WorkflowsContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/app/agents/workflows/utils.ts b/frontend/app/agents/workflows/utils.ts
new file mode 100644
index 00000000..e76c0663
--- /dev/null
+++ b/frontend/app/agents/workflows/utils.ts
@@ -0,0 +1,199 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/utils.ts                                        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { Node, NodePositionChange, XYPosition } from "@xyflow/react";
+
+type GetHelperLinesResult = {
+  horizontal?: number;
+  vertical?: number;
+  snapPosition: Partial<XYPosition>;
+};
+
+// this utility function can be called with a position change (inside onNodesChange)
+// it checks all other nodes and calculated the helper line positions and the position where the current node should snap to
+export function getHelperLines(
+  change: NodePositionChange,
+  nodes: Node[],
+  distance = 5,
+): GetHelperLinesResult {
+  const defaultResult = {
+    horizontal: undefined,
+    vertical: undefined,
+    snapPosition: { x: undefined, y: undefined },
+  };
+  const nodeA = nodes.find((node) => node.id === change.id);
+
+  if (!nodeA || !change.position) {
+    return defaultResult;
+  }
+
+  const nodeABounds = {
+    left: change.position.x,
+    right: change.position.x + (nodeA.measured?.width ?? 0),
+    top: change.position.y,
+    bottom: change.position.y + (nodeA.measured?.height ?? 0),
+    width: nodeA.measured?.width ?? 0,
+    height: nodeA.measured?.height ?? 0,
+  };
+
+  let horizontalDistance = distance;
+  let verticalDistance = distance;
+
+  return nodes
+    .filter((node) => node.id !== nodeA.id)
+    .reduce<GetHelperLinesResult>((result, nodeB) => {
+      const nodeBBounds = {
+        left: nodeB.position.x,
+        right: nodeB.position.x + (nodeB.measured?.width ?? 0),
+        top: nodeB.position.y,
+        bottom: nodeB.position.y + (nodeB.measured?.height ?? 0),
+        width: nodeB.measured?.width ?? 0,
+        height: nodeB.measured?.height ?? 0,
+      };
+
+      //  |‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     A     |
+      //  |___________|
+      //  |
+      //  |
+      //  |‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     B     |
+      //  |___________|
+      const distanceLeftLeft = Math.abs(nodeABounds.left - nodeBBounds.left);
+
+      if (distanceLeftLeft < verticalDistance) {
+        result.snapPosition.x = nodeBBounds.left;
+        result.vertical = nodeBBounds.left;
+        verticalDistance = distanceLeftLeft;
+      }
+
+      //  |‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     A     |
+      //  |___________|
+      //              |
+      //              |
+      //  |‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     B     |
+      //  |___________|
+      const distanceRightRight = Math.abs(
+        nodeABounds.right - nodeBBounds.right,
+      );
+
+      if (distanceRightRight < verticalDistance) {
+        result.snapPosition.x = nodeBBounds.right - nodeABounds.width;
+        result.vertical = nodeBBounds.right;
+        verticalDistance = distanceRightRight;
+      }
+
+      //              |‾‾‾‾‾‾‾‾‾‾‾|
+      //              |     A     |
+      //              |___________|
+      //              |
+      //              |
+      //  |‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     B     |
+      //  |___________|
+      const distanceLeftRight = Math.abs(nodeABounds.left - nodeBBounds.right);
+
+      if (distanceLeftRight < verticalDistance) {
+        result.snapPosition.x = nodeBBounds.right;
+        result.vertical = nodeBBounds.right;
+        verticalDistance = distanceLeftRight;
+      }
+
+      //  |‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     A     |
+      //  |___________|
+      //              |
+      //              |
+      //              |‾‾‾‾‾‾‾‾‾‾‾|
+      //              |     B     |
+      //              |___________|
+      const distanceRightLeft = Math.abs(nodeABounds.right - nodeBBounds.left);
+
+      if (distanceRightLeft < verticalDistance) {
+        result.snapPosition.x = nodeBBounds.left - nodeABounds.width;
+        result.vertical = nodeBBounds.left;
+        verticalDistance = distanceRightLeft;
+      }
+
+      //  |‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     A     |     |     B     |
+      //  |___________|     |___________|
+      const distanceTopTop = Math.abs(nodeABounds.top - nodeBBounds.top);
+
+      if (distanceTopTop < horizontalDistance) {
+        result.snapPosition.y = nodeBBounds.top;
+        result.horizontal = nodeBBounds.top;
+        horizontalDistance = distanceTopTop;
+      }
+
+      //  |‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     A     |
+      //  |___________|_________________
+      //                    |           |
+      //                    |     B     |
+      //                    |___________|
+      const distanceBottomTop = Math.abs(nodeABounds.bottom - nodeBBounds.top);
+
+      if (distanceBottomTop < horizontalDistance) {
+        result.snapPosition.y = nodeBBounds.top - nodeABounds.height;
+        result.horizontal = nodeBBounds.top;
+        horizontalDistance = distanceBottomTop;
+      }
+
+      //  |‾‾‾‾‾‾‾‾‾‾‾|     |‾‾‾‾‾‾‾‾‾‾‾|
+      //  |     A     |     |     B     |
+      //  |___________|_____|___________|
+      const distanceBottomBottom = Math.abs(
+        nodeABounds.bottom - nodeBBounds.bottom,
+      );
+
+      if (distanceBottomBottom < horizontalDistance) {
+        result.snapPosition.y = nodeBBounds.bottom - nodeABounds.height;
+        result.horizontal = nodeBBounds.bottom;
+        horizontalDistance = distanceBottomBottom;
+      }
+
+      //                    |‾‾‾‾‾‾‾‾‾‾‾|
+      //                    |     B     |
+      //                    |           |
+      //  |‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
+      //  |     A     |
+      //  |___________|
+      const distanceTopBottom = Math.abs(nodeABounds.top - nodeBBounds.bottom);
+
+      if (distanceTopBottom < horizontalDistance) {
+        result.snapPosition.y = nodeBBounds.bottom;
+        result.horizontal = nodeBBounds.bottom;
+        horizontalDistance = distanceTopBottom;
+      }
+
+      return result;
+    }, defaultResult);
+}
diff --git a/frontend/app/chat/components/AgentInfoDialog.tsx b/frontend/app/chat/components/AgentInfoDialog.tsx
new file mode 100644
index 00000000..8d7afaad
--- /dev/null
+++ b/frontend/app/chat/components/AgentInfoDialog.tsx
@@ -0,0 +1,497 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/components/AgentInfoDialog.tsx                              │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 14, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect } from "react";
+import { Agent } from "@/types/agent";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Bot,
+  Code,
+  WrenchIcon,
+  Layers,
+  Server,
+  TagIcon,
+  Share,
+  Edit,
+  Loader2,
+  Download,
+} from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { listApiKeys, ApiKey } from "@/services/agentService";
+import { listMCPServers } from "@/services/mcpServerService";
+import { availableModels } from "@/types/aiModels";
+import { MCPServer } from "@/types/mcpServer";
+import { AgentForm } from "@/app/agents/forms/AgentForm";
+import { exportAsJson } from "@/lib/utils";
+
+interface AgentInfoDialogProps {
+  agent: Agent | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAgentUpdated?: (updatedAgent: Agent) => void;
+}
+
+export function AgentInfoDialog({
+  agent,
+  open,
+  onOpenChange,
+  onAgentUpdated,
+}: AgentInfoDialogProps) {
+  const [activeTab, setActiveTab] = useState("info");
+  const [isAgentFormOpen, setIsAgentFormOpen] = useState(false);
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [availableMCPs, setAvailableMCPs] = useState<MCPServer[]>([]);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const user =
+    typeof window !== "undefined"
+      ? JSON.parse(localStorage.getItem("user") || "{}")
+      : {};
+  const clientId = user?.client_id || "";
+
+  useEffect(() => {
+    if (!clientId || !open) return;
+
+    const loadData = async () => {
+      try {
+        const [apiKeysResponse, mcpServersResponse] = await Promise.all([
+          listApiKeys(clientId),
+          listMCPServers(),
+        ]);
+
+        setApiKeys(apiKeysResponse.data);
+        setAvailableMCPs(mcpServersResponse.data);
+      } catch (error) {
+        console.error("Error loading data for agent form:", error);
+      }
+    };
+
+    loadData();
+  }, [clientId, open]);
+
+  const getAgentTypeName = (type: string) => {
+    const agentTypes: Record<string, string> = {
+      llm: "LLM Agent",
+      a2a: "A2A Agent",
+      sequential: "Sequential Agent",
+      parallel: "Parallel Agent",
+      loop: "Loop Agent",
+      workflow: "Workflow Agent",
+      task: "Task Agent",
+    };
+    return agentTypes[type] || type;
+  };
+
+  const handleSaveAgent = async (agentData: Partial<Agent>) => {
+    if (!agent?.id) return;
+
+    setIsLoading(true);
+    try {
+      const { updateAgent } = await import("@/services/agentService");
+      const updated = await updateAgent(agent.id, agentData as any);
+
+      if (updated.data && onAgentUpdated) {
+        onAgentUpdated(updated.data);
+      }
+
+      setIsAgentFormOpen(false);
+    } catch (error) {
+      console.error("Error updating agent:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Function to export the agent as JSON
+  const handleExportAgent = async () => {
+    if (!agent) return;
+    
+    try {
+      // First fetch all agents to properly resolve agent_tools references
+      const { listAgents } = await import("@/services/agentService");
+      const allAgentsResponse = await listAgents(clientId, 0, 1000);
+      const allAgents = allAgentsResponse.data || [];
+      
+      exportAsJson(
+        agent, 
+        `agent-${agent.name.replace(/\s+/g, "-").toLowerCase()}-${agent.id.substring(0, 8)}`,
+        true,
+        allAgents
+      );
+    } catch (error) {
+      console.error("Error exporting agent:", error);
+    }
+  };
+
+  if (!agent) return null;
+
+  const getToolsCount = () => {
+    let count = 0;
+    if (agent.config?.tools) count += agent.config.tools.length;
+    if (agent.config?.custom_tools?.http_tools)
+      count += agent.config.custom_tools.http_tools.length;
+    if (agent.config?.agent_tools)
+      count += agent.config.agent_tools.length;
+    return count;
+  };
+
+  const getSubAgentsCount = () => {
+    return agent.config?.sub_agents?.length || 0;
+  };
+
+  const getMCPServersCount = () => {
+    let count = 0;
+    if (agent.config?.mcp_servers) count += agent.config.mcp_servers.length;
+    if (agent.config?.custom_mcp_servers)
+      count += agent.config.custom_mcp_servers.length;
+    return count;
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-[600px] max-h-[85vh] flex flex-col overflow-hidden bg-neutral-900 border-neutral-700">
+          <DialogHeader className="flex flex-row items-start justify-between pb-2">
+            <div>
+              <DialogTitle className="text-xl text-white flex items-center gap-2">
+                <Bot className="h-5 w-5 text-emerald-400" />
+                {agent.name}
+              </DialogTitle>
+              <DialogDescription className="text-neutral-400 mt-1">
+                {agent.description || "No description available"}
+              </DialogDescription>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Badge
+                variant="outline"
+                className="bg-neutral-800 border-neutral-700 text-emerald-400"
+              >
+                {getAgentTypeName(agent.type)}
+              </Badge>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 rounded-full bg-neutral-800 border-neutral-700 hover:bg-emerald-900 hover:text-emerald-400"
+                onClick={handleExportAgent}
+                title="Export agent as JSON"
+              >
+                <Download className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 rounded-full bg-neutral-800 border-neutral-700 hover:bg-emerald-900 hover:text-emerald-400"
+                onClick={() => setIsAgentFormOpen(true)}
+                title="Edit agent"
+              >
+                <Edit className="h-4 w-4" />
+              </Button>
+            </div>
+          </DialogHeader>
+
+          <Tabs
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className="flex-1 overflow-hidden flex flex-col"
+          >
+            <TabsList className="bg-neutral-800 p-1 border-b border-neutral-700">
+              <TabsTrigger
+                value="info"
+                className="data-[state=active]:bg-neutral-700 data-[state=active]:text-emerald-400"
+              >
+                Information
+              </TabsTrigger>
+              <TabsTrigger
+                value="tools"
+                className="data-[state=active]:bg-neutral-700 data-[state=active]:text-emerald-400"
+              >
+                Tools
+              </TabsTrigger>
+              <TabsTrigger
+                value="config"
+                className="data-[state=active]:bg-neutral-700 data-[state=active]:text-emerald-400"
+              >
+                Configuration
+              </TabsTrigger>
+            </TabsList>
+
+            <ScrollArea className="flex-1 p-4">
+              <TabsContent value="info" className="mt-0 space-y-4">
+                <div className="space-y-3">
+                  <div className="grid grid-cols-3 gap-3">
+                    <div className="bg-neutral-800 p-3 rounded-md border border-neutral-700 flex flex-col items-center justify-center text-center">
+                      <Code className="h-5 w-5 text-emerald-400 mb-1" />
+                      <span className="text-xs text-neutral-400">Model</span>
+                      <span className="text-sm text-neutral-200 mt-1 font-medium">
+                        {agent.model || "Not specified"}
+                      </span>
+                    </div>
+
+                    <div className="bg-neutral-800 p-3 rounded-md border border-neutral-700 flex flex-col items-center justify-center text-center">
+                      <TagIcon className="h-5 w-5 text-emerald-400 mb-1" />
+                      <span className="text-xs text-neutral-400">Tools</span>
+                      <span className="text-sm text-neutral-200 mt-1 font-medium">
+                        {getToolsCount()}
+                      </span>
+                    </div>
+
+                    <div className="bg-neutral-800 p-3 rounded-md border border-neutral-700 flex flex-col items-center justify-center text-center">
+                      <Layers className="h-5 w-5 text-emerald-400 mb-1" />
+                      <span className="text-xs text-neutral-400">
+                        Sub-agents
+                      </span>
+                      <span className="text-sm text-neutral-200 mt-1 font-medium">
+                        {getSubAgentsCount()}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="bg-neutral-800 p-4 rounded-md border border-neutral-700">
+                    <h3 className="text-sm font-medium text-emerald-400 mb-2">
+                      Agent Role
+                    </h3>
+                    <p className="text-neutral-300 text-sm">
+                      {agent.role || "Not specified"}
+                    </p>
+                    <h3 className="text-sm font-medium text-emerald-400 mb-2">
+                      Agent Goal
+                    </h3>
+                    <p className="text-neutral-300 text-sm">
+                      {agent.goal || "Not specified"}
+                    </p>
+                    {/* agent instructions: agent.instruction */}
+                    <h3 className="text-sm font-medium text-emerald-400 mb-2">
+                      Agent Instructions
+                    </h3>
+                    <div className="bg-neutral-900 p-3 rounded-md border border-neutral-700 max-h-[200px] overflow-y-auto">
+                      <pre className="text-xs text-neutral-300 whitespace-pre-wrap font-mono">
+                        {agent.instruction || "No instructions provided"}
+                      </pre>
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="tools" className="mt-0 space-y-4">
+                {getToolsCount() > 0 ? (
+                  <div className="space-y-3">
+                    {/* Built-in tools */}
+                    {agent.config?.tools && agent.config.tools.length > 0 && (
+                      <div className="bg-neutral-800 p-4 rounded-md border border-neutral-700">
+                        <h3 className="text-sm font-medium text-emerald-400 mb-2">
+                          Built-in Tools
+                        </h3>
+                        <div className="grid grid-cols-2 gap-2">
+                          {agent.config.tools.map((tool, index) => (
+                            <Badge
+                              key={index}
+                              variant="outline"
+                              className="bg-neutral-900 border-neutral-700 text-neutral-300 p-2 justify-start"
+                            >
+                              <TagIcon className="h-3.5 w-3.5 mr-1.5 text-emerald-400" />
+                              {typeof tool === 'string' ? tool : 'Custom Tool'}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Agent Tools */}
+                    {agent.config?.agent_tools && agent.config.agent_tools.length > 0 && (
+                      <div className="bg-neutral-800 p-4 rounded-md border border-neutral-700">
+                        <h3 className="text-sm font-medium text-emerald-400 mb-2">
+                          Agent Tools
+                        </h3>
+                        <div className="space-y-2">
+                          {agent.config.agent_tools.map((agentId, index) => (
+                            <div
+                              key={index}
+                              className="bg-neutral-900 p-2 rounded-md border border-neutral-700 flex items-center"
+                            >
+                              <div className="flex items-center">
+                                <Bot className="h-3.5 w-3.5 mr-2 text-emerald-400" />
+                                <span className="text-sm text-neutral-300">
+                                  {agents.find(a => a.id === agentId)?.name || agentId}
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Custom HTTP tools */}
+                    {agent.config?.custom_tools?.http_tools &&
+                      agent.config.custom_tools.http_tools.length > 0 && (
+                        <div className="bg-neutral-800 p-4 rounded-md border border-neutral-700">
+                          <h3 className="text-sm font-medium text-emerald-400 mb-2">
+                            Custom HTTP Tools
+                          </h3>
+                          <div className="space-y-2">
+                            {agent.config.custom_tools.http_tools.map(
+                              (tool, index) => (
+                                <div
+                                  key={index}
+                                  className="bg-neutral-900 p-2 rounded-md border border-neutral-700 flex items-center justify-between"
+                                >
+                                  <div className="flex items-center">
+                                    <Server className="h-3.5 w-3.5 mr-2 text-emerald-400" />
+                                    <span className="text-sm text-neutral-300">
+                                      {tool.name}
+                                    </span>
+                                  </div>
+                                  <Badge
+                                    variant="outline"
+                                    className="text-xs bg-neutral-800 border-neutral-700 text-emerald-400"
+                                  >
+                                    {tool.method}
+                                  </Badge>
+                                </div>
+                              )
+                            )}
+                          </div>
+                        </div>
+                      )}
+                  </div>
+                ) : (
+                  <div className="bg-neutral-800 p-6 rounded-md border border-neutral-700 text-center">
+                    <TagIcon className="h-8 w-8 text-neutral-600 mx-auto mb-2" />
+                    <p className="text-neutral-400">
+                      This agent has no tools configured
+                    </p>
+                  </div>
+                )}
+              </TabsContent>
+
+              <TabsContent value="config" className="mt-0 space-y-4">
+                <div className="space-y-3">
+                  {/* MCP Servers */}
+                  <div className="bg-neutral-800 p-4 rounded-md border border-neutral-700">
+                    <h3 className="text-sm font-medium text-emerald-400 mb-2">
+                      MCP Servers
+                    </h3>
+                    {getMCPServersCount() > 0 ? (
+                      <div className="space-y-2">
+                        {agent.config?.mcp_servers &&
+                          agent.config.mcp_servers.map((mcp, index) => (
+                            <div
+                              key={index}
+                              className="bg-neutral-900 p-2 rounded-md border border-neutral-700 flex items-center"
+                            >
+                              <Server className="h-3.5 w-3.5 mr-2 text-emerald-400" />
+                              <span className="text-sm text-neutral-300">
+                                {mcp.id}
+                              </span>
+                            </div>
+                          ))}
+
+                        {agent.config?.custom_mcp_servers &&
+                          agent.config.custom_mcp_servers.map((mcp, index) => (
+                            <div
+                              key={index}
+                              className="bg-neutral-900 p-2 rounded-md border border-neutral-700 flex items-center"
+                            >
+                              <Server className="h-3.5 w-3.5 mr-2 text-yellow-400" />
+                              <span className="text-sm text-neutral-300">
+                                {mcp.url}
+                              </span>
+                            </div>
+                          ))}
+                      </div>
+                    ) : (
+                      <p className="text-neutral-400 text-sm">
+                        No MCP servers configured
+                      </p>
+                    )}
+                  </div>
+
+                  {/* API Key */}
+                  <div className="bg-neutral-800 p-4 rounded-md border border-neutral-700">
+                    <h3 className="text-sm font-medium text-emerald-400 mb-2">
+                      API Key
+                    </h3>
+                    <p className="text-neutral-300 text-sm">
+                      {agent.api_key_id
+                        ? `Key ID: ${agent.api_key_id}`
+                        : "No API key configured"}
+                    </p>
+                  </div>
+                </div>
+              </TabsContent>
+            </ScrollArea>
+          </Tabs>
+
+          <DialogFooter className="pt-2">
+            <Button
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              className="bg-neutral-800 hover:bg-neutral-700 border-neutral-700 text-neutral-300"
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Agent Edit Form Dialog */}
+      {isAgentFormOpen && agent && (
+        <AgentForm
+          open={isAgentFormOpen}
+          onOpenChange={setIsAgentFormOpen}
+          initialValues={agent}
+          apiKeys={apiKeys}
+          availableModels={availableModels}
+          availableMCPs={availableMCPs}
+          agents={agents}
+          onOpenApiKeysDialog={() => {}}
+          onOpenMCPDialog={() => {}}
+          onOpenCustomMCPDialog={() => {}}
+          onSave={handleSaveAgent}
+          isLoading={isLoading}
+          getAgentNameById={(id) => id}
+          clientId={clientId}
+        />
+      )}
+    </>
+  );
+}
+ 
\ No newline at end of file
diff --git a/frontend/app/chat/components/AttachedFiles.tsx b/frontend/app/chat/components/AttachedFiles.tsx
new file mode 100644
index 00000000..9e5c37b8
--- /dev/null
+++ b/frontend/app/chat/components/AttachedFiles.tsx
@@ -0,0 +1,158 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/components/AttachedFiles.tsx                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: August 24, 2025                                               │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import React from "react";
+import { formatFileSize, isImageFile } from "@/lib/file-utils";
+import { File, FileText, Download, Image } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
+
+interface AttachedFile {
+  filename: string;
+  content_type: string;
+  data?: string;
+  size?: number;
+  preview_url?: string;
+}
+
+interface AttachedFilesProps {
+  files: AttachedFile[];
+  className?: string;
+}
+
+export function AttachedFiles({ files, className = "" }: AttachedFilesProps) {
+  if (!files || files.length === 0) return null;
+
+  const downloadFile = (file: AttachedFile) => {
+    if (!file.data) {
+      toast({
+        title: "File without data for download",
+        description: file.filename,
+      });
+      return;
+    }
+
+    try {
+      const link = document.createElement("a");
+      const dataUrl = file.data.startsWith("data:")
+        ? file.data
+        : `data:${file.content_type};base64,${file.data}`;
+
+      link.href = dataUrl;
+      link.download = file.filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (error) {
+      toast({
+        title: "Error downloading file",
+        description: file.filename,
+      });
+    }
+  };
+
+  return (
+    <div className={`flex flex-col gap-2 mt-2 ${className}`}>
+      <div className="text-xs text-neutral-400 mb-1">Attached files:</div>
+      <div className="flex flex-wrap gap-2">
+        {files
+          .map((file, index) => {
+            if (!file.data) {
+              toast({
+                title: "File without data for display",
+                description: file.filename,
+              });
+              return null;
+            }
+
+            return (
+              <div
+                key={index}
+                className="flex flex-col bg-[#333] rounded-md overflow-hidden border border-[#444] hover:border-[#666] transition-colors"
+              >
+                {isImageFile(file.content_type) && file.data && (
+                  <div className="w-full max-w-[200px] h-[120px] bg-black flex items-center justify-center">
+                    <img
+                      src={
+                        file.preview_url ||
+                        (file.data.startsWith("data:")
+                          ? file.data
+                          : `data:${file.content_type};base64,${file.data}`)
+                      }
+                      alt={file.filename}
+                      className="max-w-full max-h-full object-contain"
+                      onError={(e) => {
+                        toast({
+                          title: "Error loading image",
+                          description: file.filename,
+                        });
+                        (e.target as HTMLImageElement).src =
+                          "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjY2NjYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1pbWFnZS1vZmYiPjxsaW5lIHgxPSIyIiB5MT0iMiIgeDI9IjIyIiB5Mj0iMjIiLz48PHJlY3QgdyA";
+                      }}
+                    />
+                  </div>
+                )}
+                <div className="p-2 flex items-center gap-2">
+                  <div className="flex-shrink-0">
+                    {isImageFile(file.content_type) ? (
+                      <Image className="h-4 w-4 text-emerald-400" />
+                    ) : file.content_type === "application/pdf" ? (
+                      <FileText className="h-4 w-4 text-emerald-400" />
+                    ) : (
+                      <File className="h-4 w-4 text-emerald-400" />
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-xs font-medium truncate max-w-[150px]">
+                      {file.filename}
+                    </div>
+                    {file.size && (
+                      <div className="text-[10px] text-neutral-400">
+                        {formatFileSize(file.size)}
+                      </div>
+                    )}
+                  </div>
+                  {file.data && (
+                    <button
+                      onClick={() => downloadFile(file)}
+                      className="text-emerald-400 hover:text-white transition-colors"
+                      title="Download"
+                    >
+                      <Download className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
+              </div>
+            );
+          })
+          .filter(Boolean)}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/chat/components/ChatContainer.tsx b/frontend/app/chat/components/ChatContainer.tsx
new file mode 100644
index 00000000..e2f5f345
--- /dev/null
+++ b/frontend/app/chat/components/ChatContainer.tsx
@@ -0,0 +1,190 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/components/ChatContainer.tsx                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 14, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import React, { useRef, useEffect, useState } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { MessageSquare, Loader2, Bot, Zap } from "lucide-react";
+import { ChatMessage } from "./ChatMessage";
+import { ChatInput } from "./ChatInput";
+import { ChatMessage as ChatMessageType } from "@/services/sessionService";
+import { cn } from "@/lib/utils";
+
+interface FunctionMessageContent {
+  title: string;
+  content: string;
+  author?: string;
+}
+
+interface ChatContainerProps {
+  messages: ChatMessageType[];
+  isLoading: boolean;
+  onSendMessage: (message: string) => void;
+  agentColor: string;
+  expandedFunctions: Record<string, boolean>;
+  toggleFunctionExpansion: (messageId: string) => void;
+  containsMarkdown: (text: string) => boolean;
+  getMessageText: (message: ChatMessageType) => string | FunctionMessageContent;
+  agentName?: string;
+  containerClassName?: string;
+  messagesContainerClassName?: string;
+  inputContainerClassName?: string;
+  sessionId?: string;
+}
+
+export function ChatContainer({
+  messages,
+  isLoading,
+  onSendMessage,
+  agentColor,
+  expandedFunctions,
+  toggleFunctionExpansion,
+  containsMarkdown,
+  getMessageText,
+  agentName = "Agent",
+  containerClassName = "",
+  messagesContainerClassName = "",
+  inputContainerClassName = "",
+  sessionId,
+}: ChatContainerProps) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const [isInitializing, setIsInitializing] = useState(false);
+
+  const scrollToBottom = () => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  };
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      setTimeout(scrollToBottom, 100);
+    }
+  }, [messages]);
+
+  // Simulate initial loading for smoother UX
+  useEffect(() => {
+    if (sessionId) {
+      setIsInitializing(true);
+      const timer = setTimeout(() => {
+        setIsInitializing(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [sessionId]);
+
+  const isEmpty = messages.length === 0;
+
+  return (
+    <div className={cn(
+      "flex-1 flex flex-col overflow-hidden bg-gradient-to-b from-neutral-900 to-neutral-950",
+      containerClassName
+    )}>
+      <div 
+        className={cn(
+          "flex-1 overflow-hidden p-5",
+          messagesContainerClassName
+        )}
+        style={{ filter: isLoading && !isInitializing ? "blur(1px)" : "none" }}
+      >
+        <ScrollArea
+          ref={messagesContainerRef}
+          className="h-full pr-4"
+        >
+          {isInitializing ? (
+            <div className="flex flex-col items-center justify-center h-full">
+              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center shadow-lg mb-4 animate-pulse">
+                <Zap className="h-5 w-5 text-white" />
+              </div>
+              <p className="text-neutral-400 mb-2">Loading conversation...</p>
+              <div className="flex items-center space-x-2">
+                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce" 
+                  style={{ animationDelay: '0ms' }}></span>
+                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
+                  style={{ animationDelay: '150ms' }}></span>
+                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
+                  style={{ animationDelay: '300ms' }}></span>
+              </div>
+            </div>
+          ) : isEmpty ? (
+            <div className="h-full flex flex-col items-center justify-center text-center p-6">
+              <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500/20 to-emerald-500/20 flex items-center justify-center shadow-lg mb-5 border border-emerald-500/30">
+                <MessageSquare className="h-6 w-6 text-emerald-400" />
+              </div>
+              <h3 className="text-lg font-medium text-neutral-300 mb-2">
+                {`Chat with ${agentName}`}
+              </h3>
+              <p className="text-neutral-500 text-sm max-w-md">
+                Type your message below to start the conversation. This chat will help you interact with the agent and explore its capabilities.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-6 py-4 flex-1">
+              {messages.map((message) => {
+                const messageContent = getMessageText(message);
+                const isExpanded = expandedFunctions[message.id] || false;
+
+                return (
+                  <ChatMessage
+                    key={message.id}
+                    message={message}
+                    agentColor={agentColor}
+                    isExpanded={isExpanded}
+                    toggleExpansion={toggleFunctionExpansion}
+                    containsMarkdown={containsMarkdown}
+                    messageContent={messageContent}
+                    sessionId={sessionId}
+                  />
+                );
+              })}
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+
+      <div className={cn(
+        "p-3 border-t border-neutral-800 bg-neutral-900",
+        inputContainerClassName
+      )}>
+        {isLoading && !isInitializing && (
+          <div className="px-4 py-2 mb-3 rounded-lg bg-neutral-800/50 text-sm text-neutral-400 flex items-center">
+            <Loader2 className="h-3 w-3 mr-2 animate-spin text-emerald-400" />
+            Agent is thinking...
+          </div>
+        )}
+        <ChatInput 
+          onSendMessage={onSendMessage}
+          isLoading={isLoading}
+          placeholder="Type your message..."
+          autoFocus={true}
+        />
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/chat/components/ChatInput.tsx b/frontend/app/chat/components/ChatInput.tsx
new file mode 100644
index 00000000..6ec07b47
--- /dev/null
+++ b/frontend/app/chat/components/ChatInput.tsx
@@ -0,0 +1,270 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/components/ChatInput.tsx                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 14, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import React, { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Loader2, Send, Paperclip, X, Image, FileText, File } from "lucide-react";
+import { FileData, formatFileSize, isImageFile } from "@/lib/file-utils";
+import { toast } from "@/hooks/use-toast";
+
+interface ChatInputProps {
+  onSendMessage: (message: string, files?: FileData[]) => void;
+  isLoading?: boolean;
+  placeholder?: string;
+  className?: string;
+  buttonClassName?: string;
+  containerClassName?: string;
+  autoFocus?: boolean;
+}
+
+export function ChatInput({
+  onSendMessage,
+  isLoading = false,
+  placeholder = "Type your message...",
+  className = "",
+  buttonClassName = "",
+  containerClassName = "",
+  autoFocus = true,
+}: ChatInputProps) {
+  const [messageInput, setMessageInput] = useState("");
+  const [selectedFiles, setSelectedFiles] = useState<FileData[]>([]);
+  const [resetFileUpload, setResetFileUpload] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Autofocus the textarea when the component is mounted
+  React.useEffect(() => {
+    // Small timeout to ensure focus is applied after the complete rendering
+    if (autoFocus) {
+      const timer = setTimeout(() => {
+        if (textareaRef.current && !isLoading) {
+          textareaRef.current.focus();
+        }
+      }, 100);
+      
+      return () => clearTimeout(timer);
+    }
+  }, [isLoading, autoFocus]);
+
+  const handleSendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!messageInput.trim() && selectedFiles.length === 0) return;
+    
+    onSendMessage(messageInput, selectedFiles.length > 0 ? selectedFiles : undefined);
+    
+    setMessageInput("");
+    setSelectedFiles([]);
+    
+    setResetFileUpload(true);
+    
+    setTimeout(() => {
+      setResetFileUpload(false);
+      // Keep the focus on the textarea after sending the message
+      if (autoFocus && textareaRef.current) {
+        textareaRef.current.focus();
+      }
+    }, 100);
+    
+    const textarea = document.querySelector("textarea");
+    if (textarea) textarea.style.height = "auto";
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage(e as unknown as React.FormEvent);
+    }
+  };
+
+  const autoResizeTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const textarea = e.target;
+    textarea.style.height = "auto";
+    const maxHeight = 10 * 24;
+    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+    textarea.style.height = `${newHeight}px`;
+    setMessageInput(textarea.value);
+  };
+
+  const handleFilesSelected = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || e.target.files.length === 0) return;
+    
+    const newFiles = Array.from(e.target.files);
+    const maxFileSize = 10 * 1024 * 1024; // 10MB
+    
+    if (selectedFiles.length + newFiles.length > 5) {
+      toast({
+        title: `You can only attach up to 5 files.`,
+        variant: "destructive",
+      });
+      return;
+    }
+    
+    const validFiles: FileData[] = [];
+    
+    for (const file of newFiles) {
+      if (file.size > maxFileSize) {
+        toast({
+          title: `File ${file.name} exceeds the maximum size of ${formatFileSize(maxFileSize)}.`,
+          variant: "destructive",
+        });
+        continue;
+      }
+      
+      try {
+        const reader = new FileReader();
+        
+        const readFile = new Promise<string>((resolve, reject) => {
+          reader.onload = () => {
+            const base64 = reader.result as string;
+            const base64Data = base64.split(',')[1];
+            resolve(base64Data);
+          };
+          reader.onerror = reject;
+        });
+        
+        reader.readAsDataURL(file);
+        
+        const base64Data = await readFile;
+        const previewUrl = URL.createObjectURL(file);
+        
+        validFiles.push({
+          filename: file.name,
+          content_type: file.type,
+          data: base64Data,
+          size: file.size,
+          preview_url: previewUrl
+        });
+      } catch (error) {
+        console.error("Error processing file:", error);
+        toast({
+          title: `Error processing file ${file.name}`,
+          variant: "destructive",
+        });
+      }
+    }
+    
+    if (validFiles.length > 0) {
+      const updatedFiles = [...selectedFiles, ...validFiles];
+      setSelectedFiles(updatedFiles);
+    }
+    
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const openFileSelector = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className={`flex flex-col w-full ${containerClassName}`}>
+      {selectedFiles.length > 0 && (
+        <div className="flex flex-wrap gap-2 px-2 mb-3 mt-1">
+          {selectedFiles.map((file, index) => (
+            <div 
+              key={index} 
+              className="flex items-center gap-1.5 bg-gradient-to-br from-neutral-800 to-neutral-900 text-white rounded-lg p-2 text-xs border border-neutral-700/50 shadow-sm"
+            >
+              {isImageFile(file.content_type) ? (
+                <Image className="h-4 w-4 text-emerald-400" />
+              ) : file.content_type === 'application/pdf' ? (
+                <FileText className="h-4 w-4 text-emerald-400" />
+              ) : (
+                <File className="h-4 w-4 text-emerald-400" />
+              )}
+              <span className="max-w-[120px] truncate">{file.filename}</span>
+              <span className="text-neutral-400">({formatFileSize(file.size)})</span>
+              <button 
+                onClick={() => {
+                  const updatedFiles = selectedFiles.filter((_, i) => i !== index);
+                  setSelectedFiles(updatedFiles);
+                }}
+                className="ml-1 text-neutral-400 hover:text-white transition-colors bg-neutral-700/30 rounded-full p-1"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      
+      <form 
+        onSubmit={handleSendMessage} 
+        className="flex w-full items-center gap-2 px-2"
+      >
+        {selectedFiles.length < 5 && (
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              openFileSelector();
+            }}
+            type="button"
+            className="flex items-center justify-center w-9 h-9 rounded-full hover:bg-neutral-800/60 text-neutral-400 hover:text-emerald-400 transition-all border border-neutral-700/30"
+            title="Attach file"
+          >
+            <Paperclip className="h-4 w-4" />
+          </button>
+        )}
+        
+        <Textarea
+          value={messageInput}
+          onChange={autoResizeTextarea}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className={`flex-1 bg-neutral-800/40 border-neutral-700/50 text-white focus-visible:ring-emerald-500/50 focus-visible:border-emerald-500/50 min-h-[40px] max-h-[240px] resize-none rounded-xl ${className}`}
+          disabled={isLoading}
+          rows={1}
+          ref={textareaRef}
+        />
+        <Button
+          type="submit"
+          disabled={isLoading || (!messageInput.trim() && selectedFiles.length === 0)}
+          className={`bg-gradient-to-r from-emerald-500 to-emerald-600 text-white hover:from-emerald-600 hover:to-emerald-700 rounded-full shadow-md h-9 w-9 p-0 ${buttonClassName}`}
+        >
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Send className="h-4 w-4" />
+          )}
+        </Button>
+        
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFilesSelected}
+          className="hidden"
+          multiple
+        />
+      </form>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/chat/components/ChatMessage.tsx b/frontend/app/chat/components/ChatMessage.tsx
new file mode 100644
index 00000000..309b535c
--- /dev/null
+++ b/frontend/app/chat/components/ChatMessage.tsx
@@ -0,0 +1,375 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/components/ChatMessage.tsx                                  │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ChatMessage as ChatMessageType } from "@/services/sessionService";
+import { ChevronDown, ChevronRight, Copy, Check, User, Bot, Terminal } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useState } from "react";
+import { InlineDataAttachments } from "./InlineDataAttachments";
+import { cn } from "@/lib/utils";
+
+interface FunctionMessageContent {
+  title: string;
+  content: string;
+  author?: string;
+}
+
+interface AttachedFile {
+  filename: string;
+  content_type: string;
+  data: string;
+  size: number;
+  preview_url?: string;
+}
+
+interface ChatMessageProps {
+  message: ChatMessageType;
+  agentColor: string;
+  isExpanded: boolean;
+  toggleExpansion: (messageId: string) => void;
+  containsMarkdown: (text: string) => boolean;
+  messageContent: string | FunctionMessageContent;
+  sessionId?: string;
+}
+
+export function ChatMessage({
+  message,
+  agentColor,
+  isExpanded,
+  toggleExpansion,
+  containsMarkdown,
+  messageContent,
+  sessionId,
+}: ChatMessageProps) {
+  const [isCopied, setIsCopied] = useState(false);
+  
+  const isUser = message.author === "user";
+  const hasFunctionCall = message.content.parts.some(
+    (part) => part.functionCall || part.function_call
+  );
+  const hasFunctionResponse = message.content.parts.some(
+    (part) => part.functionResponse || part.function_response
+  );
+  const isFunctionMessage = hasFunctionCall || hasFunctionResponse;
+  const isTaskExecutor = typeof messageContent === "object" && 
+    "author" in messageContent && 
+    typeof messageContent.author === "string" && 
+    messageContent.author.endsWith("- Task executor");
+  
+  const inlineDataParts = message.content.parts.filter(part => part.inline_data);
+  const hasInlineData = inlineDataParts.length > 0;
+
+  const copyToClipboard = () => {
+    const textToCopy = typeof messageContent === "string" 
+      ? messageContent 
+      : messageContent.content;
+    
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    });
+  };
+
+  // Generate appropriate avatar content
+  const getAvatar = () => {
+    if (isUser) {
+      return (
+        <Avatar className="bg-gradient-to-br from-emerald-500 to-emerald-700 shadow-md border-0">
+          <AvatarFallback className="bg-transparent">
+            <User className="h-4 w-4 text-white" />
+          </AvatarFallback>
+        </Avatar>
+      );
+    } else {
+      return (
+        <Avatar className={`shadow-md border-0 ${
+          isFunctionMessage 
+            ? "bg-gradient-to-br from-emerald-600 to-emerald-800" 
+            : "bg-gradient-to-br from-purple-600 to-purple-800"
+        }`}>
+          <AvatarFallback className="bg-transparent">
+            {isFunctionMessage ? 
+              <Terminal className="h-4 w-4 text-white" /> : 
+              <Bot className="h-4 w-4 text-white" />
+            }
+          </AvatarFallback>
+        </Avatar>
+      );
+    }
+  };
+
+  return (
+    <div
+      key={message.id}
+      className="flex w-full"
+      style={{ 
+        justifyContent: isUser ? "flex-end" : "flex-start" 
+      }}
+    >
+      <div
+        className="flex gap-3 max-w-[90%]"
+        style={{ 
+          flexDirection: isUser ? "row-reverse" : "row"
+        }}
+      >
+        {getAvatar()}
+        <div
+          className={`rounded-lg p-3 overflow-hidden relative group shadow-md ${
+            isFunctionMessage || isTaskExecutor
+              ? "bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700/50 text-emerald-300 font-mono text-sm"
+              : isUser
+              ? "bg-emerald-500 text-white"
+              : "bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700/50 text-white"
+          }`}
+          style={{ 
+            wordBreak: "break-word", 
+            maxWidth: "calc(100% - 3rem)",
+            width: "100%"
+          }}
+        >
+          {isFunctionMessage || isTaskExecutor ? (
+            <div className="w-full">
+              <div
+                className="flex items-center gap-2 cursor-pointer hover:bg-[#444] rounded px-1 py-0.5 transition-colors"
+                onClick={() => toggleExpansion(message.id)}
+              >
+                {typeof messageContent === "object" &&
+                  "title" in messageContent && (
+                    <>
+                      <div className="flex-1 font-semibold">
+                        {(messageContent as FunctionMessageContent).title}
+                      </div>
+                      <div className="flex items-center justify-center w-5 h-5 text-emerald-400">
+                        {isExpanded ? (
+                          <ChevronDown className="h-4 w-4" />
+                        ) : (
+                          <ChevronRight className="h-4 w-4" />
+                        )}
+                      </div>
+                    </>
+                  )}
+                {isTaskExecutor && (
+                  <>
+                    <div className="flex-1 font-semibold">
+                      Task Execution
+                    </div>
+                    <div className="flex items-center justify-center w-5 h-5 text-emerald-400">
+                      {isExpanded ? (
+                        <ChevronDown className="h-4 w-4" />
+                      ) : (
+                        <ChevronRight className="h-4 w-4" />
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {isExpanded && (
+                <div className="mt-2 pt-2 border-t border-[#555]">
+                  {typeof messageContent === "object" &&
+                    "content" in messageContent && (
+                      <div className="max-w-full overflow-x-auto">
+                        <pre className="whitespace-pre-wrap text-xs max-w-full" style={{ 
+                          wordWrap: "break-word", 
+                          maxWidth: "100%",
+                          wordBreak: "break-all" 
+                        }}>
+                          {(messageContent as FunctionMessageContent).content}
+                        </pre>
+                      </div>
+                    )}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="markdown-content break-words max-w-full overflow-x-auto">
+              {typeof messageContent === "object" &&
+                "author" in messageContent &&
+                messageContent.author !== "user" &&
+                !isTaskExecutor && (
+                  <div className="text-xs text-neutral-400 mb-1">
+                    {messageContent.author}
+                  </div>
+                )}
+              {((typeof messageContent === "string" &&
+                containsMarkdown(messageContent)) ||
+              (typeof messageContent === "object" &&
+                "content" in messageContent &&
+                typeof messageContent.content === "string" &&
+                containsMarkdown(messageContent.content))) &&
+              !isTaskExecutor ? (
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    h1: ({ ...props }) => (
+                      <h1 className="text-xl font-bold my-4" {...props} />
+                    ),
+                    h2: ({ ...props }) => (
+                      <h2 className="text-lg font-bold my-3" {...props} />
+                    ),
+                    h3: ({ ...props }) => (
+                      <h3 className="text-base font-bold my-2" {...props} />
+                    ),
+                    h4: ({ ...props }) => (
+                      <h4 className="font-semibold my-2" {...props} />
+                    ),
+                    p: ({ ...props }) => <p className="mb-3" {...props} />,
+                    ul: ({ ...props }) => (
+                      <ul
+                        className="list-disc pl-6 mb-3 space-y-1"
+                        {...props}
+                      />
+                    ),
+                    ol: ({ ...props }) => (
+                      <ol
+                        className="list-decimal pl-6 mb-3 space-y-1"
+                        {...props}
+                      />
+                    ),
+                    li: ({ ...props }) => <li className="mb-1" {...props} />,
+                    a: ({ ...props }) => (
+                      <a
+                        className="text-emerald-300 underline hover:opacity-80 transition-opacity"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        {...props}
+                      />
+                    ),
+                    blockquote: ({ ...props }) => (
+                      <blockquote
+                        className="border-l-4 border-[#444] pl-4 py-1 italic my-3 text-neutral-300"
+                        {...props}
+                      />
+                    ),
+                    code: ({ className, children, ...props }: any) => {
+                      const match = /language-(\w+)/.exec(className || "");
+                      const isInline =
+                        !match &&
+                        typeof children === "string" &&
+                        !children.includes("\n");
+
+                      if (isInline) {
+                        return (
+                          <code
+                            className="bg-[#333] px-1.5 py-0.5 rounded text-emerald-300 text-sm font-mono"
+                            {...props}
+                          >
+                            {children}
+                          </code>
+                        );
+                      }
+
+                      return (
+                        <div className="my-3 relative group/code">
+                          <div className="bg-[#1a1a1a] rounded-t-md border-b border-[#333] p-2 text-xs text-neutral-400 flex justify-between items-center">
+                            <span>{match?.[1] || "Code"}</span>
+                            <button
+                              onClick={copyToClipboard}
+                              className="text-neutral-400 hover:text-emerald-300 transition-colors"
+                              title="Copy code"
+                            >
+                              {isCopied ? (
+                                <Check className="h-3.5 w-3.5" />
+                              ) : (
+                                <Copy className="h-3.5 w-3.5" />
+                              )}
+                            </button>
+                          </div>
+                          <pre className="bg-[#1a1a1a] p-3 rounded-b-md overflow-x-auto whitespace-pre text-sm">
+                            <code {...props}>{children}</code>
+                          </pre>
+                        </div>
+                      );
+                    },
+                    table: ({ ...props }) => (
+                      <div className="overflow-x-auto my-3">
+                        <table
+                          className="min-w-full border border-[#333] rounded"
+                          {...props}
+                        />
+                      </div>
+                    ),
+                    thead: ({ ...props }) => (
+                      <thead className="bg-[#1a1a1a]" {...props} />
+                    ),
+                    tbody: ({ ...props }) => <tbody {...props} />,
+                    tr: ({ ...props }) => (
+                      <tr
+                        className="border-b border-[#333] last:border-0"
+                        {...props}
+                      />
+                    ),
+                    th: ({ ...props }) => (
+                      <th
+                        className="px-4 py-2 text-left text-xs font-semibold text-neutral-300"
+                        {...props}
+                      />
+                    ),
+                    td: ({ ...props }) => (
+                      <td className="px-4 py-2 text-sm" {...props} />
+                    ),
+                  }}
+                >
+                  {typeof messageContent === "string"
+                    ? messageContent
+                    : messageContent.content}
+                </ReactMarkdown>
+              ) : (
+                <div className="whitespace-pre-wrap">
+                  {typeof messageContent === "string"
+                    ? messageContent
+                    : messageContent.content}
+                </div>
+              )}
+              
+              {hasInlineData && (
+                <InlineDataAttachments parts={inlineDataParts} sessionId={sessionId} />
+              )}
+            </div>
+          )}
+
+          <button
+            onClick={copyToClipboard}
+            className="absolute top-2 right-2 p-1.5 rounded-full bg-neutral-800/80 text-neutral-400 hover:text-white opacity-0 group-hover:opacity-100 transition-all hover:bg-neutral-700/80"
+            title="Copy message"
+          >
+            {isCopied ? (
+              <Check className="h-3.5 w-3.5" />
+            ) : (
+              <Copy className="h-3.5 w-3.5" />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/chat/components/FileUpload.tsx b/frontend/app/chat/components/FileUpload.tsx
new file mode 100644
index 00000000..9c99269d
--- /dev/null
+++ b/frontend/app/chat/components/FileUpload.tsx
@@ -0,0 +1,185 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/components/FileUpload.tsx                                   │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: August 24, 2025                                               │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { FileData, formatFileSize, isImageFile } from "@/lib/file-utils";
+import { Paperclip, X, Image, File, FileText } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
+
+interface FileUploadProps {
+  onFilesSelected: (files: FileData[]) => void;
+  maxFileSize?: number;
+  maxFiles?: number;
+  className?: string;
+  reset?: boolean;
+}
+
+export function FileUpload({
+  onFilesSelected,
+  maxFileSize = 10 * 1024 * 1024, // 10MB
+  maxFiles = 5,
+  className = "",
+  reset = false, // Default false
+}: FileUploadProps) {
+  const [selectedFiles, setSelectedFiles] = useState<FileData[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  useEffect(() => {
+    if (reset && selectedFiles.length > 0) {
+      setSelectedFiles([]);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  }, [reset]);
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || e.target.files.length === 0) return;
+    
+    const newFiles = Array.from(e.target.files);
+    
+    if (selectedFiles.length + newFiles.length > maxFiles) {
+      toast({
+        title: `You can only attach up to ${maxFiles} files.`,
+        variant: "destructive",
+      });
+      return;
+    }
+    
+    const validFiles: FileData[] = [];
+    
+    for (const file of newFiles) {
+      if (file.size > maxFileSize) {
+        toast({
+          title: `File ${file.name} exceeds the maximum size of ${formatFileSize(maxFileSize)}.`,
+          variant: "destructive",
+        });
+        continue;
+      }
+      
+      try {
+        const reader = new FileReader();
+        
+        const readFile = new Promise<string>((resolve, reject) => {
+          reader.onload = () => {
+            const base64 = reader.result as string;
+            const base64Data = base64.split(',')[1];
+            resolve(base64Data);
+          };
+          reader.onerror = reject;
+        });
+        
+        reader.readAsDataURL(file);
+        
+        const base64Data = await readFile;
+        const previewUrl = URL.createObjectURL(file);
+        
+        validFiles.push({
+          filename: file.name,
+          content_type: file.type,
+          data: base64Data,
+          size: file.size,
+          preview_url: previewUrl
+        });
+      } catch (error) {
+        console.error("Error processing file:", error);
+        toast({
+          title: `Error processing file ${file.name}`,
+          variant: "destructive",
+        });
+      }
+    }
+    
+    if (validFiles.length > 0) {
+      const updatedFiles = [...selectedFiles, ...validFiles];
+      setSelectedFiles(updatedFiles);
+      onFilesSelected(updatedFiles);
+    }
+    
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  
+  const removeFile = (index: number) => {
+    const updatedFiles = selectedFiles.filter((_, i) => i !== index);
+    setSelectedFiles(updatedFiles);
+    onFilesSelected(updatedFiles);
+  };
+
+  return (
+    <div className={`flex gap-2 items-center ${className}`}>
+      {selectedFiles.length > 0 && (
+        <div className="flex gap-2 flex-wrap items-center flex-1">
+          {selectedFiles.map((file, index) => (
+            <div 
+              key={index} 
+              className="flex items-center gap-1 bg-[#333] text-white rounded-md p-1.5 text-xs group relative"
+            >
+              {isImageFile(file.content_type) ? (
+                <Image className="h-4 w-4 text-emerald-400" />
+              ) : file.content_type === 'application/pdf' ? (
+                <FileText className="h-4 w-4 text-emerald-400" />
+              ) : (
+                <File className="h-4 w-4 text-emerald-400" />
+              )}
+              <span className="max-w-[120px] truncate">{file.filename}</span>
+              <span className="text-neutral-400">({formatFileSize(file.size)})</span>
+              <button 
+                onClick={() => removeFile(index)}
+                className="ml-1 text-neutral-400 hover:text-white transition-colors"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      
+      {selectedFiles.length < maxFiles && (
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          type="button"
+          className="flex items-center justify-center w-8 h-8 rounded-full hover:bg-[#333] text-neutral-400 hover:text-emerald-400 transition-colors"
+          title="Attach file"
+        >
+          <Paperclip className="h-5 w-5" />
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            className="hidden"
+            multiple
+          />
+        </button>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/chat/components/InlineDataAttachments.tsx b/frontend/app/chat/components/InlineDataAttachments.tsx
new file mode 100644
index 00000000..5bb153ef
--- /dev/null
+++ b/frontend/app/chat/components/InlineDataAttachments.tsx
@@ -0,0 +1,182 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/components/InlineDataAttachments.tsx                        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: August 29, 2025                                               │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { formatFileSize, isImageFile } from "@/lib/file-utils";
+import { File, FileText, Download, Image } from "lucide-react";
+import { ChatPart } from "@/services/sessionService";
+
+interface InlineDataAttachmentsProps {
+  parts: ChatPart[];
+  className?: string;
+  sessionId?: string;
+}
+
+interface ProcessedFile {
+  filename: string;
+  content_type: string;
+  data: string;
+  size: number;
+  preview_url?: string;
+}
+
+export function InlineDataAttachments({ parts, className = "", sessionId }: InlineDataAttachmentsProps) {
+  const [processedFiles, setProcessedFiles] = useState<ProcessedFile[]>([]);
+  const [isProcessed, setIsProcessed] = useState(false);
+
+  useEffect(() => {
+    if (isProcessed) return;
+
+    const validParts = parts.filter(part => part.inline_data && part.inline_data.data);
+    
+    if (validParts.length === 0) {
+      setIsProcessed(true);
+      return;
+    }
+    
+    const files = validParts.map((part, index) => {
+      const { mime_type, data } = part.inline_data!;
+      const extension = mime_type.split('/')[1] || 'file';
+      
+      let filename = '';
+      
+      if (part.inline_data?.metadata?.filename) {
+        filename = part.inline_data.metadata.filename;
+      } 
+      else if (part.file_data?.filename) {
+        filename = part.file_data.filename;
+      }
+      else {
+        filename = `media_${index + 1}.${extension}`;
+      }
+      
+      let preview_url = undefined;
+      if (data && isImageFile(mime_type)) {
+        preview_url = data.startsWith('data:') 
+          ? data 
+          : `data:${mime_type};base64,${data}`;
+      }
+      
+      const fileData: ProcessedFile = {
+        filename,
+        content_type: mime_type,
+        size: data.length,
+        data,
+        preview_url
+      };
+      
+      return fileData;
+    });
+    
+    setProcessedFiles(files);
+    setIsProcessed(true);
+  }, [parts, isProcessed]);
+
+  if (processedFiles.length === 0) return null;
+
+  const downloadFile = (file: ProcessedFile) => {
+    try {
+      const link = document.createElement("a");
+      const dataUrl = file.data.startsWith('data:') 
+        ? file.data 
+        : `data:${file.content_type};base64,${file.data}`;
+      
+      link.href = dataUrl;
+      link.download = file.filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (error) {
+      console.error(`Error downloading file ${file.filename}:`, error);
+    }
+  };
+
+  const getFileUrl = (file: ProcessedFile) => {
+    return file.preview_url || (file.data.startsWith('data:') 
+      ? file.data 
+      : `data:${file.content_type};base64,${file.data}`);
+  };
+
+  return (
+    <div className={`flex flex-col gap-2 mt-2 ${className}`}>
+      <div className="text-xs text-neutral-400 mb-1">
+        <span>Attached files:</span>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {processedFiles.map((file, index) => (
+          <div
+            key={index}
+            className="flex flex-col bg-[#333] rounded-md overflow-hidden border border-[#444] hover:border-[#666] transition-colors"
+          >
+            {isImageFile(file.content_type) && (
+              <div className="w-full max-w-[200px] h-[120px] bg-black flex items-center justify-center">
+                <img
+                  src={getFileUrl(file)}
+                  alt={file.filename}
+                  className="max-w-full max-h-full object-contain"
+                  onError={(e) => {
+                    console.error(`Error loading image ${file.filename}`);
+                    (e.target as HTMLImageElement).src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjY2NjYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1pbWFnZS1vZmYiPjxsaW5lIHgxPSIyIiB5MT0iMiIgeDI9IjIyIiB5Mj0iMjIiLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHg9IjIiIHk9IjIiIHJ4PSIyIiByeT0iMiIvPjxsaW5lIHgxPSI4IiB5MT0iMTAiIHgyPSI4IiB5Mj0iMTAiLz48bGluZSB4MT0iMTIiIHkxPSIxNCIgeDI9IjEyIiB5Mj0iMTQiLz48L3N2Zz4=";
+                  }}
+                />
+              </div>
+            )}
+            <div className="p-2 flex items-center gap-2">
+              <div className="flex-shrink-0">
+                {isImageFile(file.content_type) ? (
+                  <Image className="h-4 w-4 text-emerald-400" />
+                ) : file.content_type === "application/pdf" ? (
+                  <FileText className="h-4 w-4 text-emerald-400" />
+                ) : (
+                  <File className="h-4 w-4 text-emerald-400" />
+                )}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-xs font-medium truncate max-w-[150px]">
+                  {file.filename}
+                </div>
+                <div className="text-[10px] text-neutral-400">
+                  {formatFileSize(file.size)}
+                </div>
+              </div>
+              <button
+                onClick={() => downloadFile(file)}
+                className="text-emerald-400 hover:text-white transition-colors"
+                title="Download"
+              >
+                <Download className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/chat/components/SessionList.tsx b/frontend/app/chat/components/SessionList.tsx
new file mode 100644
index 00000000..dfad7f11
--- /dev/null
+++ b/frontend/app/chat/components/SessionList.tsx
@@ -0,0 +1,248 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/components/SessionList.tsx                                  │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Search, Filter, Plus, Loader2 } from "lucide-react";
+import { ChatSession } from "@/services/sessionService";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface SessionListProps {
+  sessions: ChatSession[];
+  agents: any[];
+  selectedSession: string | null;
+  isLoading: boolean;
+  searchTerm: string;
+  selectedAgentFilter: string;
+  showAgentFilter: boolean;
+  setSearchTerm: (value: string) => void;
+  setSelectedAgentFilter: (value: string) => void;
+  setShowAgentFilter: (value: boolean) => void;
+  setSelectedSession: (value: string | null) => void;
+  setIsNewChatDialogOpen: (value: boolean) => void;
+}
+
+export function SessionList({
+  sessions,
+  agents,
+  selectedSession,
+  isLoading,
+  searchTerm,
+  selectedAgentFilter,
+  showAgentFilter,
+  setSearchTerm,
+  setSelectedAgentFilter,
+  setShowAgentFilter,
+  setSelectedSession,
+  setIsNewChatDialogOpen,
+}: SessionListProps) {
+  const filteredSessions = sessions.filter((session) => {
+    const matchesSearchTerm = session.id
+      .toLowerCase()
+      .includes(searchTerm.toLowerCase());
+
+    if (selectedAgentFilter === "all") {
+      return matchesSearchTerm;
+    }
+
+    const sessionAgentId = session.id.split("_")[1];
+    return matchesSearchTerm && sessionAgentId === selectedAgentFilter;
+  });
+
+  const sortedSessions = [...filteredSessions].sort((a, b) => {
+    const updateTimeA = new Date(a.update_time).getTime();
+    const updateTimeB = new Date(b.update_time).getTime();
+
+    return updateTimeB - updateTimeA;
+  });
+
+  const formatDateTime = (dateTimeStr: string) => {
+    try {
+      const date = new Date(dateTimeStr);
+
+      const day = date.getDate().toString().padStart(2, "0");
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const year = date.getFullYear();
+      const hours = date.getHours().toString().padStart(2, "0");
+      const minutes = date.getMinutes().toString().padStart(2, "0");
+
+      return `${day}/${month}/${year} ${hours}:${minutes}`;
+    } catch (error) {
+      return "Invalid date";
+    }
+  };
+
+  const getExternalId = (sessionId: string) => {
+    return sessionId.split("_")[0];
+  };
+
+  return (
+    <div className="w-64 border-r border-neutral-700 flex flex-col bg-neutral-900">
+      <div className="p-4 border-b border-neutral-700">
+        <div className="flex items-center justify-between mb-4">
+          <Button
+            onClick={() => setIsNewChatDialogOpen(true)}
+            className="bg-emerald-800 text-emerald-100 hover:bg-emerald-700 border-emerald-700"
+            size="sm"
+          >
+            <Plus className="h-4 w-4 mr-1" /> New Conversation
+          </Button>
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-neutral-500" />
+            <Input
+              placeholder="Search conversations..."
+              className="pl-9 bg-neutral-800 border-neutral-700 text-neutral-200 focus-visible:ring-emerald-500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-neutral-400 hover:text-white hover:bg-neutral-800"
+              onClick={() => setShowAgentFilter(!showAgentFilter)}
+            >
+              <Filter className="h-4 w-4 mr-1" />
+              Filter
+            </Button>
+
+            {selectedAgentFilter !== "all" && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setSelectedAgentFilter("all")}
+                className="text-neutral-400 hover:text-white hover:bg-neutral-800"
+              >
+                Clear filter
+              </Button>
+            )}
+          </div>
+
+          {showAgentFilter && (
+            <div className="pt-1">
+              <Select
+                value={selectedAgentFilter}
+                onValueChange={setSelectedAgentFilter}
+              >
+                <SelectTrigger className="bg-neutral-800 border-neutral-700 text-neutral-200">
+                  <SelectValue placeholder="Filter by agent" />
+                </SelectTrigger>
+                <SelectContent className="bg-neutral-900 border-neutral-700 text-white">
+                  <SelectItem
+                    value="all"
+                    className="data-[selected]:bg-neutral-800 data-[highlighted]:bg-neutral-800 !text-white hover:text-emerald-400 data-[selected]:!text-emerald-400"
+                  >
+                    All agents
+                  </SelectItem>
+                  {agents.map((agent) => (
+                    <SelectItem
+                      key={agent.id}
+                      value={agent.id}
+                      className="data-[selected]:bg-neutral-800 data-[highlighted]:bg-neutral-800 !text-white hover:text-emerald-400 data-[selected]:!text-emerald-400"
+                    >
+                      {agent.name.slice(0, 15)}{" "}
+                      {agent.name.length > 15 && "..."}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+        {isLoading ? (
+          <div className="flex justify-center items-center h-24">
+            <Loader2 className="h-5 w-5 text-emerald-400 animate-spin" />
+          </div>
+        ) : sortedSessions.length > 0 ? (
+          <div className="px-4 pt-2 space-y-2">
+            {sortedSessions.map((session) => {
+              const agentId = session.id.split("_")[1];
+              const agentInfo = agents.find((a) => a.id === agentId);
+              const externalId = getExternalId(session.id);
+
+              return (
+                <div
+                  key={session.id}
+                  className={`p-3 rounded-md cursor-pointer transition-colors group relative ${
+                    selectedSession === session.id
+                      ? "bg-emerald-800/20 border border-emerald-600/40"
+                      : "bg-neutral-800 hover:bg-neutral-700 border border-transparent"
+                  }`}
+                  onClick={() => setSelectedSession(session.id)}
+                >
+                  <div className="flex items-center">
+                    <div className="w-2 h-2 rounded-full bg-emerald-500 mr-2"></div>
+                    <div className="text-neutral-200 font-medium truncate max-w-[180px]">
+                      {externalId}
+                    </div>
+                  </div>
+                  <div className="mt-1 flex items-center gap-2">
+                    {agentInfo && (
+                      <Badge className="bg-neutral-700 text-emerald-400 border-neutral-600 text-xs">
+                        {agentInfo.name.slice(0, 15)}
+                        {agentInfo.name.length > 15 && "..."}
+                      </Badge>
+                    )}
+                    <div className="text-xs text-neutral-500 ml-auto">
+                      {formatDateTime(session.update_time)}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : searchTerm || selectedAgentFilter !== "all" ? (
+          <div className="text-center py-4 text-neutral-400">
+            No results found
+          </div>
+        ) : (
+          <div className="text-center py-4 text-neutral-400">
+            Click "New" to start
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/chat/page.tsx b/frontend/app/chat/page.tsx
new file mode 100644
index 00000000..ded97c40
--- /dev/null
+++ b/frontend/app/chat/page.tsx
@@ -0,0 +1,881 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/chat/page.tsx                                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  MessageSquare,
+  Send,
+  Plus,
+  Search,
+  Loader2,
+  X,
+  Trash2,
+  Bot,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogHeader,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { listAgents } from "@/services/agentService";
+import {
+  listSessions,
+  getSessionMessages,
+  ChatMessage,
+  deleteSession,
+  ChatSession,
+  ChatPart
+} from "@/services/sessionService";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useAgentWebSocket } from "@/hooks/use-agent-webSocket";
+import { getAccessTokenFromCookie } from "@/lib/utils";
+import { ChatMessage as ChatMessageComponent } from "./components/ChatMessage";
+import { SessionList } from "./components/SessionList";
+import { ChatInput } from "./components/ChatInput";
+import { FileData } from "@/lib/file-utils";
+import { AgentInfoDialog } from "./components/AgentInfoDialog";
+
+interface FunctionMessageContent {
+  title: string;
+  content: string;
+  author?: string;
+}
+
+export default function Chat() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [agents, setAgents] = useState<any[]>([]);
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [agentSearchTerm, setAgentSearchTerm] = useState("");
+  const [selectedAgentFilter, setSelectedAgentFilter] = useState<string>("all");
+  const [messageInput, setMessageInput] = useState("");
+  const [selectedSession, setSelectedSession] = useState<string | null>(null);
+  const [currentAgentId, setCurrentAgentId] = useState<string | null>(null);
+  const [isSending, setIsSending] = useState(false);
+  const [isNewChatDialogOpen, setIsNewChatDialogOpen] = useState(false);
+  const [showAgentFilter, setShowAgentFilter] = useState(false);
+  const [expandedFunctions, setExpandedFunctions] = useState<
+    Record<string, boolean>
+  >({});
+  const [isAgentInfoDialogOpen, setIsAgentInfoDialogOpen] = useState(false);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const { toast } = useToast();
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  const user =
+    typeof window !== "undefined"
+      ? JSON.parse(localStorage.getItem("user") || "{}")
+      : {};
+  const clientId = user?.client_id || "test";
+
+  const scrollToBottom = () => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight;
+    }
+  };
+
+  useEffect(() => {
+    const loadData = async () => {
+      setIsLoading(true);
+      try {
+        const agentsResponse = await listAgents(clientId);
+        setAgents(agentsResponse.data);
+
+        const sessionsResponse = await listSessions(clientId);
+        setSessions(sessionsResponse.data);
+      } catch (error) {
+        console.error("Error loading data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, [clientId]);
+
+  useEffect(() => {
+    if (!selectedSession) {
+      setMessages([]);
+      return;
+    }
+
+    const loadMessages = async () => {
+      try {
+        setIsLoading(true);
+        const response = await getSessionMessages(selectedSession);
+        setMessages(response.data);
+
+        const agentId = selectedSession.split("_")[1];
+        setCurrentAgentId(agentId);
+
+        setTimeout(scrollToBottom, 100);
+      } catch (error) {
+        console.error("Error loading messages:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadMessages();
+  }, [selectedSession]);
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      setTimeout(scrollToBottom, 100);
+    }
+  }, [messages]);
+
+  const filteredSessions = sessions.filter((session) => {
+    const matchesSearchTerm = session.id
+      .toLowerCase()
+      .includes(searchTerm.toLowerCase());
+
+    if (selectedAgentFilter === "all") {
+      return matchesSearchTerm;
+    }
+
+    const sessionAgentId = session.id.split("_")[1];
+    return matchesSearchTerm && sessionAgentId === selectedAgentFilter;
+  });
+
+  const sortedSessions = [...filteredSessions].sort((a, b) => {
+    const updateTimeA = new Date(a.update_time).getTime();
+    const updateTimeB = new Date(b.update_time).getTime();
+
+    return updateTimeB - updateTimeA;
+  });
+
+  const formatDateTime = (dateTimeStr: string) => {
+    try {
+      const date = new Date(dateTimeStr);
+
+      const day = date.getDate().toString().padStart(2, "0");
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const year = date.getFullYear();
+      const hours = date.getHours().toString().padStart(2, "0");
+      const minutes = date.getMinutes().toString().padStart(2, "0");
+
+      return `${day}/${month}/${year} ${hours}:${minutes}`;
+    } catch (error) {
+      return "Invalid date";
+    }
+  };
+
+  const filteredAgents = agents.filter(
+    (agent) =>
+      agent.name.toLowerCase().includes(agentSearchTerm.toLowerCase()) ||
+      (agent.description &&
+        agent.description.toLowerCase().includes(agentSearchTerm.toLowerCase()))
+  );
+
+  const selectAgent = (agentId: string) => {
+    setCurrentAgentId(agentId);
+    setSelectedSession(null);
+    setMessages([]);
+    setIsNewChatDialogOpen(false);
+  };
+
+  const handleSendMessage = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!messageInput.trim() || !currentAgentId) return;
+    setIsSending(true);
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: `temp-${Date.now()}`,
+        content: {
+          parts: [{ text: messageInput }],
+          role: "user",
+        },
+        author: "user",
+        timestamp: Date.now() / 1000,
+      },
+    ]);
+    wsSendMessage(messageInput);
+    setMessageInput("");
+    const textarea = document.querySelector("textarea");
+    if (textarea) textarea.style.height = "auto";
+  };
+
+  const handleSendMessageWithFiles = (message: string, files?: FileData[]) => {
+    if ((!message.trim() && (!files || files.length === 0)) || !currentAgentId)
+      return;
+    setIsSending(true);
+
+    const messageParts: ChatPart[] = [];
+    
+    if (message.trim()) {
+      messageParts.push({ text: message });
+    }
+    
+    if (files && files.length > 0) {
+      files.forEach(file => {
+        messageParts.push({
+          inline_data: {
+            data: file.data,
+            mime_type: file.content_type,
+            metadata: {
+              filename: file.filename
+            }
+          }
+        });
+      });
+    }
+
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: `temp-${Date.now()}`,
+        content: {
+          parts: messageParts,
+          role: "user"
+        },
+        author: "user",
+        timestamp: Date.now() / 1000,
+      },
+    ]);
+
+    wsSendMessage(message, files);
+
+    setMessageInput("");
+    const textarea = document.querySelector("textarea");
+    if (textarea) textarea.style.height = "auto";
+  };
+
+  const generateExternalId = () => {
+    const now = new Date();
+    return (
+      now.getFullYear().toString() +
+      (now.getMonth() + 1).toString().padStart(2, "0") +
+      now.getDate().toString().padStart(2, "0") +
+      now.getHours().toString().padStart(2, "0") +
+      now.getMinutes().toString().padStart(2, "0") +
+      now.getSeconds().toString().padStart(2, "0") +
+      now.getMilliseconds().toString().padStart(3, "0")
+    );
+  };
+
+  const currentAgent = agents.find((agent) => agent.id === currentAgentId);
+
+  const getCurrentSessionInfo = () => {
+    if (!selectedSession) return null;
+
+    const parts = selectedSession.split("_");
+
+    try {
+      const dateStr = parts[0];
+      if (dateStr.length >= 8) {
+        const year = dateStr.substring(0, 4);
+        const month = dateStr.substring(4, 6);
+        const day = dateStr.substring(6, 8);
+
+        return {
+          externalId: parts[0],
+          agentId: parts[1],
+          displayDate: `${day}/${month}/${year}`,
+        };
+      }
+    } catch (e) {
+      console.error("Error processing session ID:", e);
+    }
+
+    return {
+      externalId: parts[0],
+      agentId: parts[1],
+      displayDate: "Session",
+    };
+  };
+
+  const getExternalId = (sessionId: string) => {
+    return sessionId.split("_")[0];
+  };
+
+  const containsMarkdown = (text: string): boolean => {
+    if (!text || text.length < 3) return false;
+
+    const markdownPatterns = [
+      /[*_]{1,2}[^*_]+[*_]{1,2}/, // bold/italic
+      /\[[^\]]+\]\([^)]+\)/, // links
+      /^#{1,6}\s/m, // headers
+      /^[-*+]\s/m, // unordered lists
+      /^[0-9]+\.\s/m, // ordered lists
+      /^>\s/m, // block quotes
+      /`[^`]+`/, // inline code
+      /```[\s\S]*?```/, // code blocks
+      /^\|(.+\|)+$/m, // tables
+      /!\[[^\]]*\]\([^)]+\)/, // images
+    ];
+
+    return markdownPatterns.some((pattern) => pattern.test(text));
+  };
+
+  const getMessageText = (
+    message: ChatMessage
+  ): string | FunctionMessageContent => {
+    const author = message.author;
+    const parts = message.content.parts;
+
+    if (!parts || parts.length === 0) return "Empty content";
+
+    const functionCallPart = parts.find(
+      (part) => part.functionCall || part.function_call
+    );
+    const functionResponsePart = parts.find(
+      (part) => part.functionResponse || part.function_response
+    );
+
+    const inlineDataParts = parts.filter((part) => part.inline_data);
+
+    if (functionCallPart) {
+      const funcCall =
+        functionCallPart.functionCall || functionCallPart.function_call || {};
+      const args = funcCall.args || {};
+      const name = funcCall.name || "unknown";
+      const id = funcCall.id || "no-id";
+
+      return {
+        author,
+        title: `📞 Function call: ${name}`,
+        content: `ID: ${id}
+Args: ${
+          Object.keys(args).length > 0
+            ? `\n${JSON.stringify(args, null, 2)}`
+            : "{}"
+        }`,
+      } as FunctionMessageContent;
+    }
+
+    if (functionResponsePart) {
+      const funcResponse =
+        functionResponsePart.functionResponse ||
+        functionResponsePart.function_response ||
+        {};
+      const response = funcResponse.response || {};
+      const name = funcResponse.name || "unknown";
+      const id = funcResponse.id || "no-id";
+      const status = response.status || "unknown";
+      const statusEmoji = status === "error" ? "❌" : "✅";
+
+      let resultText = "";
+      if (status === "error") {
+        resultText = `Error: ${response.error_message || "Unknown error"}`;
+      } else if (response.report) {
+        resultText = `Result: ${response.report}`;
+      } else if (response.result && response.result.content) {
+        const content = response.result.content;
+        if (Array.isArray(content) && content.length > 0 && content[0].text) {
+          try {
+            const textContent = content[0].text;
+            const parsedJson = JSON.parse(textContent);
+            resultText = `Result: \n${JSON.stringify(parsedJson, null, 2)}`;
+          } catch (e) {
+            resultText = `Result: ${content[0].text}`;
+          }
+        } else {
+          resultText = `Result:\n${JSON.stringify(response, null, 2)}`;
+        }
+      } else {
+        resultText = `Result:\n${JSON.stringify(response, null, 2)}`;
+      }
+
+      return {
+        author,
+        title: `${statusEmoji} Function response: ${name}`,
+        content: `ID: ${id}\n${resultText}`,
+      } as FunctionMessageContent;
+    }
+
+    if (parts.length === 1 && parts[0].text) {
+      return {
+        author,
+        content: parts[0].text,
+        title: "Message",
+      } as FunctionMessageContent;
+    }
+
+    const textParts = parts
+      .filter((part) => part.text)
+      .map((part) => part.text)
+      .filter((text) => text);
+
+    if (textParts.length > 0) {
+      return {
+        author,
+        content: textParts.join("\n\n"),
+        title: "Message",
+      } as FunctionMessageContent;
+    }
+
+    return "Empty content";
+  };
+
+  const toggleFunctionExpansion = (messageId: string) => {
+    setExpandedFunctions((prev) => ({
+      ...prev,
+      [messageId]: !prev[messageId],
+    }));
+  };
+
+  const agentColors: Record<string, string> = {
+    Assistant: "bg-emerald-400",
+    Programmer: "bg-[#00cc7d]",
+    Writer: "bg-[#00b8ff]",
+    Researcher: "bg-[#ff9d00]",
+    Planner: "bg-[#9d00ff]",
+    default: "bg-[#333]",
+  };
+
+  const getAgentColor = (agentName: string) => {
+    return agentColors[agentName] || agentColors.default;
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage(e as unknown as React.FormEvent);
+    }
+  };
+
+  const autoResizeTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const textarea = e.target;
+
+    textarea.style.height = "auto";
+
+    const maxHeight = 10 * 24;
+    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+
+    textarea.style.height = `${newHeight}px`;
+
+    setMessageInput(textarea.value);
+  };
+
+  const handleDeleteSession = async () => {
+    if (!selectedSession) return;
+
+    try {
+      await deleteSession(selectedSession);
+
+      setSessions(sessions.filter((session) => session.id !== selectedSession));
+      setSelectedSession(null);
+      setMessages([]);
+      setCurrentAgentId(null);
+      setIsDeleteDialogOpen(false);
+
+      toast({
+        title: "Session deleted successfully",
+      });
+    } catch (error) {
+      console.error("Error deleting session:", error);
+      toast({
+        title: "Error deleting session",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const onEvent = useCallback((event: any) => {
+    setMessages((prev) => [...prev, event]);
+  }, []);
+
+  const onTurnComplete = useCallback(() => {
+    setIsSending(false);
+  }, []);
+
+  const handleAgentInfoClick = () => {
+    setIsAgentInfoDialogOpen(true);
+  };
+
+  const handleAgentUpdated = (updatedAgent: any) => {
+    setAgents(agents.map(agent => 
+      agent.id === updatedAgent.id ? updatedAgent : agent
+    ));
+    
+    toast({
+      title: "Agent updated successfully",
+      description: "The agent has been updated with the new settings.",
+    });
+  };
+
+  const jwt = getAccessTokenFromCookie();
+
+  const agentId = useMemo(() => currentAgentId || "", [currentAgentId]);
+  const externalId = useMemo(
+    () =>
+      selectedSession ? getExternalId(selectedSession) : generateExternalId(),
+    [selectedSession]
+  );
+
+  const { sendMessage: wsSendMessage, disconnect: _ } = useAgentWebSocket({
+    agentId,
+    externalId,
+    jwt,
+    onEvent,
+    onTurnComplete,
+  });
+
+  return (
+    <div className="flex h-screen max-h-screen bg-[#121212]">
+      <SessionList
+        sessions={sessions}
+        agents={agents}
+        selectedSession={selectedSession}
+        isLoading={isLoading}
+        searchTerm={searchTerm}
+        selectedAgentFilter={selectedAgentFilter}
+        showAgentFilter={showAgentFilter}
+        setSearchTerm={setSearchTerm}
+        setSelectedAgentFilter={setSelectedAgentFilter}
+        setShowAgentFilter={setShowAgentFilter}
+        setSelectedSession={setSelectedSession}
+        setIsNewChatDialogOpen={setIsNewChatDialogOpen}
+      />
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {selectedSession || currentAgentId ? (
+          <>
+            <div className="p-4 border-b border-[#333] bg-neutral-900 shadow-md">
+              {(() => {
+                const sessionInfo = getCurrentSessionInfo();
+
+                return (
+                  <div className="flex justify-between items-center">
+                    <h2 className="text-xl font-bold text-white flex items-center gap-2">
+                      <div className="p-1 rounded-full bg-emerald-500/20">
+                        <MessageSquare className="h-5 w-5 text-emerald-400" />
+                      </div>
+                      {selectedSession
+                        ? `Session ${
+                            sessionInfo?.externalId || selectedSession
+                          }`
+                        : "New Conversation"}
+                    </h2>
+
+                    <div className="flex items-center gap-2">
+                      {currentAgent && (
+                        <Badge 
+                          className="bg-emerald-500 text-white px-3 py-1 text-sm border-0 cursor-pointer hover:bg-emerald-600 transition-colors"
+                          onClick={handleAgentInfoClick}
+                        >
+                          {currentAgent.name || currentAgentId}
+                        </Badge>
+                      )}
+
+                      {selectedSession && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 text-neutral-400 hover:text-red-500 hover:bg-[#333]"
+                          onClick={() => setIsDeleteDialogOpen(true)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+
+            <div
+              ref={messagesContainerRef}
+              className="flex-1 overflow-y-auto p-4 bg-neutral-950"
+            >
+              {isLoading ? (
+                <div className="flex flex-col items-center justify-center h-full">
+                  <div className="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center shadow-lg mb-4 relative">
+                    <Loader2 className="h-6 w-6 text-white animate-spin" />
+                    <div className="absolute inset-0 rounded-full blur-md bg-emerald-400/20 animate-pulse"></div>
+                  </div>
+                  <p className="text-neutral-400 mb-2">Loading conversation...</p>
+                </div>
+              ) : messages.length === 0 ? (
+                <div className="flex flex-col h-full items-center justify-center text-center p-6">
+                  <div className="w-14 h-14 rounded-full bg-gradient-to-br from-emerald-500/20 to-emerald-700/20 flex items-center justify-center shadow-lg mb-5 border border-emerald-500/30">
+                    <MessageSquare className="h-6 w-6 text-emerald-400" />
+                  </div>
+                  <h3 className="text-lg font-medium text-neutral-300 mb-2">
+                    {currentAgent ? `Chat with ${currentAgent.name}` : "New Conversation"}
+                  </h3>
+                  <p className="text-neutral-500 text-sm max-w-md">
+                    Type your message below to start the conversation. This chat will help you interact with the agent and explore its capabilities.
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-4 w-full max-w-full">
+                  {messages.map((message) => {
+                    const messageContent = getMessageText(message);
+                    const agentColor = getAgentColor(message.author);
+                    const isExpanded = expandedFunctions[message.id] || false;
+
+                    return (
+                      <ChatMessageComponent
+                        key={message.id}
+                        message={message}
+                        agentColor={agentColor}
+                        isExpanded={isExpanded}
+                        toggleExpansion={toggleFunctionExpansion}
+                        containsMarkdown={containsMarkdown}
+                        messageContent={messageContent}
+                        sessionId={selectedSession as string}
+                      />
+                    );
+                  })}
+
+                  {isSending && (
+                    <div className="flex justify-start">
+                      <div className="flex gap-3 max-w-[80%]">
+                        <Avatar
+                          className="bg-gradient-to-br from-purple-600 to-purple-800 shadow-md border-0"
+                        >
+                          <AvatarFallback className="bg-transparent">
+                            <Bot className="h-4 w-4 text-white" />
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="rounded-lg p-3 bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700/50 shadow-md">
+                          <div className="flex space-x-2">
+                            <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce"></div>
+                            <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce [animation-delay:0.2s]"></div>
+                            <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce [animation-delay:0.4s]"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="px-4 pt-4 pb-6 border-t border-[#333] bg-neutral-900 shadow-inner">
+              {isSending && !isLoading && (
+                <div className="px-4 py-2 mb-3 rounded-lg bg-neutral-800/50 border border-neutral-700/30 text-sm text-neutral-400 flex items-center shadow-sm">
+                  <div className="mr-2 relative">
+                    <Loader2 className="h-3.5 w-3.5 animate-spin text-emerald-400" />
+                    <div className="absolute inset-0 blur-sm bg-emerald-400/20 rounded-full animate-pulse"></div>
+                  </div>
+                  Agent is thinking...
+                </div>
+              )}
+              <div className="rounded-lg shadow-md bg-neutral-800/20 border border-neutral-700/30 p-1">
+                <ChatInput
+                  onSendMessage={handleSendMessageWithFiles}
+                  isLoading={isSending || isLoading}
+                  placeholder="Type your message..."
+                  autoFocus={true}
+                />
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full text-center">
+            <div className="w-20 h-20 rounded-full bg-emerald-500/20 flex items-center justify-center shadow-lg mb-6 border border-emerald-500/30">
+              <MessageSquare className="h-10 w-10 text-emerald-400" />
+            </div>
+            <h2 className="text-2xl font-semibold text-white mb-3">
+              Select a conversation
+            </h2>
+            <p className="text-neutral-400 mb-8 max-w-md">
+              Choose an existing conversation or start a new one.
+            </p>
+            <Button
+              onClick={() => setIsNewChatDialogOpen(true)}
+              className="bg-emerald-500 text-white hover:bg-emerald-600 px-6 py-6 h-auto shadow-md rounded-xl"
+            >
+              <Plus className="mr-2 h-5 w-5" />
+              New Conversation
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <Dialog open={isNewChatDialogOpen} onOpenChange={setIsNewChatDialogOpen}>
+        <DialogContent className="bg-neutral-900 border-neutral-800 text-white shadow-xl">
+          <DialogHeader>
+            <div className="flex items-center gap-2 mb-1">
+              <div className="p-1.5 rounded-full bg-emerald-500/20">
+                <MessageSquare className="h-5 w-5 text-emerald-400" />
+              </div>
+              <DialogTitle className="text-xl font-medium text-white">
+                New Conversation
+              </DialogTitle>
+            </div>
+            <DialogDescription className="text-neutral-400">
+              Select an agent to start a new conversation.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="mt-4 space-y-4">
+            <div className="relative">
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-500">
+                <Search className="h-4 w-4" />
+              </div>
+              <Input
+                placeholder="Search agents..."
+                className="pl-10 bg-neutral-800/40 border-neutral-700/50 text-white focus-visible:ring-emerald-500/50 focus-visible:border-emerald-500/50 shadow-inner rounded-xl"
+                value={agentSearchTerm}
+                onChange={(e) => setAgentSearchTerm(e.target.value)}
+              />
+              {agentSearchTerm && (
+                <button
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-emerald-500 transition-colors"
+                  onClick={() => setAgentSearchTerm("")}
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+
+            <div className="text-sm text-neutral-300 mb-2">Choose an agent:</div>
+
+            <ScrollArea className="h-[300px] pr-2">
+              {isLoading ? (
+                <div className="flex flex-col items-center justify-center py-8">
+                  <div className="relative">
+                    <Loader2 className="h-8 w-8 text-emerald-400 animate-spin" />
+                    <div className="absolute inset-0 rounded-full blur-md bg-emerald-400/20 animate-pulse"></div>
+                  </div>
+                  <p className="text-neutral-400 mt-4">Loading agents...</p>
+                </div>
+              ) : filteredAgents.length > 0 ? (
+                <div className="space-y-2">
+                  {filteredAgents.map((agent) => (
+                    <div
+                      key={agent.id}
+                      className="p-3 rounded-md cursor-pointer transition-all bg-neutral-800 hover:bg-neutral-800/90 border border-neutral-700/30 hover:border-emerald-500/30 shadow-sm hover:shadow-md group"
+                      onClick={() => selectAgent(agent.id)}
+                    >
+                      <div className="flex items-center gap-2 mb-1">
+                        <div className="p-1 rounded-full bg-emerald-500/20 group-hover:bg-emerald-500/30 transition-colors">
+                          <MessageSquare size={14} className="text-emerald-400" />
+                        </div>
+                        <span className="font-medium text-white group-hover:text-emerald-50">
+                          {agent.name}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between mt-1">
+                        <Badge className="text-xs bg-neutral-800/60 text-emerald-400 border border-emerald-500/30">
+                          {agent.type}
+                        </Badge>
+                        {agent.model && (
+                          <span className="text-xs text-neutral-400">
+                            {agent.model}
+                          </span>
+                        )}
+                      </div>
+                      {agent.description && (
+                        <p className="text-xs text-neutral-300 mt-2 line-clamp-2 group-hover:text-neutral-200">
+                          {agent.description}
+                        </p>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ) : agentSearchTerm ? (
+                <div className="text-center py-4 text-neutral-400">
+                  No agent found with "{agentSearchTerm}"
+                </div>
+              ) : (
+                <div className="text-center py-4 text-neutral-400">
+                  <p>No agents available</p>
+                  <p className="text-sm mt-2">
+                    Create agents in the Agent Management screen
+                  </p>
+                </div>
+              )}
+            </ScrollArea>
+          </div>
+
+          <DialogFooter>
+            <Button
+              onClick={() => setIsNewChatDialogOpen(false)}
+              variant="outline"
+              className="bg-neutral-800/40 border-neutral-700/50 text-neutral-300 hover:bg-neutral-700/50 hover:text-white hover:border-neutral-600"
+            >
+              Cancel
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <DialogContent className="bg-neutral-900 border-neutral-800 text-white shadow-xl">
+          <DialogHeader>
+            <div className="flex items-center gap-2 mb-1">
+              <div className="p-1.5 rounded-full bg-red-500/20">
+                <Trash2 className="h-5 w-5 text-red-400" />
+              </div>
+              <DialogTitle className="text-xl font-medium text-white">
+                Delete Session
+              </DialogTitle>
+            </div>
+            <DialogDescription className="text-neutral-400">
+              Are you sure you want to delete this session? This action cannot
+              be undone.
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter className="gap-2">
+            <Button
+              onClick={() => setIsDeleteDialogOpen(false)}
+              variant="outline"
+              className="bg-neutral-800/40 border-neutral-700/50 text-neutral-300 hover:bg-neutral-700/50 hover:text-white hover:border-neutral-600"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleDeleteSession}
+              className="bg-red-600 hover:bg-red-700 text-white border-0 shadow-md"
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Agent Info Dialog */}
+      <AgentInfoDialog 
+        agent={currentAgent}
+        open={isAgentInfoDialogOpen}
+        onOpenChange={setIsAgentInfoDialogOpen}
+        onAgentUpdated={handleAgentUpdated}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/client-layout.tsx b/frontend/app/client-layout.tsx
new file mode 100644
index 00000000..cc7c0aef
--- /dev/null
+++ b/frontend/app/client-layout.tsx
@@ -0,0 +1,52 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/client-layout.tsx                                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import type React from "react"
+import { usePathname } from "next/navigation"
+import Sidebar from "@/components/sidebar"
+
+export default function ClientLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const isLoginPage = pathname === "/login"
+  const isVerifyEmailPage = pathname.startsWith("/security/verify-email")
+  const isResetPasswordPage = pathname.startsWith("/security/reset-password")
+  const isSharedChatPage = pathname.startsWith("/shared-chat")
+
+  if (isLoginPage || isVerifyEmailPage || isResetPasswordPage || isSharedChatPage) {
+    return children
+  }
+
+  return (
+    <div className="flex h-screen bg-[#121212]">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">{children}</main>
+    </div>
+  )
+}
diff --git a/frontend/app/clients/loading.tsx b/frontend/app/clients/loading.tsx
new file mode 100644
index 00000000..26891ac3
--- /dev/null
+++ b/frontend/app/clients/loading.tsx
@@ -0,0 +1,31 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/clients/loading.tsx                                              │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+export default function Loading() {
+  return null
+}
diff --git a/frontend/app/clients/page.tsx b/frontend/app/clients/page.tsx
new file mode 100644
index 00000000..db2d97d8
--- /dev/null
+++ b/frontend/app/clients/page.tsx
@@ -0,0 +1,462 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/clients/page.tsx                                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { useToast } from "@/components/ui/use-toast"
+import { Plus, MoreHorizontal, Edit, Trash2, Search, Users, UserPlus } from "lucide-react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+  createClient,
+  listClients,
+  getClient,
+  updateClient,
+  deleteClient,
+  impersonateClient,
+  Client,
+} from "@/services/clientService"
+import { useRouter } from "next/navigation"
+
+export default function ClientsPage() {
+  const { toast } = useToast()
+  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const [selectedClient, setSelectedClient] = useState<Client | null>(null)
+
+  const [clientData, setClientData] = useState({
+    name: "",
+    email: "",
+  })
+
+  const [page, setPage] = useState(1)
+  const [limit, setLimit] = useState(1000)
+  const [total, setTotal] = useState(0)
+
+  const [clients, setClients] = useState<Client[]>([])
+
+  useEffect(() => {
+    const fetchClients = async () => {
+      setIsLoading(true)
+      try {
+        const res = await listClients((page - 1) * limit, limit)
+        setClients(res.data)
+        setTotal(res.data.length)
+      } catch (error) {
+        toast({
+          title: "Error loading clients",
+          description: "Unable to load clients.",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchClients()
+  }, [page, limit])
+
+  const filteredClients = Array.isArray(clients)
+    ? clients.filter(
+        (client) =>
+          client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          client.email.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : []
+
+  const handleAddClient = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    try {
+      if (selectedClient) {
+        await updateClient(selectedClient.id, clientData)
+        toast({
+          title: "Client updated",
+          description: `${clientData.name} was updated successfully.`,
+        })
+      } else {
+        await createClient({ ...clientData, password: "Password@123" })
+        toast({
+          title: "Client added",
+          description: `${clientData.name} was added successfully.`,
+        })
+      }
+      setIsDialogOpen(false)
+      resetForm()
+      const res = await listClients((page - 1) * limit, limit)
+      setClients(res.data)
+      setTotal(res.data.length)
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to save client. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleEditClient = async (client: Client) => {
+    setIsLoading(true)
+    try {
+      const res = await getClient(client.id)
+      setSelectedClient(res.data)
+      setClientData({
+        name: res.data.name,
+        email: res.data.email,
+      })
+      setIsDialogOpen(true)
+    } catch (error) {
+      toast({
+        title: "Error searching client",
+        description: "Unable to search client.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const confirmDeleteClient = async () => {
+    if (!selectedClient) return
+    setIsLoading(true)
+    try {
+      await deleteClient(selectedClient.id)
+      toast({
+        title: "Client deleted",
+        description: `${selectedClient.name} was deleted successfully.`,
+      })
+      setIsDeleteDialogOpen(false)
+      setSelectedClient(null)
+      const res = await listClients((page - 1) * limit, limit)
+      setClients(res.data)
+      setTotal(res.data.length)
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to delete client. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleImpersonateClient = async (client: Client) => {
+    setIsLoading(true)
+    try {
+      const response = await impersonateClient(client.id)
+      
+      const currentUser = localStorage.getItem("user")
+      if (currentUser) {
+        localStorage.setItem("adminUser", currentUser)
+      }
+      
+      const currentToken = document.cookie.match(/access_token=([^;]+)/)?.[1]
+      if (currentToken) {
+        localStorage.setItem("adminToken", currentToken)
+      }
+      
+      localStorage.setItem("isImpersonating", "true")
+      localStorage.setItem("impersonatedClient", client.name)
+      
+      document.cookie = `isImpersonating=true; path=/; max-age=${60 * 60 * 24 * 7}`
+      document.cookie = `impersonatedClient=${encodeURIComponent(client.name)}; path=/; max-age=${60 * 60 * 24 * 7}`
+      document.cookie = `access_token=${response.access_token}; path=/; max-age=${60 * 60 * 24 * 7}`
+      
+      const userData = {
+        ...JSON.parse(localStorage.getItem("user") || "{}"),
+        is_admin: false,
+        client_id: client.id
+      }
+      localStorage.setItem("user", JSON.stringify(userData))
+      document.cookie = `user=${encodeURIComponent(JSON.stringify(userData))}; path=/; max-age=${60 * 60 * 24 * 7}`
+      
+      toast({
+        title: "Impersonation mode activated",
+        description: `You are viewing as ${client.name}`,
+      })
+      
+      router.push("/agents")
+    } catch (error) {
+      console.error("Error impersonating client:", error)
+      toast({
+        title: "Error",
+        description: "Unable to impersonate client",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const resetForm = () => {
+    setClientData({
+      name: "",
+      email: "",
+    })
+    setSelectedClient(null)
+  }
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold text-white">Client Management</h1>
+
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogTrigger asChild>
+            <Button onClick={resetForm} className="bg-emerald-400 text-black hover:bg-[#00cc7d]">
+              <Plus className="mr-2 h-4 w-4" />
+              New Client
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[500px] bg-[#1a1a1a] border-[#333]">
+            <form onSubmit={handleAddClient}>
+              <DialogHeader>
+                <DialogTitle className="text-white">{selectedClient ? "Edit Client" : "New Client"}</DialogTitle>
+                <DialogDescription className="text-neutral-400">
+                  {selectedClient
+                    ? "Edit the existing client information."
+                    : "Fill in the information to create a new client."}
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4 py-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name" className="text-neutral-300">
+                    Name
+                  </Label>
+                  <Input
+                    id="name"
+                    value={clientData.name}
+                    onChange={(e) => setClientData({ ...clientData, name: e.target.value })}
+                    className="bg-[#222] border-[#444] text-white"
+                    placeholder="Company name"
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="email" className="text-neutral-300">
+                    Email
+                  </Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={clientData.email}
+                    onChange={(e) => setClientData({ ...clientData, email: e.target.value })}
+                    className="bg-[#222] border-[#444] text-white"
+                    placeholder="contact@company.com"
+                    required
+                  />
+                </div>
+              </div>
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsDialogOpen(false)}
+                  className="border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" className="bg-emerald-400 text-black hover:bg-[#00cc7d]" disabled={isLoading}>
+                  {isLoading ? "Saving..." : selectedClient ? "Save Changes" : "Add Client"}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+
+        <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+          <AlertDialogContent className="bg-[#1a1a1a] border-[#333] text-white">
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirm delete</AlertDialogTitle>
+              <AlertDialogDescription className="text-neutral-400">
+                Are you sure you want to delete the client "{selectedClient?.name}"? This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel className="border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white">
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={confirmDeleteClient}
+                className="bg-red-600 text-white hover:bg-red-700"
+                disabled={isLoading}
+              >
+                {isLoading ? "Deleting..." : "Delete"}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+
+      <Card className="bg-[#1a1a1a] border-[#333] mb-6">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-white text-lg">Search Clients</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-500" />
+            <Input
+              placeholder="Search by name or email..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="bg-[#222] border-[#444] text-white pl-10"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-[#1a1a1a] border-[#333]">
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader>
+              <TableRow className="border-[#333] hover:bg-[#222]">
+                <TableHead className="text-neutral-300">Name</TableHead>
+                <TableHead className="text-neutral-300">Email</TableHead>
+                <TableHead className="text-neutral-300">Created At</TableHead>
+                <TableHead className="text-neutral-300">Users</TableHead>
+                <TableHead className="text-neutral-300">Agents</TableHead>
+                <TableHead className="text-neutral-300 text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredClients.length > 0 ? (
+                filteredClients.map((client) => (
+                  <TableRow key={client.id} className="border-[#333] hover:bg-[#222]">
+                    <TableCell className="font-medium text-white">{client.name}</TableCell>
+                    <TableCell className="text-neutral-300">{client.email}</TableCell>
+                    <TableCell className="text-neutral-300">
+                      {new Date(client.created_at).toLocaleDateString("pt-BR")}
+                    </TableCell>
+                    <TableCell className="text-neutral-300">
+                      <div className="flex items-center">
+                        <Users className="h-4 w-4 mr-1 text-emerald-400" />
+                        {client.users_count ?? 0}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-neutral-300">{client.agents_count ?? 0}</TableCell>
+                    <TableCell className="text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" className="h-8 w-8 p-0 text-neutral-300 hover:bg-[#333]">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="bg-[#222] border-[#444] text-white">
+                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                          <DropdownMenuSeparator className="bg-[#444]" />
+                          <DropdownMenuItem
+                            className="cursor-pointer hover:bg-[#333]"
+                            onClick={() => handleEditClient(client)}
+                          >
+                            <Edit className="mr-2 h-4 w-4 text-emerald-400" />
+                            Edit
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            className="cursor-pointer hover:bg-[#333]"
+                            onClick={() => handleImpersonateClient(client)}
+                          >
+                            <UserPlus className="mr-2 h-4 w-4 text-emerald-400" />
+                            Enter as client
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            className="cursor-pointer hover:bg-[#333] text-red-500"
+                            onClick={() => {
+                              setSelectedClient(client)
+                              setIsDeleteDialogOpen(true)
+                            }}
+                          >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={6} className="h-24 text-center text-neutral-500">
+                    No clients found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end mt-4">
+        <Button onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1 || isLoading}>
+          Previous
+        </Button>
+        <span className="mx-4 text-white">Page {page} of {Math.ceil(total / limit) || 1}</span>
+        <Button onClick={() => setPage((p) => p + 1)} disabled={page * limit >= total || isLoading}>
+          Next
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/documentation/components/A2AComplianceCard.tsx b/frontend/app/documentation/components/A2AComplianceCard.tsx
new file mode 100644
index 00000000..4033b71b
--- /dev/null
+++ b/frontend/app/documentation/components/A2AComplianceCard.tsx
@@ -0,0 +1,333 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/A2AComplianceCard.tsx                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { 
+  CheckCircle2, 
+  Clock, 
+  Shield, 
+  Zap, 
+  FileText, 
+  Settings, 
+  Network,
+  AlertCircle,
+  ExternalLink,
+  ChevronDown,
+  ChevronUp
+} from "lucide-react";
+import { useState } from "react";
+
+export function A2AComplianceCard() {
+  const [showCoreFeatures, setShowCoreFeatures] = useState(false);
+  const [showAdvancedFeatures, setShowAdvancedFeatures] = useState(false);
+
+  const implementedFeatures = [
+    {
+      name: "JSON-RPC 2.0 Protocol",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Full compliance with JSON-RPC 2.0 specification"
+    },
+    {
+      name: "message/send Method",
+      status: "implemented", 
+      icon: CheckCircle2,
+      description: "Standard HTTP messaging with proper request/response format"
+    },
+    {
+      name: "message/stream Method",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Real-time streaming via Server-Sent Events (SSE)"
+    },
+    {
+      name: "tasks/get Method",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Task status querying and monitoring"
+    },
+    {
+      name: "tasks/cancel Method",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Task cancellation support"
+    },
+    {
+      name: "agent/authenticatedExtendedCard",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Agent discovery and capability enumeration"
+    },
+    {
+      name: "File Upload Support",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Base64 file encoding with proper MIME type handling"
+    },
+    {
+      name: "UUID v4 Message IDs",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Standards-compliant unique message identification"
+    },
+    {
+      name: "Authentication Methods",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "API Key and Bearer token authentication"
+    },
+    {
+      name: "Task State Management",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Complete task lifecycle: submitted → working → completed/failed"
+    },
+    {
+      name: "Artifact Handling",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Complex response data with structured artifacts"
+    },
+    {
+      name: "CORS Compliance",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Proper cross-origin resource sharing configuration"
+    },
+    {
+      name: "tasks/pushNotificationConfig/set",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Set push notification configuration for tasks"
+    },
+    {
+      name: "tasks/pushNotificationConfig/get", 
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Get push notification configuration for tasks"
+    },
+    {
+      name: "tasks/resubscribe",
+      status: "implemented", 
+      icon: CheckCircle2,
+      description: "Resubscribe to task updates and notifications"
+    }
+  ];
+
+  const advancedFeatures = [
+    {
+      name: "Push Notifications",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "A2A pushNotificationConfig methods and webhook support"
+    },
+    {
+      name: "Multi-turn Conversations",
+      status: "implemented",
+      icon: CheckCircle2,
+      description: "Context preservation via contextId field as per A2A specification"
+    },
+    {
+      name: "Enhanced Error Diagnostics", 
+      status: "implemented",
+      icon: AlertCircle,
+      description: "Comprehensive A2A error analysis and troubleshooting guidance"
+    }
+  ];
+
+  const implementedCount = implementedFeatures.filter(f => f.status === 'implemented').length;
+  const totalFeatures = implementedFeatures.length + advancedFeatures.length;
+  const partialCount = advancedFeatures.filter(f => f.status === 'partial').length;
+  const advancedImplementedCount = advancedFeatures.filter(f => f.status === 'implemented').length;
+  const totalImplementedCount = implementedCount + advancedImplementedCount;
+  const completionPercentage = Math.round(((totalImplementedCount + (partialCount * 0.5)) / totalFeatures) * 100);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'implemented': return 'text-green-400';
+      case 'partial': return 'text-yellow-400';
+      case 'planned': return 'text-blue-400';
+      default: return 'text-neutral-400';
+    }
+  };
+
+  const getStatusIcon = (status: string, IconComponent: any) => {
+    const colorClass = getStatusColor(status);
+    return <IconComponent className={`h-4 w-4 ${colorClass}`} />;
+  };
+
+  return (
+    <Card className="bg-gradient-to-br from-emerald-500/5 to-blue-500/5 border-emerald-500/20 text-white">
+      <CardHeader>
+        <CardTitle className="text-emerald-400 flex items-center">
+          <Network className="h-5 w-5 mr-2" />
+          A2A Specification Compliance
+        </CardTitle>
+        <div className="flex items-center space-x-4">
+          <div className="flex-1">
+            <div className="flex justify-between text-sm mb-1">
+              <span className="text-neutral-300">Implementation Progress</span>
+              <span className="text-emerald-400 font-medium">{completionPercentage}%</span>
+            </div>
+            <Progress value={completionPercentage} className="h-2" />
+          </div>
+          <div className="flex items-center space-x-2">
+            <button
+              onClick={() => {
+                const shouldExpand = !showCoreFeatures || !showAdvancedFeatures;
+                setShowCoreFeatures(shouldExpand);
+                setShowAdvancedFeatures(shouldExpand);
+              }}
+              className="text-xs text-neutral-400 hover:text-white transition-colors px-2 py-1 rounded border border-neutral-600 hover:border-neutral-400"
+            >
+              {showCoreFeatures && showAdvancedFeatures ? 'Collapse All' : 'Expand All'}
+            </button>
+            <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">
+              v0.2.0 Compatible
+            </Badge>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="flex justify-center">
+          <a 
+            href="https://google.github.io/A2A/specification" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="flex items-center bg-blue-500/10 hover:bg-blue-500/20 px-4 py-2 rounded-lg border border-blue-500/20 transition-colors"
+          >
+            <FileText className="h-4 w-4 mr-2 text-blue-400" />
+            <span className="text-blue-400">View Official Specification</span>
+            <ExternalLink className="h-3 w-3 ml-2 text-blue-400" />
+          </a>
+        </div>
+
+        <div>
+          <div 
+            className="flex items-center justify-between cursor-pointer hover:bg-[#222]/30 p-2 rounded-lg transition-colors mb-4 border border-transparent hover:border-[#333]"
+            onClick={() => setShowCoreFeatures(!showCoreFeatures)}
+          >
+            <h3 className="text-white font-semibold flex items-center">
+              <CheckCircle2 className="h-4 w-4 mr-2 text-green-400" />
+              Core Features 
+              <span className="ml-2 text-green-400 text-sm">({implementedCount}/{implementedFeatures.length} implemented)</span>
+            </h3>
+            <div className="flex items-center space-x-2">
+              <span className="text-xs text-neutral-500">
+                {showCoreFeatures ? 'Hide details' : 'Show details'}
+              </span>
+              {showCoreFeatures ? (
+                <ChevronUp className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+              )}
+            </div>
+          </div>
+          
+          {showCoreFeatures && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {implementedFeatures.map((feature, index) => (
+                <div key={index} className="flex items-start space-x-3 bg-[#222]/50 p-3 rounded-lg border border-[#333]">
+                  {getStatusIcon(feature.status, feature.icon)}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-white truncate">{feature.name}</p>
+                    <p className="text-xs text-neutral-400">{feature.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <div 
+            className="flex items-center justify-between cursor-pointer hover:bg-[#222]/30 p-2 rounded-lg transition-colors mb-4 border border-transparent hover:border-[#333]"
+            onClick={() => setShowAdvancedFeatures(!showAdvancedFeatures)}
+          >
+            <h3 className="text-white font-semibold flex items-center">
+              <Settings className="h-4 w-4 mr-2 text-blue-400" />
+              Advanced Features 
+              <span className="ml-2 text-blue-400 text-sm">({advancedImplementedCount}/{advancedFeatures.length} implemented)</span>
+            </h3>
+            <div className="flex items-center space-x-2">
+              <span className="text-xs text-neutral-500">
+                {showAdvancedFeatures ? 'Hide details' : 'Show details'}
+              </span>
+              {showAdvancedFeatures ? (
+                <ChevronUp className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+              )}
+            </div>
+          </div>
+          
+          {showAdvancedFeatures && (
+            <div className="space-y-3">
+              {advancedFeatures.map((feature, index) => (
+                <div key={index} className="flex items-start space-x-3 bg-[#222]/50 p-3 rounded-lg border border-[#333]">
+                  {getStatusIcon(feature.status, feature.icon)}
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-2">
+                      <p className="text-sm font-medium text-white">{feature.name}</p>
+                      <Badge 
+                        variant="outline" 
+                        className={`text-xs ${
+                          feature.status === 'implemented' ? 'border-green-500 text-green-400' :
+                          feature.status === 'partial' ? 'border-yellow-500 text-yellow-400' :
+                          'border-blue-500 text-blue-400'
+                        }`}
+                      >
+                        {feature.status}
+                      </Badge>
+                    </div>
+                    <p className="text-xs text-neutral-400 mt-1">{feature.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-lg p-4">
+          <div className="flex items-start space-x-2">
+            <Shield className="h-4 w-4 text-emerald-400 mt-0.5" />
+            <div className="text-sm">
+              <p className="text-emerald-400 font-medium">✓ 100% A2A v0.2.0 Compliance Achieved</p>
+              <p className="text-emerald-300 mt-1">
+                All 8 official RPC methods implemented • Complete protocol data objects • Full workflow support • Enterprise security ready
+              </p>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/components/CodeBlock.tsx b/frontend/app/documentation/components/CodeBlock.tsx
new file mode 100644
index 00000000..8e39bea7
--- /dev/null
+++ b/frontend/app/documentation/components/CodeBlock.tsx
@@ -0,0 +1,78 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/CodeBlock.tsx                           │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import React from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { Button } from "@/components/ui/button";
+import { ClipboardCopy } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+interface CodeBlockProps {
+  text: string;
+  language: string;
+  showLineNumbers?: boolean;
+}
+
+export function CodeBlock({ text, language, showLineNumbers = true }: CodeBlockProps) {
+  const { toast } = useToast();
+  
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(text);
+    toast({
+      title: "Copied!",
+      description: "Code copied to clipboard",
+    });
+  };
+
+  return (
+    <div className="relative rounded-md overflow-hidden">
+      <SyntaxHighlighter
+        language={language}
+        style={dracula}
+        showLineNumbers={showLineNumbers}
+        wrapLines={true}
+        customStyle={{
+          margin: 0,
+          padding: "1rem",
+          borderRadius: "0.375rem",
+        }}
+      >
+        {text}
+      </SyntaxHighlighter>
+      <Button
+        size="sm"
+        variant="ghost"
+        className="absolute top-2 right-2 text-white hover:bg-[#333] opacity-80 hover:opacity-100"
+        onClick={copyToClipboard}
+      >
+        <ClipboardCopy className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/components/CodeExamplesSection.tsx b/frontend/app/documentation/components/CodeExamplesSection.tsx
new file mode 100644
index 00000000..c4057cb4
--- /dev/null
+++ b/frontend/app/documentation/components/CodeExamplesSection.tsx
@@ -0,0 +1,317 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/CodeExamplesSection.tsx                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { CodeBlock } from "@/app/documentation/components/CodeBlock";
+
+interface CodeExamplesSectionProps {
+  agentUrl: string;
+  apiKey: string;
+  jsonRpcRequest: any;
+  curlExample: string;
+  fetchExample: string;
+}
+
+export function CodeExamplesSection({
+  agentUrl,
+  apiKey,
+  jsonRpcRequest,
+  curlExample,
+  fetchExample
+}: CodeExamplesSectionProps) {
+  const pythonExample = `import requests
+import json
+
+def test_a2a_agent():
+    url = "${agentUrl || "http://localhost:8000/api/v1/a2a/your-agent-id"}"
+    headers = {
+        "Content-Type": "application/json",
+        "x-api-key": "${apiKey || "your-api-key"}"
+    }
+    
+    payload = ${JSON.stringify(jsonRpcRequest, null, 2)}
+    
+    response = requests.post(url, headers=headers, json=payload)
+    data = response.json()
+    print("Agent response:", data)
+    
+    return data
+
+if __name__ == "__main__":
+    test_a2a_agent()`;
+
+  return (
+    <Card className="bg-[#1a1a1a] border-[#333] text-white">
+      <CardHeader>
+        <CardTitle className="text-emerald-400">Code Examples</CardTitle>
+        <CardDescription className="text-neutral-400">
+          Code snippets ready to use with A2A agents
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Tabs defaultValue="curl">
+          <TabsList className="bg-[#222] border-[#333] mb-4">
+            <TabsTrigger value="curl" className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400">
+              cURL
+            </TabsTrigger>
+            <TabsTrigger value="javascript" className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400">
+              JavaScript
+            </TabsTrigger>
+            <TabsTrigger value="python" className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400">
+              Python
+            </TabsTrigger>
+          </TabsList>
+          
+          <TabsContent value="curl" className="relative">
+            <CodeBlock
+              text={curlExample}
+              language="bash"
+            />
+          </TabsContent>
+          
+          <TabsContent value="javascript" className="relative">
+            <CodeBlock
+              text={fetchExample}
+              language="javascript"
+            />
+          </TabsContent>
+          
+          <TabsContent value="python" className="relative">
+            <CodeBlock
+              text={pythonExample}
+              language="python"
+            />
+          </TabsContent>
+        </Tabs>
+
+        <div className="mt-8">
+          <h3 className="text-xl font-semibold text-white mb-3">Sending files to the agent</h3>
+          <p className="text-neutral-400 mb-4">
+            You can attach files to messages sent to the agent using the A2A protocol. 
+            The files are encoded in base64 and incorporated into the message as parts of type &quot;file&quot;.
+          </p>
+          
+          <div className="space-y-6">
+            <div>
+              <h4 className="text-lg font-medium text-emerald-400 mb-2">Python</h4>
+              <CodeBlock
+                text={`import asyncio
+import base64
+import os
+from uuid import uuid4
+
+from common.client import A2ACardResolver, A2AClient
+
+async def send_message_with_files():
+    # Instantiate client
+    card_resolver = A2ACardResolver("http://localhost:8000/api/v1/a2a/your-agent-id")
+    card = card_resolver.get_agent_card()
+    client = A2AClient(agent_card=card)
+    
+    # Create session and task IDs
+    session_id = uuid4().hex
+    task_id = uuid4().hex
+    
+    # Read file and encode in base64
+    file_path = "example.jpg"
+    with open(file_path, 'rb') as f:
+        file_content = base64.b64encode(f.read()).decode('utf-8')
+        file_name = os.path.basename(file_path)
+    
+    # Create message with text and file
+    message = {
+        'role': 'user',
+        'parts': [
+            {
+                'type': 'text',
+                'text': 'Analyze this image for me',
+            },
+            {
+                'type': 'file',
+                'file': {
+                    'name': file_name,
+                    'bytes': file_content,
+                    'mime_type': 'application/octet-stream'  # Important: include the mime_type for correct file processing
+                },
+            }
+        ],
+    }
+    
+    # Create request payload
+    payload = {
+        'id': task_id,
+        'sessionId': session_id,
+        'acceptedOutputModes': ['text'],
+        'message': message,
+    }
+    
+    # Send request
+    task_result = await client.send_task(payload)
+    print(f'\\nResponse: {task_result.model_dump_json(exclude_none=True)}')
+
+if __name__ == '__main__':
+    asyncio.run(send_message_with_files())`}
+                language="python"
+              />
+            </div>
+            
+            <div>
+              <h4 className="text-lg font-medium text-emerald-400 mb-2">JavaScript/TypeScript</h4>
+              <CodeBlock
+                text={`// Function to convert file to base64
+async function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(',')[1];
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+async function sendMessageWithFiles() {
+  // Select file (in a web application)
+  const fileInput = document.getElementById('fileInput');
+  const files = fileInput.files;
+  
+  if (files.length === 0) {
+    console.error('No file selected');
+    return;
+  }
+  
+  // Convert file to base64
+  const file = files[0];
+  const base64Data = await fileToBase64(file);
+  
+  // Create session and task IDs
+  const sessionId = crypto.randomUUID();
+  const taskId = crypto.randomUUID();
+  const callId = crypto.randomUUID();
+  
+  // Create message with text and file
+  const payload = {
+    jsonrpc: "2.0",
+    method: "message/send",
+    params: {
+      message: {
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: "Analyze this document for me",
+          },
+          {
+            type: "file",
+            file: {
+              name: file.name,
+              bytes: base64Data,
+              mime_type: file.type
+            }
+          }
+        ],
+      },
+      sessionId: sessionId,
+      id: taskId,
+    },
+    id: callId,
+  };
+  
+  // Send request
+  const response = await fetch('http://localhost:8000/api/v1/a2a/your-agent-id', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': 'your-api-key',
+    },
+    body: JSON.stringify(payload),
+  });
+  
+  const data = await response.json();
+  console.log('Agent response:', data);
+}`}
+                language="javascript"
+              />
+            </div>
+            
+            <div>
+              <h4 className="text-lg font-medium text-emerald-400 mb-2">Curl</h4>
+              <CodeBlock
+                text={`# Convert file to base64
+FILE_PATH="example.jpg"
+FILE_NAME=$(basename $FILE_PATH)
+BASE64_CONTENT=$(base64 -w 0 $FILE_PATH)
+
+# Create request payload
+read -r -d '' PAYLOAD << EOM
+{
+  "jsonrpc": "2.0",
+  "method": "message/send",
+  "params": {
+    "message": {
+      "role": "user",
+      "parts": [
+        {
+          "type": "text",
+          "text": "Analyze this image for me"
+        },
+        {
+          "type": "file",
+          "file": {
+            "name": "$FILE_NAME",
+            "bytes": "$BASE64_CONTENT",
+            "mime_type": "$(file --mime-type -b $FILE_PATH)"
+          }
+        }
+      ]
+    },
+    "sessionId": "session-123",
+    "id": "task-456"
+  },
+  "id": "call-789"
+}
+EOM
+
+# Send request
+curl -X POST \\
+  http://localhost:8000/api/v1/a2a/your-agent-id \\
+  -H 'Content-Type: application/json' \\
+  -H 'x-api-key: your-api-key' \\
+  -d "$PAYLOAD"`}
+                language="bash"
+              />
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/documentation/components/DocumentationSection.tsx b/frontend/app/documentation/components/DocumentationSection.tsx
new file mode 100644
index 00000000..8661403e
--- /dev/null
+++ b/frontend/app/documentation/components/DocumentationSection.tsx
@@ -0,0 +1,588 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/DocumentationSection.tsx                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { 
+  ClipboardCopy, 
+  Info, 
+  ExternalLink, 
+  Users, 
+  Shield, 
+  Zap, 
+  Network,
+  FileText,
+  MessageSquare,
+  Settings,
+  AlertCircle,
+  CheckCircle2,
+  Globe
+} from "lucide-react";
+import { CodeBlock } from "@/app/documentation/components/CodeBlock";
+
+interface DocumentationSectionProps {
+  copyToClipboard: (text: string) => void;
+}
+
+export function DocumentationSection({ copyToClipboard }: DocumentationSectionProps) {
+  const quickStartExample = {
+    jsonrpc: "2.0",
+    id: "req-001",
+    method: "message/send",
+    params: {
+      message: {
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: "Hello! Can you help me analyze this data?"
+          }
+        ],
+        messageId: "6dbc13b5-bd57-4c2b-b503-24e381b6c8d6"
+      }
+    }
+  };
+
+  const streamingExample = {
+    jsonrpc: "2.0", 
+    id: "req-002",
+    method: "message/stream",
+    params: {
+      message: {
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: "Generate a detailed report on market trends"
+          }
+        ],
+        messageId: "f47ac10b-58cc-4372-a567-0e02b2c3d479"
+      }
+    }
+  };
+
+  const fileUploadExample = {
+    jsonrpc: "2.0",
+    id: "req-003", 
+    method: "message/send",
+    params: {
+      message: {
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: "Analyze this image and highlight any faces."
+          },
+          {
+            type: "file",
+            file: {
+              name: "input_image.png",
+              mimeType: "image/png",
+              bytes: "iVBORw0KGgoAAAANSUhEUgAAAAUA..." 
+            }
+          }
+        ],
+        messageId: "8f0dc03c-4c65-4a14-9b56-7e8b9f2d1a3c"
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Hero Section */}
+      <Card className="bg-gradient-to-br from-emerald-500/10 to-blue-500/10 border-emerald-500/20 text-white">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="flex items-center space-x-2 bg-emerald-500/20 px-4 py-2 rounded-full">
+              <Network className="h-6 w-6 text-emerald-400" />
+              <span className="font-bold text-emerald-400">Agent2Agent Protocol</span>
+            </div>
+          </div>
+          <CardTitle className="text-3xl font-bold bg-gradient-to-r from-emerald-400 to-blue-400 bg-clip-text text-transparent">
+            The Standard for AI Agent Communication
+          </CardTitle>
+          <p className="text-lg text-neutral-300 mt-4 max-w-3xl mx-auto">
+            A2A is Google's open protocol enabling seamless communication and interoperability 
+            between AI agents across different platforms, providers, and architectures.
+          </p>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap justify-center gap-4 mt-6">
+            <a 
+              href="https://google.github.io/A2A/specification" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="flex items-center bg-emerald-500/20 hover:bg-emerald-500/30 px-4 py-2 rounded-lg transition-colors"
+            >
+              <FileText className="h-4 w-4 mr-2 text-emerald-400" />
+              <span className="text-emerald-400">Official Specification</span>
+              <ExternalLink className="h-3 w-3 ml-2 text-emerald-400" />
+            </a>
+            <a 
+              href="https://github.com/google/A2A" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="flex items-center bg-blue-500/20 hover:bg-blue-500/30 px-4 py-2 rounded-lg transition-colors"
+            >
+              <Globe className="h-4 w-4 mr-2 text-blue-400" />
+              <span className="text-blue-400">GitHub Repository</span>
+              <ExternalLink className="h-3 w-3 ml-2 text-blue-400" />
+            </a>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Key Features */}
+      <Card className="bg-[#1a1a1a] border-[#333] text-white">
+        <CardHeader>
+          <CardTitle className="text-emerald-400 flex items-center">
+            <Zap className="h-5 w-5 mr-2" />
+            Key Features & Capabilities
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="flex items-start space-x-3">
+              <div className="bg-emerald-500/20 p-2 rounded-lg">
+                <MessageSquare className="h-5 w-5 text-emerald-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Multi-turn Conversations</h3>
+                <p className="text-sm text-neutral-400">Support for complex, contextual dialogues between agents</p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="bg-blue-500/20 p-2 rounded-lg">
+                <FileText className="h-5 w-5 text-blue-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">File Exchange</h3>
+                <p className="text-sm text-neutral-400">Upload and download files with proper MIME type handling</p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="bg-purple-500/20 p-2 rounded-lg">
+                <Zap className="h-5 w-5 text-purple-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Real-time Streaming</h3>
+                <p className="text-sm text-neutral-400">Server-Sent Events for live response streaming</p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="bg-orange-500/20 p-2 rounded-lg">
+                <Settings className="h-5 w-5 text-orange-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Task Management</h3>
+                <p className="text-sm text-neutral-400">Track, query, and cancel long-running tasks</p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="bg-red-500/20 p-2 rounded-lg">
+                <Shield className="h-5 w-5 text-red-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Enterprise Security</h3>
+                <p className="text-sm text-neutral-400">Bearer tokens, API keys, and HTTPS enforcement</p>
+              </div>
+            </div>
+            <div className="flex items-start space-x-3">
+              <div className="bg-green-500/20 p-2 rounded-lg">
+                <Users className="h-5 w-5 text-green-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Agent Discovery</h3>
+                <p className="text-sm text-neutral-400">Standardized agent cards for capability discovery</p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Protocol Methods */}
+      <Card className="bg-[#1a1a1a] border-[#333] text-white">
+        <CardHeader>
+          <CardTitle className="text-emerald-400">Protocol Methods</CardTitle>
+          <p className="text-neutral-400">A2A supports multiple RPC methods for different interaction patterns</p>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="messaging" className="w-full">
+            <TabsList className="grid w-full grid-cols-3 bg-[#222] border-[#444]">
+              <TabsTrigger value="messaging" className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400">
+                Messaging
+              </TabsTrigger>
+              <TabsTrigger value="tasks" className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400">
+                Task Management
+              </TabsTrigger>
+              <TabsTrigger value="discovery" className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400">
+                Discovery
+              </TabsTrigger>
+            </TabsList>
+            
+            <TabsContent value="messaging" className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-[#222] p-4 rounded-lg border border-[#444]">
+                  <div className="flex items-center space-x-2 mb-3">
+                    <Badge variant="outline" className="border-emerald-500 text-emerald-400">message/send</Badge>
+                    <CheckCircle2 className="h-4 w-4 text-emerald-400" />
+                  </div>
+                  <h4 className="font-semibold text-white mb-2">Standard HTTP Request</h4>
+                  <p className="text-sm text-neutral-400 mb-3">
+                    Send a message and receive a complete response after processing is finished.
+                  </p>
+                  <ul className="text-xs text-neutral-400 space-y-1">
+                    <li>• Single request/response cycle</li>
+                    <li>• Best for simple queries</li>
+                    <li>• Lower complexity implementation</li>
+                    <li>• Synchronous operation</li>
+                  </ul>
+                </div>
+                
+                <div className="bg-[#222] p-4 rounded-lg border border-[#444]">
+                  <div className="flex items-center space-x-2 mb-3">
+                    <Badge variant="outline" className="border-blue-500 text-blue-400">message/stream</Badge>
+                    <Zap className="h-4 w-4 text-blue-400" />
+                  </div>
+                  <h4 className="font-semibold text-white mb-2">Real-time Streaming</h4>
+                  <p className="text-sm text-neutral-400 mb-3">
+                    Receive partial responses in real-time via Server-Sent Events.
+                  </p>
+                  <ul className="text-xs text-neutral-400 space-y-1">
+                    <li>• Progressive response delivery</li>
+                    <li>• Better UX for long tasks</li>
+                    <li>• Live status updates</li>
+                    <li>• Asynchronous operation</li>
+                  </ul>
+                </div>
+              </div>
+            </TabsContent>
+            
+            <TabsContent value="tasks" className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-[#222] p-4 rounded-lg border border-[#444]">
+                  <div className="flex items-center space-x-2 mb-3">
+                    <Badge variant="outline" className="border-purple-500 text-purple-400">tasks/get</Badge>
+                    <Settings className="h-4 w-4 text-purple-400" />
+                  </div>
+                  <h4 className="font-semibold text-white mb-2">Query Task Status</h4>
+                  <p className="text-sm text-neutral-400 mb-3">
+                    Check the status, progress, and results of a specific task.
+                  </p>
+                  <ul className="text-xs text-neutral-400 space-y-1">
+                    <li>• Real-time status checking</li>
+                    <li>• Progress monitoring</li>
+                    <li>• Result retrieval</li>
+                    <li>• Error diagnosis</li>
+                  </ul>
+                </div>
+                
+                <div className="bg-[#222] p-4 rounded-lg border border-[#444]">
+                  <div className="flex items-center space-x-2 mb-3">
+                    <Badge variant="outline" className="border-red-500 text-red-400">tasks/cancel</Badge>
+                    <AlertCircle className="h-4 w-4 text-red-400" />
+                  </div>
+                  <h4 className="font-semibold text-white mb-2">Cancel Task</h4>
+                  <p className="text-sm text-neutral-400 mb-3">
+                    Terminate a running task before completion.
+                  </p>
+                  <ul className="text-xs text-neutral-400 space-y-1">
+                    <li>• Graceful task termination</li>
+                    <li>• Resource cleanup</li>
+                    <li>• Cost optimization</li>
+                    <li>• User control</li>
+                  </ul>
+                </div>
+              </div>
+            </TabsContent>
+            
+            <TabsContent value="discovery" className="space-y-4">
+              <div className="bg-[#222] p-4 rounded-lg border border-[#444]">
+                <div className="flex items-center space-x-2 mb-3">
+                  <Badge variant="outline" className="border-green-500 text-green-400">agent/authenticatedExtendedCard</Badge>
+                  <Users className="h-4 w-4 text-green-400" />
+                </div>
+                <h4 className="font-semibold text-white mb-2">Agent Discovery</h4>
+                <p className="text-sm text-neutral-400 mb-3">
+                  Retrieve detailed information about agent capabilities, skills, and requirements.
+                </p>
+                <ul className="text-xs text-neutral-400 space-y-1">
+                  <li>• Agent capability discovery</li>
+                  <li>• Skill and tool enumeration</li>
+                  <li>• Authentication requirements</li>
+                  <li>• API version compatibility</li>
+                </ul>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* Code Examples */}
+      <Card className="bg-[#1a1a1a] border-[#333] text-white">
+        <CardHeader>
+          <CardTitle className="text-emerald-400">Quick Start Examples</CardTitle>
+          <p className="text-neutral-400">Ready-to-use JSON-RPC examples based on the official A2A specification</p>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="basic" className="w-full">
+            <TabsList className="grid w-full grid-cols-3 bg-[#222] border-[#444]">
+              <TabsTrigger value="basic" className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400">
+                Basic Message
+              </TabsTrigger>
+              <TabsTrigger value="streaming" className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400">
+                Streaming
+              </TabsTrigger>
+              <TabsTrigger value="files" className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400">
+                File Upload
+              </TabsTrigger>
+            </TabsList>
+            
+            <TabsContent value="basic" className="space-y-4">
+              <div className="relative">
+                <CodeBlock
+                  text={JSON.stringify(quickStartExample, null, 2)}
+                  language="json"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(JSON.stringify(quickStartExample, null, 2))}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+                <div className="flex items-start space-x-2">
+                  <Info className="h-4 w-4 text-blue-400 mt-0.5" />
+                  <div className="text-sm">
+                    <p className="text-blue-400 font-medium">Key Points:</p>
+                    <ul className="text-blue-300 mt-1 space-y-1">
+                      <li>• Uses <code className="bg-blue-500/20 px-1 rounded">message/send</code> for standard HTTP requests</li>
+                      <li>• <code className="bg-blue-500/20 px-1 rounded">messageId</code> must be a valid UUID v4</li>
+                      <li>• Response contains task ID, status, and artifacts</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+            
+            <TabsContent value="streaming" className="space-y-4">
+              <div className="relative">
+                <CodeBlock
+                  text={JSON.stringify(streamingExample, null, 2)}
+                  language="json"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(JSON.stringify(streamingExample, null, 2))}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="bg-purple-500/10 border border-purple-500/20 rounded-lg p-4">
+                <div className="flex items-start space-x-2">
+                  <Zap className="h-4 w-4 text-purple-400 mt-0.5" />
+                  <div className="text-sm">
+                    <p className="text-purple-400 font-medium">Streaming Features:</p>
+                    <ul className="text-purple-300 mt-1 space-y-1">
+                      <li>• Real-time Server-Sent Events (SSE)</li>
+                      <li>• Progressive content delivery</li>
+                      <li>• Status updates: submitted → working → completed</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+            
+            <TabsContent value="files" className="space-y-4">
+              <div className="relative">
+                <CodeBlock
+                  text={JSON.stringify(fileUploadExample, null, 2)}
+                  language="json"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(JSON.stringify(fileUploadExample, null, 2))}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-4">
+                <div className="flex items-start space-x-2">
+                  <FileText className="h-4 w-4 text-green-400 mt-0.5" />
+                  <div className="text-sm">
+                    <p className="text-green-400 font-medium">File Handling:</p>
+                    <ul className="text-green-300 mt-1 space-y-1">
+                      <li>• Support for multiple file types (images, documents, etc.)</li>
+                      <li>• Base64 encoding for binary data</li>
+                      <li>• Proper MIME type specification</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+      
+      {/* Security & Best Practices */}
+      <Card className="bg-[#1a1a1a] border-[#333] text-white">
+        <CardHeader>
+          <CardTitle className="text-emerald-400 flex items-center">
+            <Shield className="h-5 w-5 mr-2" />
+            Security & Best Practices
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="text-white font-semibold mb-3 flex items-center">
+                <Shield className="h-4 w-4 mr-2 text-emerald-400" />
+                Authentication Methods
+              </h3>
+              <div className="space-y-3">
+                <div className="bg-[#222] p-3 rounded-lg border border-[#444]">
+                  <div className="flex items-center space-x-2 mb-2">
+                    <code className="text-emerald-400 text-sm">x-api-key</code>
+                    <Badge variant="outline" className="text-xs">Recommended</Badge>
+                  </div>
+                  <p className="text-xs text-neutral-400">Custom header for API key authentication</p>
+                </div>
+                <div className="bg-[#222] p-3 rounded-lg border border-[#444]">
+                  <div className="flex items-center space-x-2 mb-2">
+                    <code className="text-blue-400 text-sm">Authorization: Bearer</code>
+                    <Badge variant="outline" className="text-xs">Standard</Badge>
+                  </div>
+                  <p className="text-xs text-neutral-400">OAuth 2.0 Bearer token authentication</p>
+                </div>
+              </div>
+            </div>
+            
+            <div>
+              <h3 className="text-white font-semibold mb-3 flex items-center">
+                <AlertCircle className="h-4 w-4 mr-2 text-orange-400" />
+                Security Requirements
+              </h3>
+              <div className="space-y-2 text-sm">
+                <div className="flex items-center space-x-2">
+                  <CheckCircle2 className="h-3 w-3 text-green-400" />
+                  <span className="text-neutral-300">HTTPS/TLS encryption required</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <CheckCircle2 className="h-3 w-3 text-green-400" />
+                  <span className="text-neutral-300">Input validation on all parameters</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <CheckCircle2 className="h-3 w-3 text-green-400" />
+                  <span className="text-neutral-300">Rate limiting and resource controls</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <CheckCircle2 className="h-3 w-3 text-green-400" />
+                  <span className="text-neutral-300">Proper CORS configuration</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="bg-amber-500/10 border border-amber-500/20 rounded-lg p-4">
+            <div className="flex items-start space-x-2">
+              <AlertCircle className="h-4 w-4 text-amber-400 mt-0.5" />
+              <div className="text-sm">
+                <p className="text-amber-400 font-medium">Important:</p>
+                <p className="text-amber-300 mt-1">
+                  Always obtain API credentials out-of-band. Never include sensitive authentication 
+                  data in client-side code or version control systems.
+                </p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* A2A vs MCP */}
+      <Card className="bg-[#1a1a1a] border-[#333] text-white">
+        <CardHeader>
+          <CardTitle className="text-emerald-400 flex items-center">
+            <Network className="h-5 w-5 mr-2" />
+            A2A vs Model Context Protocol (MCP)
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse">
+              <thead>
+                <tr className="bg-[#222] border-b border-[#444]">
+                  <th className="p-4 text-left text-neutral-300">Aspect</th>
+                  <th className="p-4 text-left text-emerald-400">Agent2Agent (A2A)</th>
+                  <th className="p-4 text-left text-blue-400">Model Context Protocol (MCP)</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-[#333]">
+                  <td className="p-4 text-neutral-300 font-medium">Purpose</td>
+                  <td className="p-4 text-neutral-300">Agent-to-agent communication</td>
+                  <td className="p-4 text-neutral-300">Model-to-tool/resource integration</td>
+                </tr>
+                <tr className="border-b border-[#333]">
+                  <td className="p-4 text-neutral-300 font-medium">Use Case</td>
+                  <td className="p-4 text-neutral-300">AI agents collaborating as peers</td>
+                  <td className="p-4 text-neutral-300">AI models accessing external capabilities</td>
+                </tr>
+                <tr className="border-b border-[#333]">
+                  <td className="p-4 text-neutral-300 font-medium">Relationship</td>
+                  <td className="p-4 text-neutral-300">Partner/delegate work</td>
+                  <td className="p-4 text-neutral-300">Use specific capabilities</td>
+                </tr>
+                <tr className="border-b border-[#333]">
+                  <td className="p-4 text-neutral-300 font-medium">Integration</td>
+                  <td className="p-4 text-neutral-300 text-emerald-400">✓ Can use MCP internally</td>
+                  <td className="p-4 text-neutral-300 text-blue-400">✓ Complements A2A</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div className="mt-4 bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+            <p className="text-blue-300 text-sm">
+              <strong>Working Together:</strong> An A2A client agent might request an A2A server agent to perform a complex task. 
+              The server agent, in turn, might use MCP to interact with tools, APIs, or data sources necessary to fulfill the A2A task.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/components/FrontendImplementationSection.tsx b/frontend/app/documentation/components/FrontendImplementationSection.tsx
new file mode 100644
index 00000000..15a02494
--- /dev/null
+++ b/frontend/app/documentation/components/FrontendImplementationSection.tsx
@@ -0,0 +1,796 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/FrontendImplementationSection.tsx       │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ClipboardCopy } from "lucide-react";
+import { CodeBlock } from "@/app/documentation/components/CodeBlock";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface FrontendImplementationSectionProps {
+  copyToClipboard: (text: string) => void;
+}
+
+export function FrontendImplementationSection({ copyToClipboard }: FrontendImplementationSectionProps) {
+  return (
+    <Card className="bg-[#1a1a1a] border-[#333] text-white">
+      <CardHeader>
+        <CardTitle className="text-emerald-400">Frontend implementation</CardTitle>
+        <CardDescription className="text-neutral-400">
+          Practical examples for implementation in React applications
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <Tabs defaultValue="standard">
+          <TabsList className="bg-[#222] border-[#333] mb-4">
+            <TabsTrigger value="standard" className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400">
+              Standard HTTP
+            </TabsTrigger>
+            <TabsTrigger value="streaming" className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400">
+              Streaming SSE
+            </TabsTrigger>
+            <TabsTrigger value="react-component" className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400">
+              React component
+            </TabsTrigger>
+          </TabsList>
+          
+          <TabsContent value="standard">
+            <div>
+              <h3 className="text-emerald-400 text-lg font-medium mb-2">Implementation of message/send</h3>
+              <p className="text-neutral-300 mb-4">
+                Example of standard implementation in JavaScript/React:
+              </p>
+              
+              <div className="relative">
+                <CodeBlock
+                  text={`async function sendTask(agentId, message) {
+  // Generate unique IDs
+  const taskId = crypto.randomUUID();
+  const callId = crypto.randomUUID();
+  
+  // Prepare request data
+  const requestData = {
+    jsonrpc: "2.0",
+    id: callId,
+    method: "message/send",
+    params: {
+      id: taskId,
+      sessionId: "session-" + Math.random().toString(36).substring(2, 9),
+      message: {
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: message
+          }
+        ]
+      }
+    }
+  };
+
+  try {
+    // Indicate loading state
+    setIsLoading(true);
+    
+    // Send the request
+    const response = await fetch(\`/api/v1/a2a/\${agentId}\`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': 'YOUR_API_KEY_HERE'
+      },
+      body: JSON.stringify(requestData)
+    });
+
+    if (!response.ok) {
+      throw new Error(\`HTTP error: \${response.status}\`);
+    }
+
+    // Process the response
+    const data = await response.json();
+    
+    // Check for errors
+    if (data.error) {
+      console.error('Error in response:', data.error);
+      return null;
+    }
+    
+    // Extract the agent response
+    const task = data.result;
+    
+    // Show response in UI
+    if (task.status.message && task.status.message.parts) {
+      const responseText = task.status.message.parts
+        .filter(part => part.type === 'text')
+        .map(part => part.text)
+        .join('');
+      
+      // Here you would update your React state
+      // setResponse(responseText);
+      
+      return responseText;
+    }
+    
+    return task;
+  } catch (error) {
+    console.error('Error sending task:', error);
+    return null;
+  } finally {
+    // Finalize loading state
+    setIsLoading(false);
+  }
+}`}
+                  language="javascript"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(`async function sendTask(agentId, message) {
+  // Generate unique IDs
+  const taskId = crypto.randomUUID();
+  const callId = crypto.randomUUID();
+  
+  // Prepare request data
+  const requestData = {
+    jsonrpc: "2.0",
+    id: callId,
+    method: "message/send",
+    params: {
+      id: taskId,
+      sessionId: "session-" + Math.random().toString(36).substring(2, 9),
+      message: {
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: message
+          }
+        ]
+      }
+    }
+  };
+
+  try {
+    // Indicate loading state
+    setIsLoading(true);
+    
+    // Send the request
+    const response = await fetch(\`/api/v1/a2a/\${agentId}\`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': 'YOUR_API_KEY_HERE'
+      },
+      body: JSON.stringify(requestData)
+    });
+
+    if (!response.ok) {
+      throw new Error(\`HTTP error: \${response.status}\`);
+    }
+
+    // Process the response
+    const data = await response.json();
+    
+    // Check for errors
+    if (data.error) {
+      console.error('Error in response:', data.error);
+      return null;
+    }
+    
+    // Extract the agent response
+    const task = data.result;
+    
+    // Show response in UI
+    if (task.status.message && task.status.message.parts) {
+      const responseText = task.status.message.parts
+        .filter(part => part.type === 'text')
+        .map(part => part.text)
+        .join('');
+      
+      // Here you would update your React state
+      // setResponse(responseText);
+      
+      return responseText;
+    }
+    
+    return task;
+  } catch (error) {
+    console.error('Error sending task:', error);
+    return null;
+  } finally {
+    // Finalize loading state
+    setIsLoading(false);
+  }
+}`)}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </TabsContent>
+          
+          <TabsContent value="streaming">
+            <div>
+              <h3 className="text-emerald-400 text-lg font-medium mb-2">Implementation of message/stream (Streaming)</h3>
+              <p className="text-neutral-300 mb-4">
+                Example of implementation of streaming with Server-Sent Events (SSE):
+              </p>
+              
+              <div className="relative">
+                <CodeBlock
+                  text={`async function initAgentStream(agentId, message, onUpdateCallback) {
+  // Generate unique IDs
+  const taskId = crypto.randomUUID();
+  const callId = crypto.randomUUID();
+  const sessionId = "session-" + Math.random().toString(36).substring(2, 9);
+  
+  // Prepare request data for streaming
+  const requestData = {
+    jsonrpc: "2.0",
+    id: callId,
+    method: "message/stream",
+    params: {
+      id: taskId,
+      sessionId: sessionId,
+      message: {
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: message
+          }
+        ]
+      }
+    }
+  };
+
+  try {
+    // Start initial POST request
+    const response = await fetch(\`/api/v1/a2a/\${agentId}\`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': 'YOUR_API_KEY_HERE',
+        'Accept': 'text/event-stream' // Important for SSE
+      },
+      body: JSON.stringify(requestData)
+    });
+
+    if (!response.ok) {
+      throw new Error(\`HTTP error: \${response.status}\`);
+    }
+    
+    // Check content type of the response
+    const contentType = response.headers.get('content-type');
+    
+    // If the response is already SSE, use EventSource
+    if (contentType?.includes('text/event-stream')) {
+      // Use EventSource to process the stream
+      setupEventSource(\`/api/v1/a2a/\${agentId}/stream?taskId=\${taskId}&key=YOUR_API_KEY_HERE\`);
+      return;
+    }
+    
+    // Function to configure EventSource
+    function setupEventSource(url) {
+      const eventSource = new EventSource(url);
+      
+      // Handler for received messages
+      eventSource.onmessage = (event) => {
+        try {
+          // Process data from the event
+          const data = JSON.parse(event.data);
+          
+          // Process the event
+          if (data.result) {
+            // Process status if available
+            if (data.result.status) {
+              const status = data.result.status;
+              
+              // Extract text if available
+              let currentText = '';
+              if (status.message && status.message.parts) {
+                const parts = status.message.parts.filter(part => part.type === 'text');
+                if (parts.length > 0) {
+                  currentText = parts.map(part => part.text).join('');
+                }
+              }
+              
+              // Call callback with updates
+              onUpdateCallback({
+                text: currentText,
+                state: status.state,
+                complete: data.result.final === true
+              });
+              
+              // If it's the final event, close the connection
+              if (data.result.final === true) {
+                eventSource.close();
+                onUpdateCallback({
+                  complete: true,
+                  state: status.state
+                });
+              }
+            }
+            
+            // Process artifact if available
+            if (data.result.artifact) {
+              const artifact = data.result.artifact;
+              if (artifact.parts && artifact.parts.length > 0) {
+                const parts = artifact.parts.filter(part => part.type === 'text');
+                if (parts.length > 0) {
+                  const artifactText = parts.map(part => part.text).join('');
+                  
+                  // Call callback with artifact
+                  onUpdateCallback({
+                    text: artifactText,
+                    state: 'artifact',
+                    complete: artifact.lastChunk === true
+                  });
+                  
+                  // If it's the last chunk, close the connection
+                  if (artifact.lastChunk === true) {
+                    eventSource.close();
+                  }
+                }
+              }
+            }
+          }
+        } catch (error) {
+          console.error('Error processing event:', error);
+          onUpdateCallback({ error: error.message });
+        }
+      };
+      
+      // Handler for errors
+      eventSource.onerror = (error) => {
+        console.error('Error in EventSource:', error);
+        eventSource.close();
+        onUpdateCallback({ 
+          error: 'Connection with server interrupted',
+          complete: true,
+          state: 'error'
+        });
+      };
+    }
+  } catch (error) {
+    console.error('Error in streaming:', error);
+    // Notify error through callback
+    onUpdateCallback({ 
+      error: error.message,
+      complete: true,
+      state: 'error'
+    });
+    return null;
+  }
+}`}
+                  language="javascript"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(`async function initAgentStream(agentId, message, onUpdateCallback) {
+  // Generate unique IDs
+  const taskId = crypto.randomUUID();
+  const callId = crypto.randomUUID();
+  const sessionId = "session-" + Math.random().toString(36).substring(2, 9);
+  
+  // Prepare request data for streaming
+  const requestData = {
+    jsonrpc: "2.0",
+    id: callId,
+    method: "message/stream",
+    params: {
+      id: taskId,
+      sessionId: sessionId,
+      message: {
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: message
+          }
+        ]
+      }
+    }
+  };
+
+  try {
+    // Start initial POST request
+    const response = await fetch(\`/api/v1/a2a/\${agentId}\`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': 'YOUR_API_KEY_HERE',
+        'Accept': 'text/event-stream' // Important for SSE
+      },
+      body: JSON.stringify(requestData)
+    });
+
+    if (!response.ok) {
+      throw new Error(\`HTTP error: \${response.status}\`);
+    }
+    
+    // Check content type of the response
+    const contentType = response.headers.get('content-type');
+    
+    // If the response is already SSE, use EventSource
+    if (contentType?.includes('text/event-stream')) {
+      // Use EventSource to process the stream
+      setupEventSource(\`/api/v1/a2a/\${agentId}/stream?taskId=\${taskId}&key=YOUR_API_KEY_HERE\`);
+      return;
+    }
+    
+    // Function to configure EventSource
+    function setupEventSource(url) {
+      const eventSource = new EventSource(url);
+      
+      // Handler for received messages
+      eventSource.onmessage = (event) => {
+        try {
+          // Process data from the event
+          const data = JSON.parse(event.data);
+          
+          // Process the event
+          if (data.result) {
+            // Process status if available
+            if (data.result.status) {
+              const status = data.result.status;
+              
+              // Extract text if available
+              let currentText = '';
+              if (status.message && status.message.parts) {
+                const parts = status.message.parts.filter(part => part.type === 'text');
+                if (parts.length > 0) {
+                  currentText = parts.map(part => part.text).join('');
+                }
+              }
+              
+              // Call callback with updates
+              onUpdateCallback({
+                text: currentText,
+                state: status.state,
+                complete: data.result.final === true
+              });
+              
+              // If it's the final event, close the connection
+              if (data.result.final === true) {
+                eventSource.close();
+                onUpdateCallback({
+                  complete: true,
+                  state: status.state
+                });
+              }
+            }
+            
+            // Process artifact if available
+            if (data.result.artifact) {
+              const artifact = data.result.artifact;
+              if (artifact.parts && artifact.parts.length > 0) {
+                const parts = artifact.parts.filter(part => part.type === 'text');
+                if (parts.length > 0) {
+                  const artifactText = parts.map(part => part.text).join('');
+                  
+                  // Call callback with artifact
+                  onUpdateCallback({
+                    text: artifactText,
+                    state: 'artifact',
+                    complete: artifact.lastChunk === true
+                  });
+                  
+                  // If it's the last chunk, close the connection
+                  if (artifact.lastChunk === true) {
+                    eventSource.close();
+                  }
+                }
+              }
+            }
+          }
+        } catch (error) {
+          console.error('Error processing event:', error);
+          onUpdateCallback({ error: error.message });
+        }
+      };
+      
+      // Handler for errors
+      eventSource.onerror = (error) => {
+        console.error('Error in EventSource:', error);
+        eventSource.close();
+        onUpdateCallback({ 
+          error: 'Connection with server interrupted',
+          complete: true,
+          state: 'error'
+        });
+      };
+    }
+  } catch (error) {
+    console.error('Error in streaming:', error);
+    // Notify error through callback
+    onUpdateCallback({ 
+      error: error.message,
+      complete: true,
+      state: 'error'
+    });
+    return null;
+  }
+}`)}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </TabsContent>
+          
+          <TabsContent value="react-component">
+            <div className="mt-4">
+              <h4 className="font-medium text-emerald-400 mb-2">React component with streaming support:</h4>
+              <div className="relative">
+                <CodeBlock
+                  text={`import React, { useState, useRef } from 'react';
+
+function ChatComponentA2A() {
+  const [message, setMessage] = useState('');
+  const [response, setResponse] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [status, setStatus] = useState('');
+  
+  // Reference to the agentId
+  const agentId = 'your-agent-id';
+  
+  // Callback for streaming updates
+  const handleStreamUpdate = (update) => {
+    if (update.error) {
+      // Handle error
+      setStatus('error');
+      return;
+    }
+    
+    // Update text
+    setResponse(update.text);
+    
+    // Update status
+    setStatus(update.state);
+    
+    // If it's complete, finish streaming
+    if (update.complete) {
+      setIsStreaming(false);
+    }
+  };
+  
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!message.trim()) return;
+    
+    // Clear previous response
+    setResponse('');
+    setStatus('submitted');
+    
+    // Start streaming
+    setIsStreaming(true);
+    
+    try {
+      // Start stream with the agent
+      await initAgentStream(agentId, message, handleStreamUpdate);
+      
+      // Clear message field after sending
+      setMessage('');
+    } catch (error) {
+      console.error('Error:', error);
+      setStatus('error');
+      setIsStreaming(false);
+    }
+  };
+  
+  // Render status indicator based on status
+  const renderStatusIndicator = () => {
+    switch (status) {
+      case 'submitted':
+        return <span className="badge badge-info">Sent</span>;
+      case 'working':
+        return <span className="badge badge-warning">Processing</span>;
+      case 'completed':
+        return <span className="badge badge-success">Completed</span>;
+      case 'error':
+        return <span className="badge badge-danger">Error</span>;
+      default:
+        return null;
+    }
+  };
+  
+  return (
+    <div className="chat-container">
+      <div className="chat-messages">
+        {response && (
+          <div className="message agent-message">
+            <div className="message-header">
+              <div className="agent-name">A2A Agent</div>
+              {renderStatusIndicator()}
+            </div>
+            <div className="message-content">
+              {response}
+              {status === 'working' && !response && (
+                <div className="typing-indicator">
+                  <span></span><span></span><span></span>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      
+      <form onSubmit={handleSubmit} className="chat-input-form">
+        <input
+          type="text"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Type your message..."
+          disabled={isStreaming}
+          className="chat-input"
+        />
+        <button 
+          type="submit" 
+          disabled={isStreaming || !message.trim()}
+          className="send-button"
+        >
+          {isStreaming ? 'Processing...' : 'Send'}
+        </button>
+      </form>
+    </div>
+  );
+}`}
+                  language="javascript"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(`import React, { useState, useRef } from 'react';
+
+function ChatComponentA2A() {
+  const [message, setMessage] = useState('');
+  const [response, setResponse] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [status, setStatus] = useState('');
+  
+  // Reference to the agentId
+  const agentId = 'your-agent-id';
+  
+  // Callback for streaming updates
+  const handleStreamUpdate = (update) => {
+    if (update.error) {
+      // Handle error
+      setStatus('error');
+      return;
+    }
+    
+    // Update text
+    setResponse(update.text);
+    
+    // Update status
+    setStatus(update.state);
+    
+    // If it's complete, finish streaming
+    if (update.complete) {
+      setIsStreaming(false);
+    }
+  };
+  
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!message.trim()) return;
+    
+    // Clear previous response
+    setResponse('');
+    setStatus('submitted');
+    
+    // Start streaming
+    setIsStreaming(true);
+    
+    try {
+      // Start stream with the agent
+      await initAgentStream(agentId, message, handleStreamUpdate);
+      
+      // Clear message field after sending
+      setMessage('');
+    } catch (error) {
+      console.error('Error:', error);
+      setStatus('error');
+      setIsStreaming(false);
+    }
+  };
+  
+  // Render status indicator based on status
+  const renderStatusIndicator = () => {
+    switch (status) {
+      case 'submitted':
+        return <span className="badge badge-info">Sent</span>;
+      case 'working':
+        return <span className="badge badge-warning">Processing</span>;
+      case 'completed':
+        return <span className="badge badge-success">Completed</span>;
+      case 'error':
+        return <span className="badge badge-danger">Error</span>;
+      default:
+        return null;
+    }
+  };
+  
+  return (
+    <div className="chat-container">
+      <div className="chat-messages">
+        {response && (
+          <div className="message agent-message">
+            <div className="message-header">
+              <div className="agent-name">A2A Agent</div>
+              {renderStatusIndicator()}
+            </div>
+            <div className="message-content">
+              {response}
+              {status === 'working' && !response && (
+                <div className="typing-indicator">
+                  <span></span><span></span><span></span>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      
+      <form onSubmit={handleSubmit} className="chat-input-form">
+        <input
+          type="text"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Type your message..."
+          disabled={isStreaming}
+          className="chat-input"
+        />
+        <button 
+          type="submit" 
+          disabled={isStreaming || !message.trim()}
+          className="send-button"
+        >
+          {isStreaming ? 'Processing...' : 'Send'}
+        </button>
+      </form>
+    </div>
+  );
+}`)}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/components/HttpLabForm.tsx b/frontend/app/documentation/components/HttpLabForm.tsx
new file mode 100644
index 00000000..a235c9fd
--- /dev/null
+++ b/frontend/app/documentation/components/HttpLabForm.tsx
@@ -0,0 +1,523 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/HttpLabForm.tsx                         │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+import { useRef, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Send, Paperclip, X, FileText, Image, File, RotateCcw, Trash2 } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
+
+interface AttachedFile {
+  name: string;
+  type: string;
+  size: number;
+  base64: string;
+}
+
+interface HttpLabFormProps {
+  agentUrl: string;
+  setAgentUrl: (url: string) => void;
+  apiKey: string;
+  setApiKey: (key: string) => void;
+  message: string;
+  setMessage: (message: string) => void;
+  sessionId: string;
+  setSessionId: (id: string) => void;
+  taskId: string;
+  setTaskId: (id: string) => void;
+  callId: string;
+  setCallId: (id: string) => void;
+  sendRequest: () => Promise<void>;
+  isLoading: boolean;
+  setFiles?: (files: AttachedFile[]) => void;
+  a2aMethod: string;
+  setA2aMethod: (method: string) => void;
+  authMethod: string;
+  setAuthMethod: (method: string) => void;
+  generateNewIds: () => void;
+  currentTaskId?: string | null;
+  conversationHistory?: any[];
+  clearHistory?: () => void;
+  webhookUrl?: string;
+  setWebhookUrl?: (url: string) => void;
+  enableWebhooks?: boolean;
+  setEnableWebhooks?: (enabled: boolean) => void;
+  showDetailedErrors?: boolean;
+  setShowDetailedErrors?: (show: boolean) => void;
+}
+
+export function HttpLabForm({
+  agentUrl,
+  setAgentUrl,
+  apiKey,
+  setApiKey,
+  message,
+  setMessage,
+  sessionId,
+  setSessionId,
+  taskId,
+  setTaskId,
+  callId,
+  setCallId,
+  sendRequest,
+  isLoading,
+  setFiles = () => {},
+  a2aMethod,
+  setA2aMethod,
+  authMethod,
+  setAuthMethod,
+  generateNewIds,
+  currentTaskId,
+  conversationHistory,
+  clearHistory,
+  webhookUrl,
+  setWebhookUrl,
+  enableWebhooks,
+  setEnableWebhooks,
+  showDetailedErrors,
+  setShowDetailedErrors
+}: HttpLabFormProps) {
+  const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  const clearAttachedFiles = () => {
+    setAttachedFiles([]);
+  };
+  
+  const handleSendRequest = async () => {
+    await sendRequest();
+    clearAttachedFiles();
+  };
+  
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || e.target.files.length === 0) return;
+    
+    const maxFileSize = 5 * 1024 * 1024; // 5MB limit
+    const newFiles = Array.from(e.target.files);
+    
+    if (attachedFiles.length + newFiles.length > 5) {
+      toast({
+        title: "File limit exceeded",
+        description: "You can only attach up to 5 files.",
+        variant: "destructive"
+      });
+      return;
+    }
+    
+    const filesToAdd: AttachedFile[] = [];
+    
+    for (const file of newFiles) {
+      if (file.size > maxFileSize) {
+        toast({
+          title: "File too large",
+          description: `The file ${file.name} exceeds the 5MB size limit.`,
+          variant: "destructive"
+        });
+        continue;
+      }
+      
+      try {
+        const base64 = await readFileAsBase64(file);
+        filesToAdd.push({
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          base64: base64
+        });
+      } catch (error) {
+        console.error("Failed to read file:", error);
+        toast({
+          title: "Failed to read file",
+          description: `Could not process ${file.name}.`,
+          variant: "destructive"
+        });
+      }
+    }
+    
+    if (filesToAdd.length > 0) {
+      const updatedFiles = [...attachedFiles, ...filesToAdd];
+      setAttachedFiles(updatedFiles);
+      setFiles(updatedFiles);
+    }
+    
+    // Reset file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  
+  const readFileAsBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        const base64 = result.split(',')[1]; // Remove data URL prefix
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+  
+  const removeFile = (index: number) => {
+    const updatedFiles = attachedFiles.filter((_, i) => i !== index);
+    setAttachedFiles(updatedFiles);
+    setFiles(updatedFiles);
+  };
+  
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  
+  const isImageFile = (type: string): boolean => {
+    return type.startsWith('image/');
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* A2A Method and Authentication Settings */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-[#1a1a1a] border border-[#333] rounded-md">
+        <div>
+          <label className="text-sm text-neutral-400 mb-2 block">A2A Method</label>
+          <Select value={a2aMethod} onValueChange={setA2aMethod}>
+            <SelectTrigger className="bg-[#222] border-[#444] text-white">
+              <SelectValue placeholder="Select A2A method" />
+            </SelectTrigger>
+            <SelectContent className="bg-[#222] border-[#444]">
+              <SelectItem value="message/send" className="text-white hover:bg-[#333]">
+                message/send
+              </SelectItem>
+              <SelectItem value="message/stream" className="text-white hover:bg-[#333]">
+                message/stream
+              </SelectItem>
+              <SelectItem value="tasks/get" className="text-white hover:bg-[#333]">
+                tasks/get
+              </SelectItem>
+              <SelectItem value="tasks/cancel" className="text-white hover:bg-[#333]">
+                tasks/cancel
+              </SelectItem>
+              <SelectItem value="tasks/pushNotificationConfig/set" className="text-white hover:bg-[#333]">
+                tasks/pushNotificationConfig/set
+              </SelectItem>
+              <SelectItem value="tasks/pushNotificationConfig/get" className="text-white hover:bg-[#333]">
+                tasks/pushNotificationConfig/get
+              </SelectItem>
+              <SelectItem value="tasks/resubscribe" className="text-white hover:bg-[#333]">
+                tasks/resubscribe
+              </SelectItem>
+              <SelectItem value="agent/authenticatedExtendedCard" className="text-white hover:bg-[#333]">
+                agent/authenticatedExtendedCard
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div>
+          <label className="text-sm text-neutral-400 mb-2 block">Authentication Method</label>
+          <Select value={authMethod} onValueChange={setAuthMethod}>
+            <SelectTrigger className="bg-[#222] border-[#444] text-white">
+              <SelectValue placeholder="Select auth method" />
+            </SelectTrigger>
+            <SelectContent className="bg-[#222] border-[#444]">
+              <SelectItem value="api-key" className="text-white hover:bg-[#333]">
+                API Key (x-api-key header)
+              </SelectItem>
+              <SelectItem value="bearer" className="text-white hover:bg-[#333]">
+                Bearer Token (Authorization header)
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Multi-turn Conversation History Controls */}
+      {(a2aMethod === "message/send" || a2aMethod === "message/stream") && conversationHistory && conversationHistory.length > 0 && (
+        <div className="p-4 bg-emerald-500/5 border border-emerald-500/20 rounded-md">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center space-x-2">
+              <span className="text-sm font-medium text-emerald-400">
+                Multi-turn Conversation Active
+              </span>
+            </div>
+          </div>
+          
+          <div className="text-xs text-emerald-300">
+            💬 {conversationHistory.length} messages in conversation history (contextId active)
+          </div>
+        </div>
+      )}
+
+      {/* Push Notifications (Webhook) Configuration */}
+      {(a2aMethod === "message/send" || a2aMethod === "message/stream" || a2aMethod.startsWith("tasks/")) && (
+        <div className="p-4 bg-blue-500/5 border border-blue-500/20 rounded-md">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                id="enableWebhooks"
+                checked={enableWebhooks}
+                onChange={(e) => setEnableWebhooks?.(e.target.checked)}
+                className="rounded bg-[#222] border-[#444] text-blue-400 focus:ring-blue-400"
+              />
+              <label htmlFor="enableWebhooks" className="text-sm font-medium text-blue-400">
+                Enable Push Notifications (Webhooks)
+              </label>
+            </div>
+          </div>
+          
+          {enableWebhooks && (
+            <div className="mt-3">
+              <label className="text-sm text-neutral-400 mb-1 block">Webhook URL</label>
+              <Input
+                value={webhookUrl}
+                onChange={(e) => setWebhookUrl?.(e.target.value)}
+                placeholder="https://your-server.com/webhook/a2a"
+                className="bg-[#222] border-[#444] text-white"
+              />
+              <div className="text-xs text-blue-300 mt-1">
+                {a2aMethod === "tasks/pushNotificationConfig/set" 
+                  ? "📡 Configure push notifications for task"
+                  : "📡 Webhook URL for push notifications (configured via pushNotificationConfig)"
+                }
+              </div>
+            </div>
+          )}
+          
+          {!enableWebhooks && (
+            <div className="text-xs text-neutral-400">
+              {a2aMethod === "tasks/pushNotificationConfig/set"
+                ? "Push notification configuration will be set to null."
+                : "No push notifications will be configured for this request."
+              }
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Advanced Error Handling Configuration */}
+      <div className="p-4 bg-orange-500/5 border border-orange-500/20 rounded-md">
+        <div className="flex items-center space-x-2 mb-3">
+          <input
+            type="checkbox"
+            id="showDetailedErrors"
+            checked={showDetailedErrors}
+            onChange={(e) => setShowDetailedErrors?.(e.target.checked)}
+            className="rounded bg-[#222] border-[#444] text-orange-400 focus:ring-orange-400"
+          />
+          <label htmlFor="showDetailedErrors" className="text-sm font-medium text-orange-400">
+            Enable Detailed Error Logging
+          </label>
+        </div>
+        
+        <div className="text-xs text-neutral-400">
+          {showDetailedErrors 
+            ? "🔍 Detailed error information will be shown in debug logs (client-side only)."
+            : "⚡ Basic error handling only - minimal error information in logs."
+          }
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">Agent URL</label>
+          <Input
+            value={agentUrl}
+            onChange={(e) => setAgentUrl(e.target.value)}
+            placeholder="http://localhost:8000/api/v1/a2a/your-agent-id"
+            className="bg-[#222] border-[#444] text-white"
+          />
+        </div>
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">
+            {authMethod === "bearer" ? "Bearer Token" : "API Key"} (optional)
+          </label>
+          <Input
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            placeholder={authMethod === "bearer" ? "Your Bearer token" : "Your API key"}
+            className="bg-[#222] border-[#444] text-white"
+          />
+        </div>
+      </div>
+
+      {/* Show current task ID if available */}
+      {currentTaskId && (
+        <div className="p-3 bg-[#1a1a1a] border border-emerald-400/20 rounded-md">
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-sm text-neutral-400">Current Task ID:</span>
+              <span className="ml-2 text-emerald-400 font-mono text-sm">{currentTaskId}</span>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* Message input - only show for message methods */}
+      {(a2aMethod === "message/send" || a2aMethod === "message/stream") && (
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">Message</label>
+          <Textarea
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="What is the A2A protocol?"
+            className="bg-[#222] border-[#444] text-white min-h-[100px]"
+          />
+        </div>
+      )}
+      
+      {/* File attachment - only show for message methods */}
+      {(a2aMethod === "message/send" || a2aMethod === "message/stream") && (
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <label className="text-sm text-neutral-400">
+              Attach Files (up to 5, max 5MB each)
+            </label>
+            <Button 
+              variant="outline" 
+              size="sm"
+              className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={attachedFiles.length >= 5}
+            >
+              <Paperclip className="h-4 w-4 mr-2" />
+              Browse Files
+            </Button>
+            <input
+              type="file"
+              ref={fileInputRef}
+              className="hidden"
+              multiple
+              onChange={handleFileSelect}
+            />
+          </div>
+          
+          {attachedFiles.length > 0 && (
+            <div className="flex flex-wrap gap-2 mb-4">
+              {attachedFiles.map((file, index) => (
+                <div 
+                  key={index} 
+                  className="flex items-center gap-1.5 bg-[#333] text-white rounded-md p-1.5 text-xs"
+                >
+                  {isImageFile(file.type) ? (
+                    <Image className="h-4 w-4 text-emerald-400" />
+                  ) : file.type === 'application/pdf' ? (
+                    <FileText className="h-4 w-4 text-emerald-400" />
+                  ) : (
+                    <File className="h-4 w-4 text-emerald-400" />
+                  )}
+                  <span className="max-w-[150px] truncate">{file.name}</span>
+                  <span className="text-neutral-400">({formatFileSize(file.size)})</span>
+                  <button 
+                    onClick={() => removeFile(index)}
+                    className="ml-1 text-neutral-400 hover:text-white transition-colors"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+      
+      <Separator className="my-4 bg-[#333]" />
+      
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <label className="text-sm text-neutral-400">Session ID</label>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={generateNewIds}
+              className="h-6 px-2 text-xs text-neutral-400 hover:text-white"
+            >
+              <RotateCcw className="h-3 w-3 mr-1" />
+              New IDs
+            </Button>
+          </div>
+          <Input
+            value={sessionId}
+            onChange={(e) => setSessionId(e.target.value)}
+            className="bg-[#222] border-[#444] text-white"
+          />
+        </div>
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">
+            {a2aMethod.startsWith("tasks/") ? "Task ID (for operation)" : "Message ID (UUID)"}
+          </label>
+          <Input
+            value={taskId}
+            onChange={(e) => setTaskId(e.target.value)}
+            className="bg-[#222] border-[#444] text-white"
+            placeholder={a2aMethod.startsWith("tasks/") ? "Task ID to query/cancel" : "UUID for message"}
+          />
+        </div>
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">Request ID</label>
+          <Input
+            value={callId}
+            onChange={(e) => setCallId(e.target.value)}
+            className="bg-[#222] border-[#444] text-white"
+            placeholder="req-123"
+          />
+        </div>
+      </div>
+      
+      <Button 
+        onClick={handleSendRequest}
+        disabled={isLoading}
+        className="bg-emerald-400 text-black hover:bg-[#00cc7d] w-full mt-4"
+      >
+        {isLoading ? (
+          <div className="flex items-center">
+            <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-black mr-2"></div>
+            Sending...
+          </div>
+        ) : (
+          <div className="flex items-center">
+            <Send className="mr-2 h-4 w-4" />
+            {a2aMethod === "message/send" && "Send Message"}
+            {a2aMethod === "message/stream" && "Start Stream"}
+            {a2aMethod === "tasks/get" && "Get Task Status"}
+            {a2aMethod === "tasks/cancel" && "Cancel Task"}
+            {a2aMethod === "tasks/pushNotificationConfig/set" && "Set Push Config"}
+            {a2aMethod === "tasks/pushNotificationConfig/get" && "Get Push Config"}
+            {a2aMethod === "tasks/resubscribe" && "Resubscribe to Task"}
+            {a2aMethod === "agent/authenticatedExtendedCard" && "Get Agent Card"}
+          </div>
+        )}
+      </Button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/components/LabSection.tsx b/frontend/app/documentation/components/LabSection.tsx
new file mode 100644
index 00000000..af0b0bdd
--- /dev/null
+++ b/frontend/app/documentation/components/LabSection.tsx
@@ -0,0 +1,201 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/LabSection.tsx                          │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { ClipboardCopy } from "lucide-react";
+import { HttpLabForm } from "@/app/documentation/components/HttpLabForm";
+import { StreamLabForm } from "@/app/documentation/components/StreamLabForm";
+import { CodeBlock } from "@/app/documentation/components/CodeBlock";
+
+interface LabSectionProps {
+  agentUrl: string;
+  setAgentUrl: (url: string) => void;
+  apiKey: string;
+  setApiKey: (key: string) => void;
+  message: string;
+  setMessage: (message: string) => void;
+  sessionId: string;
+  setSessionId: (id: string) => void;
+  taskId: string;
+  setTaskId: (id: string) => void;
+  callId: string;
+  setCallId: (id: string) => void;
+  a2aMethod: string;
+  setA2aMethod: (method: string) => void;
+  authMethod: string;
+  setAuthMethod: (method: string) => void;
+  generateNewIds: () => void;
+  sendRequest: () => Promise<void>;
+  sendStreamRequestWithEventSource: () => Promise<void>;
+  isLoading: boolean;
+  isStreaming: boolean;
+  streamResponse: string;
+  streamStatus: string;
+  streamHistory: string[];
+  streamComplete: boolean;
+  response: string;
+  copyToClipboard: (text: string) => void;
+  renderStatusIndicator: () => JSX.Element | null;
+  renderTypingIndicator: () => JSX.Element | null;
+}
+
+export function LabSection({
+  agentUrl,
+  setAgentUrl,
+  apiKey,
+  setApiKey,
+  message,
+  setMessage,
+  sessionId,
+  setSessionId,
+  taskId,
+  setTaskId,
+  callId,
+  setCallId,
+  a2aMethod,
+  setA2aMethod,
+  authMethod,
+  setAuthMethod,
+  generateNewIds,
+  sendRequest,
+  sendStreamRequestWithEventSource,
+  isLoading,
+  isStreaming,
+  streamResponse,
+  streamStatus,
+  streamHistory,
+  streamComplete,
+  response,
+  copyToClipboard,
+  renderStatusIndicator,
+  renderTypingIndicator
+}: LabSectionProps) {
+  const [labMode, setLabMode] = useState("http");
+
+  return (
+    <>
+      <Card className="bg-[#1a1a1a] border-[#333] text-white mb-6">
+        <CardHeader>
+          <CardTitle className="text-emerald-400">A2A Test Lab</CardTitle>
+          <CardDescription className="text-neutral-400">
+            Test your A2A agent with different communication methods
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="http" onValueChange={setLabMode}>
+            <TabsList className="bg-[#222] border-[#333] mb-4">
+              <TabsTrigger value="http" className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400">
+                HTTP Request
+              </TabsTrigger>
+              <TabsTrigger value="stream" className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400">
+                Streaming
+              </TabsTrigger>
+            </TabsList>
+            
+            <TabsContent value="http">
+              <HttpLabForm 
+                agentUrl={agentUrl}
+                setAgentUrl={setAgentUrl}
+                apiKey={apiKey}
+                setApiKey={setApiKey}
+                message={message}
+                setMessage={setMessage}
+                sessionId={sessionId}
+                setSessionId={setSessionId}
+                taskId={taskId}
+                setTaskId={setTaskId}
+                callId={callId}
+                setCallId={setCallId}
+                a2aMethod={a2aMethod}
+                setA2aMethod={setA2aMethod}
+                authMethod={authMethod}
+                setAuthMethod={setAuthMethod}
+                generateNewIds={generateNewIds}
+                sendRequest={sendRequest}
+                isLoading={isLoading}
+              />
+            </TabsContent>
+            
+            <TabsContent value="stream">
+              <StreamLabForm 
+                agentUrl={agentUrl}
+                setAgentUrl={setAgentUrl}
+                apiKey={apiKey}
+                setApiKey={setApiKey}
+                message={message}
+                setMessage={setMessage}
+                sessionId={sessionId}
+                setSessionId={setSessionId}
+                taskId={taskId}
+                setTaskId={setTaskId}
+                callId={callId}
+                setCallId={setCallId}
+                authMethod={authMethod}
+                sendStreamRequest={sendStreamRequestWithEventSource}
+                isStreaming={isStreaming}
+                streamResponse={streamResponse}
+                streamStatus={streamStatus}
+                streamHistory={streamHistory}
+                renderStatusIndicator={renderStatusIndicator}
+                renderTypingIndicator={renderTypingIndicator}
+              />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+      
+      {response && labMode === "http" && (
+        <Card className="bg-[#1a1a1a] border-[#333] text-white">
+          <CardHeader>
+            <CardTitle className="text-emerald-400">Response</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="relative">
+              <CodeBlock
+                text={response}
+                language="json"
+              />
+              <Button
+                size="sm"
+                variant="ghost"
+                className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                onClick={() => copyToClipboard(response)}
+              >
+                <ClipboardCopy className="h-4 w-4" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/components/QuickStartTemplates.tsx b/frontend/app/documentation/components/QuickStartTemplates.tsx
new file mode 100644
index 00000000..02fb6d24
--- /dev/null
+++ b/frontend/app/documentation/components/QuickStartTemplates.tsx
@@ -0,0 +1,179 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/QuickStartTemplates.tsx                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { 
+  MessageSquare, 
+  FileText, 
+  Zap, 
+  Settings, 
+  Users,
+  Play 
+} from "lucide-react";
+
+interface QuickStartTemplate {
+  id: string;
+  name: string;
+  description: string;
+  icon: any;
+  method: string;
+  message: string;
+  useCase: string;
+}
+
+interface QuickStartTemplatesProps {
+  onSelectTemplate: (template: QuickStartTemplate) => void;
+}
+
+export function QuickStartTemplates({ onSelectTemplate }: QuickStartTemplatesProps) {
+  const templates: QuickStartTemplate[] = [
+    {
+      id: "hello",
+      name: "Hello Agent",
+      description: "Simple greeting to test agent connectivity",
+      icon: MessageSquare,
+      method: "message/send",
+      message: "Hello! Can you introduce yourself and tell me what you can do?",
+      useCase: "Basic connectivity test"
+    },
+    {
+      id: "analysis",
+      name: "Data Analysis",
+      description: "Request data analysis and insights",
+      icon: FileText,
+      method: "message/send",
+      message: "Please analyze the current market trends in AI technology and provide key insights with recommendations.",
+      useCase: "Complex analytical tasks"
+    },
+    {
+      id: "streaming",
+      name: "Long Content",
+      description: "Generate lengthy content with streaming",
+      icon: Zap,
+      method: "message/stream",
+      message: "Write a comprehensive guide about implementing the Agent2Agent protocol, including technical details, best practices, and code examples.",
+      useCase: "Streaming responses"
+    },
+    {
+      id: "task-query",
+      name: "Task Status",
+      description: "Query the status of a running task",
+      icon: Settings,
+      method: "tasks/get",
+      message: "",
+      useCase: "Task management"
+    },
+    {
+      id: "capabilities",
+      name: "Agent Capabilities",
+      description: "Discover agent capabilities and skills",
+      icon: Users,
+      method: "agent/authenticatedExtendedCard",
+      message: "",
+      useCase: "Agent discovery"
+    }
+  ];
+
+  const getMethodColor = (method: string) => {
+    switch (method) {
+      case 'message/send': return 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30';
+      case 'message/stream': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      case 'tasks/get': return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
+      case 'tasks/cancel': return 'bg-red-500/20 text-red-400 border-red-500/30';
+      case 'agent/authenticatedExtendedCard': return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
+      default: return 'bg-neutral-500/20 text-neutral-400 border-neutral-500/30';
+    }
+  };
+
+  return (
+    <Card className="bg-[#1a1a1a] border-[#333] text-white mb-6">
+      <CardHeader>
+        <CardTitle className="text-emerald-400 flex items-center">
+          <Play className="h-5 w-5 mr-2" />
+          Quick Start Templates
+        </CardTitle>
+        <p className="text-neutral-400 text-sm">
+          Choose a template to quickly test different A2A protocol methods
+        </p>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {templates.map((template) => {
+            const IconComponent = template.icon;
+            return (
+              <div
+                key={template.id}
+                className="bg-[#222] border border-[#444] rounded-lg p-4 hover:border-emerald-500/50 transition-colors cursor-pointer group"
+                onClick={() => onSelectTemplate(template)}
+              >
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex items-center space-x-2">
+                    <div className="bg-emerald-500/20 p-2 rounded-lg">
+                      <IconComponent className="h-4 w-4 text-emerald-400" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-white text-sm">{template.name}</h3>
+                      <p className="text-xs text-neutral-400">{template.useCase}</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <p className="text-xs text-neutral-300 mb-3 line-clamp-2">
+                  {template.description}
+                </p>
+                
+                <div className="flex items-center justify-between">
+                  <Badge className={`text-xs ${getMethodColor(template.method)}`}>
+                    {template.method}
+                  </Badge>
+                  <Button 
+                    size="sm" 
+                    variant="ghost" 
+                    className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 text-xs px-2 py-1 h-auto opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    Use Template
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        
+        <div className="mt-4 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg">
+          <p className="text-blue-300 text-xs">
+            💡 <strong>Tip:</strong> These templates automatically configure the correct A2A method and provide example messages. 
+            Simply select one and customize the agent URL and authentication.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/components/StreamLabForm.tsx b/frontend/app/documentation/components/StreamLabForm.tsx
new file mode 100644
index 00000000..9caecdbc
--- /dev/null
+++ b/frontend/app/documentation/components/StreamLabForm.tsx
@@ -0,0 +1,366 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/StreamLabForm.tsx                       │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+import { useRef, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Separator } from "@/components/ui/separator";
+import { Send, Paperclip, X, FileText, Image, File } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
+
+interface AttachedFile {
+  name: string;
+  type: string;
+  size: number;
+  base64: string;
+}
+
+interface StreamLabFormProps {
+  agentUrl: string;
+  setAgentUrl: (url: string) => void;
+  apiKey: string;
+  setApiKey: (key: string) => void;
+  message: string;
+  setMessage: (message: string) => void;
+  sessionId: string;
+  setSessionId: (id: string) => void;
+  taskId: string;
+  setTaskId: (id: string) => void;
+  callId: string;
+  setCallId: (id: string) => void;
+  sendStreamRequest: () => Promise<void>;
+  isStreaming: boolean;
+  streamResponse: string;
+  streamStatus: string;
+  streamHistory: string[];
+  renderStatusIndicator: () => JSX.Element | null;
+  renderTypingIndicator: () => JSX.Element | null;
+  setFiles?: (files: AttachedFile[]) => void;
+  authMethod: string;
+  currentTaskId?: string | null;
+}
+
+export function StreamLabForm({
+  agentUrl,
+  setAgentUrl,
+  apiKey,
+  setApiKey,
+  message,
+  setMessage,
+  sessionId,
+  setSessionId,
+  taskId,
+  setTaskId,
+  callId,
+  setCallId,
+  sendStreamRequest,
+  isStreaming,
+  streamResponse,
+  streamStatus,
+  streamHistory,
+  renderStatusIndicator,
+  renderTypingIndicator,
+  setFiles = () => {},
+  authMethod,
+  currentTaskId
+}: StreamLabFormProps) {
+  const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  const clearAttachedFiles = () => {
+    setAttachedFiles([]);
+  };
+  
+  const handleSendStreamRequest = async () => {
+    await sendStreamRequest();
+    clearAttachedFiles();
+  };
+  
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || e.target.files.length === 0) return;
+    
+    const maxFileSize = 5 * 1024 * 1024; // 5MB limit
+    const newFiles = Array.from(e.target.files);
+    
+    if (attachedFiles.length + newFiles.length > 5) {
+      toast({
+        title: "File limit exceeded",
+        description: "You can only attach up to 5 files.",
+        variant: "destructive"
+      });
+      return;
+    }
+    
+    const filesToAdd: AttachedFile[] = [];
+    
+    for (const file of newFiles) {
+      if (file.size > maxFileSize) {
+        toast({
+          title: "File too large",
+          description: `The file ${file.name} exceeds the 5MB size limit.`,
+          variant: "destructive"
+        });
+        continue;
+      }
+      
+      try {
+        const base64 = await readFileAsBase64(file);
+        filesToAdd.push({
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          base64: base64
+        });
+      } catch (error) {
+        console.error("Failed to read file:", error);
+        toast({
+          title: "Failed to read file",
+          description: `Could not process ${file.name}.`,
+          variant: "destructive"
+        });
+      }
+    }
+    
+    if (filesToAdd.length > 0) {
+      const updatedFiles = [...attachedFiles, ...filesToAdd];
+      setAttachedFiles(updatedFiles);
+      setFiles(updatedFiles);
+    }
+    
+    // Reset file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  
+  const readFileAsBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        const base64 = result.split(',')[1]; // Remove data URL prefix
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+  
+  const removeFile = (index: number) => {
+    const updatedFiles = attachedFiles.filter((_, i) => i !== index);
+    setAttachedFiles(updatedFiles);
+    setFiles(updatedFiles);
+  };
+  
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  
+  const isImageFile = (type: string): boolean => {
+    return type.startsWith('image/');
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* A2A Streaming Information */}
+      <div className="p-4 bg-[#1a1a1a] border border-[#333] rounded-md">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm font-medium text-emerald-400">A2A Streaming Mode</span>
+          <span className="text-xs text-neutral-400">Method: message/stream</span>
+        </div>
+        <div className="text-xs text-neutral-400">
+          Authentication: {authMethod === "bearer" ? "Bearer Token" : "API Key"} header
+        </div>
+        {currentTaskId && (
+          <div className="mt-2 pt-2 border-t border-[#333]">
+            <span className="text-xs text-neutral-400">Current Task ID: </span>
+            <span className="text-xs text-emerald-400 font-mono">{currentTaskId}</span>
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">Agent URL</label>
+          <Input
+            value={agentUrl}
+            onChange={(e) => setAgentUrl(e.target.value)}
+            placeholder="http://localhost:8000/api/v1/a2a/your-agent-id"
+            className="bg-[#222] border-[#444] text-white"
+            disabled={isStreaming}
+          />
+        </div>
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">
+            {authMethod === "bearer" ? "Bearer Token" : "API Key"} (optional)
+          </label>
+          <Input
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            placeholder={authMethod === "bearer" ? "Your Bearer token" : "Your API key"}
+            className="bg-[#222] border-[#444] text-white"
+            disabled={isStreaming}
+          />
+        </div>
+      </div>
+      
+      <div>
+        <label className="text-sm text-neutral-400 mb-1 block">Message</label>
+        <Textarea
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="What is the A2A protocol?"
+          className="bg-[#222] border-[#444] text-white min-h-[100px]"
+          disabled={isStreaming}
+        />
+      </div>
+      
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <label className="text-sm text-neutral-400">
+            Attach Files (up to 5, max 5MB each)
+          </label>
+          <Button 
+            variant="outline" 
+            size="sm"
+            className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={attachedFiles.length >= 5 || isStreaming}
+          >
+            <Paperclip className="h-4 w-4 mr-2" />
+            Browse Files
+          </Button>
+          <input
+            type="file"
+            ref={fileInputRef}
+            className="hidden"
+            multiple
+            onChange={handleFileSelect}
+            disabled={isStreaming}
+          />
+        </div>
+        
+        {attachedFiles.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-4">
+            {attachedFiles.map((file, index) => (
+              <div 
+                key={index} 
+                className="flex items-center gap-1.5 bg-[#333] text-white rounded-md p-1.5 text-xs"
+              >
+                {isImageFile(file.type) ? (
+                  <Image className="h-4 w-4 text-emerald-400" />
+                ) : file.type === 'application/pdf' ? (
+                  <FileText className="h-4 w-4 text-emerald-400" />
+                ) : (
+                  <File className="h-4 w-4 text-emerald-400" />
+                )}
+                <span className="max-w-[150px] truncate">{file.name}</span>
+                <span className="text-neutral-400">({formatFileSize(file.size)})</span>
+                <button 
+                  onClick={() => removeFile(index)}
+                  className="ml-1 text-neutral-400 hover:text-white transition-colors"
+                  disabled={isStreaming}
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      
+      <Separator className="my-4 bg-[#333]" />
+      
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">Session ID</label>
+          <Input
+            value={sessionId}
+            onChange={(e) => setSessionId(e.target.value)}
+            className="bg-[#222] border-[#444] text-white"
+            disabled={isStreaming}
+          />
+        </div>
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">Task ID</label>
+          <Input
+            value={taskId}
+            onChange={(e) => setTaskId(e.target.value)}
+            className="bg-[#222] border-[#444] text-white"
+            disabled={isStreaming}
+          />
+        </div>
+        <div>
+          <label className="text-sm text-neutral-400 mb-1 block">Call ID</label>
+          <Input
+            value={callId}
+            onChange={(e) => setCallId(e.target.value)}
+            className="bg-[#222] border-[#444] text-white"
+            disabled={isStreaming}
+          />
+        </div>
+      </div>
+      
+      <Button 
+        onClick={handleSendStreamRequest}
+        disabled={isStreaming}
+        className="bg-emerald-400 text-black hover:bg-[#00cc7d] w-full mt-4"
+      >
+        {isStreaming ? (
+          <div className="flex items-center">
+            <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-black mr-2"></div>
+            Streaming...
+          </div>
+        ) : (
+          <div className="flex items-center">
+            <Send className="mr-2 h-4 w-4" />
+            Start Streaming
+          </div>
+        )}
+      </Button>
+      
+      {streamResponse && (
+        <div className="mt-6 rounded-md bg-[#222] border border-[#333] p-4">
+          <div className="flex justify-between items-center mb-2">
+            <h3 className="text-lg font-medium text-white">Response</h3>
+            {renderStatusIndicator && renderStatusIndicator()}
+          </div>
+          <div className="whitespace-pre-wrap text-sm font-mono text-neutral-300">
+            {streamResponse}
+          </div>
+          {renderTypingIndicator && renderTypingIndicator()}
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/components/TechnicalDetailsSection.tsx b/frontend/app/documentation/components/TechnicalDetailsSection.tsx
new file mode 100644
index 00000000..7cd42e57
--- /dev/null
+++ b/frontend/app/documentation/components/TechnicalDetailsSection.tsx
@@ -0,0 +1,470 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/components/TechnicalDetailsSection.tsx             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ClipboardCopy } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+import { CodeBlock } from "@/app/documentation/components/CodeBlock";
+
+interface TechnicalDetailsSectionProps {
+  copyToClipboard: (text: string) => void;
+}
+
+export function TechnicalDetailsSection({ copyToClipboard }: TechnicalDetailsSectionProps) {
+  return (
+    <Card className="bg-[#1a1a1a] border-[#333] text-white">
+      <CardHeader>
+        <CardTitle className="text-emerald-400">Technical Details of the Methods</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div>
+          <h3 className="text-emerald-400 text-lg font-medium mb-2">Method message/send</h3>
+          <p className="text-neutral-300 mb-4">
+            The <code className="bg-[#333] px-1 rounded">message/send</code> method performs a standard HTTP request and waits for the complete response.
+          </p>
+          
+          <div className="space-y-4">
+            <div>
+              <h4 className="font-medium text-white mb-2">Request:</h4>
+              <div className="relative">
+                <CodeBlock
+                  text={JSON.stringify({
+                    jsonrpc: "2.0",
+                    id: "call-123",
+                    method: "message/send",
+                    params: {
+                      id: "task-456",
+                      sessionId: "session-789",
+                      message: {
+                        role: "user",
+                        parts: [
+                          {
+                            type: "text",
+                            text: "Your question here"
+                          }
+                        ]
+                      }
+                    }
+                  }, null, 2)}
+                  language="json"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(JSON.stringify({
+                    jsonrpc: "2.0",
+                    id: "call-123",
+                    method: "message/send",
+                    params: {
+                      id: "task-456",
+                      sessionId: "session-789",
+                      message: {
+                        role: "user",
+                        parts: [
+                          {
+                            type: "text",
+                            text: "Your question here"
+                          }
+                        ]
+                      }
+                    }
+                  }, null, 2))}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            
+            <div>
+              <h4 className="font-medium text-white mb-2">Headers:</h4>
+              <div className="relative">
+                <CodeBlock
+                  text={`Content-Type: application/json
+x-api-key: YOUR_API_KEY`}
+                  language="text"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(`Content-Type: application/json
+x-api-key: YOUR_API_KEY`)}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            
+            <div>
+              <h4 className="font-medium text-white mb-2">Response:</h4>
+              <div className="relative">
+                <CodeBlock
+                  text={JSON.stringify({
+                    jsonrpc: "2.0",
+                    result: {
+                      status: {
+                        state: "completed",
+                        message: {
+                          role: "model",
+                          parts: [
+                            {
+                              type: "text",
+                              text: "Complete agent response here."
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    id: "call-123"
+                  }, null, 2)}
+                  language="json"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(JSON.stringify({
+                    jsonrpc: "2.0",
+                    result: {
+                      status: {
+                        state: "completed",
+                        message: {
+                          role: "model",
+                          parts: [
+                            {
+                              type: "text",
+                              text: "Complete agent response here."
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    id: "call-123"
+                  }, null, 2))}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <Separator className="my-6 bg-[#333]" />
+
+        <div>
+          <h3 className="text-emerald-400 text-lg font-medium mb-2">Method message/stream</h3>
+          <p className="text-neutral-300 mb-4">
+            The <code className="bg-[#333] px-1 rounded">message/stream</code> method uses Server-Sent Events (SSE) to receive real-time updates.
+          </p>
+          
+          <div className="space-y-4">
+            <div>
+              <h4 className="font-medium text-white mb-2">Request:</h4>
+              <div className="relative">
+                <CodeBlock
+                  text={JSON.stringify({
+                    jsonrpc: "2.0",
+                    id: "call-123",
+                    method: "message/stream",
+                    params: {
+                      id: "task-456",
+                      sessionId: "session-789",
+                      message: {
+                        role: "user",
+                        parts: [
+                          {
+                            type: "text",
+                            text: "Your question here"
+                          }
+                        ]
+                      }
+                    }
+                  }, null, 2)}
+                  language="json"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(JSON.stringify({
+                    jsonrpc: "2.0",
+                    id: "call-123",
+                    method: "message/stream",
+                    params: {
+                      id: "task-456",
+                      sessionId: "session-789",
+                      message: {
+                        role: "user",
+                        parts: [
+                          {
+                            type: "text",
+                            text: "Your question here"
+                          }
+                        ]
+                      }
+                    }
+                  }, null, 2))}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            
+            <div>
+              <h4 className="font-medium text-white mb-2">Headers:</h4>
+              <div className="relative">
+                <CodeBlock
+                  text={`Content-Type: application/json
+x-api-key: YOUR_API_KEY
+Accept: text/event-stream`}
+                  language="text"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(`Content-Type: application/json
+x-api-key: YOUR_API_KEY
+Accept: text/event-stream`)}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            
+            <div>
+              <h4 className="font-medium text-white mb-2">SSE Event Format:</h4>
+              <p className="text-neutral-300 mb-4">
+                Each event follows the standard Server-Sent Events (SSE) format, with the "data:" prefix followed by the JSON content and terminated by two newlines ("\n\n"):
+              </p>
+              <div className="relative">
+                <CodeBlock
+                  text={`data: {"jsonrpc":"2.0","id":"call-123","result":{"id":"task-456","status":{"state":"working","message":{"role":"agent","parts":[{"type":"text","text":"Processing..."}]},"timestamp":"2025-05-13T18:10:37.219Z"},"final":false}}
+
+data: {"jsonrpc":"2.0","id":"call-123","result":{"id":"task-456","status":{"state":"completed","timestamp":"2025-05-13T18:10:40.456Z"},"final":true}}
+`}
+                  language="text"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(`data: {"jsonrpc":"2.0","id":"call-123","result":{"id":"task-456","status":{"state":"working","message":{"role":"agent","parts":[{"type":"text","text":"Processing..."}]},"timestamp":"2025-05-13T18:10:37.219Z"},"final":false}}
+
+data: {"jsonrpc":"2.0","id":"call-123","result":{"id":"task-456","status":{"state":"completed","timestamp":"2025-05-13T18:10:40.456Z"},"final":true}}
+`)}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="font-medium text-white mb-2">Event Types:</h4>
+              <ul className="list-disc list-inside text-neutral-300 space-y-2 mb-4">
+                <li><span className="text-emerald-400">Status Updates</span>: Contains the <code className="bg-[#333] px-1 rounded">status</code> field with information about the task status.</li>
+                <li><span className="text-emerald-400">Artifact Updates</span>: Contains the <code className="bg-[#333] px-1 rounded">artifact</code> field with the content generated by the agent.</li>
+                <li><span className="text-emerald-400">Ping Events</span>: Simple events with the format <code className="bg-[#333] px-1 rounded">: ping</code> to keep the connection active.</li>
+              </ul>
+            </div>
+            
+            <div>
+              <h4 className="font-medium text-white mb-2">Client Consumption:</h4>
+              <p className="text-neutral-300 mb-2">
+                For a better experience, we recommend using the <code className="bg-[#333] px-1 rounded">EventSource</code> API to consume the events:
+              </p>
+              <div className="relative">
+                <CodeBlock
+                  text={`// After receiving the initial response via POST, use EventSource to stream
+const eventSource = new EventSource(\`/api/v1/a2a/\${agentId}/stream?taskId=\${taskId}&key=\${apiKey}\`);
+
+// Process the received events
+eventSource.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  
+  // Process different types of events
+  if (data.result) {
+    // 1. Process status updates
+    if (data.result.status) {
+      const state = data.result.status.state; // "working", "completed", etc.
+      
+      // Check if there is a text message
+      if (data.result.status.message?.parts) {
+        const textParts = data.result.status.message.parts
+          .filter(part => part.type === "text")
+          .map(part => part.text)
+          .join("");
+          
+        // Update UI with the text
+        updateUI(textParts);
+      }
+      
+      // Check if it is the final event
+      if (data.result.final === true) {
+        eventSource.close(); // Close connection
+      }
+    }
+    
+    // 2. Process the generated artifacts
+    if (data.result.artifact) {
+      const artifact = data.result.artifact;
+      
+      // Extract text from the artifact
+      if (artifact.parts) {
+        const artifactText = artifact.parts
+          .filter(part => part.type === "text")
+          .map(part => part.text)
+          .join("");
+          
+        // Update UI with the artifact
+        updateArtifactUI(artifactText);
+      }
+    }
+  }
+};
+
+// Handle errors
+eventSource.onerror = (error) => {
+  console.error("Error in SSE:", error);
+  eventSource.close();
+};`}
+                  language="javascript"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="absolute top-2 right-2 text-white hover:bg-[#333]"
+                  onClick={() => copyToClipboard(`// After receiving the initial response via POST, use EventSource to stream
+const eventSource = new EventSource(\`/api/v1/a2a/\${agentId}/stream?taskId=\${taskId}&key=\${apiKey}\`);
+
+// Process the received events
+eventSource.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  
+  // Process different types of events
+  if (data.result) {
+    // 1. Process status updates
+    if (data.result.status) {
+      const state = data.result.status.state; // "working", "completed", etc.
+      
+      // Check if there is a text message
+      if (data.result.status.message?.parts) {
+        const textParts = data.result.status.message.parts
+          .filter(part => part.type === "text")
+          .map(part => part.text)
+          .join("");
+          
+        // Update UI with the text
+        updateUI(textParts);
+      }
+      
+      // Check if it is the final event
+      if (data.result.final === true) {
+        eventSource.close(); // Close connection
+      }
+    }
+    
+    // 2. Process the generated artifacts
+    if (data.result.artifact) {
+      const artifact = data.result.artifact;
+      
+      // Extract text from the artifact
+      if (artifact.parts) {
+        const artifactText = artifact.parts
+          .filter(part => part.type === "text")
+          .map(part => part.text)
+          .join("");
+          
+        // Update UI with the artifact
+        updateArtifactUI(artifactText);
+      }
+    }
+  }
+};
+
+// Handle errors
+eventSource.onerror = (error) => {
+  console.error("Error in SSE:", error);
+  eventSource.close();
+};`)}
+                >
+                  <ClipboardCopy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            
+            <div>
+              <h4 className="font-medium text-white mb-2">Possible task states:</h4>
+              <ul className="list-disc list-inside text-neutral-300 space-y-1">
+                <li><span className="text-emerald-400">submitted</span>: Task sent but not yet processed</li>
+                <li><span className="text-emerald-400">working</span>: Task being processed by the agent</li>
+                <li><span className="text-emerald-400">completed</span>: Task completed successfully</li>
+                <li><span className="text-emerald-400">input-required</span>: Agent waiting for additional user input</li>
+                <li><span className="text-emerald-400">failed</span>: Task failed during processing</li>
+                <li><span className="text-emerald-400">canceled</span>: Task was canceled</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        
+        <div className="bg-[#222] p-4 rounded-md border border-[#444]">
+          <h4 className="font-medium text-white mb-2">Possible task states:</h4>
+          <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
+              <span className="text-neutral-300"><strong>submitted</strong>: Task sent</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></span>
+              <span className="text-neutral-300"><strong>working</strong>: Task being processed</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-purple-500 rounded-full mr-2"></span>
+              <span className="text-neutral-300"><strong>input-required</strong>: Agent waiting for additional user input</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
+              <span className="text-neutral-300"><strong>completed</strong>: Task completed successfully</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-neutral-500 rounded-full mr-2"></span>
+              <span className="text-neutral-300"><strong>canceled</strong>: Task canceled</span>
+            </li>
+            <li className="flex items-center">
+              <span className="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
+              <span className="text-neutral-300"><strong>failed</strong>: Task processing failed</span>
+            </li>
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/documentation/page.tsx b/frontend/app/documentation/page.tsx
new file mode 100644
index 00000000..984a19da
--- /dev/null
+++ b/frontend/app/documentation/page.tsx
@@ -0,0 +1,1611 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/documentation/page.tsx                                           │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect, Suspense } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Send, Code, BookOpen, FlaskConical, Network, ChevronDown, ChevronUp } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { useSearchParams } from "next/navigation";
+import { Separator } from "@/components/ui/separator";
+
+import { DocumentationSection } from "./components/DocumentationSection";
+import { TechnicalDetailsSection } from "./components/TechnicalDetailsSection";
+import { FrontendImplementationSection } from "./components/FrontendImplementationSection";
+import { CodeBlock } from "./components/CodeBlock";
+import { CodeExamplesSection } from "./components/CodeExamplesSection";
+import { HttpLabForm } from "./components/HttpLabForm";
+import { StreamLabForm } from "./components/StreamLabForm";
+import { LabSection } from "./components/LabSection";
+import { A2AComplianceCard } from "./components/A2AComplianceCard";
+import { QuickStartTemplates } from "./components/QuickStartTemplates";
+
+function DocumentationContent() {
+  const { toast } = useToast();
+  const searchParams = useSearchParams();
+  const agentUrlParam = searchParams.get("agent_url");
+  const apiKeyParam = searchParams.get("api_key");
+
+  const [agentUrl, setAgentUrl] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [message, setMessage] = useState("");
+  const [sessionId, setSessionId] = useState(
+    `session-${Math.random().toString(36).substring(2, 9)}`
+  );
+  const [taskId, setTaskId] = useState(
+    `task-${Math.random().toString(36).substring(2, 9)}`
+  );
+  const [callId, setCallId] = useState(
+    `call-${Math.random().toString(36).substring(2, 9)}`
+  );
+  const [response, setResponse] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [mainTab, setMainTab] = useState("docs");
+  const [labMode, setLabMode] = useState("http");
+  const [a2aMethod, setA2aMethod] = useState("message/send");
+  const [authMethod, setAuthMethod] = useState("api-key");
+
+  // Streaming states
+  const [streamResponse, setStreamResponse] = useState("");
+  const [streamStatus, setStreamStatus] = useState("");
+  const [streamHistory, setStreamHistory] = useState<string[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamComplete, setStreamComplete] = useState(false);
+
+  // Task management states
+  const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
+  const [taskStatus, setTaskStatus] = useState<any>(null);
+  const [artifacts, setArtifacts] = useState<any[]>([]);
+
+  // Debug state
+  const [debugLogs, setDebugLogs] = useState<string[]>([]);
+  const [showDebug, setShowDebug] = useState(false);
+
+  // Files state
+  const [attachedFiles, setAttachedFiles] = useState<
+    { name: string; type: string; size: number; base64: string }[]
+  >([]);
+
+  // Conversation history state for multi-turn conversations
+  const [conversationHistory, setConversationHistory] = useState<any[]>([]);
+  const [contextId, setContextId] = useState<string | null>(null);
+
+  // Push notifications state
+  const [webhookUrl, setWebhookUrl] = useState("");
+  const [enableWebhooks, setEnableWebhooks] = useState(false);
+
+  // Advanced error handling state
+  const [showDetailedErrors, setShowDetailedErrors] = useState(true);
+
+  // Lab UI visibility states
+  const [showQuickStart, setShowQuickStart] = useState(true);
+  const [showCorsInfo, setShowCorsInfo] = useState(false);
+  const [showConfigStatus, setShowConfigStatus] = useState(true);
+
+  // Types for A2A messages
+  interface MessagePart {
+    type: string;
+    text?: string;
+    file?: {
+      name: string;
+      bytes: string;
+    };
+  }
+
+  interface TextPart {
+    type: "text";
+    text: string;
+  }
+
+  interface FilePart {
+    type: "file";
+    file: {
+      name: string;
+      bytes: string;
+    };
+  }
+
+  type MessagePartType = TextPart | FilePart;
+
+  useEffect(() => {
+    if (agentUrlParam) {
+      setAgentUrl(agentUrlParam);
+    }
+    if (apiKeyParam) {
+      setApiKey(apiKeyParam);
+    }
+    // Generate initial UUIDs
+    generateNewIds();
+    
+    // Check for hash in URL to auto-switch to lab tab
+    if (typeof window !== 'undefined' && window.location.hash === '#lab') {
+      setMainTab('lab');
+    }
+  }, [agentUrlParam, apiKeyParam]);
+
+  // Generate UUID v4 as required by A2A spec
+  const generateUUID = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      const r = Math.random() * 16 | 0;
+      const v = c == 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+    });
+  };
+
+  // Generate new IDs
+  const generateNewIds = () => {
+    setTaskId(generateUUID());
+    setCallId(`req-${Math.random().toString(36).substring(2, 9)}`);
+  };
+
+  // Clear conversation history
+  const clearHistory = () => {
+    setConversationHistory([]);
+    setContextId(null);
+    addDebugLog("Conversation history and contextId cleared");
+    toast({
+      title: "History Cleared",
+      description: "Conversation context has been reset for new multi-turn conversation.",
+    });
+  };
+
+  // Handle template selection
+  const handleTemplateSelection = (template: any) => {
+    setA2aMethod(template.method);
+    setMessage(template.message);
+    generateNewIds();
+    
+    // Show success toast
+    toast({
+      title: "Template Applied",
+      description: `${template.name} template has been applied successfully.`,
+    });
+  };
+
+  const isFilePart = (part: any): part is FilePart => {
+    return part.type === "file" && part.file !== undefined;
+  };
+
+  // Create A2A-compliant request based on selected method
+  const createA2ARequest = () => {
+    const currentMessage = {
+      role: "user",
+      parts: [
+        ...(message
+          ? [
+              {
+                type: "text",
+                text: message,
+              },
+            ]
+          : [
+              {
+                type: "text",
+                text: "What is the A2A protocol?",
+              },
+            ]),
+        ...attachedFiles.map((file) => ({
+          type: "file",
+          file: {
+            name: file.name,
+            mimeType: file.type, // Use mimeType as per A2A spec
+            bytes: file.base64,
+          },
+        })),
+      ],
+      messageId: taskId, // Use UUID as required by A2A spec
+    };
+
+    // Include contextId for multi-turn conversations (A2A specification)
+    const messageWithContext = contextId 
+      ? {
+          contextId: contextId,
+          message: currentMessage
+        }
+      : {
+          message: currentMessage
+        };
+
+    // Add push notification configuration if enabled (for message methods)
+    const messageParamsWithPushConfig = (a2aMethod === "message/send" || a2aMethod === "message/stream") && enableWebhooks && webhookUrl
+      ? {
+          ...messageWithContext,
+          pushNotificationConfig: {
+            webhookUrl: webhookUrl,
+            webhookAuthenticationInfo: {
+              type: "none"
+            }
+          }
+        }
+      : messageWithContext;
+
+    const baseRequest = {
+      jsonrpc: "2.0",
+      id: callId,
+      method: a2aMethod,
+    };
+
+    switch (a2aMethod) {
+      case "message/send":
+      case "message/stream":
+        return {
+          ...baseRequest,
+          params: messageParamsWithPushConfig,
+        };
+      
+      case "tasks/get":
+        return {
+          ...baseRequest,
+          params: {
+            taskId: currentTaskId || taskId,
+          },
+        };
+      
+      case "tasks/cancel":
+        return {
+          ...baseRequest,
+          params: {
+            taskId: currentTaskId || taskId,
+          },
+        };
+
+      case "tasks/pushNotificationConfig/set":
+        return {
+          ...baseRequest,
+          params: {
+            taskId: currentTaskId || taskId,
+            pushNotificationConfig: enableWebhooks && webhookUrl ? {
+              webhookUrl: webhookUrl,
+              webhookAuthenticationInfo: {
+                type: "none"
+              }
+            } : null,
+          },
+        };
+
+      case "tasks/pushNotificationConfig/get":
+        return {
+          ...baseRequest,
+          params: {
+            taskId: currentTaskId || taskId,
+          },
+        };
+
+      case "tasks/resubscribe":
+        return {
+          ...baseRequest,
+          params: {
+            taskId: currentTaskId || taskId,
+          },
+        };
+      
+      case "agent/authenticatedExtendedCard":
+        return {
+          ...baseRequest,
+          params: {},
+        };
+      
+      default:
+        return {
+          ...baseRequest,
+          params: messageParamsWithPushConfig,
+        };
+    }
+  };
+
+  // Standard HTTP request
+  const jsonRpcRequest = createA2ARequest();
+
+  // Streaming request (same as standard but with stream method)
+  const streamRpcRequest = {
+    ...createA2ARequest(),
+    method: "message/stream",
+  };
+
+  // Code examples
+  const curlExample = `curl -X POST \\
+  ${agentUrl || "http://localhost:8000/api/v1/a2a/your-agent-id"} \\
+  -H 'Content-Type: application/json' \\
+  -H 'x-api-key: ${apiKey || "your-api-key"}' \\
+  -d '${JSON.stringify(jsonRpcRequest, null, 2)}'`;
+
+  const fetchExample = `async function testA2AAgent() {
+  const response = await fetch(
+    '${agentUrl || "http://localhost:8000/api/v1/a2a/your-agent-id"}',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': '${apiKey || "your-api-key"}'
+      },
+      body: JSON.stringify(${JSON.stringify(jsonRpcRequest, null, 2)})
+    }
+  );
+  
+  const data = await response.json();
+  console.log('Agent response:', data);
+}`;
+
+  // Function to add debug logs
+  const addDebugLog = (message: string) => {
+    const timestamp = new Date().toISOString().split("T")[1].substring(0, 8);
+    setDebugLogs((prev) => [...prev, `[${timestamp}] ${message}`]);
+    console.log(`[DEBUG] ${message}`);
+  };
+
+  // Standard HTTP request method
+  const sendRequest = async () => {
+    if (!agentUrl) {
+      toast({
+        title: "Agent URL required",
+        description: "Please enter the agent URL",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    addDebugLog("=== Starting A2A Request ===");
+    addDebugLog("Sending A2A request to: " + agentUrl);
+    addDebugLog(`Method: ${a2aMethod}`);
+    addDebugLog(`Authentication: ${authMethod}`);
+    addDebugLog("Note: Browser may send OPTIONS preflight request first (CORS)");
+    addDebugLog(
+      `Payload: ${JSON.stringify({
+        ...jsonRpcRequest,
+        params: jsonRpcRequest.params && 'message' in jsonRpcRequest.params && jsonRpcRequest.params.message ? {
+          ...jsonRpcRequest.params,
+          message: {
+            ...jsonRpcRequest.params.message,
+            parts: jsonRpcRequest.params.message.parts.map((part: any) =>
+              isFilePart(part)
+                ? {
+                    ...part,
+                    file: { ...part.file, bytes: "BASE64_DATA_TRUNCATED" },
+                  }
+                : part
+            ),
+          },
+        } : jsonRpcRequest.params,
+      })}`
+    );
+
+    if (attachedFiles.length > 0) {
+      addDebugLog(
+        `Sending ${attachedFiles.length} file(s): ${attachedFiles
+          .map((f) => f.name)
+          .join(", ")}`
+      );
+    }
+
+    try {
+      // Prepare headers based on authentication method
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+      };
+
+      if (apiKey) {
+        if (authMethod === "bearer") {
+          headers["Authorization"] = `Bearer ${apiKey}`;
+        } else {
+          headers["x-api-key"] = apiKey;
+        }
+      }
+
+      addDebugLog(`Headers: ${JSON.stringify(headers, null, 2)}`);
+      addDebugLog("Making POST request...");
+
+      const response = await fetch(agentUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(jsonRpcRequest),
+      });
+
+      addDebugLog(`Response status: ${response.status} ${response.statusText}`);
+      addDebugLog(`Response headers: ${JSON.stringify(Object.fromEntries(response.headers.entries()), null, 2)}`);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        addDebugLog(`HTTP error: ${response.status} ${response.statusText}`);
+        addDebugLog(`Error response: ${errorText}`);
+        throw new Error(
+          `HTTP error: ${response.status} ${response.statusText}`
+        );
+      }
+
+      const data = await response.json();
+      addDebugLog("Successfully received A2A response");
+      addDebugLog(`Response data: ${JSON.stringify(data, null, 2).substring(0, 500)}...`);
+      
+      // Handle A2A-specific response structure
+      if (data.result) {
+        const result = data.result;
+        
+        // Update task information if available
+        if (result.id) {
+          setCurrentTaskId(result.id);
+          addDebugLog(`Task ID: ${result.id}`);
+        }
+        
+        // Update task status if available
+        if (result.status) {
+          setTaskStatus(result.status);
+          addDebugLog(`Task status: ${result.status.state}`);
+        }
+        
+        // Update artifacts if available
+        if (result.artifacts && Array.isArray(result.artifacts)) {
+          setArtifacts(result.artifacts);
+          addDebugLog(`Received ${result.artifacts.length} artifact(s)`);
+        }
+
+        // Extract contextId from response for multi-turn conversations (A2A spec)
+        if (result.contextId) {
+          setContextId(result.contextId);
+          addDebugLog(`Context ID: ${result.contextId}`);
+        }
+
+        // Maintain local conversation history for UI display only
+        if (a2aMethod === "message/send" || a2aMethod === "message/stream") {
+          const userMessage = {
+            role: "user",
+            parts: [
+              ...(message
+                ? [{ type: "text", text: message }]
+                : [{ type: "text", text: "What is the A2A protocol?" }]
+              ),
+              ...attachedFiles.map((file) => ({
+                type: "file",
+                file: {
+                  name: file.name,
+                  mimeType: file.type,
+                  bytes: file.base64,
+                },
+              })),
+            ],
+            messageId: taskId,
+          };
+
+          const assistantMessage = result.status?.message || {
+            role: "assistant",
+            parts: [{ type: "text", text: JSON.stringify(result, null, 2) }],
+            messageId: generateUUID(),
+          };
+
+          setConversationHistory(prev => [...prev, userMessage, assistantMessage]);
+          addDebugLog(`Context preserved via contextId. Local history: ${conversationHistory.length + 2} messages`);
+        }
+      }
+      
+      setResponse(JSON.stringify(data, null, 2));
+      setAttachedFiles([]); // Clear attached files after successful request
+      addDebugLog("=== A2A Request Completed Successfully ===");
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : "Unknown error";
+      addDebugLog(`Request failed: ${errorMsg}`);
+      addDebugLog("=== A2A Request Failed ===");
+      
+      // Enhanced error handling for A2A protocol
+      if (showDetailedErrors) {
+        let detailedError = errorMsg;
+        
+        // Try to extract A2A-specific error information
+        if (error instanceof Error && error.message.includes("HTTP error:")) {
+          detailedError = `A2A Protocol Error: ${errorMsg}`;
+          
+          // Common A2A error scenarios
+          if (errorMsg.includes("400")) {
+            detailedError += "\n\nPossible causes:\n• Invalid JSON-RPC 2.0 format\n• Missing required A2A parameters\n• Malformed message structure";
+          } else if (errorMsg.includes("401")) {
+            detailedError += "\n\nAuthentication Error:\n• Invalid API key\n• Missing authentication header\n• Expired bearer token";
+          } else if (errorMsg.includes("404")) {
+            detailedError += "\n\nAgent Not Found:\n• Incorrect agent URL\n• Agent not deployed\n• Invalid endpoint path";
+          } else if (errorMsg.includes("500")) {
+            detailedError += "\n\nServer Error:\n• Agent internal error\n• A2A method not implemented\n• Processing failure";
+          }
+        }
+        
+        toast({
+          title: "A2A Request Failed",
+          description: detailedError,
+          variant: "destructive",
+        });
+      } else {
+        toast({
+          title: "Error sending A2A request",
+          description: errorMsg,
+          variant: "destructive",
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Function to process event stream
+  const processEventStream = async (response: Response) => {
+    try {
+      const reader = response.body!.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      addDebugLog("Starting event stream processing...");
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          addDebugLog("Stream finished by server");
+          setStreamComplete(true);
+          setIsStreaming(false);
+          break;
+        }
+
+        // Decode chunk of data
+        const chunk = decoder.decode(value, { stream: true });
+        addDebugLog(`Received chunk (${value.length} bytes)`);
+
+        // Add to buffer
+        buffer += chunk;
+
+        // Process complete events in buffer
+        // We use regex to identify complete "data:" events
+        // A complete SSE event ends with two newlines (\n\n)
+        const regex = /data:\s*({.*?})\s*(?:\n\n|\r\n\r\n)/g;
+
+        let match;
+        let processedPosition = 0;
+
+        // Extract all complete "data:" events
+        while ((match = regex.exec(buffer)) !== null) {
+          const jsonStr = match[1].trim();
+          addDebugLog(`Complete event found: ${jsonStr.substring(0, 50)}...`);
+
+          try {
+            // Process the JSON of the event
+            const data = JSON.parse(jsonStr);
+
+            // Add to history
+            setStreamHistory((prev) => [...prev, jsonStr]);
+
+            // Process the data obtained
+            processStreamData(data);
+
+            // Update the processed position to remove from buffer after
+            processedPosition = match.index + match[0].length;
+          } catch (jsonError) {
+            addDebugLog(`Error processing JSON: ${jsonError}`);
+            // Continue processing other events even with error in one of them
+          }
+        }
+
+        // Remove the processed part of the buffer
+        if (processedPosition > 0) {
+          buffer = buffer.substring(processedPosition);
+        }
+
+        // Check if the buffer is too large (indicates invalid data)
+        if (buffer.length > 10000) {
+          addDebugLog("Buffer too large, clearing old data");
+          // Keep only the last part of the buffer that may contain a partial event
+          buffer = buffer.substring(buffer.length - 5000);
+        }
+
+        // Remove ping events from buffer
+        if (buffer.includes(": ping")) {
+          addDebugLog("Ping event detected, clearing buffer");
+          buffer = buffer.replace(/:\s*ping.*?(?:\n\n|\r\n\r\n)/g, "");
+        }
+      }
+    } catch (streamError) {
+      const errorMsg =
+        streamError instanceof Error ? streamError.message : "Unknown error";
+      addDebugLog(`Error processing stream: ${errorMsg}`);
+      console.error("Error processing stream:", streamError);
+      toast({
+        title: "Error processing stream",
+        description: errorMsg,
+        variant: "destructive",
+      });
+    }
+  };
+
+  // Process a received streaming event
+  const processStreamData = (data: any) => {
+    // Add log to see the complete structure of the data
+    addDebugLog(
+      `Processing A2A stream data: ${JSON.stringify(data).substring(0, 100)}...`
+    );
+
+    // Validate if data follows the JSON-RPC 2.0 format
+    if (!data.jsonrpc || data.jsonrpc !== "2.0" || !data.result) {
+      addDebugLog("Invalid A2A event format, ignoring");
+      return;
+    }
+
+    const result = data.result;
+
+    // Handle A2A Task object structure
+    if (result.id) {
+      setCurrentTaskId(result.id);
+      addDebugLog(`Task ID: ${result.id}`);
+    }
+
+    // Process A2A TaskStatus object
+    if (result.status) {
+      const status = result.status;
+      const state = status.state;
+
+      addDebugLog(`A2A Task status: ${state}`);
+      setStreamStatus(state);
+      setTaskStatus(status);
+
+      // Process message from status if available
+      if (status.message && status.message.parts) {
+        const textParts = status.message.parts.filter(
+          (part: any) => part.type === "text" && part.text
+        );
+
+        if (textParts.length > 0) {
+          const currentMessageText = textParts
+            .map((part: any) => part.text)
+            .join("");
+
+          addDebugLog(
+            `A2A message text: "${currentMessageText.substring(0, 50)}${
+              currentMessageText.length > 50 ? "..." : ""
+            }"`
+          );
+
+          if (currentMessageText.trim()) {
+            setStreamResponse(currentMessageText);
+          }
+        }
+      }
+
+      // Check if task is completed according to A2A spec
+      if (state === "completed" || state === "failed" || state === "canceled") {
+        addDebugLog(`A2A Task ${state}`);
+        setStreamComplete(true);
+        setIsStreaming(false);
+      }
+    }
+
+    // Process A2A Artifact objects
+    if (result.artifacts && Array.isArray(result.artifacts)) {
+      addDebugLog(`Received ${result.artifacts.length} A2A artifact(s)`);
+      setArtifacts(result.artifacts);
+
+      // Extract text content from artifacts
+      result.artifacts.forEach((artifact: any, index: number) => {
+        if (artifact.parts && artifact.parts.length > 0) {
+          const textParts = artifact.parts.filter(
+            (part: any) => part.type === "text" && part.text
+          );
+
+          if (textParts.length > 0) {
+            const artifactText = textParts.map((part: any) => part.text).join("");
+
+            addDebugLog(
+              `A2A Artifact ${index + 1} text: "${artifactText.substring(0, 50)}${
+                artifactText.length > 50 ? "..." : ""
+              }"`
+            );
+
+            if (artifactText.trim()) {
+              // Update response with the artifact content
+              setStreamResponse(prev => prev ? `${prev}\n\n${artifactText}` : artifactText);
+            }
+          }
+        }
+      });
+    }
+
+    // Handle TaskStatusUpdateEvent and TaskArtifactUpdateEvent as per A2A spec
+    if (result.event) {
+      const eventType = result.event;
+      addDebugLog(`A2A Event type: ${eventType}`);
+
+      if (eventType === "task.status.update" && result.status) {
+        // Already handled above
+      } else if (eventType === "task.artifact.update" && result.artifact) {
+        // Handle single artifact update
+        addDebugLog("Processing A2A artifact update event");
+        
+        if (result.artifact.parts && result.artifact.parts.length > 0) {
+          const textParts = result.artifact.parts.filter(
+            (part: any) => part.type === "text" && part.text
+          );
+
+          if (textParts.length > 0) {
+            const artifactText = textParts.map((part: any) => part.text).join("");
+            
+            if (artifactText.trim()) {
+              setStreamResponse(prev => prev ? `${prev}${artifactText}` : artifactText);
+              
+              // Check if this is the last chunk
+              if (result.artifact.lastChunk === true) {
+                addDebugLog("Last chunk of A2A artifact received");
+                setStreamComplete(true);
+                setIsStreaming(false);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Check for final flag as per A2A spec
+    if (result.final === true) {
+      addDebugLog("Final A2A event received");
+      setStreamComplete(true);
+      setIsStreaming(false);
+    }
+  };
+
+  // Stream request with EventSource
+  const sendStreamRequestWithEventSource = async () => {
+    if (!agentUrl) {
+      toast({
+        title: "Agent URL required",
+        description: "Please enter the agent URL",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsStreaming(true);
+    setStreamResponse("");
+    setStreamHistory([]);
+    setStreamStatus("submitted");
+    setStreamComplete(false);
+
+    // Log debug info
+    addDebugLog("Setting up A2A streaming to: " + agentUrl);
+    addDebugLog(`Streaming method: message/stream`);
+    addDebugLog(`Authentication: ${authMethod}`);
+    addDebugLog(
+      `Streaming payload: ${JSON.stringify({
+        ...streamRpcRequest,
+        params: streamRpcRequest.params && 'message' in streamRpcRequest.params && streamRpcRequest.params.message ? {
+          ...streamRpcRequest.params,
+          message: {
+            ...streamRpcRequest.params.message,
+            parts: streamRpcRequest.params.message.parts.map((part: any) =>
+              isFilePart(part)
+                ? {
+                    ...part,
+                    file: { ...part.file, bytes: "BASE64_DATA_TRUNCATED" },
+                  }
+                : part
+            ),
+          },
+        } : streamRpcRequest.params,
+      })}`
+    );
+
+    if (attachedFiles.length > 0) {
+      addDebugLog(
+        `Streaming with ${attachedFiles.length} file(s): ${attachedFiles
+          .map((f) => f.name)
+          .join(", ")}`
+      );
+    }
+
+    try {
+      addDebugLog("Stream URL: " + agentUrl);
+
+      // Prepare headers based on authentication method
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+      };
+
+      if (apiKey) {
+        if (authMethod === "bearer") {
+          headers["Authorization"] = `Bearer ${apiKey}`;
+        } else {
+          headers["x-api-key"] = apiKey;
+        }
+      }
+
+      // Make initial request to start streaming session
+      const initialResponse = await fetch(agentUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(streamRpcRequest),
+      });
+
+      // Verify the content-type of the response
+      const contentType = initialResponse.headers.get("Content-Type");
+      addDebugLog(`Response content type: ${contentType || "not specified"}`);
+
+      if (contentType && contentType.includes("text/event-stream")) {
+        // It's an SSE (Server-Sent Events) response
+        addDebugLog("Detected SSE response, processing stream directly");
+        processEventStream(initialResponse);
+        return;
+      }
+
+      if (!initialResponse.ok) {
+        const errorText = await initialResponse.text();
+        addDebugLog(
+          `HTTP error: ${initialResponse.status} ${initialResponse.statusText}`
+        );
+        addDebugLog(`Error response: ${errorText}`);
+        throw new Error(
+          `HTTP error: ${initialResponse.status} ${initialResponse.statusText}`
+        );
+      }
+
+      // Get the initial response data
+      try {
+        const responseText = await initialResponse.text();
+
+        // Verify if the response starts with "data:", which indicates an SSE
+        if (responseText.trim().startsWith("data:")) {
+          addDebugLog("Response has SSE format but wrong content-type");
+          // Create a synthetic response to process as stream
+          const syntheticResponse = new Response(responseText, {
+            headers: {
+              "Content-Type": "text/event-stream",
+            },
+          });
+          processEventStream(syntheticResponse);
+          return;
+        }
+
+        // Try to process as JSON
+        const initialData = JSON.parse(responseText);
+        addDebugLog("Initial stream response: " + JSON.stringify(initialData));
+
+        // Display initial response
+        displayInitialResponse(initialData);
+
+        // Get task ID from response if present
+        const responseTaskId = extractTaskId(initialData);
+
+        if (responseTaskId) {
+          addDebugLog(`Using task ID from response: ${responseTaskId}`);
+          // Setup EventSource for streaming updates
+          setupEventSource(agentUrl + "?taskId=" + responseTaskId);
+        } else {
+          setIsStreaming(false);
+          setStreamComplete(true);
+          setStreamStatus("completed");
+          addDebugLog("No task ID in response, streaming ended");
+        }
+      } catch (parseError) {
+        addDebugLog(`Error parsing response: ${parseError}`);
+
+        // If we can't process as JSON or SSE, show the error
+        setStreamResponse(
+          `Error: Unable to process response: ${parseError instanceof Error ? parseError.message : String(parseError)}`
+        );
+        setIsStreaming(false);
+        setStreamStatus("failed");
+        setStreamComplete(true);
+      }
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : "Unknown error";
+      setIsStreaming(false);
+      setStreamStatus("failed");
+      addDebugLog(`Stream request failed: ${errorMsg}`);
+      toast({
+        title: "Error setting up stream",
+        description: errorMsg,
+        variant: "destructive",
+      });
+    }
+
+    // Clear attached files after sending
+    setAttachedFiles([]);
+  };
+
+  const ensureTrailingSlash = (path: string) => {
+    return path.endsWith("/") ? path : path + "/";
+  };
+
+  // Function to extract task ID from different response formats
+  const extractTaskId = (data: any): string | null => {
+    // Try different possible paths for the task ID
+    const possiblePaths = [
+      data?.result?.id,
+      data?.result?.status?.id,
+      data?.result?.task?.id,
+      data?.id,
+      data?.task_id,
+      data?.taskId,
+    ];
+
+    for (const path of possiblePaths) {
+      if (path && typeof path === "string") {
+        return path;
+      }
+    }
+
+    // If no specific ID is found, try using the request ID as fallback
+    return taskId;
+  };
+
+  // Configure and start the EventSource
+  const setupEventSource = (url: string) => {
+    addDebugLog(`Configuring EventSource for: ${url}`);
+
+    // Ensure any previous EventSource is closed
+    let eventSource: EventSource;
+
+    try {
+      // Create EventSource for streaming
+      eventSource = new EventSource(url);
+
+      addDebugLog("EventSource created and connecting...");
+
+      // For debugging all events
+      eventSource.onopen = () => {
+        addDebugLog("EventSource connected successfully");
+      };
+
+      // Process received SSE events
+      eventSource.onmessage = (event) => {
+        addDebugLog(
+          `Received event [${new Date().toISOString()}]: ${event.data.substring(
+            0,
+            50
+          )}...`
+        );
+
+        try {
+          const data = JSON.parse(event.data);
+          setStreamHistory((prev) => [...prev, event.data]);
+
+          // If the event is empty or has no relevant data, ignore it
+          if (!data || (!data.result && !data.status && !data.message)) {
+            addDebugLog("Event without relevant data");
+            return;
+          }
+
+          // Process data according to the type
+          processStreamData(data);
+        } catch (jsonError) {
+          const errorMsg =
+            jsonError instanceof Error ? jsonError.message : "Unknown error";
+          addDebugLog(`Error processing JSON: ${errorMsg}`);
+          console.error("Error processing JSON:", jsonError);
+        }
+      };
+
+      // Handle errors
+      eventSource.onerror = (error) => {
+        addDebugLog(`Error in EventSource: ${JSON.stringify(error)}`);
+        console.error("EventSource error:", error);
+
+        // Don't close automatically - try to reconnect unless it's a fatal error
+        if (eventSource.readyState === EventSource.CLOSED) {
+          addDebugLog("EventSource closed due to error");
+          toast({
+            title: "Streaming Error",
+            description: "Connection to server was interrupted",
+            variant: "destructive",
+          });
+
+          setIsStreaming(false);
+          setStreamComplete(true);
+        } else {
+          addDebugLog("EventSource attempting to reconnect...");
+        }
+      };
+
+      const checkStreamStatus = setInterval(() => {
+        if (streamComplete) {
+          addDebugLog("Stream marked as complete, closing EventSource");
+          eventSource.close();
+          clearInterval(checkStreamStatus);
+        }
+      }, 1000);
+    } catch (esError) {
+      addDebugLog(`Error creating EventSource: ${esError}`);
+      throw esError;
+    }
+  };
+
+  const displayInitialResponse = (data: any) => {
+    addDebugLog("Displaying initial response without streaming");
+
+    // Try to extract text message if available
+    try {
+      const result = data.result || data;
+      const status = result.status || {};
+      const message = status.message || result.message;
+
+      if (message && message.parts) {
+        const parts = message.parts.filter((part: any) => part.type === "text");
+
+        if (parts.length > 0) {
+          const currentText = parts.map((part: any) => part.text).join("");
+          setStreamResponse(currentText);
+        } else {
+          // No text parts, display formatted JSON
+          setStreamResponse(JSON.stringify(data, null, 2));
+        }
+      } else {
+        // No structured message, display formatted JSON
+        setStreamResponse(JSON.stringify(data, null, 2));
+      }
+
+      // Set status as completed
+      setStreamStatus("completed");
+      setStreamComplete(true);
+    } catch (parseError) {
+      // In case of error processing, show raw JSON
+      setStreamResponse(JSON.stringify(data, null, 2));
+      setStreamStatus("completed");
+      setStreamComplete(true);
+    } finally {
+      setIsStreaming(false);
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast({
+      title: "Copied!",
+      description: "Code copied to clipboard",
+    });
+  };
+
+  // Render status indicator based on streaming status
+  const renderStatusIndicator = () => {
+    switch (streamStatus) {
+      case "submitted":
+        return (
+          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+            Submitted
+          </span>
+        );
+      case "working":
+        return (
+          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+            Processing
+          </span>
+        );
+      case "completed":
+        return (
+          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+            Completed
+          </span>
+        );
+      case "failed":
+        return (
+          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+            Failed
+          </span>
+        );
+      case "canceled":
+        return (
+          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-neutral-100 text-neutral-800">
+            Canceled
+          </span>
+        );
+      case "input-required":
+        return (
+          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+            Input Required
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  // Typing indicator for streaming
+  const renderTypingIndicator = () => {
+    if (streamStatus === "working" && !streamComplete) {
+      return (
+        <div className="flex items-center space-x-1 mt-2 text-neutral-400">
+          <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
+          <div
+            className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"
+            style={{ animationDelay: "0.2s" }}
+          ></div>
+          <div
+            className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"
+            style={{ animationDelay: "0.4s" }}
+          ></div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="container mx-auto p-6 bg-[#121212] min-h-screen">
+      {/* Modern Header */}
+      <div className="text-center mb-8">
+        <div className="flex justify-center mb-4">
+          <div className="flex items-center space-x-3 bg-gradient-to-r from-emerald-500/20 to-blue-500/20 px-6 py-3 rounded-full border border-emerald-500/30">
+            <Network className="h-6 w-6 text-emerald-400" />
+            <span className="font-bold text-emerald-400">A2A Protocol</span>
+            <span className="text-xs bg-emerald-500/20 px-2 py-1 rounded text-emerald-300">v0.2.1</span>
+          </div>
+        </div>
+        <h1 className="text-4xl font-bold bg-gradient-to-r from-emerald-400 via-blue-400 to-purple-400 bg-clip-text text-transparent mb-4">
+          Agent2Agent Protocol
+        </h1>
+        <p className="text-xl text-neutral-400 max-w-2xl mx-auto">
+          Documentation and testing lab for the official Google Agent2Agent protocol.
+          Build, test, and validate A2A-compliant agent communications.
+        </p>
+      </div>
+
+      <Tabs
+        defaultValue="docs"
+        className="w-full mb-8"
+        onValueChange={setMainTab}
+      >
+        <TabsList className="bg-[#121212] w-full mb-6 p-1 rounded-lg grid grid-cols-3">
+          <TabsTrigger
+            value="docs"
+            className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400 data-[state=active]:border-emerald-500/50 flex items-center justify-center space-x-2 px-4 py-2 rounded-md transition-all"
+          >
+            <BookOpen className="h-4 w-4" />
+            <div className="text-center">
+              <div className="font-medium text-sm">Documentation</div>
+              <div className="text-xs opacity-70">Protocol specification & compliance</div>
+            </div>
+          </TabsTrigger>
+          <TabsTrigger
+            value="lab"
+            className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400 data-[state=active]:border-emerald-500/50 flex items-center justify-center space-x-2 px-4 py-2 rounded-md transition-all"
+          >
+            <FlaskConical className="h-4 w-4" />
+            <div className="text-center">
+              <div className="font-medium text-sm">Testing Lab</div>
+              <div className="text-xs opacity-70">Interactive A2A protocol testing</div>
+            </div>
+          </TabsTrigger>
+          <TabsTrigger
+            value="examples"
+            className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400 data-[state=active]:border-emerald-500/50 flex items-center justify-center space-x-2 px-4 py-2 rounded-md transition-all"
+          >
+            <Code className="h-4 w-4" />
+            <div className="text-center">
+              <div className="font-medium text-sm">Code Examples</div>
+              <div className="text-xs opacity-70">Implementation samples & snippets</div>
+            </div>
+          </TabsTrigger>
+        </TabsList>
+
+        {/* Documentation Tab - Only essential technical concepts and details */}
+        <TabsContent value="docs">
+          <div className="space-y-6">
+            {/* A2A Compliance Card */}
+            <A2AComplianceCard />
+            
+            {/* Main Documentation */}
+            <DocumentationSection copyToClipboard={copyToClipboard} />
+          </div>
+        </TabsContent>
+
+        {/* Lab Tab */}
+        <TabsContent value="lab">
+          {/* Quick Start Templates */}
+          <div className="mb-6">
+            <div 
+              className="flex items-center justify-between cursor-pointer hover:bg-[#222]/30 p-3 rounded-lg transition-colors border border-transparent hover:border-[#333]"
+              onClick={() => setShowQuickStart(!showQuickStart)}
+            >
+              <h3 className="text-white font-semibold flex items-center">
+                <FlaskConical className="h-4 w-4 mr-2 text-purple-400" />
+                Quick Start Templates
+                <span className="ml-2 text-purple-400 text-sm">(4 templates available)</span>
+              </h3>
+              <div className="flex items-center space-x-2">
+                <span className="text-xs text-neutral-500">
+                  {showQuickStart ? 'Hide templates' : 'Show templates'}
+                </span>
+                {showQuickStart ? (
+                  <ChevronUp className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+                )}
+              </div>
+            </div>
+            
+            {showQuickStart && (
+              <QuickStartTemplates onSelectTemplate={handleTemplateSelection} />
+            )}
+          </div>
+          
+          {/* CORS Information */}
+          <div className="mb-6">
+            <div 
+              className="flex items-center justify-between cursor-pointer hover:bg-[#222]/30 p-3 rounded-lg transition-colors border border-transparent hover:border-[#333]"
+              onClick={() => setShowCorsInfo(!showCorsInfo)}
+            >
+              <h3 className="text-orange-400 font-semibold flex items-center text-sm">
+                ⚠️ CORS & Browser Requests
+                <span className="ml-2 text-orange-300 text-xs">(Important for cross-origin testing)</span>
+              </h3>
+              <div className="flex items-center space-x-2">
+                <span className="text-xs text-neutral-500">
+                  {showCorsInfo ? 'Hide info' : 'Show info'}
+                </span>
+                {showCorsInfo ? (
+                  <ChevronUp className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+                )}
+              </div>
+            </div>
+            
+            {showCorsInfo && (
+              <Card className="bg-[#1a1a1a] border-orange-400/20 text-white">
+                <CardContent className="p-4">
+                  <div className="text-sm space-y-2">
+                    <p className="text-neutral-300">
+                      <strong>Note:</strong> If you see OPTIONS requests in logs, this is normal browser behavior.
+                    </p>
+                    <ul className="space-y-1 text-neutral-400 text-xs">
+                      <li>• Browser sends OPTIONS preflight for cross-origin requests</li>
+                      <li>• OPTIONS request checks CORS permissions before actual POST</li>
+                      <li>• Your A2A server must handle OPTIONS and return proper CORS headers</li>
+                      <li>• The actual POST request with your data comes after OPTIONS</li>
+                    </ul>
+                    <div className="mt-3 p-2 bg-[#222] rounded text-xs">
+                      <strong className="text-orange-400">Server CORS Headers needed:</strong><br/>
+                      <code className="text-emerald-400">
+                        Access-Control-Allow-Origin: *<br/>
+                        Access-Control-Allow-Methods: POST, OPTIONS<br/>
+                        Access-Control-Allow-Headers: Content-Type, x-api-key, Authorization
+                      </code>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          {/* A2A Configuration Status */}
+          <div className="mb-6">
+            <div 
+              className="flex items-center justify-between cursor-pointer hover:bg-[#222]/30 p-3 rounded-lg transition-colors border border-transparent hover:border-[#333]"
+              onClick={() => setShowConfigStatus(!showConfigStatus)}
+            >
+              <h3 className="text-emerald-400 font-semibold flex items-center text-sm">
+                🔧 Active A2A Configuration
+                <span className="ml-2 text-emerald-300 text-xs">(Real-time feature status)</span>
+              </h3>
+              <div className="flex items-center space-x-2">
+                <span className="text-xs text-neutral-500">
+                  {showConfigStatus ? 'Hide config' : 'Show config'}
+                </span>
+                {showConfigStatus ? (
+                  <ChevronUp className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
+                )}
+              </div>
+            </div>
+            
+            {showConfigStatus && (
+              <Card className="bg-gradient-to-r from-emerald-500/5 to-blue-500/5 border-emerald-500/20 text-white">
+                <CardContent className="p-4">
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                    <div className="bg-[#222]/50 p-3 rounded-lg">
+                      <h4 className="text-emerald-400 font-medium mb-2">Multi-turn Conversations</h4>
+                      <div className={`text-xs ${contextId ? 'text-green-400' : 'text-neutral-400'}`}>
+                        {contextId ? '✅ Active' : '⏸️ Waiting for contextId'}
+                      </div>
+                      {contextId && (
+                        <div className="text-xs text-emerald-300 mt-1 font-mono">
+                          contextId: {contextId.substring(0, 8)}...
+                        </div>
+                      )}
+                      {!contextId && (
+                        <div className="text-xs text-neutral-400 mt-1">
+                          Server will provide contextId if supported
+                        </div>
+                      )}
+                    </div>
+                    
+                    <div className="bg-[#222]/50 p-3 rounded-lg">
+                      <h4 className="text-blue-400 font-medium mb-2">Push Notifications</h4>
+                      <div className={`text-xs ${enableWebhooks ? 'text-green-400' : 'text-neutral-400'}`}>
+                        {enableWebhooks ? '✅ Enabled' : '❌ Disabled'}
+                      </div>
+                      {enableWebhooks && webhookUrl && (
+                        <div className="text-xs text-blue-300 mt-1 truncate">
+                          {webhookUrl}
+                        </div>
+                      )}
+                      {enableWebhooks && !webhookUrl && (
+                        <div className="text-xs text-yellow-400 mt-1">
+                          URL not configured
+                        </div>
+                      )}
+                    </div>
+                    
+                    <div className="bg-[#222]/50 p-3 rounded-lg">
+                      <h4 className="text-orange-400 font-medium mb-2">Debug Logging</h4>
+                      <div className={`text-xs ${showDetailedErrors ? 'text-green-400' : 'text-neutral-400'}`}>
+                        {showDetailedErrors ? '🔍 Detailed' : '⚡ Basic'}
+                      </div>
+                      <div className="text-xs text-neutral-400 mt-1">
+                        {showDetailedErrors ? 'Enhanced debug logs' : 'Standard logs only'}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          <Card className="bg-[#1a1a1a] border-[#333] text-white mb-6">
+            <CardHeader>
+              <CardTitle className="text-emerald-400">A2A Testing Lab</CardTitle>
+              <CardDescription>
+                Test your A2A agent with different communication methods. Fully compliant with A2A v0.2.1 specification.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Tabs defaultValue="http" onValueChange={setLabMode}>
+                <TabsList className="bg-[#222] border-[#333] mb-4">
+                  <TabsTrigger
+                    value="http"
+                    className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+                  >
+                    HTTP Request
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="stream"
+                    className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+                  >
+                    Streaming
+                  </TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="http">
+                  <HttpLabForm
+                    agentUrl={agentUrl}
+                    setAgentUrl={setAgentUrl}
+                    apiKey={apiKey}
+                    setApiKey={setApiKey}
+                    message={message}
+                    setMessage={setMessage}
+                    sessionId={sessionId}
+                    setSessionId={setSessionId}
+                    taskId={taskId}
+                    setTaskId={setTaskId}
+                    callId={callId}
+                    setCallId={setCallId}
+                    sendRequest={sendRequest}
+                    isLoading={isLoading}
+                    setFiles={setAttachedFiles}
+                    a2aMethod={a2aMethod}
+                    setA2aMethod={setA2aMethod}
+                    authMethod={authMethod}
+                    setAuthMethod={setAuthMethod}
+                    generateNewIds={generateNewIds}
+                    currentTaskId={currentTaskId}
+                    conversationHistory={conversationHistory}
+                    clearHistory={clearHistory}
+                    webhookUrl={webhookUrl}
+                    setWebhookUrl={setWebhookUrl}
+                    enableWebhooks={enableWebhooks}
+                    setEnableWebhooks={setEnableWebhooks}
+                    showDetailedErrors={showDetailedErrors}
+                    setShowDetailedErrors={setShowDetailedErrors}
+                  />
+                </TabsContent>
+
+                <TabsContent value="stream">
+                  <StreamLabForm
+                    agentUrl={agentUrl}
+                    setAgentUrl={setAgentUrl}
+                    apiKey={apiKey}
+                    setApiKey={setApiKey}
+                    message={message}
+                    setMessage={setMessage}
+                    sessionId={sessionId}
+                    setSessionId={setSessionId}
+                    taskId={taskId}
+                    setTaskId={setTaskId}
+                    callId={callId}
+                    setCallId={setCallId}
+                    sendStreamRequest={sendStreamRequestWithEventSource}
+                    isStreaming={isStreaming}
+                    streamResponse={streamResponse}
+                    streamStatus={streamStatus}
+                    streamHistory={streamHistory}
+                    renderStatusIndicator={renderStatusIndicator}
+                    renderTypingIndicator={renderTypingIndicator}
+                    setFiles={setAttachedFiles}
+                    authMethod={authMethod}
+                    currentTaskId={currentTaskId}
+                  />
+                </TabsContent>
+              </Tabs>
+            </CardContent>
+          </Card>
+
+          {response && labMode === "http" && (
+            <Card className="bg-[#1a1a1a] border-[#333] text-white">
+              <CardHeader>
+                <CardTitle className="text-emerald-400">Response</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="relative">
+                  <CodeBlock text={response} language="json" />
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Show message if no response yet but in HTTP mode */}
+          {!response && labMode === "http" && !isLoading && (
+            <Card className="bg-[#1a1a1a] border-[#333] text-white">
+              <CardContent className="p-6 text-center">
+                <p className="text-neutral-400">
+                  Click "Send" to test your A2A agent and see the response here.
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Debug Logs Section */}
+          {debugLogs.length > 0 && (
+            <Card className="bg-[#1a1a1a] border-[#333] text-white">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-blue-400">Debug Logs</CardTitle>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setShowDebug(!showDebug)}
+                      className="bg-[#222] border-[#444] text-white hover:bg-[#333]"
+                    >
+                      {showDebug ? "Hide" : "Show"} Logs
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setDebugLogs([])}
+                      className="bg-[#222] border-[#444] text-white hover:bg-[#333]"
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                </div>
+                <CardDescription>
+                  Detailed request flow - includes CORS preflight and actual requests
+                </CardDescription>
+              </CardHeader>
+              {showDebug && (
+                <CardContent>
+                  <div className="bg-[#0a0a0a] p-4 rounded-md max-h-96 overflow-y-auto">
+                    <pre className="text-xs text-green-400 whitespace-pre-wrap font-mono">
+                      {debugLogs.join('\n')}
+                    </pre>
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+          )}
+        </TabsContent>
+
+        <TabsContent value="examples">
+          <div className="space-y-6">
+            <TechnicalDetailsSection copyToClipboard={copyToClipboard} />
+            <FrontendImplementationSection copyToClipboard={copyToClipboard} />
+            <CodeExamplesSection
+              agentUrl={agentUrl}
+              apiKey={apiKey}
+              jsonRpcRequest={jsonRpcRequest}
+              curlExample={curlExample}
+              fetchExample={fetchExample}
+            />
+          </div>
+        </TabsContent>
+      </Tabs>
+      
+      {/* Footer with additional resources */}
+      <Card className="bg-gradient-to-r from-emerald-500/5 to-blue-500/5 border-emerald-500/20 text-white mt-12">
+        <CardContent className="p-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
+            <div>
+              <h3 className="font-semibold text-emerald-400 mb-2">Official Resources</h3>
+              <div className="space-y-2 text-sm">
+                <a 
+                  href="https://google.github.io/A2A/specification" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="block text-blue-400 hover:text-blue-300 transition-colors"
+                >
+                  📋 Official A2A Specification
+                </a>
+                <a 
+                  href="https://github.com/google/A2A" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="block text-blue-400 hover:text-blue-300 transition-colors"
+                >
+                  🔗 GitHub Repository
+                </a>
+              </div>
+            </div>
+            <div>
+              <h3 className="font-semibold text-emerald-400 mb-2">Implementation Status</h3>
+              <div className="space-y-1 text-sm text-neutral-300">
+                <div>✅ A2A v0.2.1 Compliant</div>
+                <div>✅ All Core Methods Supported</div>
+                <div>✅ Enterprise Security Ready</div>
+              </div>
+            </div>
+            <div>
+              <h3 className="font-semibold text-emerald-400 mb-2">Need Help?</h3>
+              <div className="space-y-1 text-sm text-neutral-300">
+                <div>📖 Check the documentation tab</div>
+                <div>🧪 Test with the lab interface</div>
+                <div>💡 View code examples for implementation</div>
+              </div>
+            </div>
+          </div>
+          <div className="border-t border-emerald-500/20 mt-6 pt-4 text-center text-xs text-neutral-400">
+            Built with ❤️ for the Agent2Agent community • Evolution API © 2025
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function DocumentationPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="container mx-auto p-6 bg-[#121212] min-h-screen flex items-center justify-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-emerald-400"></div>
+        </div>
+      }
+    >
+      <DocumentationContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
new file mode 100644
index 00000000..52dfc5ac
--- /dev/null
+++ b/frontend/app/globals.css
@@ -0,0 +1,87 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/globals.css                                                      │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 142.1 70.6% 45.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
new file mode 100644
index 00000000..2080e62c
--- /dev/null
+++ b/frontend/app/layout.tsx
@@ -0,0 +1,73 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/layout.tsx                                                       │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import type React from "react";
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/toaster";
+import ClientLayout from "./client-layout";
+import ImpersonationBar from "@/components/ImpersonationBar";
+import { PublicEnvScript } from "next-runtime-env";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Evo AI",
+  description: "AI Multi-Agent Platform",
+  icons: {
+    icon: "/favicon.svg",
+  },
+  generator: "v0.dev",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <PublicEnvScript />
+      </head>
+      <body className={inter.className}>
+        <ImpersonationBar />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+        >
+          <ClientLayout>{children}</ClientLayout>
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
new file mode 100644
index 00000000..775a4550
--- /dev/null
+++ b/frontend/app/login/page.tsx
@@ -0,0 +1,556 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/login/page.tsx                                                   │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import type React from "react";
+
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useToast } from "@/hooks/use-toast";
+import Link from "next/link";
+import { login, forgotPassword, getMe, register, resendVerification } from "@/services/authService";
+import { CheckCircle2, AlertCircle } from "lucide-react";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState("login");
+  const [showRegisterSuccess, setShowRegisterSuccess] = useState(false);
+  const [showForgotSuccess, setShowForgotSuccess] = useState(false);
+  const [redirectSeconds, setRedirectSeconds] = useState(5);
+  const redirectTimer = useRef<NodeJS.Timeout | null>(null);
+  const [loginError, setLoginError] = useState("");
+  const [isEmailNotVerified, setIsEmailNotVerified] = useState(false);
+  const [isResendingVerification, setIsResendingVerification] = useState(false);
+
+  const [loginData, setLoginData] = useState({
+    email: "",
+    password: "",
+  });
+
+  const [registerData, setRegisterData] = useState({
+    email: "",
+    password: "",
+    confirmPassword: "",
+    name: "",
+  });
+
+  const [forgotEmail, setForgotEmail] = useState("");
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setLoginError("");
+    setIsEmailNotVerified(false);
+
+    try {
+      const response = await login({
+        email: loginData.email,
+        password: loginData.password,
+      });
+      if (response.data.access_token) {
+        localStorage.setItem("access_token", response.data.access_token);
+        document.cookie = `access_token=${
+          response.data.access_token
+        }; path=/; max-age=${60 * 60 * 24 * 7}`;
+        const meResponse = await getMe();
+        if (meResponse.data) {
+          localStorage.setItem("user", JSON.stringify(meResponse.data));
+          document.cookie = `user=${encodeURIComponent(
+            JSON.stringify(meResponse.data)
+          )}; path=/; max-age=${60 * 60 * 24 * 7}`;
+        }
+      }
+      router.push("/");
+    } catch (error: any) {
+      let errorDetail = "Check your credentials and try again.";
+      
+      if (error?.response?.data) {
+        if (typeof error.response.data.detail === 'string') {
+          errorDetail = error.response.data.detail;
+        } else if (error.response.data.detail) {
+          errorDetail = JSON.stringify(error.response.data.detail);
+        }
+      }
+      
+      if (errorDetail === "Email not verified") {
+        setIsEmailNotVerified(true);
+      }
+      
+      setLoginError(errorDetail);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleResendVerification = async () => {
+    if (!loginData.email) return;
+    
+    setIsResendingVerification(true);
+    try {
+      await resendVerification({ email: loginData.email });
+      toast({
+        title: "Verification email sent",
+        description: "Please check your inbox to verify your account.",
+      });
+    } catch (error: any) {
+      toast({
+        title: "Error sending verification email",
+        description:
+          error?.response?.data?.detail ||
+          "Unable to send verification email. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsResendingVerification(false);
+    }
+  };
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!registerData.password) {
+      toast({
+        title: "Password required",
+        description: "Please enter a password.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (registerData.password.length < 8) {
+      toast({
+        title: "Password too short",
+        description: "Password must be at least 8 characters long.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (registerData.password !== registerData.confirmPassword) {
+      toast({
+        title: "Passwords don't match",
+        description: "Please make sure your passwords match.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await register({
+        email: registerData.email,
+        password: registerData.password,
+        name: registerData.name,
+      });
+
+      toast({
+        title: "Registration successful",
+        description: "Please check your email to verify your account.",
+      });
+
+      setShowRegisterSuccess(true);
+      setRedirectSeconds(5);
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+      redirectTimer.current = setInterval(() => {
+        setRedirectSeconds((s) => s - 1);
+      }, 1000);
+    } catch (error: any) {
+      let errorMessage = "Unable to register. Please try again.";
+      
+      if (error?.response?.data) {
+        if (typeof error.response.data.detail === 'string') {
+          errorMessage = error.response.data.detail;
+        } else if (error.response.data.detail) {
+          errorMessage = JSON.stringify(error.response.data.detail);
+        }
+      }
+      
+      toast({
+        title: "Error registering",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if ((showRegisterSuccess || showForgotSuccess) && redirectSeconds === 0) {
+      setShowRegisterSuccess(false);
+      setShowForgotSuccess(false);
+      setActiveTab("login");
+      setRedirectSeconds(5);
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+    }
+  }, [showRegisterSuccess, showForgotSuccess, redirectSeconds]);
+
+  useEffect(() => {
+    if (!(showRegisterSuccess || showForgotSuccess) && redirectTimer.current) {
+      clearInterval(redirectTimer.current);
+    }
+  }, [showRegisterSuccess, showForgotSuccess]);
+
+  const handleForgotPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await forgotPassword({ email: forgotEmail });
+      toast({
+        title: "Email sent",
+        description: "Check your inbox to reset your password.",
+      });
+      setShowForgotSuccess(true);
+      setRedirectSeconds(5);
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+      redirectTimer.current = setInterval(() => {
+        setRedirectSeconds((s) => s - 1);
+      }, 1000);
+    } catch (error: any) {
+      let errorMessage = "Unable to send the reset password email. Please try again.";
+      
+      if (error?.response?.data) {
+        if (typeof error.response.data.detail === 'string') {
+          errorMessage = error.response.data.detail;
+        } else if (error.response.data.detail) {
+          errorMessage = JSON.stringify(error.response.data.detail);
+        }
+      }
+      
+      toast({
+        title: "Error sending email",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#121212] p-4">
+      <div className="mb-8">
+        <Image
+          src="https://evolution-api.com/files/evo/logo-evo-ai.svg"
+          alt="Evolution API"
+          width={140}
+          height={30}
+          priority
+        />
+      </div>
+
+      <Card className="w-full max-w-md bg-[#1a1a1a] border-[#333]">
+        {showRegisterSuccess ? (
+          <div className="flex flex-col items-center justify-center p-8">
+            <CheckCircle2 className="w-12 h-12 text-green-500 mb-4" />
+            <h2 className="text-xl font-semibold text-white mb-2">Registration successful!</h2>
+            <p className="text-neutral-300 mb-2 text-center">
+              Please check your email to confirm your account.<br />
+              Redirecting to login in {redirectSeconds} seconds...
+            </p>
+          </div>
+        ) : showForgotSuccess ? (
+          <div className="flex flex-col items-center justify-center p-8">
+            <CheckCircle2 className="w-12 h-12 text-green-500 mb-4" />
+            <h2 className="text-xl font-semibold text-white mb-2">Email sent!</h2>
+            <p className="text-neutral-300 mb-2 text-center">
+              Check your inbox to reset your password.<br />
+              Redirecting to login in {redirectSeconds} seconds...
+            </p>
+          </div>
+        ) : (
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <TabsList className="grid w-full grid-cols-3 bg-[#222]">
+            <TabsTrigger
+              value="login"
+              className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+            >
+              Login
+            </TabsTrigger>
+            <TabsTrigger
+              value="register"
+              className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+            >
+              Register
+            </TabsTrigger>
+            <TabsTrigger
+              value="forgot"
+              className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+            >
+              Forgot
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="login">
+            <form onSubmit={handleLogin}>
+              <CardHeader>
+                <CardTitle className="text-white">Login</CardTitle>
+                <CardDescription className="text-neutral-400">
+                  Enter your credentials to access the system.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email" className="text-neutral-300">
+                    Email
+                  </Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="your@email.com"
+                    required
+                    value={loginData.email}
+                    onChange={(e) =>
+                      setLoginData({ ...loginData, email: e.target.value })
+                    }
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="password" className="text-neutral-300">
+                      Password
+                    </Label>
+                  </div>
+                  <Input
+                    id="password"
+                    type="password"
+                    required
+                    value={loginData.password}
+                    onChange={(e) =>
+                      setLoginData({ ...loginData, password: e.target.value })
+                    }
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+                {loginError && (
+                  <div className="text-red-500 text-sm mt-2" data-testid="login-error">
+                    {isEmailNotVerified ? (
+                      <div className="flex flex-col space-y-2">
+                        <div className="flex items-center gap-2">
+                          <AlertCircle className="h-4 w-4" />
+                          <span>{loginError}</span>
+                        </div>
+                        <Button 
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={handleResendVerification}
+                          disabled={isResendingVerification}
+                          className="text-emerald-400 border-emerald-400 hover:bg-emerald-400/10"
+                        >
+                          {isResendingVerification ? "Sending..." : "Resend verification email"}
+                        </Button>
+                      </div>
+                    ) : (
+                      loginError
+                    )}
+                  </div>
+                )}
+              </CardContent>
+              <CardFooter>
+                <Button
+                  type="submit"
+                  className="w-full bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                  disabled={isLoading}
+                >
+                  {isLoading ? "Entering..." : "Enter"}
+                </Button>
+              </CardFooter>
+            </form>
+          </TabsContent>
+
+          <TabsContent value="register">
+            <form onSubmit={handleRegister}>
+              <CardHeader>
+                <CardTitle className="text-white">Register</CardTitle>
+                <CardDescription className="text-neutral-400">
+                  Create a new account to get started.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="register-name" className="text-neutral-300">
+                    Name
+                  </Label>
+                  <Input
+                    id="register-name"
+                    type="text"
+                    placeholder="Your name"
+                    required
+                    value={registerData.name}
+                    onChange={(e) =>
+                      setRegisterData({ ...registerData, name: e.target.value })
+                    }
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="register-email" className="text-neutral-300">
+                    Email
+                  </Label>
+                  <Input
+                    id="register-email"
+                    type="email"
+                    placeholder="your@email.com"
+                    required
+                    value={registerData.email}
+                    onChange={(e) =>
+                      setRegisterData({
+                        ...registerData,
+                        email: e.target.value,
+                      })
+                    }
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="register-password" className="text-neutral-300">
+                    Password
+                  </Label>
+                  <Input
+                    id="register-password"
+                    type="password"
+                    required
+                    value={registerData.password}
+                    onChange={(e) =>
+                      setRegisterData({
+                        ...registerData,
+                        password: e.target.value,
+                      })
+                    }
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label
+                    htmlFor="register-confirm-password"
+                    className="text-neutral-300"
+                  >
+                    Confirm Password
+                  </Label>
+                  <Input
+                    id="register-confirm-password"
+                    type="password"
+                    required
+                    value={registerData.confirmPassword}
+                    onChange={(e) =>
+                      setRegisterData({
+                        ...registerData,
+                        confirmPassword: e.target.value,
+                      })
+                    }
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button
+                  type="submit"
+                  className="w-full bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                  disabled={isLoading}
+                >
+                  {isLoading ? "Registering..." : "Register"}
+                </Button>
+              </CardFooter>
+            </form>
+          </TabsContent>
+
+          <TabsContent value="forgot">
+            <form onSubmit={handleForgotPassword}>
+              <CardHeader>
+                <CardTitle className="text-white">Forgot Password</CardTitle>
+                <CardDescription className="text-neutral-400">
+                  Enter your email to receive a password reset link.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="forgot-email" className="text-neutral-300">
+                    Email
+                  </Label>
+                  <Input
+                    id="forgot-email"
+                    type="email"
+                    placeholder="your@email.com"
+                    required
+                    value={forgotEmail}
+                    onChange={(e) => setForgotEmail(e.target.value)}
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button
+                  type="submit"
+                  className="w-full bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                  disabled={isLoading}
+                >
+                  {isLoading ? "Sending..." : "Send Link"}
+                </Button>
+              </CardFooter>
+            </form>
+          </TabsContent>
+        </Tabs>
+        )}
+      </Card>
+
+      <div className="mt-4 text-center text-sm text-neutral-500">
+        <p>
+          By using this service, you agree to our{" "}
+          <Link href="#" className="text-emerald-400 hover:underline">
+            Terms of Service
+          </Link>{" "}
+          e{" "}
+          <Link href="#" className="text-emerald-400 hover:underline">
+            Privacy Policy
+          </Link>
+          .
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/logout/page.tsx b/frontend/app/logout/page.tsx
new file mode 100644
index 00000000..7486f70e
--- /dev/null
+++ b/frontend/app/logout/page.tsx
@@ -0,0 +1,75 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/logout/page.tsx                                                  │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Card, CardContent } from "@/components/ui/card"
+import { LogOut } from "lucide-react"
+
+export default function LogoutPage() {
+  const router = useRouter()
+
+  useEffect(() => {
+    const performLogout = () => {
+      localStorage.removeItem("access_token")
+      localStorage.removeItem("user")
+
+      localStorage.removeItem("impersonatedClient")
+      localStorage.removeItem("isImpersonating")
+
+      document.cookie = "access_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
+      document.cookie = "user=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
+      document.cookie = "impersonatedClient=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
+      document.cookie = "isImpersonating=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
+      
+      setTimeout(() => {
+        router.push("/login")
+      }, 1500)
+    }
+
+    performLogout()
+  }, [router])
+
+  return (
+    <div className="container mx-auto p-6 flex items-center justify-center min-h-[60vh]">
+      <Card className="bg-[#1a1a1a] border-[#333] w-full max-w-md p-8">
+        <CardContent className="flex flex-col items-center justify-center gap-4">
+          <div className="w-16 h-16 rounded-full bg-[#222] flex items-center justify-center animate-pulse">
+            <LogOut className="h-8 w-8 text-emerald-400" />
+          </div>
+          <h2 className="text-white text-xl font-medium mt-4">Logging out...</h2>
+          <p className="text-neutral-400 text-center">
+            You are being logged out of the system.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/frontend/app/mcp-servers/loading.tsx b/frontend/app/mcp-servers/loading.tsx
new file mode 100644
index 00000000..66cce589
--- /dev/null
+++ b/frontend/app/mcp-servers/loading.tsx
@@ -0,0 +1,31 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/mcp-servers/loading.tsx                                          │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+export default function Loading() {
+  return null
+}
diff --git a/frontend/app/mcp-servers/page.tsx b/frontend/app/mcp-servers/page.tsx
new file mode 100644
index 00000000..e84e3310
--- /dev/null
+++ b/frontend/app/mcp-servers/page.tsx
@@ -0,0 +1,940 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/mcp-servers/page.tsx                                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { useToast } from "@/components/ui/use-toast"
+import { Plus, MoreHorizontal, Edit, Trash2, Search, PenToolIcon as Tool } from "lucide-react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  createMCPServer,
+  listMCPServers,
+  getMCPServer,
+  updateMCPServer,
+  deleteMCPServer,
+} from "@/services/mcpServerService"
+import { MCPServer, MCPServerCreate, ToolConfig } from "@/types/mcpServer"
+
+export default function MCPServersPage() {
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const [selectedServer, setSelectedServer] = useState<MCPServer | null>(null)
+  const [activeTab, setActiveTab] = useState("basic")
+
+  const [serverData, setServerData] = useState<{
+    name: string
+    description: string
+    type: string
+    config_type: "sse" | "studio"
+    url: string
+    headers: { key: string; value: string }[]
+    command: string
+    args: string
+    environments: { key: string }[]
+    tools: ToolConfig[]
+  }>({
+    name: "",
+    description: "",
+    type: "official",
+    config_type: "sse",
+    url: "",
+    headers: [{ key: "x-api-key", value: "" }],
+    command: "npx",
+    args: "",
+    environments: [],
+    tools: [],
+  })
+
+  const [page, setPage] = useState(1)
+  const [limit, setLimit] = useState(10)
+  const [total, setTotal] = useState(0)
+
+  const [mcpServers, setMcpServers] = useState<MCPServer[]>([])
+
+  useEffect(() => {
+    const fetchServers = async () => {
+      setIsLoading(true)
+      try {
+        const res = await listMCPServers((page - 1) * limit, limit)
+        setMcpServers(res.data)
+        setTotal(res.data.length)
+      } catch (error) {
+        toast({
+          title: "Error loading MCP servers",
+          description: "Unable to load servers.",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchServers()
+  }, [page, limit])
+
+  // Search server by name/description (local filter)
+  const filteredServers = Array.isArray(mcpServers)
+    ? mcpServers.filter(
+        (server) =>
+          server.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          (server.description || "").toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : []
+
+  const handleAddHeader = () => {
+    setServerData({
+      ...serverData,
+      headers: [...serverData.headers, { key: "", value: "" }],
+    })
+  }
+
+  const handleRemoveHeader = (index: number) => {
+    const updatedHeaders = [...serverData.headers]
+    updatedHeaders.splice(index, 1)
+    setServerData({
+      ...serverData,
+      headers: updatedHeaders,
+    })
+  }
+
+  const handleHeaderChange = (index: number, field: "key" | "value", value: string) => {
+    const updatedHeaders = [...serverData.headers]
+    updatedHeaders[index][field] = value
+    setServerData({
+      ...serverData,
+      headers: updatedHeaders,
+    })
+  }
+
+  const handleAddEnvironment = () => {
+    setServerData({
+      ...serverData,
+      environments: [...serverData.environments, { key: "" }],
+    })
+  }
+
+  const handleRemoveEnvironment = (index: number) => {
+    const updatedEnvironments = [...serverData.environments]
+    updatedEnvironments.splice(index, 1)
+    setServerData({
+      ...serverData,
+      environments: updatedEnvironments,
+    })
+  }
+
+  const handleEnvironmentChange = (index: number, value: string) => {
+    const updatedEnvironments = [...serverData.environments]
+    updatedEnvironments[index].key = value
+    setServerData({
+      ...serverData,
+      environments: updatedEnvironments,
+    })
+  }
+
+  const handleAddTool = () => {
+    const name = "new_tool";
+    const newTool: ToolConfig = {
+      id: name,
+      name: name,
+      description: "",
+      tags: [],
+      examples: [],
+      inputModes: ["text"],
+      outputModes: ["text"],
+    }
+    setServerData({
+      ...serverData,
+      tools: [...serverData.tools, newTool],
+    })
+  }
+
+  const handleRemoveTool = (index: number) => {
+    const updatedTools = [...serverData.tools]
+    updatedTools.splice(index, 1)
+    setServerData({
+      ...serverData,
+      tools: updatedTools,
+    })
+  }
+
+  const handleToolChange = (index: number, field: keyof ToolConfig, value: any) => {
+    const updatedTools = [...serverData.tools]
+    updatedTools[index] = {
+      ...updatedTools[index],
+      [field]: value,
+    }
+    
+    if (field === 'name') {
+      updatedTools[index].id = value;
+    }
+    
+    setServerData({
+      ...serverData,
+      tools: updatedTools,
+    })
+  }
+
+  const handleAddServer = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    try {
+      // Convert environments array to object
+      const environmentsObj: Record<string, string> = {}
+      serverData.environments.forEach((env) => {
+        if (env.key) {
+          environmentsObj[env.key] = `env@@${env.key}`
+        }
+      })
+      // Convert headers array to object
+      const headersObj: Record<string, string> = {}
+      serverData.headers.forEach((header) => {
+        if (header.key) {
+          headersObj[header.key] = header.value
+        }
+      })
+      let config_json: any = {}
+      if (serverData.config_type === "sse") {
+        config_json = {
+          url: serverData.url,
+          headers: headersObj,
+        }
+      } else if (serverData.config_type === "studio") {
+        const args = serverData.args.split("\n").filter((arg) => arg.trim() !== "")
+        const envObj: Record<string, string> = {}
+        serverData.environments.forEach((env) => {
+          if (env.key) {
+            envObj[env.key] = `env@@${env.key}`
+          }
+        })
+        config_json = {
+          command: serverData.command,
+          args: args,
+          env: envObj,
+        }
+      }
+      const payload: MCPServerCreate = {
+        name: serverData.name,
+        description: serverData.description,
+        type: serverData.type,
+        config_type: serverData.config_type,
+        config_json,
+        environments: environmentsObj,
+        tools: serverData.tools,
+      }
+      if (selectedServer) {
+        await updateMCPServer(selectedServer.id, payload)
+        toast({
+          title: "Server updated",
+          description: `${serverData.name} was updated successfully.`,
+        })
+      } else {
+        await createMCPServer(payload)
+        toast({
+          title: "Server added",
+          description: `${serverData.name} was added successfully.`,
+        })
+      }
+      setIsDialogOpen(false)
+      resetForm()
+      // Reload list
+      const res = await listMCPServers((page - 1) * limit, limit)
+      setMcpServers(res.data)
+      setTotal(res.data.length)
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to save the MCP server. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleEditServer = async (server: MCPServer) => {
+    setIsLoading(true)
+    try {
+      const res = await getMCPServer(server.id)
+      setSelectedServer(res.data)
+      // Convert environments object to array
+      const environmentsArray = Object.keys(res.data.environments || {}).map((key) => ({ key }))
+      // Convert headers object to array
+      const headersArray = res.data.config_json.headers
+        ? Object.entries(res.data.config_json.headers).map(([key, value]) => ({ key, value: value as string }))
+        : [{ key: "x-api-key", value: "" }]
+      if (res.data.config_type === "sse") {
+        setServerData({
+          name: res.data.name,
+          description: res.data.description || "",
+          type: res.data.type,
+          config_type: res.data.config_type as any,
+          url: res.data.config_json.url || "",
+          headers: headersArray,
+          command: "",
+          args: "",
+          environments: environmentsArray,
+          tools: res.data.tools,
+        })
+      } else if (res.data.config_type === "studio") {
+        setServerData({
+          name: res.data.name,
+          description: res.data.description || "",
+          type: res.data.type,
+          config_type: res.data.config_type as any,
+          url: "",
+          headers: [],
+          command: res.data.config_json.command || "npx",
+          args: (res.data.config_json.args || []).join("\n"),
+          environments: environmentsArray,
+          tools: res.data.tools,
+        })
+      }
+      setActiveTab("basic")
+      setIsDialogOpen(true)
+    } catch (error) {
+      toast({
+        title: "Error searching MCP server",
+        description: "Unable to search the server.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleDeleteServer = (server: MCPServer) => {
+    setSelectedServer(server)
+    setIsDeleteDialogOpen(true)
+  }
+
+  const confirmDeleteServer = async () => {
+    if (!selectedServer) return
+    setIsLoading(true)
+    try {
+      await deleteMCPServer(selectedServer.id)
+      toast({
+        title: "Server deleted",
+        description: `${selectedServer.name} was deleted successfully.`,
+      })
+      setIsDeleteDialogOpen(false)
+      setSelectedServer(null)
+      // Reload list
+      const res = await listMCPServers((page - 1) * limit, limit)
+      setMcpServers(res.data)
+      setTotal(res.data.length)
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Unable to delete the server. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const resetForm = () => {
+    setServerData({
+      name: "",
+      description: "",
+      type: "official",
+      config_type: "sse",
+      url: "",
+      headers: [{ key: "x-api-key", value: "" }],
+      command: "npx",
+      args: "",
+      environments: [],
+      tools: [],
+    })
+    setSelectedServer(null)
+    setActiveTab("basic")
+  }
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold text-white">MCP Servers Management</h1>
+
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogTrigger asChild>
+            <Button onClick={resetForm} className="bg-emerald-400 text-black hover:bg-[#00cc7d]">
+              <Plus className="mr-2 h-4 w-4" />
+              New MCP Server
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-hidden flex flex-col bg-[#1a1a1a] border-[#333]">
+            <form onSubmit={handleAddServer}>
+              <DialogHeader>
+                <DialogTitle className="text-white">
+                  {selectedServer ? "Edit MCP Server" : "New MCP Server"}
+                </DialogTitle>
+                <DialogDescription className="text-neutral-400">
+                  {selectedServer
+                    ? "Edit the existing MCP server information."
+                    : "Fill in the information to create a new MCP server."}
+                </DialogDescription>
+              </DialogHeader>
+
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 overflow-hidden flex flex-col">
+                <TabsList className="grid grid-cols-3 bg-[#222]">
+                  <TabsTrigger
+                    value="basic"
+                    className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+                  >
+                    Basic Information
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="environments"
+                    className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+                  >
+                    Environment Variables
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="tools"
+                    className="data-[state=active]:bg-[#333] data-[state=active]:text-emerald-400"
+                  >
+                    Tools
+                  </TabsTrigger>
+                </TabsList>
+
+                <div className="overflow-y-auto max-h-[60vh] p-4">
+                  <TabsContent value="basic" className="space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="name" className="text-neutral-300">
+                        Name
+                      </Label>
+                      <Input
+                        id="name"
+                        value={serverData.name}
+                        onChange={(e) => setServerData({ ...serverData, name: e.target.value })}
+                        className="bg-[#222] border-[#444] text-white"
+                        placeholder="MCP Server Name"
+                        required
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="description" className="text-neutral-300">
+                        Description
+                      </Label>
+                      <Textarea
+                        id="description"
+                        value={serverData.description}
+                        onChange={(e) => setServerData({ ...serverData, description: e.target.value })}
+                        className="bg-[#222] border-[#444] text-white"
+                        placeholder="MCP Server Description"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="type" className="text-neutral-300">
+                        Type
+                      </Label>
+                      <Select
+                        value={serverData.type}
+                        onValueChange={(value) => setServerData({ ...serverData, type: value })}
+                      >
+                        <SelectTrigger id="type" className="w-full bg-[#222] border-[#444] text-white">
+                          <SelectValue placeholder="Select the type" />
+                        </SelectTrigger>
+                        <SelectContent className="bg-[#222] border-[#444] text-white">
+                          <SelectItem value="official">Official</SelectItem>
+                          <SelectItem value="community">Community</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="config_type" className="text-neutral-300">
+                        Configuration Type
+                      </Label>
+                      <Select
+                        value={serverData.config_type}
+                        onValueChange={(value: "sse" | "studio") =>
+                          setServerData({ ...serverData, config_type: value })
+                        }
+                      >
+                        <SelectTrigger id="config_type" className="w-full bg-[#222] border-[#444] text-white">
+                          <SelectValue placeholder="Select the configuration type" />
+                        </SelectTrigger>
+                        <SelectContent className="bg-[#222] border-[#444] text-white">
+                          <SelectItem value="sse">SSE (Server-Sent Events)</SelectItem>
+                          <SelectItem value="studio">Studio</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* Specific fields for SSE */}
+                    {serverData.config_type === "sse" && (
+                      <>
+                        <div className="space-y-2">
+                          <Label htmlFor="url" className="text-neutral-300">
+                            URL
+                          </Label>
+                          <Input
+                            id="url"
+                            value={serverData.url}
+                            onChange={(e) => setServerData({ ...serverData, url: e.target.value })}
+                            className="bg-[#222] border-[#444] text-white"
+                            placeholder="https://your_server.com/sse"
+                            required={serverData.config_type === "sse"}
+                          />
+                        </div>
+
+                        {/* Dynamic headers */}
+                        <div className="space-y-2">
+                          <div className="flex justify-between items-center">
+                            <Label className="text-neutral-300">Headers</Label>
+                            <Button
+                              type="button"
+                              onClick={handleAddHeader}
+                              className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                              size="sm"
+                            >
+                              <Plus className="mr-2 h-4 w-4" />
+                              Add Header
+                            </Button>
+                          </div>
+
+                          <div className="space-y-2">
+                            {serverData.headers.map((header, index) => (
+                              <div key={index} className="flex gap-2 items-start">
+                                <div className="flex-1">
+                                  <Label htmlFor={`header-key-${index}`} className="sr-only">
+                                    Header Name
+                                  </Label>
+                                  <Input
+                                    id={`header-key-${index}`}
+                                    value={header.key}
+                                    onChange={(e) => handleHeaderChange(index, "key", e.target.value)}
+                                    className="bg-[#222] border-[#444] text-white"
+                                    placeholder="Header Name"
+                                  />
+                                </div>
+                                <div className="flex-1">
+                                  <Label htmlFor={`header-value-${index}`} className="sr-only">
+                                    Header Value
+                                  </Label>
+                                  <Input
+                                    id={`header-value-${index}`}
+                                    value={header.value}
+                                    onChange={(e) => handleHeaderChange(index, "value", e.target.value)}
+                                    className="bg-[#222] border-[#444] text-white"
+                                    placeholder="Header Value"
+                                  />
+                                </div>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={() => handleRemoveHeader(index)}
+                                  className="text-red-500 hover:text-red-400 hover:bg-[#333]"
+                                >
+                                  <Trash2 className="h-4 w-4" />
+                                </Button>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </>
+                    )}
+
+                    {/* Specific fields for Studio */}
+                    {serverData.config_type === "studio" && (
+                      <>
+                        <div className="space-y-2">
+                          <Label htmlFor="command" className="text-neutral-300">
+                            Command
+                          </Label>
+                          <Input
+                            id="command"
+                            value={serverData.command}
+                            onChange={(e) => setServerData({ ...serverData, command: e.target.value })}
+                            className="bg-[#222] border-[#444] text-white"
+                            placeholder="npx"
+                            required={serverData.config_type === "studio"}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="args" className="text-neutral-300">
+                            Arguments (one per line)
+                          </Label>
+                          <Textarea
+                            id="args"
+                            value={serverData.args}
+                            onChange={(e) => setServerData({ ...serverData, args: e.target.value })}
+                            className="bg-[#222] border-[#444] text-white"
+                            placeholder="-y
+@modelcontextprotocol/server-brave-search"
+                            required={serverData.config_type === "studio"}
+                          />
+                        </div>
+                      </>
+                    )}
+                  </TabsContent>
+
+                  <TabsContent value="environments" className="space-y-4">
+                    <div className="flex justify-between items-center">
+                      <h3 className="text-lg font-medium text-white">Environment Variables</h3>
+                      <Button
+                        type="button"
+                        onClick={handleAddEnvironment}
+                        className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                        size="sm"
+                      >
+                        <Plus className="mr-2 h-4 w-4" />
+                        Add Environment Variable
+                      </Button>
+                    </div>
+
+                    {serverData.environments.length === 0 ? (
+                      <div className="text-center py-8 text-neutral-400">
+                        No environment variables configured. Click "Add Variable" to start.
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        {serverData.environments.map((env, index) => (
+                          <div key={index} className="flex gap-2 items-start">
+                            <div className="flex-1">
+                              <Label htmlFor={`env-key-${index}`} className="sr-only">
+                                Environment Variable Name
+                              </Label>
+                              <Input
+                                id={`env-key-${index}`}
+                                value={env.key}
+                                onChange={(e) => handleEnvironmentChange(index, e.target.value)}
+                                className="bg-[#222] border-[#444] text-white"
+                                placeholder="ENV_VARIABLE_NAME"
+                              />
+                            </div>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => handleRemoveEnvironment(index)}
+                              className="text-red-500 hover:text-red-400 hover:bg-[#333]"
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  <TabsContent value="tools" className="space-y-4">
+                    <div className="flex justify-between items-center">
+                      <h3 className="text-lg font-medium text-white">Tools</h3>
+                      <Button
+                        type="button"
+                        onClick={handleAddTool}
+                        className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                        size="sm"
+                      >
+                        <Plus className="mr-2 h-4 w-4" />
+                        Add Tool
+                      </Button>
+                    </div>
+
+                    {serverData.tools.length === 0 ? (
+                      <div className="text-center py-8 text-neutral-400">
+                        No tools configured. Click "Add Tool" to start.
+                      </div>
+                    ) : (
+                      <div className="space-y-6">
+                        {serverData.tools.map((tool, index) => (
+                          <Card key={index} className="bg-[#222] border-[#444]">
+                            <CardHeader className="pb-2 flex flex-row justify-between items-start">
+                              <div>
+                                <CardTitle className="text-white text-base">Tool {index + 1}</CardTitle>
+                              </div>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => handleRemoveTool(index)}
+                                className="text-red-500 hover:text-red-400 hover:bg-[#333] h-8 w-8"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </CardHeader>
+                            <CardContent className="space-y-3">
+                              <div className="space-y-2">
+                                <Label htmlFor={`tool-name-${index}`} className="text-neutral-300">
+                                  Name
+                                </Label>
+                                <Input
+                                  id={`tool-name-${index}`}
+                                  value={tool.name}
+                                  onChange={(e) => handleToolChange(index, "name", e.target.value)}
+                                  className="bg-[#222] border-[#444] text-white"
+                                  placeholder="tool_name"
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label htmlFor={`tool-description-${index}`} className="text-neutral-300">
+                                  Description
+                                </Label>
+                                <Textarea
+                                  id={`tool-description-${index}`}
+                                  value={tool.description}
+                                  onChange={(e) => handleToolChange(index, "description", e.target.value)}
+                                  className="bg-[#222] border-[#444] text-white"
+                                  placeholder="Tool Description"
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label htmlFor={`tool-tags-${index}`} className="text-neutral-300">
+                                  Tags (separated by comma)
+                                </Label>
+                                <Input
+                                  id={`tool-tags-${index}`}
+                                  value={(tool.tags ?? []).join(", ")}
+                                  onChange={(e) => handleToolChange(index, "tags", e.target.value.split(", "))}
+                                  className="bg-[#222] border-[#444] text-white"
+                                  placeholder="tag1, tag2, tag3"
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label htmlFor={`tool-examples-${index}`} className="text-neutral-300">
+                                  Examples (separated by comma)
+                                </Label>
+                                <Textarea
+                                  id={`tool-examples-${index}`}
+                                  value={(tool.examples ?? []).join(", ")}
+                                  onChange={(e) => handleToolChange(index, "examples", e.target.value.split(", "))}
+                                  className="bg-[#222] border-[#444] text-white"
+                                  placeholder="Example 1, Example 2"
+                                />
+                              </div>
+                            </CardContent>
+                          </Card>
+                        ))}
+                      </div>
+                    )}
+                  </TabsContent>
+                </div>
+              </Tabs>
+
+              <DialogFooter className="mt-4">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsDialogOpen(false)}
+                  className="border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" className="bg-emerald-400 text-black hover:bg-[#00cc7d]" disabled={isLoading}>
+                  {isLoading ? "Saving..." : selectedServer ? "Save Changes" : "Add Server"}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+
+        <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+          <AlertDialogContent className="bg-[#1a1a1a] border-[#333] text-white">
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirm delete</AlertDialogTitle>
+              <AlertDialogDescription className="text-neutral-400">
+                Are you sure you want to delete the server "{selectedServer?.name}"? This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel className="border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white">
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={confirmDeleteServer}
+                className="bg-red-600 text-white hover:bg-red-700"
+                disabled={isLoading}
+              >
+                {isLoading ? "Deleting..." : "Delete"}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+
+      <Card className="bg-[#1a1a1a] border-[#333] mb-6">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-white text-lg">Search MCP Servers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-500" />
+            <Input
+              placeholder="Search by name or description..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="bg-[#222] border-[#444] text-white pl-10"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-[#1a1a1a] border-[#333]">
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader>
+              <TableRow className="border-[#333] hover:bg-[#222]">
+                <TableHead className="text-neutral-300">Name</TableHead>
+                <TableHead className="text-neutral-300">Description</TableHead>
+                <TableHead className="text-neutral-300">Type</TableHead>
+                <TableHead className="text-neutral-300">Configuration</TableHead>
+                <TableHead className="text-neutral-300">Tools</TableHead>
+                <TableHead className="text-neutral-300 text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredServers.length > 0 ? (
+                filteredServers.map((server) => (
+                  <TableRow key={server.id} className="border-[#333] hover:bg-[#222]">
+                    <TableCell className="font-medium text-white">{server.name}</TableCell>
+                    <TableCell className="text-neutral-300">{server.description}</TableCell>
+                    <TableCell className="text-neutral-300">
+                      <Badge
+                        variant="outline"
+                        className={
+                          server.type === "official"
+                            ? "bg-emerald-400/10 text-emerald-400 border-emerald-400/30"
+                            : "bg-[#ff9d00]/10 text-[#ff9d00] border-[#ff9d00]/30"
+                        }
+                      >
+                        {server.type === "official" ? "Official" : "Community"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-neutral-300">
+                      <div className="flex flex-col gap-1">
+                        <Badge
+                          variant="outline"
+                          className={
+                            server.config_type === "sse"
+                              ? "bg-[#00b8ff]/10 text-[#00b8ff] border-[#00b8ff]/30"
+                              : "bg-[#ff5e00]/10 text-[#ff5e00] border-[#ff5e00]/30"
+                          }
+                        >
+                          {server.config_type === "sse" ? "SSE" : "Studio"}
+                        </Badge>
+                        {server.config_type === "sse" && (
+                          <span className="text-xs truncate max-w-[200px]">{server.config_json.url}</span>
+                        )}
+                        {server.config_type === "studio" && (
+                          <span className="text-xs truncate max-w-[200px]">
+                            {server.config_json.command} {server.config_json.args?.join(" ")}
+                          </span>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-neutral-300">
+                      <div className="flex items-center">
+                        <Tool className="h-4 w-4 mr-1 text-emerald-400" />
+                        {server.tools.length}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" className="h-8 w-8 p-0 text-neutral-300 hover:bg-[#333]">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="bg-[#222] border-[#444] text-white">
+                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                          <DropdownMenuSeparator className="bg-[#444]" />
+                          <DropdownMenuItem
+                            className="cursor-pointer hover:bg-[#333]"
+                            onClick={() => handleEditServer(server)}
+                          >
+                            <Edit className="mr-2 h-4 w-4 text-emerald-400" />
+                            Edit
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            className="cursor-pointer hover:bg-[#333] text-red-500"
+                            onClick={() => handleDeleteServer(server)}
+                          >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={6} className="h-24 text-center text-neutral-500">
+                    No MCP servers found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
new file mode 100644
index 00000000..a6b36c79
--- /dev/null
+++ b/frontend/app/page.tsx
@@ -0,0 +1,33 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/page.tsx                                                         │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { redirect } from "next/navigation"
+
+export default function Home() {
+  redirect("/agents")
+}
diff --git a/frontend/app/profile/page.tsx b/frontend/app/profile/page.tsx
new file mode 100644
index 00000000..49889fee
--- /dev/null
+++ b/frontend/app/profile/page.tsx
@@ -0,0 +1,190 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/profile/page.tsx                                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { useToast } from "@/components/ui/use-toast"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { User } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+export default function ProfilePage() {
+  const { toast } = useToast()
+  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [userData, setUserData] = useState(() => {
+    if (typeof window !== "undefined") {
+      const user = localStorage.getItem("user")
+      if (user) return JSON.parse(user)
+    }
+    return {
+      id: "",
+      name: "",
+      email: "",
+      is_admin: false,
+      email_verified: false,
+      created_at: "",
+    }
+  })
+
+  const [profileData, setProfileData] = useState({
+    name: userData.name,
+    email: userData.email,
+  })
+  useEffect(() => {
+    setProfileData({ name: userData.name, email: userData.email })
+  }, [userData])
+
+  const handleProfileUpdate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      setUserData({
+        ...userData,
+        name: profileData.name,
+        email: profileData.email,
+      })
+
+      toast({
+        title: "Profile updated",
+        description: "Your information has been updated successfully.",
+      })
+    } catch (error) {
+      toast({
+        title: "Error updating profile",
+        description: "Unable to update your information. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="flex flex-col md:flex-row gap-6">
+        <div className="md:w-1/3">
+          <Card className="bg-[#1a1a1a] border-[#333]">
+            <CardHeader>
+              <div className="flex flex-col items-center">
+                <Avatar className="h-24 w-24 mb-4">
+                  <AvatarImage src={`https://api.dicebear.com/7.x/initials/svg?seed=${userData.name}`} />
+                  <AvatarFallback className="text-2xl bg-emerald-400 text-black">
+                    {(userData.name || "?")
+                      .split(" ")
+                      .filter(Boolean)
+                      .map((n: string) => n[0])
+                      .join("") || "?"}
+                  </AvatarFallback>
+                </Avatar>
+                <CardTitle className="text-white text-xl">{userData.name}</CardTitle>
+                <CardDescription className="text-neutral-400">{userData.email}</CardDescription>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4 text-sm">
+                <div className="flex justify-between text-neutral-300">
+                  <span>ID:</span>
+                  <span className="text-neutral-400 truncate max-w-[180px]">{userData.id}</span>
+                </div>
+                <div className="flex justify-between text-neutral-300">
+                  <span>Account Type:</span>
+                  <span className="text-neutral-400">{userData.is_admin ? "Administrator" : "Client"}</span>
+                </div>
+                <div className="flex justify-between text-neutral-300">
+                  <span>Email Verified:</span>
+                  <span className="text-neutral-400">{userData.email_verified ? "Yes" : "No"}</span>
+                </div>
+                <div className="flex justify-between text-neutral-300">
+                  <span>Created at:</span>
+                  <span className="text-neutral-400">{new Date(userData.created_at).toLocaleDateString("en-US")}</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="md:w-2/3">
+          <Card className="bg-[#1a1a1a] border-[#333]">
+            <form onSubmit={handleProfileUpdate}>
+              <CardHeader>
+                <CardTitle className="text-white">Profile Information</CardTitle>
+                <CardDescription className="text-neutral-400">Update your personal information.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name" className="text-neutral-300">
+                    Name
+                  </Label>
+                  <Input
+                    id="name"
+                    value={profileData.name}
+                    onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="email" className="text-neutral-300">
+                    Email
+                  </Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={profileData.email}
+                    onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
+                    className="bg-[#222] border-[#444] text-white"
+                  />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button
+                  type="submit"
+                  className="w-full bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                  disabled={isLoading}
+                >
+                  {isLoading ? "Saving..." : "Save Changes"}
+                </Button>
+              </CardFooter>
+            </form>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/security/page.tsx b/frontend/app/security/page.tsx
new file mode 100644
index 00000000..2302807b
--- /dev/null
+++ b/frontend/app/security/page.tsx
@@ -0,0 +1,163 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/security/page.tsx                                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { useToast } from "@/components/ui/use-toast"
+import { Shield } from "lucide-react"
+import { changePassword } from "@/services/authService"
+
+export default function SecurityPage() {
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [passwordData, setPasswordData] = useState({
+    currentPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+  })
+
+  const handlePasswordUpdate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+
+    if (passwordData.newPassword !== passwordData.confirmPassword) {
+      toast({
+        title: "Error updating password",
+        description: "The passwords do not match.",
+        variant: "destructive",
+      })
+      setIsLoading(false)
+      return
+    }
+
+    try {
+      await changePassword({
+        current_password: passwordData.currentPassword,
+        new_password: passwordData.newPassword
+      })
+
+      // Reset password fields
+      setPasswordData({
+        currentPassword: "",
+        newPassword: "",
+        confirmPassword: "",
+      })
+
+      toast({
+        title: "Password updated",
+        description: "Your password has been updated successfully.",
+      })
+    } catch (error) {
+      toast({
+        title: "Error updating password",
+        description: error instanceof Error ? error.message : "Unable to update your password. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="max-w-2xl mx-auto">
+        <Card className="bg-[#1a1a1a] border-[#333]">
+          <CardHeader className="flex flex-row items-center gap-4">
+            <Shield className="w-8 h-8 text-emerald-400" />
+            <div>
+              <CardTitle className="text-white">Account Security</CardTitle>
+              <CardDescription className="text-neutral-400">
+                Manage your account security settings
+              </CardDescription>
+            </div>
+          </CardHeader>
+          
+          <form onSubmit={handlePasswordUpdate}>
+            <CardContent className="space-y-4">
+              <div className="space-y-1">
+                <Label htmlFor="current-password" className="text-neutral-300">
+                  Current Password
+                </Label>
+                <Input
+                  id="current-password"
+                  type="password"
+                  value={passwordData.currentPassword}
+                  onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })}
+                  className="bg-[#222] border-[#444] text-white"
+                  required
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="new-password" className="text-neutral-300">
+                  New Password
+                </Label>
+                <Input
+                  id="new-password"
+                  type="password"
+                  value={passwordData.newPassword}
+                  onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
+                  className="bg-[#222] border-[#444] text-white"
+                  required
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="confirm-password" className="text-neutral-300">
+                  Confirm New Password
+                </Label>
+                <Input
+                  id="confirm-password"
+                  type="password"
+                  value={passwordData.confirmPassword}
+                  onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
+                  className="bg-[#222] border-[#444] text-white"
+                  required
+                />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button
+                type="submit"
+                className="w-full bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                disabled={isLoading}
+              >
+                {isLoading ? "Updating..." : "Update Password"}
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/frontend/app/security/reset-password/page.tsx b/frontend/app/security/reset-password/page.tsx
new file mode 100644
index 00000000..f835e987
--- /dev/null
+++ b/frontend/app/security/reset-password/page.tsx
@@ -0,0 +1,198 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/security/reset-password/page.tsx                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Loader2, CheckCircle2, XCircle } from "lucide-react";
+import { resetPassword } from "@/services/authService";
+import Link from "next/link";
+
+export default function ResetPasswordPageWrapper() {
+  return (
+    <Suspense fallback={null}>
+      <ResetPasswordPage />
+    </Suspense>
+  );
+}
+
+function ResetPasswordPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const tokenFromUrl = searchParams.get("token") || "";
+  const [form, setForm] = useState({
+    token: tokenFromUrl,
+    password: "",
+    confirmPassword: "",
+  });
+  const [status, setStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [redirectSeconds, setRedirectSeconds] = useState(5);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (!form.token) {
+      setError("Recovery token is required.");
+      setStatus("error");
+      return;
+    }
+    if (form.password !== form.confirmPassword) {
+      setError("Passwords do not match.");
+      setStatus("error");
+      return;
+    }
+    setStatus("loading");
+    try {
+      await resetPassword({ token: form.token, new_password: form.password });
+      setStatus("success");
+    } catch (err: any) {
+      setError(err?.response?.data?.message || "Failed to reset password.");
+      setStatus("error");
+    }
+  };
+
+  useEffect(() => {
+    if (status === "success" && redirectSeconds > 0) {
+      const timer = setTimeout(() => {
+        setRedirectSeconds((s) => s - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+    if (status === "success" && redirectSeconds === 0) {
+      router.push("/login");
+    }
+  }, [status, redirectSeconds, router]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <Card className="w-full max-w-md">
+        <form onSubmit={handleSubmit}>
+          <CardHeader>
+            <CardTitle>Reset Password</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {status === "success" ? (
+              <Alert className="border-green-500">
+                <CheckCircle2 className="mr-2 h-4 w-4 text-green-500 inline" />
+                <AlertTitle>Password reset!</AlertTitle>
+                <AlertDescription>
+                  Your password has been updated.
+                  <br />
+                  Redirecting to login in {redirectSeconds} seconds...
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <>
+                {status === "error" && (
+                  <Alert variant="destructive">
+                    <XCircle className="mr-2 h-4 w-4 inline" />
+                    <AlertTitle>Reset failed</AlertTitle>
+                    <AlertDescription>{error}</AlertDescription>
+                  </Alert>
+                )}
+                <div className="space-y-2">
+                  <Input
+                    id="token"
+                    name="token"
+                    type="hidden"
+                    value={form.token}
+                    onChange={handleChange}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="password">New Password</Label>
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    value={form.password}
+                    onChange={handleChange}
+                    placeholder="Enter new password"
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="confirmPassword">Confirm Password</Label>
+                  <Input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    value={form.confirmPassword}
+                    onChange={handleChange}
+                    placeholder="Repeat new password"
+                    required
+                  />
+                </div>
+              </>
+            )}
+          </CardContent>
+          {status !== "success" && (
+            <CardFooter>
+              <Button
+                type="submit"
+                className="w-full bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                disabled={status === "loading"}
+              >
+                {status === "loading" ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin inline" />
+                    Resetting...
+                  </>
+                ) : (
+                  "Reset Password"
+                )}
+              </Button>
+            </CardFooter>
+          )}
+          <div className="mt-4 mb-2 text-center">
+            <Link href="/login" className="text-emerald-400 hover:underline">Go to Login</Link>
+          </div>
+        </form>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/app/security/verify-email/page.tsx b/frontend/app/security/verify-email/page.tsx
new file mode 100644
index 00000000..3aaed2e6
--- /dev/null
+++ b/frontend/app/security/verify-email/page.tsx
@@ -0,0 +1,119 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/security/verify-email/page.tsx                                   │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import { useEffect, useState, Suspense } from "react"
+import { useSearchParams, useRouter } from "next/navigation"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Loader2, CheckCircle2, XCircle } from "lucide-react"
+import { verifyEmail } from "@/services/authService"
+
+export default function VerifyEmailPageWrapper() {
+    return (
+        <Suspense fallback={null}>
+            <VerifyEmailPage />
+        </Suspense>
+    )
+}
+
+function VerifyEmailPage() {
+    const searchParams = useSearchParams()
+    const router = useRouter()
+    const code = searchParams.get("code")
+    const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+    const [error, setError] = useState<string | null>(null)
+    const [redirectSeconds, setRedirectSeconds] = useState(5)
+
+    useEffect(() => {
+        if (!code) {
+            setError("Verification code not found in URL.")
+            setStatus("error")
+            return
+        }
+        setStatus("loading")
+        verifyEmail(code)
+            .then(() => {
+                setStatus("success")
+            })
+            .catch((err) => {
+                setError(err?.response?.data?.message || "Failed to verify email.")
+                setStatus("error")
+            })
+    }, [code])
+
+    useEffect(() => {
+        if (status === "success" && redirectSeconds > 0) {
+            const timer = setTimeout(() => {
+                setRedirectSeconds((s) => s - 1)
+            }, 1000)
+            return () => clearTimeout(timer)
+        }
+        if (status === "success" && redirectSeconds === 0) {
+            router.push("/login")
+        }
+    }, [status, redirectSeconds, router])
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-background">
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle>Email Confirmation</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    {status === "loading" && (
+                        <Alert>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin inline" />
+                            <AlertTitle>Verifying your email...</AlertTitle>
+                        </Alert>
+                    )}
+                    {status === "success" && (
+                        <Alert className="border-green-500">
+                            <CheckCircle2 className="mr-2 h-4 w-4 text-green-500 inline" />
+                            <AlertTitle>Email verified!</AlertTitle>
+                            <AlertDescription>
+                                Your email has been successfully confirmed.<br />
+                                Redirecting to login in {redirectSeconds} seconds...
+                            </AlertDescription>
+                        </Alert>
+                    )}
+                    {status === "error" && (
+                        <Alert variant="destructive">
+                            <XCircle className="mr-2 h-4 w-4 inline" />
+                            <AlertTitle>Verification failed</AlertTitle>
+                            <AlertDescription>
+                                {error || "An error occurred while verifying your email."}
+                            </AlertDescription>
+                        </Alert>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    )
+} 
\ No newline at end of file
diff --git a/frontend/app/shared-chat/AgentInfo.tsx b/frontend/app/shared-chat/AgentInfo.tsx
new file mode 100644
index 00000000..ae12f990
--- /dev/null
+++ b/frontend/app/shared-chat/AgentInfo.tsx
@@ -0,0 +1,302 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: shared-chat/AgentInfo.tsx                                            │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  ExternalLink,
+  Code,
+  ChevronDown,
+  ChevronUp,
+  User,
+  Calendar,
+  Tag,
+  Info,
+  ArrowRight,
+  Workflow,
+  Bot,
+  GitBranch,
+  RefreshCw,
+  Key,
+  Users,
+  BookOpenCheck,
+} from "lucide-react";
+import { Agent, AgentType } from "@/types/agent";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface AgentInfoProps {
+  agent: Agent;
+  isShared?: boolean;
+}
+
+export function AgentInfo({ agent, isShared = false }: AgentInfoProps) {
+  const [isCardDialogOpen, setIsCardDialogOpen] = useState(false);
+
+  const getAgentTypeInfo = () => {
+    const types: Record<
+      AgentType,
+      { label: string; icon: React.ElementType; color: string }
+    > = {
+      llm: { label: "LLM Agent", icon: Code, color: "#00cc7d" },
+      a2a: { label: "A2A Agent", icon: ExternalLink, color: "#3b82f6" },
+      sequential: {
+        label: "Sequential Agent",
+        icon: ArrowRight,
+        color: "#f59e0b",
+      },
+      parallel: { label: "Parallel Agent", icon: GitBranch, color: "#8b5cf6" },
+      loop: { label: "Loop Agent", icon: RefreshCw, color: "#ec4899" },
+      workflow: { label: "Workflow Agent", icon: Workflow, color: "#14b8a6" },
+      task: { label: "Task Agent", icon: BookOpenCheck, color: "#00cc7d" },
+    };
+
+    return (
+      types[agent.type as AgentType] || {
+        label: agent.type,
+        icon: Bot,
+        color: "#00cc7d",
+      }
+    );
+  };
+
+  const agentTypeInfo = getAgentTypeInfo();
+  const IconComponent = agentTypeInfo.icon;
+
+  const getModelName = () => {
+    if (agent.type === "llm" && agent.model) {
+      return agent.model;
+    }
+    return "N/A";
+  };
+
+  const getCreatedAt = () => {
+    if (!agent.created_at) return "Unknown";
+    return new Date(agent.created_at).toLocaleDateString();
+  };
+
+  const getTotalTools = () => {
+    if (agent.type === "llm" && agent.config?.mcp_servers) {
+      return agent.config.mcp_servers.reduce(
+        (total, mcp) => total + (mcp.tools?.length || 0),
+        0
+      );
+    }
+    return 0;
+  };
+
+  const getSubAgents = () => {
+    if (agent.config?.sub_agents) {
+      return agent.config.sub_agents.length;
+    }
+    return 0;
+  };
+
+  const showAgentCard = () => {
+    if (agent.agent_card_url) {
+      setIsCardDialogOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <div className="space-y-4">
+        <div
+          className="bg-[#182724] rounded-lg overflow-hidden border border-[#1e3a36] shadow-lg"
+          style={{ backgroundColor: `${agentTypeInfo.color}15` }}
+        >
+          <div
+            className={cn(
+              "flex items-center gap-3 p-4 cursor-pointer transition-colors",
+              "hover:bg-opacity-80"
+            )}
+            style={{ backgroundColor: `${agentTypeInfo.color}20` }}
+          >
+            <div
+              className="p-2 rounded-full"
+              style={{ backgroundColor: agentTypeInfo.color }}
+            >
+              <IconComponent className="h-5 w-5 text-white" />
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center justify-between">
+                <h2 className="font-medium text-white text-lg">{agent.name}</h2>
+              </div>
+              <p className="text-xs text-emerald-400">{agentTypeInfo.label}</p>
+            </div>
+          </div>
+
+          <div className="p-4 space-y-4 border-t border-[#1e3a36] animate-in fade-in-50 duration-200">
+            {agent.description && (
+              <p className="text-neutral-300 text-sm leading-relaxed">
+                {agent.description}
+              </p>
+            )}
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="bg-[#141414] rounded p-3 flex flex-col justify-between">
+                <span className="text-xs text-neutral-500 mb-1">Model</span>
+                <div className="flex items-center gap-2">
+                  <User className="h-3.5 w-3.5 text-emerald-400" />
+                  <span className="text-sm text-white truncate">
+                    {getModelName()}
+                  </span>
+                </div>
+              </div>
+
+              <div className="bg-[#141414] rounded p-3 flex flex-col justify-between">
+                <span className="text-xs text-neutral-500 mb-1">Created at</span>
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-3.5 w-3.5 text-emerald-400" />
+                  <span className="text-sm text-white">{getCreatedAt()}</span>
+                </div>
+              </div>
+
+              {getTotalTools() > 0 && (
+                <div className="bg-[#141414] rounded p-3 flex flex-col justify-between">
+                  <span className="text-xs text-neutral-500 mb-1">Tools</span>
+                  <div className="flex items-center gap-2">
+                    <Code className="h-3.5 w-3.5 text-emerald-400" />
+                    <span className="text-sm text-white">
+                      {getTotalTools()}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              {getSubAgents() > 0 && (
+                <div className="bg-[#141414] rounded p-3 flex flex-col justify-between">
+                  <span className="text-xs text-neutral-500 mb-1">Sub-agents</span>
+                  <div className="flex items-center gap-2">
+                    <Tag className="h-3.5 w-3.5 text-emerald-400" />
+                    <span className="text-sm text-white">{getSubAgents()}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center justify-between bg-[#141414] rounded p-3">
+              <div className="flex items-center gap-2">
+                <Info className="h-3.5 w-3.5 text-emerald-400" />
+                <span className="text-xs text-neutral-400">Agent ID</span>
+              </div>
+              <span className="text-xs text-emerald-400 font-mono">
+                {agent.id}
+              </span>
+            </div>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full text-emerald-400 hover:text-emerald-300 hover:bg-[#182724] mt-2 border border-[#1e3a36]"
+              disabled={!agent.agent_card_url}
+              onClick={showAgentCard}
+            >
+              <ExternalLink className="h-4 w-4 mr-2" />
+              View Agent Card
+            </Button>
+          </div>
+        </div>
+
+        <div className="bg-[#182724] rounded-lg overflow-hidden border border-[#1e3a36] p-4">
+          <h3 className="text-sm font-medium text-white mb-2 flex items-center gap-2">
+            <Key className="h-4 w-4 text-emerald-400" />
+            Access Information
+          </h3>
+
+          <div className="space-y-2">
+            <div className="bg-[#141414] rounded p-3">
+              <div className="flex justify-between items-center mb-1">
+                <span className="text-xs text-neutral-500">API Key</span>
+                <Badge className="bg-emerald-900 text-emerald-400 text-xs">
+                  {isShared ? "Shared" : "Not Shared"}
+                </Badge>
+              </div>
+              <p className="text-xs font-mono text-emerald-400">
+                {isShared ? "Shared" : "Not Shared"}
+              </p>
+            </div>
+
+            <p className="text-xs text-neutral-500 mt-2">
+              This is a {isShared ? "shared" : "not shared"} API key. Be careful when sharing it with third
+              parties.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Dialog open={isCardDialogOpen} onOpenChange={setIsCardDialogOpen}>
+        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto bg-neutral-900 border-neutral-800 text-white [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <ExternalLink className="h-5 w-5 text-emerald-400" />
+              Agent Card
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="mt-4 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+            {agent.agent_card_url && (
+              <iframe
+                src={agent.agent_card_url}
+                className="w-full h-[50vh] border border-neutral-800 rounded-md [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+                style={{ scrollbarWidth: 'none' }}
+              />
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => window.open(agent.agent_card_url, "_blank")}
+              className="bg-neutral-800 border-neutral-700 text-neutral-300 hover:bg-neutral-700 hover:text-white"
+            >
+              <ExternalLink className="h-4 w-4 mr-2" />
+              Open in New Tab
+            </Button>
+            <Button
+              onClick={() => setIsCardDialogOpen(false)}
+              className="bg-emerald-500 text-white hover:bg-emerald-600"
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/frontend/app/shared-chat/components/SharedChatPanel.tsx b/frontend/app/shared-chat/components/SharedChatPanel.tsx
new file mode 100644
index 00000000..7549c585
--- /dev/null
+++ b/frontend/app/shared-chat/components/SharedChatPanel.tsx
@@ -0,0 +1,180 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/shared-chat/components/SharedChatPanel.tsx                       │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 14, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { MessageSquare, Loader2, Bot, User } from "lucide-react";
+import { ChatMessage as ChatMessageType } from "@/services/sessionService";
+import { ChatMessage } from "@/app/chat/components/ChatMessage";
+import { FileData } from "@/lib/file-utils";
+import { ChatInput } from "@/app/chat/components/ChatInput";
+
+interface FunctionMessageContent {
+  title: string;
+  content: string;
+  author?: string;
+}
+
+interface SharedChatPanelProps {
+  messages: ChatMessageType[];
+  isLoading: boolean;
+  isSending: boolean;
+  agentName?: string;
+  onSendMessage: (message: string, files?: FileData[]) => void;
+  getMessageText: (message: ChatMessageType) => string | FunctionMessageContent;
+  containsMarkdown: (text: string) => boolean;
+  sessionId?: string;
+}
+
+export function SharedChatPanel({
+  messages,
+  isLoading,
+  isSending,
+  agentName = "Shared Agent",
+  onSendMessage,
+  getMessageText,
+  containsMarkdown,
+  sessionId,
+}: SharedChatPanelProps) {
+  const [expandedFunctions, setExpandedFunctions] = useState<Record<string, boolean>>({});
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  };
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      setTimeout(scrollToBottom, 100);
+    }
+  }, [messages]);
+
+  const toggleFunctionExpansion = (messageId: string) => {
+    setExpandedFunctions((prev) => ({
+      ...prev,
+      [messageId]: !prev[messageId],
+    }));
+  };
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      <div 
+        ref={messagesContainerRef}
+        className="flex-1 overflow-y-auto p-4 bg-neutral-950"
+      >
+        {isLoading ? (
+          <div className="flex flex-col items-center justify-center h-full">
+            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center mb-4 relative">
+              <Loader2 className="h-6 w-6 text-white animate-spin" />
+              <div className="absolute inset-0 rounded-full blur-md bg-emerald-400/20 animate-pulse"></div>
+            </div>
+            <p className="text-neutral-400 mb-2">Loading conversation...</p>
+          </div>
+        ) : messages.length === 0 ? (
+          <div className="flex flex-col h-full items-center justify-center text-center p-6">
+            <div className="w-14 h-14 rounded-full bg-gradient-to-br from-emerald-500/20 to-emerald-700/20 flex items-center justify-center shadow-lg mb-5 border border-emerald-500/30">
+              <MessageSquare className="h-6 w-6 text-emerald-400" />
+            </div>
+            <h3 className="text-lg font-medium text-neutral-300 mb-2">
+              {`Chat with ${agentName}`}
+            </h3>
+            <p className="text-neutral-500 text-sm max-w-md">
+              Type your message below to start the conversation. This chat will help you interact with the shared agent and explore its capabilities.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4 w-full max-w-full">
+            {messages.map((message) => {
+              const messageContent = getMessageText(message);
+              const agentColor = message.author === "user" ? "bg-emerald-500" : "bg-gradient-to-br from-neutral-800 to-neutral-900";
+              const isExpanded = expandedFunctions[message.id] || false;
+
+              return (
+                <ChatMessage
+                  key={message.id}
+                  message={message}
+                  agentColor={agentColor}
+                  isExpanded={isExpanded}
+                  toggleExpansion={toggleFunctionExpansion}
+                  containsMarkdown={containsMarkdown}
+                  messageContent={messageContent}
+                  sessionId={sessionId}
+                />
+              );
+            })}
+
+            {isSending && (
+              <div className="flex justify-start">
+                <div className="flex gap-3 max-w-[80%]">
+                  <Avatar
+                    className="bg-gradient-to-br from-purple-600 to-purple-800 shadow-md border-0"
+                  >
+                    <AvatarFallback className="bg-transparent">
+                      <Bot className="h-4 w-4 text-white" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="rounded-lg p-3 bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700/50">
+                    <div className="flex space-x-2">
+                      <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce"></div>
+                      <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce [animation-delay:0.2s]"></div>
+                      <div className="h-2 w-2 rounded-full bg-emerald-400 animate-bounce [animation-delay:0.4s]"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="px-4 pt-4 pb-6 border-t border-neutral-700 bg-neutral-900">
+        {isSending && !isLoading && (
+          <div className="px-4 py-2 mb-3 rounded-lg bg-neutral-800/50 border border-neutral-700/30 text-sm text-neutral-400 flex items-center">
+            <div className="mr-2 relative">
+              <Loader2 className="h-3.5 w-3.5 animate-spin text-emerald-400" />
+              <div className="absolute inset-0 blur-sm bg-emerald-400/20 rounded-full animate-pulse"></div>
+            </div>
+            Agent is thinking...
+          </div>
+        )}
+        <div className="rounded-lg bg-neutral-800/20 border border-neutral-700/30 p-1">
+          <ChatInput
+            onSendMessage={onSendMessage}
+            isLoading={isSending || isLoading}
+            placeholder="Type your message..."
+            autoFocus={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/shared-chat/components/SharedSessionList.tsx b/frontend/app/shared-chat/components/SharedSessionList.tsx
new file mode 100644
index 00000000..469a162b
--- /dev/null
+++ b/frontend/app/shared-chat/components/SharedSessionList.tsx
@@ -0,0 +1,204 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/shared-chat/components/SharedSessionList.tsx                     │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Search, Plus, Loader2, ChevronLeft, ChevronRight, MessageSquare } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+interface SharedSession {
+  id: string;
+  update_time: string;
+  name?: string;
+}
+
+interface SharedSessionListProps {
+  sessions: SharedSession[];
+  selectedSession: string | null;
+  isLoading: boolean;
+  searchTerm: string;
+  isCollapsed: boolean;
+  setSearchTerm: (value: string) => void;
+  setSelectedSession: (value: string | null) => void;
+  onNewSession: () => void;
+  onToggleCollapse: () => void;
+  agentName?: string;
+}
+
+export function SharedSessionList({
+  sessions,
+  selectedSession,
+  isLoading,
+  searchTerm,
+  isCollapsed,
+  setSearchTerm,
+  setSelectedSession,
+  onNewSession,
+  onToggleCollapse,
+  agentName = "Shared Agent"
+}: SharedSessionListProps) {
+  const filteredSessions = sessions.filter((session) =>
+    session.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    (session.name && session.name.toLowerCase().includes(searchTerm.toLowerCase()))
+  );
+
+  const sortedSessions = [...filteredSessions].sort((a, b) => {
+    const updateTimeA = new Date(a.update_time).getTime();
+    const updateTimeB = new Date(b.update_time).getTime();
+    return updateTimeB - updateTimeA;
+  });
+
+  const formatDateTime = (dateTimeStr: string) => {
+    try {
+      const date = new Date(dateTimeStr);
+      const day = date.getDate().toString().padStart(2, "0");
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const year = date.getFullYear();
+      const hours = date.getHours().toString().padStart(2, "0");
+      const minutes = date.getMinutes().toString().padStart(2, "0");
+      return `${day}/${month}/${year} ${hours}:${minutes}`;
+    } catch (error) {
+      return "Invalid date";
+    }
+  };
+
+  const getDisplayName = (session: SharedSession) => {
+    if (session.name) return session.name;
+    return `Session ${session.id.substring(0, 8)}`;
+  };
+
+  if (isCollapsed) {
+    return (
+      <div className="w-10 border-r border-neutral-800 bg-neutral-900 flex flex-col items-center">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="mt-4 text-neutral-400 hover:text-emerald-400 hover:bg-neutral-800"
+          onClick={onToggleCollapse}
+        >
+          <ChevronRight className="h-5 w-5" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-64 border-r border-neutral-800 flex flex-col bg-neutral-900 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+      <div className="p-4 border-b border-neutral-800 flex items-center justify-between">
+        <div className="flex-1">
+          <h3 className="text-sm font-medium text-white flex items-center gap-2">
+            <div className="p-1 rounded-full bg-emerald-500/20">
+              <MessageSquare className="h-3.5 w-3.5 text-emerald-400" />
+            </div>
+            {agentName}
+          </h3>
+          <p className="text-xs text-neutral-400 mt-1">Shared Sessions</p>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-neutral-400 hover:text-emerald-400 hover:bg-neutral-800"
+          onClick={onToggleCollapse}
+        >
+          <ChevronLeft className="h-5 w-5" />
+        </Button>
+      </div>
+
+      <div className="p-4 border-b border-neutral-800">
+        <div className="flex items-center justify-between mb-4">
+          <Button
+            onClick={onNewSession}
+            className="bg-emerald-800 text-emerald-100 hover:bg-emerald-700 border-emerald-700 w-full"
+            size="sm"
+          >
+            <Plus className="h-4 w-4 mr-1" /> New Session
+          </Button>
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-neutral-500" />
+            <Input
+              placeholder="Search sessions..."
+              className="pl-9 bg-neutral-800 border-neutral-700 text-neutral-200 focus-visible:ring-emerald-500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+        {isLoading ? (
+          <div className="flex justify-center items-center h-24">
+            <Loader2 className="h-5 w-5 text-emerald-400 animate-spin" />
+          </div>
+        ) : sortedSessions.length > 0 ? (
+          <div className="px-4 pt-2 space-y-2">
+            {sortedSessions.map((session) => (
+              <div
+                key={session.id}
+                className={`p-3 rounded-md cursor-pointer transition-colors ${
+                  selectedSession === session.id
+                    ? "bg-emerald-800/20 border border-emerald-600/40"
+                    : "bg-neutral-800 hover:bg-neutral-700 border border-transparent"
+                }`}
+                onClick={() => setSelectedSession(session.id)}
+              >
+                <div className="flex items-center">
+                  <div className="w-2 h-2 rounded-full bg-emerald-500 mr-2"></div>
+                  <div className="text-neutral-200 font-medium truncate max-w-[180px]">
+                    {getDisplayName(session)}
+                  </div>
+                </div>
+                <div className="mt-1 flex items-center">
+                  <Badge className="bg-neutral-700 text-emerald-400 border-neutral-600 text-xs">
+                    Shared
+                  </Badge>
+                  <div className="text-xs text-neutral-500 ml-auto">
+                    {formatDateTime(session.update_time)}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : searchTerm ? (
+          <div className="text-center py-4 text-neutral-400">
+            No results found
+          </div>
+        ) : (
+          <div className="text-center py-4 text-neutral-400">
+            Click "New" to start
+          </div>
+        )}
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/app/shared-chat/page.tsx b/frontend/app/shared-chat/page.tsx
new file mode 100644
index 00000000..c4589a99
--- /dev/null
+++ b/frontend/app/shared-chat/page.tsx
@@ -0,0 +1,717 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: shared-chat/page.tsx                                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { MessageSquare, Loader2, ChevronRight, Info } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogHeader,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { getQueryParam } from "@/lib/utils";
+import { getSharedAgent } from "@/services/agentService";
+import { ChatMessage, ChatPart } from "@/services/sessionService";
+import { useAgentWebSocket } from "@/hooks/use-agent-webSocket";
+import { AgentInfo } from "./AgentInfo";
+import Image from "next/image";
+import { SharedSessionList } from "./components/SharedSessionList";
+import { SharedChatPanel } from "./components/SharedChatPanel";
+import { FileData } from "@/lib/file-utils";
+
+interface AttachedFile {
+  filename: string;
+  content_type: string;
+  data: string;
+  size: number;
+  preview_url?: string;
+}
+
+interface FunctionMessageContent {
+  title: string;
+  content: string;
+  author?: string;
+}
+
+interface SharedAgentInfo {
+  id: string;
+  apiKey: string;
+}
+
+interface SharedSession {
+  id: string;
+  update_time: string;
+  name?: string;
+  messages: ChatMessage[];
+}
+
+export default function SharedChat() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [agent, setAgent] = useState<any | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isSending, setIsSending] = useState(false);
+  const [agentParams, setAgentParams] = useState<SharedAgentInfo | null>(null);
+  const [isParamsDialogOpen, setIsParamsDialogOpen] = useState(false);
+  const [manualAgentId, setManualAgentId] = useState("");
+  const [manualApiKey, setManualApiKey] = useState("");
+  const [savedAgents, setSavedAgents] = useState<SharedAgentInfo[]>([]);
+  const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
+
+  const [sessions, setSessions] = useState<SharedSession[]>([]);
+  const [selectedSession, setSelectedSession] = useState<string | null>(null);
+  const [isSessionsCollapsed, setIsSessionsCollapsed] = useState(false);
+  const [sessionSearchTerm, setSessionSearchTerm] = useState("");
+
+  const { toast } = useToast();
+
+  const createNewSession = () => {
+    const sessionId = generateExternalId();
+    const newSession: SharedSession = {
+      id: sessionId,
+      update_time: new Date().toISOString(),
+      messages: [
+        {
+          id: `system-${Date.now()}`,
+          content: {
+            parts: [
+              {
+                text: "Welcome to this shared agent. Type a message to start chatting.",
+              },
+            ],
+            role: "system",
+          },
+          author: "assistant",
+          timestamp: Date.now() / 1000,
+        },
+      ],
+    };
+
+    setSessions((prev) => [...prev, newSession]);
+    setSelectedSession(sessionId);
+    setMessages(newSession.messages);
+
+    if (agentParams) {
+      saveSessionsToLocalStorage(agentParams.id, [...sessions, newSession]);
+    }
+  };
+
+  const saveSessionsToLocalStorage = (
+    agentId: string,
+    sessionsToSave: SharedSession[]
+  ) => {
+    if (typeof window !== "undefined") {
+      const key = `shared_agent_sessions_${agentId}`;
+      localStorage.setItem(key, JSON.stringify(sessionsToSave));
+    }
+  };
+
+  const loadSessionsFromLocalStorage = (agentId: string): SharedSession[] => {
+    if (typeof window !== "undefined") {
+      const key = `shared_agent_sessions_${agentId}`;
+      const sessionsJson = localStorage.getItem(key);
+      if (sessionsJson) {
+        try {
+          return JSON.parse(sessionsJson);
+        } catch (e) {
+          console.error("Error parsing sessions from localStorage:", e);
+        }
+      }
+    }
+    return [];
+  };
+
+  useEffect(() => {
+    const agentId = getQueryParam("agent");
+    const apiKey = getQueryParam("key");
+
+    console.log("[Shared Chat] Params from URL:", { agentId, apiKey });
+
+    if (agentId && apiKey) {
+      setAgentParams({ id: agentId, apiKey });
+
+      if (typeof window !== "undefined") {
+        localStorage.setItem("shared_agent_api_key", apiKey);
+        console.log("[Shared Chat] API key set in localStorage");
+
+        const savedAgentsJson = localStorage.getItem("shared_agents") || "[]";
+        try {
+          const savedAgents = JSON.parse(savedAgentsJson) as SharedAgentInfo[];
+          const existingAgent = savedAgents.find((a) => a.id === agentId);
+
+          if (!existingAgent) {
+            const updatedAgents = [...savedAgents, { id: agentId, apiKey }];
+            localStorage.setItem(
+              "shared_agents",
+              JSON.stringify(updatedAgents)
+            );
+            console.log("[Shared Chat] Agent added to saved agents");
+          }
+        } catch (e) {
+          console.error("Error processing saved agents:", e);
+        }
+      }
+    } else {
+      if (typeof window !== "undefined") {
+        const savedAgentsJson = localStorage.getItem("shared_agents") || "[]";
+        try {
+          const savedAgents = JSON.parse(savedAgentsJson) as SharedAgentInfo[];
+          setSavedAgents(savedAgents);
+
+          if (savedAgents.length > 0) {
+            setAgentParams(savedAgents[savedAgents.length - 1]);
+            localStorage.setItem(
+              "shared_agent_api_key",
+              savedAgents[savedAgents.length - 1].apiKey
+            );
+          } else {
+            setIsParamsDialogOpen(true);
+          }
+        } catch (e) {
+          console.error("Error processing saved agents:", e);
+          setIsParamsDialogOpen(true);
+        }
+      } else {
+        setIsParamsDialogOpen(true);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const loadAgentData = async () => {
+      if (!agentParams) return;
+
+      setIsLoading(true);
+      try {
+        localStorage.setItem("shared_agent_api_key", agentParams.apiKey);
+
+        try {
+          const response = await getSharedAgent(agentParams.id);
+          setAgent(response.data);
+        } catch (error) {
+          console.error("Error loading agent data:", error);
+          setAgent({
+            id: agentParams.id,
+            name: "Shared Agent",
+            description: "This agent is being accessed via a shared API key",
+            type: "llm",
+            model: "Unknown model",
+            created_at: new Date().toISOString(),
+          });
+        }
+
+        const loadedSessions = loadSessionsFromLocalStorage(agentParams.id);
+
+        if (loadedSessions.length > 0) {
+          setSessions(loadedSessions);
+          const latestSession = loadedSessions.sort(
+            (a, b) =>
+              new Date(b.update_time).getTime() -
+              new Date(a.update_time).getTime()
+          )[0];
+          setSelectedSession(latestSession.id);
+          setMessages(latestSession.messages);
+        } else {
+          createNewSession();
+        }
+      } catch (error) {
+        console.error("Error setting up shared agent:", error);
+        toast({
+          title: "Error",
+          description: "Unable to set up the shared agent.",
+          variant: "destructive",
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadAgentData();
+  }, [agentParams, toast]);
+
+  useEffect(() => {
+    if (selectedSession && messages.length > 0) {
+      setSessions((prev) => {
+        const updatedSessions = prev.map((session) => {
+          if (session.id === selectedSession) {
+            return {
+              ...session,
+              messages: messages,
+              update_time: new Date().toISOString(),
+            };
+          }
+          return session;
+        });
+
+        if (agentParams) {
+          saveSessionsToLocalStorage(agentParams.id, updatedSessions);
+        }
+
+        return updatedSessions;
+      });
+    }
+  }, [messages, selectedSession, agentParams]);
+
+  const handleSendMessage = async (messageText: string, files?: FileData[]) => {
+    if (
+      (!messageText.trim() && (!files || files.length === 0)) ||
+      !agentParams?.id ||
+      !selectedSession
+    )
+      return;
+
+    setIsSending(true);
+
+    const messageParts: ChatPart[] = [];
+
+    if (messageText.trim()) {
+      messageParts.push({ text: messageText });
+    }
+
+    if (files && files.length > 0) {
+      files.forEach((file) => {
+        messageParts.push({
+          inline_data: {
+            data: file.data,
+            mime_type: file.content_type,
+          },
+        });
+      });
+    }
+
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: `temp-${Date.now()}`,
+        content: {
+          parts: messageParts,
+          role: "user",
+        },
+        author: "user",
+        timestamp: Date.now() / 1000,
+      },
+    ]);
+
+    wsSendMessage(messageText, files);
+  };
+
+  const generateExternalId = () => {
+    const now = new Date();
+    return (
+      now.getFullYear().toString() +
+      (now.getMonth() + 1).toString().padStart(2, "0") +
+      now.getDate().toString().padStart(2, "0") +
+      now.getHours().toString().padStart(2, "0") +
+      now.getMinutes().toString().padStart(2, "0") +
+      now.getSeconds().toString().padStart(2, "0") +
+      now.getMilliseconds().toString().padStart(3, "0")
+    );
+  };
+
+  const containsMarkdown = (text: string): boolean => {
+    if (!text || text.length < 3) return false;
+
+    const markdownPatterns = [
+      /[*_]{1,2}[^*_]+[*_]{1,2}/, // bold/italic
+      /\[[^\]]+\]\([^)]+\)/, // links
+      /^#{1,6}\s/m, // headers
+      /^[-*+]\s/m, // unordered lists
+      /^[0-9]+\.\s/m, // ordered lists
+      /^>\s/m, // block quotes
+      /`[^`]+`/, // inline code
+      /```[\s\S]*?```/, // code blocks
+      /^\|(.+\|)+$/m, // tables
+      /!\[[^\]]*\]\([^)]+\)/, // images
+    ];
+
+    return markdownPatterns.some((pattern) => pattern.test(text));
+  };
+
+  const getMessageText = (
+    message: ChatMessage
+  ): string | FunctionMessageContent => {
+    const author = message.author;
+    const parts = message.content.parts;
+
+    if (!parts || parts.length === 0) return "Empty content";
+
+    const functionCallPart = parts.find(
+      (part) => part.functionCall || part.function_call
+    );
+    const functionResponsePart = parts.find(
+      (part) => part.functionResponse || part.function_response
+    );
+
+    const inlineDataParts = parts.filter((part) => part.inline_data);
+
+    if (functionCallPart) {
+      const funcCall =
+        functionCallPart.functionCall || functionCallPart.function_call || {};
+      const args = funcCall.args || {};
+      const name = funcCall.name || "unknown";
+      const id = funcCall.id || "no-id";
+
+      return {
+        author,
+        title: `📞 Function call: ${name}`,
+        content: `ID: ${id}
+Args: ${
+          Object.keys(args).length > 0
+            ? `\n${JSON.stringify(args, null, 2)}`
+            : "{}"
+        }`,
+      } as FunctionMessageContent;
+    }
+
+    if (functionResponsePart) {
+      const funcResponse =
+        functionResponsePart.functionResponse ||
+        functionResponsePart.function_response ||
+        {};
+      const response = funcResponse.response || {};
+      const name = funcResponse.name || "unknown";
+      const id = funcResponse.id || "no-id";
+      const status = response.status || "unknown";
+      const statusEmoji = status === "error" ? "❌" : "✅";
+
+      let resultText = "";
+      if (status === "error") {
+        resultText = `Error: ${response.error_message || "Unknown error"}`;
+      } else if (response.report) {
+        resultText = `Result: ${response.report}`;
+      } else if (response.result && response.result.content) {
+        const content = response.result.content;
+        if (Array.isArray(content) && content.length > 0 && content[0].text) {
+          try {
+            const textContent = content[0].text;
+            const parsedJson = JSON.parse(textContent);
+            resultText = `Result: \n${JSON.stringify(parsedJson, null, 2)}`;
+          } catch (e) {
+            resultText = `Result: ${content[0].text}`;
+          }
+        } else {
+          resultText = `Result:\n${JSON.stringify(response, null, 2)}`;
+        }
+      } else {
+        resultText = `Result:\n${JSON.stringify(response, null, 2)}`;
+      }
+
+      return {
+        author,
+        title: `${statusEmoji} Function response: ${name}`,
+        content: `ID: ${id}\n${resultText}`,
+      } as FunctionMessageContent;
+    }
+
+    if (parts.length === 1 && parts[0].text) {
+      return {
+        author,
+        content: parts[0].text,
+        title: "Message",
+      } as FunctionMessageContent;
+    }
+
+    const textParts = parts
+      .filter((part) => part.text)
+      .map((part) => part.text)
+      .filter((text) => text);
+
+    if (textParts.length > 0) {
+      return {
+        author,
+        content: textParts.join("\n\n"),
+        title: "Message",
+      } as FunctionMessageContent;
+    }
+
+    return "Empty content";
+  };
+
+  const onEvent = useCallback((event: any) => {
+    setMessages((prev) => [...prev, event]);
+  }, []);
+
+  const onTurnComplete = useCallback(() => {
+    setIsSending(false);
+  }, []);
+
+  const externalId = selectedSession || generateExternalId();
+
+  const { sendMessage: wsSendMessage, disconnect: _ } = useAgentWebSocket({
+    agentId: agentParams?.id || "",
+    externalId,
+    apiKey: agentParams?.apiKey,
+    onEvent,
+    onTurnComplete,
+  });
+
+  const handleManualConnect = () => {
+    if (manualAgentId && manualApiKey) {
+      const newAgent = { id: manualAgentId, apiKey: manualApiKey };
+      if (typeof window !== "undefined") {
+        const savedAgentsJson = localStorage.getItem("shared_agents") || "[]";
+        try {
+          const savedAgents = JSON.parse(savedAgentsJson) as SharedAgentInfo[];
+          const existingAgentIndex = savedAgents.findIndex(
+            (a) => a.id === manualAgentId
+          );
+
+          if (existingAgentIndex >= 0) {
+            savedAgents[existingAgentIndex] = newAgent;
+          } else {
+            savedAgents.push(newAgent);
+          }
+
+          localStorage.setItem("shared_agents", JSON.stringify(savedAgents));
+          setSavedAgents(savedAgents);
+        } catch (e) {
+          console.error("Error processing saved agents:", e);
+        }
+      }
+
+      setAgentParams(newAgent);
+      setIsParamsDialogOpen(false);
+    } else {
+      toast({
+        title: "Incomplete data",
+        description: "Please fill in the agent ID and API key.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const selectSavedAgent = (agent: SharedAgentInfo) => {
+    setAgentParams(agent);
+    setIsParamsDialogOpen(false);
+  };
+
+  const handleSessionSelect = (sessionId: string | null) => {
+    if (!sessionId) return;
+
+    // Encontre a sessão selecionada e carregue suas mensagens
+    const session = sessions.find((s) => s.id === sessionId);
+    if (session) {
+      setMessages(session.messages);
+      setSelectedSession(sessionId);
+    }
+  };
+
+  return (
+    <div className="flex h-screen max-h-screen bg-neutral-950">
+      <SharedSessionList
+        sessions={sessions}
+        selectedSession={selectedSession}
+        isLoading={isLoading}
+        searchTerm={sessionSearchTerm}
+        isCollapsed={isSessionsCollapsed}
+        setSearchTerm={setSessionSearchTerm}
+        setSelectedSession={handleSessionSelect}
+        onNewSession={createNewSession}
+        onToggleCollapse={() => setIsSessionsCollapsed(!isSessionsCollapsed)}
+        agentName={agent?.name || "Shared Agent"}
+      />
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {agent && (
+          <div className="p-4 border-b border-neutral-700 bg-neutral-900 flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <Image
+                src="https://evolution-api.com/files/evo/logo-evo-ai.svg"
+                alt="Evolution API"
+                width={60}
+                height={30}
+              />
+              <div className="h-10 w-px bg-neutral-800" />
+              <div
+                className="flex items-center gap-3 cursor-pointer hover:opacity-80 transition-opacity"
+                onClick={() => setIsInfoPanelOpen(!isInfoPanelOpen)}
+              >
+                <div className="p-2 rounded-full bg-emerald-500/20">
+                  <MessageSquare className="h-5 w-5 text-emerald-400" />
+                </div>
+                <div>
+                  <h1 className="text-lg font-medium text-white flex items-center gap-2">
+                    {agent.name}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 text-neutral-400 hover:text-emerald-400 p-0.5"
+                      onClick={() => setIsInfoPanelOpen(true)}
+                    >
+                      <Info className="h-4 w-4" />
+                    </Button>
+                  </h1>
+                  <p className="text-sm text-neutral-400">
+                    {agent.description?.length > 100
+                      ? `${agent.description.substring(0, 100)}...`
+                      : agent.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <Badge className="bg-emerald-500 text-white px-3 py-1 text-sm border-0">
+              Shared Agent
+            </Badge>
+          </div>
+        )}
+
+        {(selectedSession || agentParams) ? (
+          <SharedChatPanel
+            messages={messages}
+            isLoading={isLoading}
+            isSending={isSending}
+            agentName={agent?.name || "Shared Agent"}
+            onSendMessage={handleSendMessage}
+            getMessageText={getMessageText}
+            containsMarkdown={containsMarkdown}
+            sessionId={selectedSession || undefined}
+          />
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center text-center p-6 bg-neutral-950">
+            <div className="w-20 h-20 rounded-full bg-emerald-500/20 flex items-center justify-center mb-6 border border-emerald-500/30">
+              <MessageSquare className="h-10 w-10 text-emerald-400" />
+            </div>
+            <h2 className="text-2xl font-semibold text-white mb-3">
+              Welcome to Shared Chat
+            </h2>
+            <p className="text-neutral-400 mb-8 max-w-md">
+              To start, please enter an agent ID and API key
+            </p>
+            <Button
+              onClick={() => setIsParamsDialogOpen(true)}
+              className="bg-emerald-500 text-white hover:bg-emerald-600 px-6 py-6 h-auto rounded-xl"
+            >
+              Connect to Agent
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <Dialog open={isParamsDialogOpen} onOpenChange={setIsParamsDialogOpen}>
+        <DialogContent className="bg-neutral-900 border-neutral-800 text-white max-w-md">
+          <DialogHeader>
+            <div className="flex items-center gap-2 mb-1">
+              <div className="p-1.5 rounded-full bg-emerald-500/20">
+                <MessageSquare className="h-5 w-5 text-emerald-400" />
+              </div>
+              <DialogTitle className="text-xl font-medium">
+                Connect to Shared Agent
+              </DialogTitle>
+            </div>
+            <DialogDescription className="text-neutral-400">
+              Enter the agent ID and API key to connect
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <label className="text-sm text-neutral-300">Agent ID</label>
+              <Input
+                value={manualAgentId}
+                onChange={(e) => setManualAgentId(e.target.value)}
+                placeholder="Enter agent ID"
+                className="bg-neutral-800 border-neutral-700 text-white focus-visible:ring-emerald-500"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm text-neutral-300">API Key</label>
+              <Input
+                value={manualApiKey}
+                onChange={(e) => setManualApiKey(e.target.value)}
+                placeholder="Enter API key"
+                type="password"
+                className="bg-neutral-800 border-neutral-700 text-white focus-visible:ring-emerald-500"
+              />
+            </div>
+
+            {savedAgents.length > 0 && (
+              <div className="pt-2 border-t border-neutral-700">
+                <p className="text-sm text-neutral-300 mb-2">Or select a saved agent:</p>
+                <div className="space-y-2 max-h-32 overflow-y-auto">
+                  {savedAgents.map((agent) => (
+                    <Button
+                      key={agent.id}
+                      variant="outline"
+                      className="w-full justify-start text-left mb-1 bg-neutral-800 border-neutral-700 hover:bg-neutral-700 text-neutral-200"
+                      onClick={() => selectSavedAgent(agent)}
+                    >
+                      <div className="truncate">{agent.id}</div>
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsParamsDialogOpen(false)}
+              className="bg-neutral-800 border-neutral-700 text-neutral-300 hover:bg-neutral-700 hover:text-white"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleManualConnect}
+              disabled={!manualAgentId || !manualApiKey}
+              className="bg-emerald-500 text-white hover:bg-emerald-600"
+            >
+              Connect
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isInfoPanelOpen} onOpenChange={setIsInfoPanelOpen}>
+        <DialogContent className="bg-neutral-900 border-neutral-800 text-white max-w-3xl h-[80vh]">
+          <DialogHeader>
+            <div className="flex items-center gap-2">
+              <div className="p-1.5 rounded-full bg-emerald-500/20">
+                <Info className="h-5 w-5 text-emerald-400" />
+              </div>
+              <DialogTitle className="text-xl font-medium">
+                {agent?.name || "Shared Agent"} Information
+              </DialogTitle>
+            </div>
+          </DialogHeader>
+          
+          <div className="flex-1 overflow-y-auto mt-2">
+            {agent && <AgentInfo agent={agent} isShared={true} />}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/components.json b/frontend/components.json
new file mode 100644
index 00000000..d9ef0ae5
--- /dev/null
+++ b/frontend/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/frontend/components/ImpersonationBar.tsx b/frontend/components/ImpersonationBar.tsx
new file mode 100644
index 00000000..413627a8
--- /dev/null
+++ b/frontend/components/ImpersonationBar.tsx
@@ -0,0 +1,129 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/components/ImpersonationBar.tsx                                  │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import { useToast } from "@/hooks/use-toast";
+import { UserX } from "lucide-react";
+
+export default function ImpersonationBar() {
+  const [isImpersonating, setIsImpersonating] = useState(false);
+  const [clientName, setClientName] = useState("");
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const checkImpersonation = () => {
+    if (typeof window === 'undefined') return;
+    
+    const lsImpersonating = localStorage.getItem('isImpersonating') === 'true';
+    
+    const cookieImpersonating = document.cookie
+      .split('; ')
+      .find(row => row.startsWith('isImpersonating='))
+      ?.split('=')[1] === 'true';
+    
+    let name = localStorage.getItem('impersonatedClient') || '';
+    
+    if (!name) {
+      const clientNameCookie = document.cookie
+        .split('; ')
+        .find(row => row.startsWith('impersonatedClient='));
+      
+      if (clientNameCookie) {
+        name = decodeURIComponent(clientNameCookie.split('=')[1]);
+      }
+    }
+    
+    setIsImpersonating(lsImpersonating || cookieImpersonating);
+    setClientName(name);
+  };
+
+  useEffect(() => {
+    checkImpersonation();
+    
+    const intervalId = setInterval(checkImpersonation, 2000);
+    
+    window.addEventListener('storage', checkImpersonation);
+    
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener('storage', checkImpersonation);
+    };
+  }, []);
+
+  const handleExitImpersonation = () => {
+    const adminUserJson = localStorage.getItem('adminUser');
+    if (adminUserJson) {
+      localStorage.setItem('user', adminUserJson);
+      document.cookie = `user=${encodeURIComponent(adminUserJson)}; path=/; max-age=${60 * 60 * 24 * 7}`;
+      localStorage.removeItem('adminUser');
+    }
+    
+    localStorage.removeItem('isImpersonating');
+    localStorage.removeItem('impersonatedClient');
+    
+    document.cookie = 'isImpersonating=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+    document.cookie = 'impersonatedClient=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+    
+    const adminToken = localStorage.getItem('adminToken');
+    if (adminToken) {
+      document.cookie = `access_token=${adminToken}; path=/; max-age=${60 * 60 * 24 * 7}`;
+      localStorage.setItem('access_token', adminToken);
+      localStorage.removeItem('adminToken');
+    }
+    
+    toast({
+      title: "Admin mode restored",
+      description: "You are no longer impersonating a client",
+    });
+    
+    router.push('/clients');
+  };
+
+  if (!isImpersonating) return null;
+
+  return (
+    <div className="bg-[#a4fc9c] text-black py-2 px-4 sticky top-0 z-50">
+      <div className="container mx-auto flex justify-between items-center">
+        <p>
+          You are viewing as a client: <span className="font-bold">{clientName}</span>
+        </p>
+        <Button
+          onClick={handleExitImpersonation}
+          className="bg-black text-white hover:bg-neutral-800 flex items-center gap-2"
+        >
+          <UserX className="h-4 w-4" />
+          Back to admin
+        </Button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/components/sidebar.tsx b/frontend/components/sidebar.tsx
new file mode 100644
index 00000000..dd6ec895
--- /dev/null
+++ b/frontend/components/sidebar.tsx
@@ -0,0 +1,357 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /components/sidebar.tsx                                               │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  MessageSquare,
+  Grid3X3,
+  Server,
+  Users,
+  User,
+  Shield,
+  LogOut,
+  ChevronUp,
+  ChevronDown,
+  AlertCircle,
+  FileText,
+  ExternalLink,
+  ChevronsLeft,
+  ChevronsRight,
+  Menu,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const [logoutDialogOpen, setLogoutDialogOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const user = localStorage.getItem("user");
+      if (user) {
+        try {
+          const parsed = JSON.parse(user);
+          setIsAdmin(!!parsed.is_admin);
+        } catch {}
+      }
+
+      // Get saved sidebar state from localStorage
+      const savedCollapsedState = localStorage.getItem("sidebar-collapsed");
+      if (savedCollapsedState) {
+        setIsCollapsed(savedCollapsedState === "true");
+      }
+    }
+  }, []);
+
+  // Save collapsed state to localStorage when it changes
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("sidebar-collapsed", String(isCollapsed));
+    }
+  }, [isCollapsed]);
+
+  const menuItems = [
+    ...(!isAdmin
+      ? [
+          {
+            name: "Agents",
+            href: "/agents",
+            icon: Grid3X3,
+          },
+          {
+            name: "Chat",
+            href: "/chat",
+            icon: MessageSquare,
+          },
+          {
+            name: "Documentation",
+            href: "/documentation",
+            icon: FileText,
+          },
+        ]
+      : []),
+    ...(isAdmin
+      ? [
+          {
+            name: "MCP Servers",
+            href: "/mcp-servers",
+            icon: Server,
+          },
+          {
+            name: "Clients",
+            href: "/clients",
+            icon: Users,
+          },
+          {
+            name: "Documentation",
+            href: "/documentation",
+            icon: FileText,
+          },
+        ]
+      : []),
+  ];
+
+  const userMenuItems = [
+    {
+      name: "Profile",
+      href: "/profile",
+      icon: User,
+      onClick: () => {}
+    },
+    {
+      name: "Security",
+      href: "/security",
+      icon: Shield,
+      onClick: () => {}
+    },
+    {
+      name: "Logout",
+      href: "#",
+      icon: LogOut,
+      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault()
+        setLogoutDialogOpen(true)
+        setUserMenuOpen(false)
+      }
+    },
+  ];
+  
+  const handleLogout = () => {
+    setLogoutDialogOpen(false)
+    router.push("/logout")
+  }
+
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  return (
+    <div 
+      className={cn(
+        "bg-neutral-900 text-white flex flex-col h-full transition-all duration-300 ease-in-out border-r border-neutral-800", 
+        isCollapsed ? "w-16" : "w-56"
+      )}
+    >
+      <TooltipProvider delayDuration={300}>
+        <div className={cn("p-4 mb-6 flex items-center", isCollapsed ? "justify-center" : "justify-between")}>
+          <Link href="/">
+            {isCollapsed ? (
+              <div className="h-10 w-10 flex items-center justify-center bg-neutral-800/50 rounded-full p-1">
+                <Image
+                  src="https://evolution-api.com/files/evo/favicon.svg"
+                  alt="Evolution API"
+                  width={40}
+                  height={40}
+                />
+              </div>
+            ) : (
+              <Image
+                src="https://evolution-api.com/files/evo/logo-evo-ai.svg"
+                alt="Evolution API"
+                width={90}
+                height={40}
+                className="mt-2"
+              />
+            )}
+          </Link>
+          
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={toggleSidebar}
+                className="flex items-center justify-center p-1.5 rounded-full bg-neutral-800 text-neutral-400 hover:text-emerald-400 hover:bg-emerald-500/10 transition-colors"
+              >
+                {isCollapsed ? (
+                  <ChevronsRight className="h-4 w-4" />
+                ) : (
+                  <ChevronsLeft className="h-4 w-4" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="bg-neutral-800 text-white border-neutral-700">
+              {isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        <nav className="space-y-1.5 flex-1 px-2">
+          {menuItems.map((item) => {
+            const isActive = pathname === item.href || pathname.startsWith(item.href);
+            
+            return (
+              <Tooltip key={item.href}>
+                <TooltipTrigger asChild>
+                  <Link
+                    href={item.href}
+                    className={cn(
+                      "flex items-center gap-3 px-3 py-2.5 rounded-md transition-all",
+                      isCollapsed ? "justify-center" : "",
+                      isActive
+                        ? isCollapsed 
+                          ? "bg-emerald-500/20 text-emerald-400 border-0" 
+                          : "bg-emerald-500/10 text-emerald-400 border-l-2 border-emerald-500"
+                        : "text-neutral-400 hover:text-emerald-400 hover:bg-neutral-800"
+                    )}
+                  >
+                    <item.icon className={cn("flex-shrink-0", isActive ? "h-5 w-5 text-emerald-400" : "h-5 w-5")} />
+                    {!isCollapsed && <span className="font-medium">{item.name}</span>}
+                  </Link>
+                </TooltipTrigger>
+                {isCollapsed && (
+                  <TooltipContent side="right" className="bg-neutral-800 text-white border-neutral-700">
+                    {item.name}
+                  </TooltipContent>
+                )}
+              </Tooltip>
+            );
+          })}
+        </nav>
+
+        <div className={cn("border-t border-neutral-800 pt-4 mt-2 pb-4", isCollapsed ? "px-2" : "px-4")}>
+          <div className="mb-4 relative">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => !isCollapsed && setUserMenuOpen(!userMenuOpen)}
+                  className={cn(
+                    "w-full flex items-center transition-colors rounded-md px-3 py-2.5",
+                    isCollapsed ? "justify-center" : "justify-between",
+                    userMenuOpen
+                      ? "bg-emerald-500/10 text-emerald-400"
+                      : "text-neutral-400 hover:text-emerald-400 hover:bg-neutral-800"
+                  )}
+                >
+                  <div className={cn("flex items-center", isCollapsed ? "gap-0" : "gap-3")}>
+                    <User className={cn(userMenuOpen ? "text-emerald-400" : "text-neutral-400", "h-5 w-5")} />
+                    {!isCollapsed && <span className="font-medium">My Account</span>}
+                  </div>
+                  {!isCollapsed && (
+                    userMenuOpen ? (
+                      <ChevronUp className="h-4 w-4 text-emerald-400" />
+                    ) : (
+                      <ChevronDown className="h-4 w-4" />
+                    )
+                  )}
+                </button>
+              </TooltipTrigger>
+              {isCollapsed && (
+                <TooltipContent side="right" className="bg-neutral-800 text-white border-neutral-700">
+                  My Account
+                </TooltipContent>
+              )}
+            </Tooltip>
+
+            {userMenuOpen && !isCollapsed && (
+              <div className="absolute bottom-full left-0 w-full mb-1 bg-neutral-800 rounded-md overflow-hidden border border-neutral-700">
+                {userMenuItems.map((item) => {
+                  const isActive = pathname === item.href;
+
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      onClick={item.onClick}
+                      className={cn(
+                        "flex items-center gap-3 px-3 py-2.5 transition-colors",
+                        isActive
+                          ? "bg-emerald-500/10 text-emerald-400"
+                          : "text-neutral-400 hover:text-emerald-400 hover:bg-neutral-700"
+                      )}
+                    >
+                      <item.icon className={cn(isActive ? "text-emerald-400" : "", "h-5 w-5")} />
+                      <span className="font-medium">{item.name}</span>
+                    </Link>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {!isCollapsed && (
+            <>
+              <div className="text-sm text-emerald-400 font-medium">Evo AI</div>
+              <div className="text-xs text-neutral-500 mt-1">
+                © {new Date().getFullYear()} Evolution API
+              </div>
+            </>
+          )}
+        </div>
+      </TooltipProvider>
+      
+      <Dialog open={logoutDialogOpen} onOpenChange={setLogoutDialogOpen}>
+        <DialogContent className="bg-neutral-900 border-neutral-800 text-white">
+          <DialogHeader>
+            <div className="flex items-center gap-3">
+              <div className="p-1.5 rounded-full bg-orange-500/20">
+                <AlertCircle className="h-5 w-5 text-orange-500" />
+              </div>
+              <DialogTitle>Confirmation of Logout</DialogTitle>
+            </div>
+            <DialogDescription className="text-neutral-400">
+              Are you sure you want to logout?
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button 
+              variant="outline" 
+              onClick={() => setLogoutDialogOpen(false)}
+              className="bg-neutral-800 border-neutral-700 text-neutral-300 hover:bg-neutral-700 hover:text-white"
+            >
+              Cancel
+            </Button>
+            <Button 
+              onClick={handleLogout}
+              className="bg-emerald-500 text-white hover:bg-emerald-600"
+            >
+              Yes, logout
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/components/theme-provider.tsx b/frontend/components/theme-provider.tsx
new file mode 100644
index 00000000..58ee4243
--- /dev/null
+++ b/frontend/components/theme-provider.tsx
@@ -0,0 +1,39 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /components/theme-provider.tsx                                        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import * as React from "react";
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/frontend/components/toaster.tsx b/frontend/components/toaster.tsx
new file mode 100644
index 00000000..5fe41516
--- /dev/null
+++ b/frontend/components/toaster.tsx
@@ -0,0 +1,52 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /components/toaster.tsx                                               │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
+import { useToast } from "@/hooks/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props}>
+          <div className="grid gap-1">
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </div>
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/frontend/components/ui/accordion.tsx b/frontend/components/ui/accordion.tsx
new file mode 100644
index 00000000..24c788c2
--- /dev/null
+++ b/frontend/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/frontend/components/ui/alert-dialog.tsx b/frontend/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..25e7b474
--- /dev/null
+++ b/frontend/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/frontend/components/ui/alert.tsx b/frontend/components/ui/alert.tsx
new file mode 100644
index 00000000..41fa7e05
--- /dev/null
+++ b/frontend/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/frontend/components/ui/aspect-ratio.tsx b/frontend/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000..d6a5226f
--- /dev/null
+++ b/frontend/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/frontend/components/ui/avatar.tsx b/frontend/components/ui/avatar.tsx
new file mode 100644
index 00000000..51e507ba
--- /dev/null
+++ b/frontend/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx
new file mode 100644
index 00000000..15241a31
--- /dev/null
+++ b/frontend/components/ui/badge.tsx
@@ -0,0 +1,29 @@
+import type * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/components/ui/breadcrumb.tsx b/frontend/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000..60e6c96f
--- /dev/null
+++ b/frontend/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
new file mode 100644
index 00000000..36496a28
--- /dev/null
+++ b/frontend/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/frontend/components/ui/calendar.tsx b/frontend/components/ui/calendar.tsx
new file mode 100644
index 00000000..61d2b451
--- /dev/null
+++ b/frontend/components/ui/calendar.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx
new file mode 100644
index 00000000..f62edea5
--- /dev/null
+++ b/frontend/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/frontend/components/ui/carousel.tsx b/frontend/components/ui/carousel.tsx
new file mode 100644
index 00000000..ec505d00
--- /dev/null
+++ b/frontend/components/ui/carousel.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/frontend/components/ui/chart.tsx b/frontend/components/ui/chart.tsx
new file mode 100644
index 00000000..8620baa3
--- /dev/null
+++ b/frontend/components/ui/chart.tsx
@@ -0,0 +1,365 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/frontend/components/ui/checkbox.tsx b/frontend/components/ui/checkbox.tsx
new file mode 100644
index 00000000..5c40f159
--- /dev/null
+++ b/frontend/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/frontend/components/ui/collapsible.tsx b/frontend/components/ui/collapsible.tsx
new file mode 100644
index 00000000..9fa48946
--- /dev/null
+++ b/frontend/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/frontend/components/ui/command.tsx b/frontend/components/ui/command.tsx
new file mode 100644
index 00000000..59a26452
--- /dev/null
+++ b/frontend/components/ui/command.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/frontend/components/ui/context-menu.tsx b/frontend/components/ui/context-menu.tsx
new file mode 100644
index 00000000..93ef37ba
--- /dev/null
+++ b/frontend/components/ui/context-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/frontend/components/ui/dialog.tsx b/frontend/components/ui/dialog.tsx
new file mode 100644
index 00000000..01ff19c7
--- /dev/null
+++ b/frontend/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/frontend/components/ui/drawer.tsx b/frontend/components/ui/drawer.tsx
new file mode 100644
index 00000000..6a0ef53d
--- /dev/null
+++ b/frontend/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/frontend/components/ui/dropdown-menu.tsx b/frontend/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..0fc4c0e0
--- /dev/null
+++ b/frontend/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/frontend/components/ui/form.tsx b/frontend/components/ui/form.tsx
new file mode 100644
index 00000000..ce264aef
--- /dev/null
+++ b/frontend/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/frontend/components/ui/hover-card.tsx b/frontend/components/ui/hover-card.tsx
new file mode 100644
index 00000000..e54d91cf
--- /dev/null
+++ b/frontend/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/frontend/components/ui/input-otp.tsx b/frontend/components/ui/input-otp.tsx
new file mode 100644
index 00000000..f66fcfa0
--- /dev/null
+++ b/frontend/components/ui/input-otp.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx
new file mode 100644
index 00000000..68551b92
--- /dev/null
+++ b/frontend/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/frontend/components/ui/label.tsx b/frontend/components/ui/label.tsx
new file mode 100644
index 00000000..53418217
--- /dev/null
+++ b/frontend/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/frontend/components/ui/menubar.tsx b/frontend/components/ui/menubar.tsx
new file mode 100644
index 00000000..5586fa9b
--- /dev/null
+++ b/frontend/components/ui/menubar.tsx
@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}
diff --git a/frontend/components/ui/navigation-menu.tsx b/frontend/components/ui/navigation-menu.tsx
new file mode 100644
index 00000000..1419f566
--- /dev/null
+++ b/frontend/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/frontend/components/ui/pagination.tsx b/frontend/components/ui/pagination.tsx
new file mode 100644
index 00000000..ea40d196
--- /dev/null
+++ b/frontend/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/frontend/components/ui/popover.tsx b/frontend/components/ui/popover.tsx
new file mode 100644
index 00000000..a0ec48be
--- /dev/null
+++ b/frontend/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/frontend/components/ui/progress.tsx b/frontend/components/ui/progress.tsx
new file mode 100644
index 00000000..5c87ea48
--- /dev/null
+++ b/frontend/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/frontend/components/ui/radio-group.tsx b/frontend/components/ui/radio-group.tsx
new file mode 100644
index 00000000..e9bde179
--- /dev/null
+++ b/frontend/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/frontend/components/ui/resizable.tsx b/frontend/components/ui/resizable.tsx
new file mode 100644
index 00000000..f4bc5586
--- /dev/null
+++ b/frontend/components/ui/resizable.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/frontend/components/ui/scroll-area.tsx b/frontend/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..209b83cd
--- /dev/null
+++ b/frontend/components/ui/scroll-area.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
new file mode 100644
index 00000000..cbe5a36b
--- /dev/null
+++ b/frontend/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/frontend/components/ui/separator.tsx b/frontend/components/ui/separator.tsx
new file mode 100644
index 00000000..12d81c4a
--- /dev/null
+++ b/frontend/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/frontend/components/ui/sheet.tsx b/frontend/components/ui/sheet.tsx
new file mode 100644
index 00000000..a37f17ba
--- /dev/null
+++ b/frontend/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/frontend/components/ui/sidebar.tsx b/frontend/components/ui/sidebar.tsx
new file mode 100644
index 00000000..eeb2d7ae
--- /dev/null
+++ b/frontend/components/ui/sidebar.tsx
@@ -0,0 +1,763 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden md:block text-sidebar-foreground"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-[--skeleton-width]"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/frontend/components/ui/skeleton.tsx b/frontend/components/ui/skeleton.tsx
new file mode 100644
index 00000000..01b8b6d4
--- /dev/null
+++ b/frontend/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/frontend/components/ui/slider.tsx b/frontend/components/ui/slider.tsx
new file mode 100644
index 00000000..c31c2b3b
--- /dev/null
+++ b/frontend/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/frontend/components/ui/sonner.tsx b/frontend/components/ui/sonner.tsx
new file mode 100644
index 00000000..452f4d9f
--- /dev/null
+++ b/frontend/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/frontend/components/ui/switch.tsx b/frontend/components/ui/switch.tsx
new file mode 100644
index 00000000..8c464e46
--- /dev/null
+++ b/frontend/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/frontend/components/ui/table.tsx b/frontend/components/ui/table.tsx
new file mode 100644
index 00000000..7f3502f8
--- /dev/null
+++ b/frontend/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/frontend/components/ui/tabs.tsx b/frontend/components/ui/tabs.tsx
new file mode 100644
index 00000000..0c38131e
--- /dev/null
+++ b/frontend/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/frontend/components/ui/textarea.tsx b/frontend/components/ui/textarea.tsx
new file mode 100644
index 00000000..f0c9320d
--- /dev/null
+++ b/frontend/components/ui/textarea.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/frontend/components/ui/toast.tsx b/frontend/components/ui/toast.tsx
new file mode 100644
index 00000000..12aa4ff1
--- /dev/null
+++ b/frontend/components/ui/toast.tsx
@@ -0,0 +1,111 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 textt-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/frontend/components/ui/toaster.tsx b/frontend/components/ui/toaster.tsx
new file mode 100644
index 00000000..171beb46
--- /dev/null
+++ b/frontend/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/frontend/components/ui/toggle-group.tsx b/frontend/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..1c876bbe
--- /dev/null
+++ b/frontend/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/frontend/components/ui/toggle.tsx b/frontend/components/ui/toggle.tsx
new file mode 100644
index 00000000..c19bea37
--- /dev/null
+++ b/frontend/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/frontend/components/ui/tooltip.tsx b/frontend/components/ui/tooltip.tsx
new file mode 100644
index 00000000..30fc44d9
--- /dev/null
+++ b/frontend/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/frontend/components/ui/use-mobile.tsx b/frontend/components/ui/use-mobile.tsx
new file mode 100644
index 00000000..2b0fe1df
--- /dev/null
+++ b/frontend/components/ui/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/frontend/components/ui/use-toast.ts b/frontend/components/ui/use-toast.ts
new file mode 100644
index 00000000..b813213a
--- /dev/null
+++ b/frontend/components/ui/use-toast.ts
@@ -0,0 +1,179 @@
+"use client"
+
+import type React from "react"
+
+// Adapted from https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/use-toast.ts
+import { useState, useEffect } from "react"
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
+
+const TOAST_LIMIT = 5
+const TOAST_REMOVE_DELAY = 3000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: string
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: string
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case actionTypes.UPDATE_TOAST:
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      }
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        if (toastTimeouts.has(toastId)) {
+          clearTimeout(toastTimeouts.get(toastId))
+          toastTimeouts.delete(toastId)
+        }
+      } else {
+        for (const [id, timeout] of toastTimeouts.entries()) {
+          clearTimeout(timeout)
+          toastTimeouts.delete(id)
+        }
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = useState<State>(memoryState)
+
+  useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/frontend/contexts/DnDContext.tsx b/frontend/contexts/DnDContext.tsx
new file mode 100644
index 00000000..1af27050
--- /dev/null
+++ b/frontend/contexts/DnDContext.tsx
@@ -0,0 +1,68 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /contexts/DnDContext.tsx                                              │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import React, { createContext, useContext, useState } from "react";
+
+type DnDContextType = {
+  type: string | null;
+  pointerEvents: string;
+  setType: React.Dispatch<React.SetStateAction<string | null>>;
+  setPointerEvents: React.Dispatch<React.SetStateAction<string>>;
+};
+
+const DnDContext = createContext<DnDContextType>({
+  type: null,
+  pointerEvents: "none",
+  setType: () => {},
+  setPointerEvents: () => {},
+});
+
+interface DnDProviderProps {
+  children: React.ReactNode;
+}
+
+export const DnDProvider: React.FC<DnDProviderProps> = ({ children }) => {
+  const [type, setType] = useState<string | null>(null);
+  const [pointerEvents, setPointerEvents] = useState<string>("none");
+
+  return (
+    <DnDContext.Provider
+      value={{ type, setType, pointerEvents, setPointerEvents }}
+    >
+      {children}
+    </DnDContext.Provider>
+  );
+};
+
+export default DnDContext;
+
+export const useDnD = () => {
+  return useContext(DnDContext);
+};
diff --git a/frontend/contexts/NodeDataContext.tsx b/frontend/contexts/NodeDataContext.tsx
new file mode 100644
index 00000000..221fe18a
--- /dev/null
+++ b/frontend/contexts/NodeDataContext.tsx
@@ -0,0 +1,118 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /contexts/NodeDataContext.tsx                                         │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  ReactNode,
+} from "react";
+
+interface NodeData {
+  [key: string]: any;
+}
+
+interface NodeUploads {
+  [key: string]: any;
+}
+
+interface NodeDataContextProps {
+  nodeData: NodeData;
+  setNodeData: React.Dispatch<React.SetStateAction<NodeData>>;
+  showEdgeDeleteLabel: boolean;
+  setShowEdgeDeleteLabel: React.Dispatch<React.SetStateAction<boolean>>;
+  nodeUploads: NodeUploads;
+  setNodeUploads: React.Dispatch<React.SetStateAction<NodeUploads>>;
+  showUploadModal: boolean;
+  setShowUploadModal: React.Dispatch<React.SetStateAction<boolean>>;
+  currentUploadModalId: string | null;
+  setCurrentUploadModalId: React.Dispatch<React.SetStateAction<string | null>>;
+  currentUploadType: string;
+  setCurrentUploadType: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const NodeDataContext = createContext<NodeDataContextProps | undefined>(
+  undefined,
+);
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useNodeData = () => {
+  const context = useContext(NodeDataContext);
+  if (!context) {
+    throw new Error("useNodeData must be used within a NodeDataProvider");
+  }
+  return context;
+};
+
+interface NodeDataProviderProps {
+  children: ReactNode;
+}
+
+export const NodeDataProvider: React.FC<NodeDataProviderProps> = ({
+  children,
+}) => {
+  const [nodeData, setNodeData] = useState<NodeData>({});
+  const [nodeUploads, setNodeUploads] = useState<NodeUploads>({});
+
+  const [showEdgeDeleteLabel, setShowEdgeDeleteLabel] =
+    useState<boolean>(false);
+  const [showUploadModal, setShowUploadModal] = useState<boolean>(false);
+  const [currentUploadModalId, setCurrentUploadModalId] = useState<
+    string | null
+  >(null);
+  const [currentUploadType, setCurrentUploadType] = useState<string>("image");
+
+  useEffect(() => {
+    // You can add logic here if needed
+  }, [nodeData]);
+
+  return (
+    <NodeDataContext.Provider
+      value={{
+        nodeData,
+        setNodeData,
+        showEdgeDeleteLabel,
+        setShowEdgeDeleteLabel,
+        nodeUploads,
+        setNodeUploads,
+        showUploadModal,
+        setShowUploadModal,
+        currentUploadModalId,
+        setCurrentUploadModalId,
+        currentUploadType,
+        setCurrentUploadType,
+      }}
+    >
+      {children}
+    </NodeDataContext.Provider>
+  );
+};
diff --git a/frontend/contexts/SourceClickContext.tsx b/frontend/contexts/SourceClickContext.tsx
new file mode 100644
index 00000000..e9540888
--- /dev/null
+++ b/frontend/contexts/SourceClickContext.tsx
@@ -0,0 +1,65 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /contexts/SourceClickContext.tsx                                      │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client";
+
+import { Node } from "@xyflow/react";
+import React, { createContext, useState, useContext } from "react";
+
+interface SourceClickContextProps {
+  sourceClicked: Node | null;
+  setSourceClicked: React.Dispatch<React.SetStateAction<Node | null>>;
+}
+
+const SourceClickContext = createContext<SourceClickContextProps | undefined>(
+  undefined,
+);
+
+export const useSourceClick = () => {
+  const context = useContext(SourceClickContext);
+  if (!context) {
+    throw new Error("useSourceClick must be used within a SourceClickProvider");
+  }
+  return context;
+};
+
+interface SourceClickProviderProps {
+  children: React.ReactNode;
+}
+
+export const SourceClickProvider: React.FC<SourceClickProviderProps> = ({
+  children,
+}) => {
+  const [sourceClicked, setSourceClicked] = useState<Node | null>(null);
+
+  return (
+    <SourceClickContext.Provider value={{ sourceClicked, setSourceClicked }}>
+      {children}
+    </SourceClickContext.Provider>
+  );
+};
diff --git a/frontend/docker-compose.yml b/frontend/docker-compose.yml
new file mode 100644
index 00000000..dbbc7812
--- /dev/null
+++ b/frontend/docker-compose.yml
@@ -0,0 +1,15 @@
+version: '3.8'
+
+services:
+  frontend:
+    image: evoapicloud/evo-ai-frontend:latest
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NEXT_PUBLIC_API_URL=https://api-teste.evoapicloud.com
+    volumes:
+      - ./docker-entrypoint.sh:/docker-entrypoint.sh
+    restart: unless-stopped 
\ No newline at end of file
diff --git a/frontend/docker-entrypoint.sh b/frontend/docker-entrypoint.sh
new file mode 100755
index 00000000..1a35b68f
--- /dev/null
+++ b/frontend/docker-entrypoint.sh
@@ -0,0 +1,20 @@
+#!/bin/sh
+set -e
+
+# Diretório onde o arquivo __ENV.js será gerado
+ENV_FILE=/app/public/__ENV.js
+
+# Gerar arquivo __ENV.js com as variáveis de ambiente atuais
+echo "window.__ENV = {" > $ENV_FILE
+env | grep "^NEXT_PUBLIC_" | while read -r line; do
+  # Extrair nome e valor da variável
+  key=$(echo "$line" | cut -d '=' -f 1)
+  value=$(echo "$line" | cut -d '=' -f 2-)
+  
+  # Adicionar a variável ao arquivo __ENV.js
+  echo "  \"$key\": \"$value\"," >> $ENV_FILE
+done
+echo "};" >> $ENV_FILE
+
+# Iniciar a aplicação
+exec pnpm start 
\ No newline at end of file
diff --git a/frontend/docker_build.sh b/frontend/docker_build.sh
new file mode 100755
index 00000000..1dcc05cb
--- /dev/null
+++ b/frontend/docker_build.sh
@@ -0,0 +1,2 @@
+docker build -t atendai/evo-ai-frontend-cloud:latest .
+docker push atendai/evo-ai-frontend-cloud:latest
diff --git a/frontend/hooks/use-agent-webSocket.ts b/frontend/hooks/use-agent-webSocket.ts
new file mode 100644
index 00000000..6b3b8aa2
--- /dev/null
+++ b/frontend/hooks/use-agent-webSocket.ts
@@ -0,0 +1,165 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /hooks/use-agent-webSocket.ts                                         │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { getApiUrl } from "@/lib/env";
+import { useEffect, useRef, useCallback, useState } from "react";
+
+interface FileData {
+    filename: string;
+    content_type: string;
+    data: string;
+}
+
+interface UseAgentWebSocketProps {
+    agentId: string;
+    externalId: string;
+    jwt?: string;
+    apiKey?: string;
+    onEvent: (event: any) => void;
+    onTurnComplete?: () => void;
+}
+
+interface PendingMessageData {
+    message: string;
+    files?: FileData[];
+}
+
+export function useAgentWebSocket({
+    agentId,
+    externalId,
+    jwt,
+    apiKey,
+    onEvent,
+    onTurnComplete,
+}: UseAgentWebSocketProps) {
+    const wsRef = useRef<WebSocket | null>(null);
+    const [pendingMessage, setPendingMessage] = useState<PendingMessageData | null>(null);
+
+    const openWebSocket = useCallback(() => {
+        if (!agentId || !externalId || (!jwt && !apiKey)) {
+            return;
+        }
+        const apiUrl = getApiUrl();
+
+        const wsUrl = `${apiUrl?.replace("http", "ws").replace("https", "wss")}/api/v1/chat/ws/${agentId}/${externalId}`;
+        const ws = new WebSocket(wsUrl);
+        wsRef.current = ws;
+
+        ws.onopen = () => {
+            if (apiKey) {
+                ws.send(
+                    JSON.stringify({
+                        type: "authorization",
+                        api_key: apiKey,
+                    })
+                );
+            } else if (jwt) {
+                ws.send(
+                    JSON.stringify({
+                        type: "authorization",
+                        token: jwt,
+                    })
+                );
+            }
+
+            if (pendingMessage) {
+                if (pendingMessage.files && pendingMessage.files.length > 0) {
+                    ws.send(JSON.stringify({ 
+                        message: pendingMessage.message,
+                        files: pendingMessage.files 
+                    }));
+                } else {
+                    ws.send(JSON.stringify({ message: pendingMessage.message }));
+                }
+                setPendingMessage(null);
+            }
+        };
+
+        ws.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.message) {
+                    let eventObj = data.message;
+                    if (typeof data.message === "string" && data.message.trim() !== "") {
+                        try {
+                            eventObj = JSON.parse(data.message);
+                        } catch (e) {
+                            console.warn("[WebSocket] data.message is not valid JSON:", data.message);
+                        }
+                    }
+                    onEvent(eventObj);
+                }
+                if (data.turn_complete && onTurnComplete) {
+                    onTurnComplete();
+                }
+            } catch (err) {
+                console.error("[WebSocket] Error processing message:", err, event.data);
+            }
+        };
+
+        ws.onerror = (err) => {
+            console.error("[WebSocket] connection error:", err);
+        };
+
+        ws.onclose = (event) => {
+            console.warn("[WebSocket] connection closed:", event);
+        };
+    }, [agentId, externalId, jwt, apiKey, onEvent, onTurnComplete, pendingMessage]);
+
+    useEffect(() => {
+        openWebSocket();
+        return () => {
+            if (wsRef.current) {
+                wsRef.current.close();
+            }
+        };
+    }, [openWebSocket]);
+
+    const sendMessage = useCallback((msg: string, files?: FileData[]) => {
+        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+            if (files && files.length > 0) {
+                wsRef.current.send(JSON.stringify({ message: msg, files }));
+            } else {
+                wsRef.current.send(JSON.stringify({ message: msg }));
+            }
+        } else {
+            console.warn("[WebSocket] unable to send message, connection not open.");
+            setPendingMessage({ message: msg, files });
+            openWebSocket();
+        }
+    }, [openWebSocket]);
+
+    const disconnect = useCallback(() => {
+        if (wsRef.current) {
+            wsRef.current.close();
+            wsRef.current = null;
+        }
+    }, []);
+
+    return { sendMessage, disconnect };
+}
diff --git a/frontend/hooks/use-mobile.tsx b/frontend/hooks/use-mobile.tsx
new file mode 100644
index 00000000..1dd0c540
--- /dev/null
+++ b/frontend/hooks/use-mobile.tsx
@@ -0,0 +1,47 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /hooks/use-mobile.tsx                                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/frontend/hooks/use-toast.ts b/frontend/hooks/use-toast.ts
new file mode 100644
index 00000000..83101135
--- /dev/null
+++ b/frontend/hooks/use-toast.ts
@@ -0,0 +1,223 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /hooks/use-toast.ts                                                   │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 5
+const TOAST_REMOVE_DELAY = 3000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    clearTimeout(toastTimeouts.get(toastId))
+    toastTimeouts.delete(toastId)
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/frontend/middleware.ts b/frontend/middleware.ts
new file mode 100644
index 00000000..bdd98bbb
--- /dev/null
+++ b/frontend/middleware.ts
@@ -0,0 +1,84 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /middleware.ts                                                        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import { NextRequest, NextResponse } from 'next/server'
+
+const PUBLIC_PATHS = ['/login', '/security/verify-email', '/security/reset-password', '/shared-chat']
+const ADMIN_PATHS = ['/clients', '/mcp-servers']
+const CLIENT_PATHS = ['/agents', '/chat']
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl
+  const isPublic = PUBLIC_PATHS.some((path) => pathname.startsWith(path))
+  const isAdminPath = ADMIN_PATHS.some((path) => pathname.startsWith(path))
+  const isClientPath = CLIENT_PATHS.some((path) => pathname.startsWith(path))
+
+  const token = request.cookies.get('access_token')?.value
+  let isAdmin = false
+  let isImpersonating = false
+  
+  const userCookie = request.cookies.get('user')?.value
+  if (userCookie) {
+    try {
+      const user = JSON.parse(decodeURIComponent(userCookie))
+      isAdmin = !!user.is_admin
+    } catch {}
+  }
+  
+  isImpersonating = request.cookies.get('isImpersonating')?.value === 'true'
+  
+  if (!isImpersonating) {
+    const headers = request.headers
+    isImpersonating = headers.get('x-is-impersonating') === 'true'
+  }
+
+  if (isPublic && token) {
+    if (pathname.startsWith('/shared-chat')) {
+      return NextResponse.next()
+    }
+    return NextResponse.redirect(new URL('/', request.url))
+  }
+
+  if (!isPublic && !token) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
+
+  if (isAdminPath && !isAdmin) {
+    return NextResponse.redirect(new URL('/', request.url))
+  }
+
+  if (isClientPath && isAdmin && !isImpersonating) {
+    return NextResponse.redirect(new URL('/mcp-servers', request.url))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.svg).*)'],
+} 
\ No newline at end of file
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
new file mode 100644
index 00000000..f5cbc389
--- /dev/null
+++ b/frontend/next.config.mjs
@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+export default nextConfig
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 00000000..6d46f596
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,106 @@
+{
+  "name": "evo-ai-frontend",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "private": false,
+  "description": "Evo AI is an open-source platform for creating and managing AI agents, enabling integration with different AI models and services.",
+  "author": "Evolution API <contato@evolutionapi.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/EvolutionAPI/evo-ai-frontend.git"
+  },
+  "homepage": "https://github.com/EvolutionAPI/evo-ai-frontend",
+  "bugs": {
+    "url": "https://github.com/EvolutionAPI/evo-ai-frontend/issues"
+  },
+  "keywords": [
+    "ai",
+    "nextjs",
+    "react",
+    "frontend",
+    "open-source",
+    "evo-ai"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "latest",
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "latest",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "latest",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "latest",
+    "@radix-ui/react-tabs": "latest",
+    "@radix-ui/react-toast": "latest",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/uuid": "^10.0.0",
+    "@xyflow/react": "^12.6.0",
+    "ai": "latest",
+    "autoprefixer": "^10.4.20",
+    "axios": "^1.9.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.4",
+    "date-fns": "2.28.0",
+    "embla-carousel-react": "8.5.1",
+    "input-otp": "1.4.1",
+    "lucide-react": "^0.454.0",
+    "next": "15.2.4",
+    "next-runtime-env": "3.x",
+    "next-themes": "^0.4.4",
+    "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-code-blocks": "^0.1.6",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^18",
+    "react-hook-form": "^7.54.1",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^2.1.7",
+    "react-syntax-highlighter": "^15.6.1",
+    "recharts": "2.15.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.1.0",
+    "vaul": "^0.9.6",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5"
+  }
+}
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
new file mode 100644
index 00000000..13a45811
--- /dev/null
+++ b/frontend/pnpm-lock.yaml
@@ -0,0 +1,5765 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@ai-sdk/openai':
+        specifier: latest
+        version: 1.3.22(zod@3.24.4)
+      '@hookform/resolvers':
+        specifier: ^3.9.1
+        version: 3.10.0(react-hook-form@7.56.3(react@18.3.1))
+      '@radix-ui/react-accordion':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-alert-dialog':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-aspect-ratio':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-avatar':
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-checkbox':
+        specifier: latest
+        version: 1.3.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collapsible':
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-context-menu':
+        specifier: 2.2.4
+        version: 2.2.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: 2.1.4
+        version: 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-hover-card':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-label':
+        specifier: 2.1.1
+        version: 2.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-menubar':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-navigation-menu':
+        specifier: 1.2.3
+        version: 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popover':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-progress':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-radio-group':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-scroll-area':
+        specifier: latest
+        version: 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-select':
+        specifier: 2.1.4
+        version: 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-separator':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slider':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-switch':
+        specifier: latest
+        version: 1.2.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tabs':
+        specifier: latest
+        version: 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toast':
+        specifier: latest
+        version: 1.2.13(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle-group':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tooltip':
+        specifier: 1.1.6
+        version: 1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react-beautiful-dnd':
+        specifier: ^13.1.8
+        version: 13.1.8
+      '@types/uuid':
+        specifier: ^10.0.0
+        version: 10.0.0
+      '@xyflow/react':
+        specifier: ^12.6.0
+        version: 12.6.3(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      ai:
+        specifier: latest
+        version: 4.3.15(react@18.3.1)(zod@3.24.4)
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.21(postcss@8.5.3)
+      axios:
+        specifier: ^1.9.0
+        version: 1.9.0
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: 1.0.4
+        version: 1.0.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      date-fns:
+        specifier: 2.28.0
+        version: 2.28.0
+      embla-carousel-react:
+        specifier: 8.5.1
+        version: 8.5.1(react@18.3.1)
+      evo-ai-frontend:
+        specifier: 'file:'
+        version: file:(@opentelemetry/api@1.9.0)(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(postcss@8.5.3)(tailwindcss@3.4.17)
+      input-otp:
+        specifier: 1.4.1
+        version: 1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lucide-react:
+        specifier: ^0.454.0
+        version: 0.454.0(react@18.3.1)
+      next:
+        specifier: 15.2.4
+        version: 15.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-runtime-env:
+        specifier: 3.x
+        version: 3.3.0(next@15.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      next-themes:
+        specifier: ^0.4.4
+        version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react:
+        specifier: ^18
+        version: 18.3.1
+      react-beautiful-dnd:
+        specifier: ^13.1.1
+        version: 13.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-code-blocks:
+        specifier: ^0.1.6
+        version: 0.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-day-picker:
+        specifier: 8.10.1
+        version: 8.10.1(date-fns@2.28.0)(react@18.3.1)
+      react-dom:
+        specifier: ^18
+        version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.54.1
+        version: 7.56.3(react@18.3.1)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@18.3.21)(react@18.3.1)
+      react-resizable-panels:
+        specifier: ^2.1.7
+        version: 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-syntax-highlighter:
+        specifier: ^15.6.1
+        version: 15.6.1(react@18.3.1)
+      recharts:
+        specifier: 2.15.0
+        version: 2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+      sonner:
+        specifier: ^1.7.1
+        version: 1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwind-merge:
+        specifier: ^2.5.5
+        version: 2.6.0
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.17)
+      uuid:
+        specifier: ^11.1.0
+        version: 11.1.0
+      vaul:
+        specifier: ^0.9.6
+        version: 0.9.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      zod:
+        specifier: ^3.24.1
+        version: 3.24.4
+    devDependencies:
+      '@types/node':
+        specifier: ^22
+        version: 22.15.18
+      '@types/react':
+        specifier: ^18
+        version: 18.3.21
+      '@types/react-dom':
+        specifier: ^18
+        version: 18.3.7(@types/react@18.3.21)
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
+      postcss:
+        specifier: ^8
+        version: 8.5.3
+      tailwindcss:
+        specifier: ^3.4.17
+        version: 3.4.17
+      typescript:
+        specifier: ^5
+        version: 5.8.3
+
+packages:
+
+  '@ai-sdk/openai@1.3.22':
+    resolution: {integrity: sha512-QwA+2EkG0QyjVR+7h6FE7iOu2ivNqAVMm9UJZkVxxTk5OIq5fFJDTEI/zICEMuHImTTXR2JjsL6EirJ28Jc4cw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+
+  '@ai-sdk/provider-utils@2.2.8':
+    resolution: {integrity: sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.23.8
+
+  '@ai-sdk/provider@1.1.3':
+    resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
+    engines: {node: '>=18'}
+
+  '@ai-sdk/react@1.2.12':
+    resolution: {integrity: sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      zod: ^3.23.8
+    peerDependenciesMeta:
+      zod:
+        optional: true
+
+  '@ai-sdk/ui-utils@1.2.11':
+    resolution: {integrity: sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.23.8
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@babel/runtime@7.27.1':
+    resolution: {integrity: sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==}
+    engines: {node: '>=6.9.0'}
+
+  '@emnapi/runtime@1.4.3':
+    resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
+
+  '@emotion/is-prop-valid@1.2.2':
+    resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==}
+
+  '@emotion/memoize@0.8.1':
+    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
+
+  '@emotion/unitless@0.8.1':
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+
+  '@floating-ui/core@1.7.0':
+    resolution: {integrity: sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==}
+
+  '@floating-ui/dom@1.7.0':
+    resolution: {integrity: sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==}
+
+  '@floating-ui/react-dom@2.1.2':
+    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
+  '@hookform/resolvers@3.10.0':
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
+  '@img/sharp-darwin-arm64@0.33.5':
+    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.33.5':
+    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.33.5':
+    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.33.5':
+    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.33.5':
+    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.33.5':
+    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.33.5':
+    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-ia32@0.33.5':
+    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.33.5':
+    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@next/env@15.2.4':
+    resolution: {integrity: sha512-+SFtMgoiYP3WoSswuNmxJOCwi06TdWE733D+WPjpXIe4LXGULwEaofiiAy6kbS0+XjM5xF5n3lKuBwN2SnqD9g==}
+
+  '@next/swc-darwin-arm64@15.2.4':
+    resolution: {integrity: sha512-1AnMfs655ipJEDC/FHkSr0r3lXBgpqKo4K1kiwfUf3iE68rDFXZ1TtHdMvf7D0hMItgDZ7Vuq3JgNMbt/+3bYw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@15.2.4':
+    resolution: {integrity: sha512-3qK2zb5EwCwxnO2HeO+TRqCubeI/NgCe+kL5dTJlPldV/uwCnUgC7VbEzgmxbfrkbjehL4H9BPztWOEtsoMwew==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@15.2.4':
+    resolution: {integrity: sha512-HFN6GKUcrTWvem8AZN7tT95zPb0GUGv9v0d0iyuTb303vbXkkbHDp/DxufB04jNVD+IN9yHy7y/6Mqq0h0YVaQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@15.2.4':
+    resolution: {integrity: sha512-Oioa0SORWLwi35/kVB8aCk5Uq+5/ZIumMK1kJV+jSdazFm2NzPDztsefzdmzzpx5oGCJ6FkUC7vkaUseNTStNA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@15.2.4':
+    resolution: {integrity: sha512-yb5WTRaHdkgOqFOZiu6rHV1fAEK0flVpaIN2HB6kxHVSy/dIajWbThS7qON3W9/SNOH2JWkVCyulgGYekMePuw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@15.2.4':
+    resolution: {integrity: sha512-Dcdv/ix6srhkM25fgXiyOieFUkz+fOYkHlydWCtB0xMST6X9XYI3yPDKBZt1xuhOytONsIFJFB08xXYsxUwJLw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@15.2.4':
+    resolution: {integrity: sha512-dW0i7eukvDxtIhCYkMrZNQfNicPDExt2jPb9AZPpL7cfyUo7QSNl1DjsHjmmKp6qNAqUESyT8YFl/Aw91cNJJg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@15.2.4':
+    resolution: {integrity: sha512-SbnWkJmkS7Xl3kre8SdMF6F/XDh1DTFEhp0jRTj/uB8iPKoU2bb2NDfcu+iifv1+mxQEd1g2vvSxcZbXSKyWiQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@opentelemetry/api@1.9.0':
+    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
+    engines: {node: '>=8.0.0'}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.1':
+    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+
+  '@radix-ui/primitive@1.1.2':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+
+  '@radix-ui/react-accordion@1.2.2':
+    resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-alert-dialog@1.1.4':
+    resolution: {integrity: sha512-A6Kh23qZDLy3PSU4bh2UJZznOrUdHImIXqF8YtUa6CN73f8EOO9XlXSCd9IHyPvIquTaa/kwaSWzZTtUvgXVGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-arrow@1.1.1':
+    resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-aspect-ratio@1.1.1':
+    resolution: {integrity: sha512-kNU4FIpcFMBLkOUcgeIteH06/8JLBcYY6Le1iKenDGCYNYFX3TQqCZjzkOsz37h7r94/99GTb7YhEr98ZBJibw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.2':
+    resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.1':
+    resolution: {integrity: sha512-xTaLKAO+XXMPK/BpVTSaAAhlefmvMSACjIhK9mGsImvX2ljcTDm8VGR1CuS1uYcNdR5J+oiOhoJZc5un6bh3VQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.2':
+    resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.1':
+    resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.6':
+    resolution: {integrity: sha512-PbhRFK4lIEw9ADonj48tiYWzkllz81TM7KVYyyMMw2cwHO7D5h4XKEblL8NlaRisTK3QTe6tBEhDccFUryxHBQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context-menu@2.2.4':
+    resolution: {integrity: sha512-ap4wdGwK52rJxGkwukU1NrnEodsUFQIooANKu+ey7d6raQ2biTcEf8za1zr0mgFHieevRTB2nK4dJeN8pTAZGQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.4':
+    resolution: {integrity: sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.3':
+    resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.9':
+    resolution: {integrity: sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.4':
+    resolution: {integrity: sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.1':
+    resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.4':
+    resolution: {integrity: sha512-QSUUnRA3PQ2UhvoCv3eYvMnCAgGQW+sTu86QPuNb+ZMi+ZENd6UWpiXbcWDQ4AEaKF9KKpCHBeaJz9Rw6lRlaQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.1':
+    resolution: {integrity: sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.4':
+    resolution: {integrity: sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menubar@1.1.4':
+    resolution: {integrity: sha512-+KMpi7VAZuB46+1LD7a30zb5IxyzLgC8m8j42gk3N4TUCcViNQdX8FhoH1HDvYiA8quuqcek4R4bYpPn/SY1GA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.3':
+    resolution: {integrity: sha512-IQWAsQ7dsLIYDrn0WqPU+cdM7MONTv9nqrLVYoie3BPiabSfUVDe6Fr+oEt0Cofsr9ONDcDe9xhmJbL1Uq1yKg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.4':
+    resolution: {integrity: sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.1':
+    resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.3':
+    resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.8':
+    resolution: {integrity: sha512-hQsTUIn7p7fxCPvao/q6wpbxmCwgLrlz+nOrJgC+RwfZqWY/WN+UMqkXzrtKbPrF82P43eCTl3ekeKuyAQbFeg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.2':
+    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.4':
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.0.1':
+    resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.2':
+    resolution: {integrity: sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.1':
+    resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.2.2':
+    resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.1':
+    resolution: {integrity: sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.9':
+    resolution: {integrity: sha512-ZzrIFnMYHHCNqSNCsuN6l7wlewBEq0O0BCSBkabJMFXVO51LRUTq71gLP1UxFvmrXElqmPjA5VX7IqC9VpazAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.8':
+    resolution: {integrity: sha512-K5h1RkYA6M0Sn61BV5LQs686zqBsSC0sGzL4/Gw4mNnjzrQcGSc6YXfC6CRFNaGydSdv5+M8cb0eNsOGo0OXtQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.1.4':
+    resolution: {integrity: sha512-pOkb2u8KgO47j/h7AylCj7dJsm69BXcjkrvTqMptFqsE2i0p8lHkfgneXKjAgPzBMivnoMyt8o4KiV4wYzDdyQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.1':
+    resolution: {integrity: sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.2.2':
+    resolution: {integrity: sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.1.1':
+    resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.2':
+    resolution: {integrity: sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.2.4':
+    resolution: {integrity: sha512-yZCky6XZFnR7pcGonJkr9VyNRu46KcYAbyg1v/gVVCZUr8UJ4x+RpncC27hHtiZ15jC+3WS8Yg/JSgyIHnYYsQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.11':
+    resolution: {integrity: sha512-4FiKSVoXqPP/KfzlB7lwwqoFV6EPwkrrqGp9cUYXjwDYHhvpnqq79P+EPHKcdoTE7Rl8w/+6s9rTlsfXHES9GA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.13':
+    resolution: {integrity: sha512-e/e43mQAwgYs8BY4y9l99xTK6ig1bK2uXsFLOMn9IZ16lAgulSTsotcPHVT2ZlSb/ye6Sllq7IgyDB8dGhpeXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.1':
+    resolution: {integrity: sha512-OgDLZEA30Ylyz8YSXvnGqIHtERqnUt1KUYTKdw/y8u7Ci6zGiJfXc02jahmcSNK3YcErqioj/9flWC9S1ihfwg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.1':
+    resolution: {integrity: sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.1.6':
+    resolution: {integrity: sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.1.1':
+    resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.2':
+    resolution: {integrity: sha512-ORCmRUbNiZIv6uV5mhFrhsIKw4UX/N3syZtyqvry61tbGm4JlgQuSn0hk5TwCARsCjkcnuRkSdCE3xfb+ADHew==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
+  '@types/diff-match-patch@1.0.36':
+    resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.7':
+    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
+
+  '@types/hast@2.3.10':
+    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
+  '@types/hoist-non-react-statics@3.3.6':
+    resolution: {integrity: sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/node@22.15.18':
+    resolution: {integrity: sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==}
+
+  '@types/prop-types@15.7.14':
+    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
+
+  '@types/react-beautiful-dnd@13.1.8':
+    resolution: {integrity: sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==}
+
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
+  '@types/react-redux@7.1.34':
+    resolution: {integrity: sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==}
+
+  '@types/react-syntax-highlighter@15.5.13':
+    resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
+
+  '@types/react@18.3.21':
+    resolution: {integrity: sha512-gXLBtmlcRJeT09/sI4PxVwyrku6SaNUj/6cMubjE6T6XdY1fDmBL7r0nX0jbSZPU/Xr0KuwLLZh6aOYY5d91Xw==}
+
+  '@types/stylis@4.2.5':
+    resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/uuid@10.0.0':
+    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
+  '@xyflow/react@12.6.3':
+    resolution: {integrity: sha512-uZC/mkmNCPu6yJkgaxZQ939LRtUZSeB5yB7z1kkl/ivlYQp+bZnkNsE3CRsTSnWEj20Ic4r+FeIsmfnvSsDvZQ==}
+    peerDependencies:
+      react: '>=17'
+      react-dom: '>=17'
+
+  '@xyflow/system@0.0.60':
+    resolution: {integrity: sha512-vPewwUwxYfbt6+Q6uuWJAiJam6AfpqNEDsZVWZAH9XC4P644AIVlYbr/5OC6s6oQPvbGjCSTIksAuN+lBPHTgg==}
+
+  ai@4.3.15:
+    resolution: {integrity: sha512-TYKRzbWg6mx/pmTadlAEIhuQtzfHUV0BbLY72+zkovXwq/9xhcH24IlQmkyBpElK6/4ArS0dHdOOtR1jOPVwtg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      zod: ^3.23.8
+    peerDependenciesMeta:
+      react:
+        optional: true
+
+  ai@4.3.16:
+    resolution: {integrity: sha512-KUDwlThJ5tr2Vw0A1ZkbDKNME3wzWhuVfAOwIvFUzl1TPVDFAXDFTXio3p+jaKneB+dKNCvFFlolYmmgHttG1g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      zod: ^3.23.8
+    peerDependenciesMeta:
+      react:
+        optional: true
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  axios@1.9.0:
+    resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.24.5:
+    resolution: {integrity: sha512-FDToo4Wo82hIdgc1CQ+NQD0hEhmpPjrZ3hiUgwgOG6IuTdlpr8jdjyG24P6cNP1yJpTLzS5OcGgSw0xmDU1/Tw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  camelize@1.0.1:
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+
+  caniuse-lite@1.0.30001718:
+    resolution: {integrity: sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chalk@5.4.1:
+    resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cmdk@1.0.4:
+    resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  comma-separated-tokens@1.0.8:
+    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  css-box-model@1.2.1:
+    resolution: {integrity: sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==}
+
+  css-color-keywords@1.0.0:
+    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
+    engines: {node: '>=4'}
+
+  css-to-react-native@3.2.0:
+    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  date-fns@2.28.0:
+    resolution: {integrity: sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==}
+    engines: {node: '>=0.11'}
+
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  decode-named-character-reference@1.1.0:
+    resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  diff-match-patch@1.0.5:
+    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  electron-to-chromium@1.5.154:
+    resolution: {integrity: sha512-G4VCFAyKbp1QJ+sWdXYIRYsPGvlV5sDACfCmoMFog3rjm1syLhI41WXm/swZypwCIWIm4IFLWzHY14joWMQ5Fw==}
+
+  embla-carousel-react@8.5.1:
+    resolution: {integrity: sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.5.1:
+    resolution: {integrity: sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==}
+    peerDependencies:
+      embla-carousel: 8.5.1
+
+  embla-carousel@8.5.1:
+    resolution: {integrity: sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  'evo-ai-frontend@file:':
+    resolution: {directory: '', type: directory}
+    engines: {node: '>=18'}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
+    engines: {node: '>=6.0.0'}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fault@1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    engines: {node: '>= 6'}
+
+  format@0.2.2:
+    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+    engines: {node: '>=0.4.x'}
+
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-parse-selector@2.2.5:
+    resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hastscript@6.0.0:
+    resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
+
+  highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+
+  highlightjs-vue@1.0.0:
+    resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==}
+
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
+  input-otp@1.4.1:
+    resolution: {integrity: sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-alphabetical@1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-decimal@1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hexadecimal@1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+
+  jsondiffpatch@0.6.0:
+    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lowlight@1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lucide-react@0.454.0:
+    resolution: {integrity: sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  next-runtime-env@3.3.0:
+    resolution: {integrity: sha512-JgKVnog9mNbjbjH9csVpMnz2tB2cT5sLF+7O47i6Ze/s/GoiKdV7dHhJHk1gwXpo6h5qPj5PTzryldtSjvrHuQ==}
+    peerDependencies:
+      next: ^14
+      react: ^18
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  next@15.2.4:
+    resolution: {integrity: sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  parse-entities@2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.3:
+    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prismjs@1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  property-information@5.6.0:
+    resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
+
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  raf-schd@4.0.3:
+    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
+
+  react-beautiful-dnd@13.1.1:
+    resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==}
+    deprecated: 'react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672'
+    peerDependencies:
+      react: ^16.8.5 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
+
+  react-code-blocks@0.1.6:
+    resolution: {integrity: sha512-ENNuxG07yO+OuX1ChRje3ieefPRz6yrIpHmebQlaFQgzcAHbUfVeTINpOpoI9bSRSObeYo/OdHsporeToZ7fcg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>=16'
+
+  react-day-picker@8.10.1:
+    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    peerDependencies:
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react-hook-form@7.56.3:
+    resolution: {integrity: sha512-IK18V6GVbab4TAo1/cz3kqajxbDPGofdF0w7VHdCo0Nt8PrPlOZcuuDq9YYIV1BtjcX78x0XsldbQRQnQXWXmw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-markdown@10.1.0:
+    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
+  react-redux@7.2.9:
+    resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
+    peerDependencies:
+      react: ^16.8.3 || ^17 || ^18
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.6.3:
+    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-resizable-panels@2.1.9:
+    resolution: {integrity: sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-syntax-highlighter@15.6.1:
+    resolution: {integrity: sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==}
+    peerDependencies:
+      react: '>= 0.14.0'
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.15.0:
+    resolution: {integrity: sha512-cIvMxDfpAmqAmVgc4yb7pgm/O1tmmkl/CjrvXuW+62/+7jj/iF9Ykm+hb/UJt42TREHMyd3gb+pkgoa2MxgDIw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  redux@4.2.1:
+    resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
+
+  refractor@3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+  secure-json-parse@2.7.0:
+    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
+
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+
+  sharp@0.33.5:
+    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
+  sonner@1.7.4:
+    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  space-separated-tokens@1.1.5:
+    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  style-to-js@1.1.16:
+    resolution: {integrity: sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==}
+
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
+  styled-components@6.1.18:
+    resolution: {integrity: sha512-Mvf3gJFzZCkhjY2Y/Fx9z1m3dxbza0uI9H1CbNZm/jSHCojzJhQ0R7bByrlFJINnMzz/gPulpoFFGymNwrsMcw==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      react: '>= 16.8.0'
+      react-dom: '>= 16.8.0'
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  stylis@4.3.2:
+    resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
+
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  swr@2.3.3:
+    resolution: {integrity: sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@3.4.17:
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  throttleit@2.1.0:
+    resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
+    engines: {node: '>=18'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-memo-one@1.1.3:
+    resolution: {integrity: sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
+  vaul@0.9.9:
+    resolution: {integrity: sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
+  yaml@2.8.0:
+    resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  zod-to-json-schema@3.24.5:
+    resolution: {integrity: sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==}
+    peerDependencies:
+      zod: ^3.24.1
+
+  zod@3.24.4:
+    resolution: {integrity: sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==}
+
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@ai-sdk/openai@1.3.22(zod@3.24.4)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
+      zod: 3.24.4
+
+  '@ai-sdk/provider-utils@2.2.8(zod@3.24.4)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      nanoid: 3.3.11
+      secure-json-parse: 2.7.0
+      zod: 3.24.4
+
+  '@ai-sdk/provider@1.1.3':
+    dependencies:
+      json-schema: 0.4.0
+
+  '@ai-sdk/react@1.2.12(react@18.3.1)(zod@3.24.4)':
+    dependencies:
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.4)
+      react: 18.3.1
+      swr: 2.3.3(react@18.3.1)
+      throttleit: 2.1.0
+    optionalDependencies:
+      zod: 3.24.4
+
+  '@ai-sdk/ui-utils@1.2.11(zod@3.24.4)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
+      zod: 3.24.4
+      zod-to-json-schema: 3.24.5(zod@3.24.4)
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@babel/runtime@7.27.1': {}
+
+  '@emnapi/runtime@1.4.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emotion/is-prop-valid@1.2.2':
+    dependencies:
+      '@emotion/memoize': 0.8.1
+
+  '@emotion/memoize@0.8.1': {}
+
+  '@emotion/unitless@0.8.1': {}
+
+  '@floating-ui/core@1.7.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/dom@1.7.0':
+    dependencies:
+      '@floating-ui/core': 1.7.0
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@floating-ui/utils@0.2.9': {}
+
+  '@hookform/resolvers@3.10.0(react-hook-form@7.56.3(react@18.3.1))':
+    dependencies:
+      react-hook-form: 7.56.3(react@18.3.1)
+
+  '@img/sharp-darwin-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.0.5
+    optional: true
+
+  '@img/sharp-linux-s390x@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-wasm32@0.33.5':
+    dependencies:
+      '@emnapi/runtime': 1.4.3
+    optional: true
+
+  '@img/sharp-win32-ia32@0.33.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.33.5':
+    optional: true
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@next/env@15.2.4': {}
+
+  '@next/swc-darwin-arm64@15.2.4':
+    optional: true
+
+  '@next/swc-darwin-x64@15.2.4':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@15.2.4':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@15.2.4':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@15.2.4':
+    optional: true
+
+  '@next/swc-linux-x64-musl@15.2.4':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@15.2.4':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@15.2.4':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@opentelemetry/api@1.9.0': {}
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@radix-ui/number@1.1.0': {}
+
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.2': {}
+
+  '@radix-ui/react-accordion@1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collapsible': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-alert-dialog@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-arrow@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-aspect-ratio@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-avatar@1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-checkbox@1.3.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-collapsible@1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-collection@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-collection@1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-context-menu@2.2.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-context@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-dialog@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.21)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-direction@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-direction@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-dismissable-layer@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-dropdown-menu@2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-hover-card@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-id@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-id@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-label@2.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-menu@2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.21)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-menubar@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-navigation-menu@1.2.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-popover@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.21)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-popper@1.2.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/rect': 1.1.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-portal@1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-portal@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-primitive@2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-primitive@2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.2(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-progress@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-radio-group@1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-roving-focus@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-roving-focus@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-scroll-area@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-select@2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.21)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-separator@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-slider@1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-slot@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-slot@1.2.2(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-switch@1.2.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-tabs@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-toast@1.2.13(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-toggle-group@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-toggle@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-tooltip@1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.3.21)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  '@radix-ui/react-visually-hidden@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/react-visually-hidden@1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
+  '@radix-ui/rect@1.1.0': {}
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/diff-match-patch@1.0.36': {}
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.7
+
+  '@types/estree@1.0.7': {}
+
+  '@types/hast@2.3.10':
+    dependencies:
+      '@types/unist': 2.0.11
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/hoist-non-react-statics@3.3.6':
+    dependencies:
+      '@types/react': 18.3.21
+      hoist-non-react-statics: 3.3.2
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/ms@2.1.0': {}
+
+  '@types/node@22.15.18':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/prop-types@15.7.14': {}
+
+  '@types/react-beautiful-dnd@13.1.8':
+    dependencies:
+      '@types/react': 18.3.21
+
+  '@types/react-dom@18.3.7(@types/react@18.3.21)':
+    dependencies:
+      '@types/react': 18.3.21
+
+  '@types/react-redux@7.1.34':
+    dependencies:
+      '@types/hoist-non-react-statics': 3.3.6
+      '@types/react': 18.3.21
+      hoist-non-react-statics: 3.3.2
+      redux: 4.2.1
+
+  '@types/react-syntax-highlighter@15.5.13':
+    dependencies:
+      '@types/react': 18.3.21
+
+  '@types/react@18.3.21':
+    dependencies:
+      '@types/prop-types': 15.7.14
+      csstype: 3.1.3
+
+  '@types/stylis@4.2.5': {}
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/uuid@10.0.0': {}
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@xyflow/react@12.6.3(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@xyflow/system': 0.0.60
+      classcat: 5.0.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.7(@types/react@18.3.21)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+
+  '@xyflow/system@0.0.60':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
+  ai@4.3.15(react@18.3.1)(zod@3.24.4):
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
+      '@ai-sdk/react': 1.2.12(react@18.3.1)(zod@3.24.4)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.4)
+      '@opentelemetry/api': 1.9.0
+      jsondiffpatch: 0.6.0
+      zod: 3.24.4
+    optionalDependencies:
+      react: 18.3.1
+
+  ai@4.3.16(react@18.3.1)(zod@3.24.4):
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
+      '@ai-sdk/react': 1.2.12(react@18.3.1)(zod@3.24.4)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.4)
+      '@opentelemetry/api': 1.9.0
+      jsondiffpatch: 0.6.0
+      zod: 3.24.4
+    optionalDependencies:
+      react: 18.3.1
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.1.0: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.1: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@5.0.2: {}
+
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.8.1
+
+  asynckit@0.4.0: {}
+
+  autoprefixer@10.4.21(postcss@8.5.3):
+    dependencies:
+      browserslist: 4.24.5
+      caniuse-lite: 1.0.30001718
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.3
+      postcss-value-parser: 4.2.0
+
+  axios@1.9.0:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.2
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  bail@2.0.2: {}
+
+  balanced-match@1.0.2: {}
+
+  binary-extensions@2.3.0: {}
+
+  brace-expansion@2.0.1:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.24.5:
+    dependencies:
+      caniuse-lite: 1.0.30001718
+      electron-to-chromium: 1.5.154
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.24.5)
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  camelcase-css@2.0.1: {}
+
+  camelize@1.0.1: {}
+
+  caniuse-lite@1.0.30001718: {}
+
+  ccount@2.0.1: {}
+
+  chalk@5.4.1: {}
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@1.1.4: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@1.2.4: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@1.1.4: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  classcat@5.0.5: {}
+
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
+  cmdk@1.0.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.5.0(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    optional: true
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    optional: true
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comma-separated-tokens@1.0.8: {}
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@4.1.1: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  css-box-model@1.2.1:
+    dependencies:
+      tiny-invariant: 1.3.3
+
+  css-color-keywords@1.0.0: {}
+
+  css-to-react-native@3.2.0:
+    dependencies:
+      camelize: 1.0.1
+      css-color-keywords: 1.0.0
+      postcss-value-parser: 4.2.0
+
+  cssesc@3.0.0: {}
+
+  csstype@3.1.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  date-fns@2.28.0: {}
+
+  debug@4.4.1:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js-light@2.5.1: {}
+
+  decode-named-character-reference@1.1.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  delayed-stream@1.0.0: {}
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.0.4:
+    optional: true
+
+  detect-node-es@1.1.0: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  didyoumean@1.2.2: {}
+
+  diff-match-patch@1.0.5: {}
+
+  dlv@1.1.3: {}
+
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.27.1
+      csstype: 3.1.3
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  eastasianwidth@0.2.0: {}
+
+  electron-to-chromium@1.5.154: {}
+
+  embla-carousel-react@8.5.1(react@18.3.1):
+    dependencies:
+      embla-carousel: 8.5.1
+      embla-carousel-reactive-utils: 8.5.1(embla-carousel@8.5.1)
+      react: 18.3.1
+
+  embla-carousel-reactive-utils@8.5.1(embla-carousel@8.5.1):
+    dependencies:
+      embla-carousel: 8.5.1
+
+  embla-carousel@8.5.1: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  eventemitter3@4.0.7: {}
+
+  evo-ai-frontend@file:(@opentelemetry/api@1.9.0)(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(postcss@8.5.3)(tailwindcss@3.4.17):
+    dependencies:
+      '@ai-sdk/openai': 1.3.22(zod@3.24.4)
+      '@hookform/resolvers': 3.10.0(react-hook-form@7.56.3(react@18.3.1))
+      '@radix-ui/react-accordion': 1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-alert-dialog': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-aspect-ratio': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-avatar': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-checkbox': 1.3.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collapsible': 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-context-menu': 2.2.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dropdown-menu': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-hover-card': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-label': 2.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-menubar': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-navigation-menu': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popover': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-progress': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-radio-group': 1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-scroll-area': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-select': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-separator': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slider': 1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-switch': 1.2.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tabs': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toast': 1.2.13(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle-group': 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tooltip': 1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react-beautiful-dnd': 13.1.8
+      '@types/uuid': 10.0.0
+      '@xyflow/react': 12.6.3(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      ai: 4.3.16(react@18.3.1)(zod@3.24.4)
+      autoprefixer: 10.4.21(postcss@8.5.3)
+      axios: 1.9.0
+      class-variance-authority: 0.7.1
+      clsx: 2.1.1
+      cmdk: 1.0.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      date-fns: 2.28.0
+      embla-carousel-react: 8.5.1(react@18.3.1)
+      input-otp: 1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lucide-react: 0.454.0(react@18.3.1)
+      next: 15.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-runtime-env: 3.3.0(next@15.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      next-themes: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-beautiful-dnd: 13.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-code-blocks: 0.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-day-picker: 8.10.1(date-fns@2.28.0)(react@18.3.1)
+      react-dom: 18.3.1(react@18.3.1)
+      react-hook-form: 7.56.3(react@18.3.1)
+      react-markdown: 10.1.0(@types/react@18.3.21)(react@18.3.1)
+      react-resizable-panels: 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-syntax-highlighter: 15.6.1(react@18.3.1)
+      recharts: 2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      remark-gfm: 4.0.1
+      sonner: 1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwind-merge: 2.6.0
+      tailwindcss-animate: 1.0.7(tailwindcss@3.4.17)
+      uuid: 11.1.0
+      vaul: 0.9.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      zod: 3.24.4
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@opentelemetry/api'
+      - '@playwright/test'
+      - '@types/react'
+      - '@types/react-dom'
+      - babel-plugin-macros
+      - babel-plugin-react-compiler
+      - debug
+      - immer
+      - postcss
+      - react-native
+      - sass
+      - supports-color
+      - tailwindcss
+
+  extend@3.0.2: {}
+
+  fast-equals@5.2.2: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fault@1.0.4:
+    dependencies:
+      format: 0.2.2
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  follow-redirects@1.15.9: {}
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  form-data@4.0.2:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      mime-types: 2.1.35
+
+  format@0.2.2: {}
+
+  fraction.js@4.3.7: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-nonce@1.0.1: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  gopd@1.2.0: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  hast-util-parse-selector@2.2.5: {}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.7
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.16
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hastscript@6.0.0:
+    dependencies:
+      '@types/hast': 2.3.10
+      comma-separated-tokens: 1.0.8
+      hast-util-parse-selector: 2.2.5
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+
+  highlight.js@10.7.3: {}
+
+  highlightjs-vue@1.0.0: {}
+
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
+  html-url-attributes@3.0.1: {}
+
+  inline-style-parser@0.2.4: {}
+
+  input-otp@1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  internmap@2.0.3: {}
+
+  is-alphabetical@1.0.4: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@1.0.4:
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-arrayish@0.3.2:
+    optional: true
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-decimal@1.0.4: {}
+
+  is-decimal@2.0.1: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-hexadecimal@1.0.4: {}
+
+  is-hexadecimal@2.0.1: {}
+
+  is-number@7.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  isexe@2.0.0: {}
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jiti@1.21.7: {}
+
+  js-tokens@4.0.0: {}
+
+  json-schema@0.4.0: {}
+
+  jsondiffpatch@0.6.0:
+    dependencies:
+      '@types/diff-match-patch': 1.0.36
+      chalk: 5.4.1
+      diff-match-patch: 1.0.5
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lodash@4.17.21: {}
+
+  longest-streak@3.1.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lowlight@1.20.0:
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
+
+  lru-cache@10.4.3: {}
+
+  lucide-react@0.454.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  markdown-table@3.0.4: {}
+
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
+  mdast-util-from-markdown@2.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+
+  mdast-util-to-hast@13.2.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  memoize-one@5.2.1: {}
+
+  merge2@1.4.1: {}
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.1
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.1
+
+  minipass@7.1.2: {}
+
+  ms@2.1.3: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.11: {}
+
+  next-runtime-env@3.3.0(next@15.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
+    dependencies:
+      next: 15.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+
+  next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  next@15.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@next/env': 15.2.4
+      '@swc/counter': 0.1.3
+      '@swc/helpers': 0.5.15
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001718
+      postcss: 8.4.31
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      styled-jsx: 5.1.6(react@18.3.1)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 15.2.4
+      '@next/swc-darwin-x64': 15.2.4
+      '@next/swc-linux-arm64-gnu': 15.2.4
+      '@next/swc-linux-arm64-musl': 15.2.4
+      '@next/swc-linux-x64-gnu': 15.2.4
+      '@next/swc-linux-x64-musl': 15.2.4
+      '@next/swc-win32-arm64-msvc': 15.2.4
+      '@next/swc-win32-x64-msvc': 15.2.4
+      '@opentelemetry/api': 1.9.0
+      sharp: 0.33.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-releases@2.0.19: {}
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  parse-entities@2.0.0:
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.1.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  pify@2.3.0: {}
+
+  pirates@4.0.7: {}
+
+  postcss-import@15.1.0(postcss@8.5.3):
+    dependencies:
+      postcss: 8.5.3
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.10
+
+  postcss-js@4.0.1(postcss@8.5.3):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.3
+
+  postcss-load-config@4.0.2(postcss@8.5.3):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.8.0
+    optionalDependencies:
+      postcss: 8.5.3
+
+  postcss-nested@6.2.0(postcss@8.5.3):
+    dependencies:
+      postcss: 8.5.3
+      postcss-selector-parser: 6.1.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.4.49:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.3:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prismjs@1.27.0: {}
+
+  prismjs@1.30.0: {}
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  property-information@5.6.0:
+    dependencies:
+      xtend: 4.0.2
+
+  property-information@7.1.0: {}
+
+  proxy-from-env@1.1.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  raf-schd@4.0.3: {}
+
+  react-beautiful-dnd@13.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.27.1
+      css-box-model: 1.2.1
+      memoize-one: 5.2.1
+      raf-schd: 4.0.3
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-redux: 7.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      redux: 4.2.1
+      use-memo-one: 1.1.3(react@18.3.1)
+    transitivePeerDependencies:
+      - react-native
+
+  react-code-blocks@0.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.27.1
+      react: 18.3.1
+      react-syntax-highlighter: 15.6.1(react@18.3.1)
+      styled-components: 6.1.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - react-dom
+
+  react-day-picker@8.10.1(date-fns@2.28.0)(react@18.3.1):
+    dependencies:
+      date-fns: 2.28.0
+      react: 18.3.1
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react-hook-form@7.56.3(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  react-is@16.13.1: {}
+
+  react-is@17.0.2: {}
+
+  react-is@18.3.1: {}
+
+  react-markdown@10.1.0(@types/react@18.3.21)(react@18.3.1):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 18.3.21
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.0
+      react: 18.3.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  react-redux@7.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.27.1
+      '@types/react-redux': 7.1.34
+      hoist-non-react-statics: 3.3.2
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-is: 17.0.2
+    optionalDependencies:
+      react-dom: 18.3.1(react@18.3.1)
+
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.21)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.3.21)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  react-remove-scroll@2.6.3(@types/react@18.3.21)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.21)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.21)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.3.21)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.21)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  react-resizable-panels@2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
+  react-style-singleton@2.2.3(@types/react@18.3.21)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  react-syntax-highlighter@15.6.1(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.27.1
+      highlight.js: 10.7.3
+      highlightjs-vue: 1.0.0
+      lowlight: 1.20.0
+      prismjs: 1.30.0
+      react: 18.3.1
+      refractor: 3.6.0
+
+  react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.27.1
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
+  redux@4.2.1:
+    dependencies:
+      '@babel/runtime': 7.27.1
+
+  refractor@3.6.0:
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  reusify@1.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
+  secure-json-parse@2.7.0: {}
+
+  semver@7.7.2:
+    optional: true
+
+  shallowequal@1.1.0: {}
+
+  sharp@0.33.5:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.4
+      semver: 7.7.2
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.33.5
+      '@img/sharp-darwin-x64': 0.33.5
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-linux-arm': 0.33.5
+      '@img/sharp-linux-arm64': 0.33.5
+      '@img/sharp-linux-s390x': 0.33.5
+      '@img/sharp-linux-x64': 0.33.5
+      '@img/sharp-linuxmusl-arm64': 0.33.5
+      '@img/sharp-linuxmusl-x64': 0.33.5
+      '@img/sharp-wasm32': 0.33.5
+      '@img/sharp-win32-ia32': 0.33.5
+      '@img/sharp-win32-x64': 0.33.5
+    optional: true
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  signal-exit@4.1.0: {}
+
+  simple-swizzle@0.2.2:
+    dependencies:
+      is-arrayish: 0.3.2
+    optional: true
+
+  sonner@1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  source-map-js@1.2.1: {}
+
+  space-separated-tokens@1.1.5: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  streamsearch@1.1.0: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.1.0
+
+  style-to-js@1.1.16:
+    dependencies:
+      style-to-object: 1.0.8
+
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
+  styled-components@6.1.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@emotion/is-prop-valid': 1.2.2
+      '@emotion/unitless': 0.8.1
+      '@types/stylis': 4.2.5
+      css-to-react-native: 3.2.0
+      csstype: 3.1.3
+      postcss: 8.4.49
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      shallowequal: 1.1.0
+      stylis: 4.3.2
+      tslib: 2.6.2
+
+  styled-jsx@5.1.6(react@18.3.1):
+    dependencies:
+      client-only: 0.0.1
+      react: 18.3.1
+
+  stylis@4.3.2: {}
+
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      ts-interface-checker: 0.1.13
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  swr@2.3.3(react@18.3.1):
+    dependencies:
+      dequal: 2.0.3
+      react: 18.3.1
+      use-sync-external-store: 1.5.0(react@18.3.1)
+
+  tailwind-merge@2.6.0: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+    dependencies:
+      tailwindcss: 3.4.17
+
+  tailwindcss@3.4.17:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.3
+      postcss-import: 15.1.0(postcss@8.5.3)
+      postcss-js: 4.0.1(postcss@8.5.3)
+      postcss-load-config: 4.0.2(postcss@8.5.3)
+      postcss-nested: 6.2.0(postcss@8.5.3)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  throttleit@2.1.0: {}
+
+  tiny-invariant@1.3.3: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.6.2: {}
+
+  tslib@2.8.1: {}
+
+  typescript@5.8.3: {}
+
+  undici-types@6.21.0: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
+  update-browserslist-db@1.1.3(browserslist@4.24.5):
+    dependencies:
+      browserslist: 4.24.5
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  use-callback-ref@1.3.3(@types/react@18.3.21)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  use-memo-one@1.1.3(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  use-sidecar@1.1.3(@types/react@18.3.21)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.21
+
+  use-sync-external-store@1.5.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  util-deprecate@1.0.2: {}
+
+  uuid@11.1.0: {}
+
+  vaul@0.9.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  vfile-message@4.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
+
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
+  xtend@4.0.2: {}
+
+  yaml@2.8.0: {}
+
+  zod-to-json-schema@3.24.5(zod@3.24.4):
+    dependencies:
+      zod: 3.24.4
+
+  zod@3.24.4: {}
+
+  zustand@4.5.7(@types/react@18.3.21)(react@18.3.1):
+    dependencies:
+      use-sync-external-store: 1.5.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      react: 18.3.1
+
+  zwitch@2.0.4: {}
diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs
new file mode 100644
index 00000000..1a69fd2a
--- /dev/null
+++ b/frontend/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 00000000..c0c5530b
--- /dev/null
+++ b/frontend/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg width="219" height="214" viewBox="0 0 219 214" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5701 128.045C30.793 134.655 42.773 133.459 49.5925 125.454L84.852 148.065C80.261 162.793 84.7144 179.46 97.4461 189.696C114.015 203.055 138.356 200.443 151.678 183.81C164.485 167.898 162.58 144.929 147.753 131.284L181.95 83.8694C191.109 87.9891 202.278 85.6089 208.887 77.386C216.718 67.61 215.184 53.2829 205.408 45.4516C195.646 37.5702 181.318 39.1042 173.474 48.9303C166.376 57.7744 166.983 70.3488 174.425 78.4681L140.228 125.883C124.138 116.951 103.443 120.593 91.5098 135.449C90.4552 136.779 89.4875 138.185 88.6334 139.568L53.6475 117.137C55.2004 110.139 52.8361 102.52 46.8743 97.6988C38.4778 90.9356 26.2433 92.2782 19.4801 100.675C12.7805 109.035 14.0598 121.306 22.4563 128.069L22.5701 128.045Z" fill="#00FFA7"/>
+<path d="M130.474 173.409C132.451 172.638 134.289 171.452 136.009 169.792L143.599 178.014C138.974 183.311 132.214 185.96 123.319 185.96C117.765 185.96 112.863 184.873 108.614 182.718C104.345 180.564 101.064 177.559 98.7509 173.725C96.4384 169.89 95.2722 165.522 95.2722 160.66C95.2722 155.798 96.4187 151.509 98.6917 147.635C100.985 143.761 104.107 140.756 108.1 138.582C112.093 136.428 116.579 135.341 121.58 135.341C126.264 135.341 130.534 136.329 134.368 138.305C138.203 140.282 141.266 143.148 143.559 146.903C145.852 150.659 146.979 155.086 146.979 160.205L110.61 167.242C111.638 169.673 113.279 171.511 115.492 172.717C117.706 173.942 120.434 174.535 123.675 174.535C126.225 174.535 128.498 174.16 130.474 173.389V173.409ZM112.804 149.611C110.551 151.924 109.365 155.126 109.246 159.197L133.182 154.533C132.51 151.983 131.147 149.927 129.071 148.405C126.996 146.884 124.505 146.113 121.58 146.113C117.983 146.113 115.057 147.279 112.804 149.591V149.611Z" fill="#1C1C1C"/>
+</svg>
diff --git a/frontend/public/images/discord.webp b/frontend/public/images/discord.webp
new file mode 100644
index 00000000..ece80b6c
Binary files /dev/null and b/frontend/public/images/discord.webp differ
diff --git a/frontend/public/images/email.webp b/frontend/public/images/email.webp
new file mode 100644
index 00000000..51d6bb51
Binary files /dev/null and b/frontend/public/images/email.webp differ
diff --git a/frontend/public/images/evolution-ai-logo.png b/frontend/public/images/evolution-ai-logo.png
new file mode 100644
index 00000000..205aeebc
Binary files /dev/null and b/frontend/public/images/evolution-ai-logo.png differ
diff --git a/frontend/public/images/evolution.png b/frontend/public/images/evolution.png
new file mode 100644
index 00000000..824dc904
Binary files /dev/null and b/frontend/public/images/evolution.png differ
diff --git a/frontend/public/images/facebook.png b/frontend/public/images/facebook.png
new file mode 100644
index 00000000..03056266
Binary files /dev/null and b/frontend/public/images/facebook.png differ
diff --git a/frontend/public/images/imessage.webp b/frontend/public/images/imessage.webp
new file mode 100644
index 00000000..4d546fed
Binary files /dev/null and b/frontend/public/images/imessage.webp differ
diff --git a/frontend/public/images/instagram.png b/frontend/public/images/instagram.png
new file mode 100644
index 00000000..64fa469e
Binary files /dev/null and b/frontend/public/images/instagram.png differ
diff --git a/frontend/public/images/linkedin.webp b/frontend/public/images/linkedin.webp
new file mode 100644
index 00000000..3c4a1717
Binary files /dev/null and b/frontend/public/images/linkedin.webp differ
diff --git a/frontend/public/images/mercadolivre.png b/frontend/public/images/mercadolivre.png
new file mode 100644
index 00000000..abdbfe63
Binary files /dev/null and b/frontend/public/images/mercadolivre.png differ
diff --git a/frontend/public/images/sms.png b/frontend/public/images/sms.png
new file mode 100644
index 00000000..a8cfa642
Binary files /dev/null and b/frontend/public/images/sms.png differ
diff --git a/frontend/public/images/svg/facebook.svg b/frontend/public/images/svg/facebook.svg
new file mode 100644
index 00000000..24bef521
--- /dev/null
+++ b/frontend/public/images/svg/facebook.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"><circle cx="12" cy="12" r="12" fill="url(#paint0_linear_MessengerChannel_7619_1719)"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M5 11.7277C5 8.13397 8.11522 5.22119 11.958 5.22119C15.8008 5.22119 18.916 8.13397 18.916 11.7277C18.916 15.3215 15.8008 18.2343 11.958 18.2343C11.2635 18.2343 10.5926 18.1391 9.9597 17.9617L7.58508 19.279V16.7886C6.00817 15.5961 5 13.7721 5 11.7277ZM7.77708 13.6454L9.65079 10.6474C9.98917 10.106 10.7189 9.97105 11.2285 10.3556L12.694 11.4614C12.8258 11.5608 13.0082 11.5578 13.1366 11.4542L15.1731 9.81011C15.4883 9.55573 15.9182 9.93534 15.7048 10.2795L13.7239 13.4747C13.3718 14.0426 12.5957 14.1618 12.0894 13.7257L10.7446 12.5673C10.6142 12.455 10.4225 12.4508 10.2873 12.5572L8.30465 14.1186C7.98785 14.3681 7.56336 13.9873 7.77708 13.6454Z" fill="white"></path><defs><linearGradient id="paint0_linear_MessengerChannel_7619_1719" x1="13.5" y1="27.5" x2="3.5" y2="-2.16672e-07" gradientUnits="userSpaceOnUse"><stop offset="0.1137" stop-color="#006DFF"></stop><stop offset="1" stop-color="#00C6FF"></stop></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/frontend/public/images/svg/instagram.svg b/frontend/public/images/svg/instagram.svg
new file mode 100644
index 00000000..c0194dbb
--- /dev/null
+++ b/frontend/public/images/svg/instagram.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" class="text-secondary"><path d="M0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12Z" fill="#FB2690"></path><path d="M0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12Z" fill="url(#paint0_linear_InstagramChannel_7619_1727)"></path><path d="M0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12Z" fill="url(#paint1_radial_7619_1727)"></path><path d="M0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12Z" fill="url(#paint2_radial_7619_1727)"></path><path d="M8.88889 5C7.85749 5 6.86834 5.40972 6.13903 6.13903C5.40972 6.86834 5 7.85749 5 8.88889V15.1111C5 16.1425 5.40972 17.1317 6.13903 17.861C6.86834 18.5903 7.85749 19 8.88889 19H15.1111C16.1425 19 17.1317 18.5903 17.861 17.861C18.5903 17.1317 19 16.1425 19 15.1111V8.88889C19 7.85749 18.5903 6.86834 17.861 6.13903C17.1317 5.40972 16.1425 5 15.1111 5H8.88889ZM16.6667 6.55556C17.0944 6.55556 17.4444 6.90556 17.4444 7.33333C17.4444 7.76111 17.0944 8.11111 16.6667 8.11111C16.2389 8.11111 15.8889 7.76111 15.8889 7.33333C15.8889 6.90556 16.2389 6.55556 16.6667 6.55556ZM12 8.11111C13.0314 8.11111 14.0206 8.52083 14.7499 9.25014C15.4792 9.97945 15.8889 10.9686 15.8889 12C15.8889 13.0314 15.4792 14.0206 14.7499 14.7499C14.0206 15.4792 13.0314 15.8889 12 15.8889C10.9686 15.8889 9.97945 15.4792 9.25014 14.7499C8.52083 14.0206 8.11111 13.0314 8.11111 12C8.11111 10.9686 8.52083 9.97945 9.25014 9.25014C9.97945 8.52083 10.9686 8.11111 12 8.11111ZM12 9.66667C11.6935 9.66677 11.39 9.72724 11.1068 9.84464C10.8237 9.96203 10.5664 10.134 10.3498 10.3509C10.1331 10.5677 9.96125 10.825 9.84404 11.1083C9.72684 11.3915 9.66656 11.695 9.66667 12.0016C9.66677 12.3081 9.72724 12.6116 9.84464 12.8947C9.96203 13.1779 10.134 13.4351 10.3509 13.6518C10.5677 13.8685 10.825 14.0403 11.1083 14.1575C11.3915 14.2747 11.695 14.335 12.0016 14.3349C12.6206 14.3347 13.2142 14.0886 13.6518 13.6507C14.0894 13.2128 14.3351 12.619 14.3349 12C14.3347 11.381 14.0886 10.7873 13.6507 10.3498C13.2128 9.91218 12.619 9.66646 12 9.66667Z" fill="white"></path><defs><linearGradient id="paint0_linear_InstagramChannel_7619_1727" x1="7.5" y1="-10" x2="13" y2="15.5" gradientUnits="userSpaceOnUse"><stop offset="0.122265" stop-color="#4263DF"></stop><stop offset="1" stop-color="#D53585" stop-opacity="0"></stop></linearGradient><radialGradient id="paint1_radial_7619_1727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.50955e-07 29.5) rotate(-38.6798) scale(29.7078)"><stop stop-color="#FFAD05"></stop><stop offset="1" stop-color="#FF3F00" stop-opacity="0"></stop></radialGradient><radialGradient id="paint2_radial_7619_1727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.5 26) rotate(-37.9987) scale(20.3039)"><stop offset="0.01" stop-color="#FDDB86"></stop><stop offset="1" stop-color="#F06942" stop-opacity="0"></stop></radialGradient></defs></svg>
\ No newline at end of file
diff --git a/frontend/public/images/svg/whatsapp.svg b/frontend/public/images/svg/whatsapp.svg
new file mode 100644
index 00000000..2e9d0834
--- /dev/null
+++ b/frontend/public/images/svg/whatsapp.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" class="text-secondary"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="url(#paint0_linear_WhatsAppChannel_7619_1726)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5 11.5065C5 7.91278 8.11522 5 11.958 5C15.8008 5 18.916 7.91278 18.916 11.5065C18.916 15.1003 15.8008 18.0131 11.958 18.0131C11.2635 18.0131 10.5926 17.9179 9.9597 17.7405L7.58508 19.0578V16.5675C6.00817 15.3749 5 13.5509 5 11.5065ZM15.7569 12.9568C15.7548 12.9336 15.7529 12.9136 15.7521 12.897C15.7441 12.7389 15.6021 12.7147 15.6021 12.7147C15.6021 12.7147 14.4386 12.1511 14.1994 12.0415C13.9605 11.932 13.8388 12.1107 13.8388 12.1107C13.8388 12.1107 13.486 12.5566 13.3724 12.7024C13.363 12.7145 13.354 12.7264 13.3452 12.7381C13.2468 12.8683 13.1697 12.9702 12.8982 12.8808C12.6022 12.7834 12.0087 12.4639 11.5237 12.0294C11.0391 11.595 10.6684 11.0201 10.5632 10.8458C10.4578 10.6712 10.5794 10.562 10.5794 10.562C10.5794 10.562 10.8864 10.2082 11.0333 10.0187C11.1771 9.83334 11.0925 9.62678 11.0559 9.5377C11.0551 9.53575 11.0536 9.53202 11.0536 9.53202C11.0186 9.44684 10.5468 8.3386 10.4779 8.18234C10.4092 8.02594 10.2592 8 10.2592 8H9.69973C9.59967 8 9.40786 8.12164 9.40786 8.12164C8.83294 8.48961 8.73552 9.34836 8.71867 9.53373C8.70182 9.71909 8.68497 10.1125 8.98829 10.7753C9.29161 11.4379 10.0331 12.3368 10.9488 13.1908C11.8315 14.0141 13.1685 14.385 13.6436 14.5168C13.6612 14.5217 13.6776 14.5263 13.6928 14.5305C14.1175 14.6491 15.0143 14.4385 15.4359 13.9831C15.8133 13.5759 15.7749 13.1541 15.7569 12.9568Z" fill="white"></path><defs><linearGradient id="paint0_linear_WhatsAppChannel_7619_1726" x1="12" y1="32" x2="-4.5" y2="-8.19564e-07" gradientUnits="userSpaceOnUse"><stop stop-color="#1EBF5A"></stop><stop offset="0.922652" stop-color="#2CE979"></stop></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/frontend/public/images/telegram.webp b/frontend/public/images/telegram.webp
new file mode 100644
index 00000000..890bafae
Binary files /dev/null and b/frontend/public/images/telegram.webp differ
diff --git a/frontend/public/images/threads.png b/frontend/public/images/threads.png
new file mode 100644
index 00000000..8a5cdd8d
Binary files /dev/null and b/frontend/public/images/threads.png differ
diff --git a/frontend/public/images/tiktok.webp b/frontend/public/images/tiktok.webp
new file mode 100644
index 00000000..125463fc
Binary files /dev/null and b/frontend/public/images/tiktok.webp differ
diff --git a/frontend/public/images/webchat.webp b/frontend/public/images/webchat.webp
new file mode 100644
index 00000000..0f4115d1
Binary files /dev/null and b/frontend/public/images/webchat.webp differ
diff --git a/frontend/public/images/wechat.png b/frontend/public/images/wechat.png
new file mode 100644
index 00000000..5806d9af
Binary files /dev/null and b/frontend/public/images/wechat.png differ
diff --git a/frontend/public/images/whatsapp.png b/frontend/public/images/whatsapp.png
new file mode 100644
index 00000000..8939e6dd
Binary files /dev/null and b/frontend/public/images/whatsapp.png differ
diff --git a/frontend/public/images/x-twitter.png b/frontend/public/images/x-twitter.png
new file mode 100644
index 00000000..8bca927f
Binary files /dev/null and b/frontend/public/images/x-twitter.png differ
diff --git a/frontend/public/images/youtube.webp b/frontend/public/images/youtube.webp
new file mode 100644
index 00000000..2382f9c2
Binary files /dev/null and b/frontend/public/images/youtube.webp differ
diff --git a/frontend/public/placeholder-logo.png b/frontend/public/placeholder-logo.png
new file mode 100644
index 00000000..6528839b
Binary files /dev/null and b/frontend/public/placeholder-logo.png differ
diff --git a/frontend/public/placeholder-logo.svg b/frontend/public/placeholder-logo.svg
new file mode 100644
index 00000000..b1695aaf
--- /dev/null
+++ b/frontend/public/placeholder-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/frontend/public/placeholder-user.jpg b/frontend/public/placeholder-user.jpg
new file mode 100644
index 00000000..6faa819c
Binary files /dev/null and b/frontend/public/placeholder-user.jpg differ
diff --git a/frontend/public/placeholder.jpg b/frontend/public/placeholder.jpg
new file mode 100644
index 00000000..a6bf2ee6
Binary files /dev/null and b/frontend/public/placeholder.jpg differ
diff --git a/frontend/public/placeholder.svg b/frontend/public/placeholder.svg
new file mode 100644
index 00000000..e763910b
--- /dev/null
+++ b/frontend/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/frontend/services/agentService.ts b/frontend/services/agentService.ts
new file mode 100644
index 00000000..e08e3bed
--- /dev/null
+++ b/frontend/services/agentService.ts
@@ -0,0 +1,238 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /services/agentService.ts                                             │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import api from "./api";
+import { Agent, AgentCreate } from "../types/agent";
+import { escapePromptBraces, sanitizeAgentName } from "@/lib/utils";
+
+const processAgentData = (data: AgentCreate | Partial<AgentCreate>): AgentCreate | Partial<AgentCreate> => {
+  const updatedData = {...data};
+  
+  if (updatedData.instruction) {
+    updatedData.instruction = escapePromptBraces(updatedData.instruction);
+  }
+  
+  if (updatedData.name) {
+    updatedData.name = sanitizeAgentName(updatedData.name);
+  }
+  
+  return updatedData;
+};
+
+export const createAgent = (data: AgentCreate) =>
+  api.post<Agent>("/api/v1/agents/", processAgentData(data));
+
+export const listAgents = (
+  clientId: string,
+  skip = 0,
+  limit = 100,
+  folderId?: string
+) => {
+  const queryParams = new URLSearchParams({
+    skip: skip.toString(),
+    limit: limit.toString(),
+  });
+
+  if (folderId) {
+    queryParams.append("folder_id", folderId);
+  }
+
+  return api.get<Agent[]>(`/api/v1/agents/?${queryParams.toString()}`, {
+    headers: { "x-client-id": clientId },
+  });
+};
+
+export const getAgent = (agentId: string, clientId: string) =>
+  api.get<Agent>(`/api/v1/agents/${agentId}`, {
+    headers: { "x-client-id": clientId },
+  });
+
+export const getSharedAgent = (agentId: string) =>
+  api.get<Agent>(`/api/v1/agents/${agentId}/shared`);
+
+export const updateAgent = (agentId: string, data: Partial<AgentCreate>) =>
+  api.put<Agent>(`/api/v1/agents/${agentId}`, processAgentData(data));
+
+export const deleteAgent = (agentId: string) =>
+  api.delete(`/api/v1/agents/${agentId}`);
+
+// New functions for the folder system
+
+export interface Folder {
+  id: string;
+  name: string;
+  description: string;
+  client_id: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface FolderCreate {
+  name: string;
+  description: string;
+  client_id: string;
+}
+
+export interface FolderUpdate {
+  name?: string;
+  description?: string;
+}
+
+export const createFolder = (data: FolderCreate) =>
+  api.post<Folder>("/api/v1/agents/folders", data);
+
+export const listFolders = (clientId: string, skip = 0, limit = 100) =>
+  api.get<Folder[]>(`/api/v1/agents/folders?skip=${skip}&limit=${limit}`, {
+    headers: { "x-client-id": clientId },
+  });
+
+export const getFolder = (folderId: string, clientId: string) =>
+  api.get<Folder>(`/api/v1/agents/folders/${folderId}`, {
+    headers: { "x-client-id": clientId },
+  });
+
+export const updateFolder = (
+  folderId: string,
+  data: FolderUpdate,
+  clientId: string
+) =>
+  api.put<Folder>(`/api/v1/agents/folders/${folderId}`, data, {
+    headers: { "x-client-id": clientId },
+  });
+
+export const deleteFolder = (folderId: string, clientId: string) =>
+  api.delete(`/api/v1/agents/folders/${folderId}`, {
+    headers: { "x-client-id": clientId },
+  });
+
+export const listAgentsInFolder = (
+  folderId: string,
+  clientId: string,
+  skip = 0,
+  limit = 100
+) =>
+  api.get<Agent[]>(
+    `/api/v1/agents/folders/${folderId}/agents?skip=${skip}&limit=${limit}`,
+    {
+      headers: { "x-client-id": clientId },
+    }
+  );
+
+export const assignAgentToFolder = (
+  agentId: string,
+  folderId: string | null,
+  clientId: string
+) => {
+  const url = folderId
+    ? `/api/v1/agents/${agentId}/folder?folder_id=${folderId}`
+    : `/api/v1/agents/${agentId}/folder`;
+
+  return api.put<Agent>(
+    url,
+    {},
+    {
+      headers: { "x-client-id": clientId },
+    }
+  );
+};
+
+export const shareAgent = (agentId: string, clientId: string) => 
+  api.post<{ api_key: string }>(`/api/v1/agents/${agentId}/share`, {}, {
+    headers: { "x-client-id": clientId },
+  });
+
+// API Key Interfaces and Services
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  provider: string;
+  client_id: string;
+  created_at: string;
+  updated_at: string;
+  is_active: boolean;
+}
+
+export interface ApiKeyCreate {
+  name: string;
+  provider: string;
+  client_id: string;
+  key_value: string;
+}
+
+export interface ApiKeyUpdate {
+  name?: string;
+  provider?: string;
+  key_value?: string;
+  is_active?: boolean;
+}
+
+export const createApiKey = (data: ApiKeyCreate) =>
+  api.post<ApiKey>("/api/v1/agents/apikeys", data);
+
+export const listApiKeys = (clientId: string, skip = 0, limit = 100) =>
+  api.get<ApiKey[]>(`/api/v1/agents/apikeys?skip=${skip}&limit=${limit}`, {
+    headers: { "x-client-id": clientId },
+  });
+
+export const getApiKey = (keyId: string, clientId: string) =>
+  api.get<ApiKey>(`/api/v1/agents/apikeys/${keyId}`, {
+    headers: { "x-client-id": clientId },
+  });
+
+export const updateApiKey = (
+  keyId: string,
+  data: ApiKeyUpdate,
+  clientId: string
+) =>
+  api.put<ApiKey>(`/api/v1/agents/apikeys/${keyId}`, data, {
+    headers: { "x-client-id": clientId },
+  });
+
+export const deleteApiKey = (keyId: string, clientId: string) =>
+  api.delete(`/api/v1/agents/apikeys/${keyId}`, {
+    headers: { "x-client-id": clientId },
+  });
+
+// Import agent from JSON file
+export const importAgentFromJson = (file: File, clientId: string, folderId?: string | null) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  
+  // Add folder_id to formData if it exists
+  if (folderId) {
+    formData.append('folder_id', folderId);
+  }
+  
+  return api.post('/api/v1/agents/import', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+      'x-client-id': clientId
+    }
+  });
+};
diff --git a/frontend/services/api.ts b/frontend/services/api.ts
new file mode 100644
index 00000000..db8c05d8
--- /dev/null
+++ b/frontend/services/api.ts
@@ -0,0 +1,122 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /services/api.ts                                                      │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import axios from "axios";
+import { getApiUrl } from "@/lib/env";
+
+const apiUrl = getApiUrl();
+
+const api = axios.create({
+  baseURL: apiUrl,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Flag to prevent multiple logout attempts
+let isLoggingOut = false;
+
+// Function to force logout
+const forceLogout = () => {
+  if (isLoggingOut) return;
+  isLoggingOut = true;
+
+  // Clear localStorage
+  localStorage.removeItem("access_token");
+  localStorage.removeItem("user");
+  localStorage.removeItem("impersonatedClient");
+  localStorage.removeItem("isImpersonating");
+
+  // Clear cookies
+  document.cookie = "access_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  document.cookie = "user=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  document.cookie = "impersonatedClient=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  document.cookie = "isImpersonating=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  
+  // Redirect to login page
+  window.location.href = "/login?session_expired=true";
+};
+
+// Interceptor to add the token from the cookie to the Authorization header
+api.interceptors.request.use((config) => {
+  if (typeof window !== "undefined") {
+    // Verificar primeiro se estamos em uma rota de agente compartilhado
+    const isSharedAgentRequest = config.url && (
+      config.url.includes('/agents/shared') || 
+      config.url.includes('/chat/ws/')
+    );
+
+    const isSharedChatPage = typeof window !== "undefined" && 
+      window.location.pathname.startsWith('/shared-chat');
+
+    // Usar API key apenas para requisições específicas de agentes compartilhados ou na página de chat compartilhado
+    if ((isSharedAgentRequest || isSharedChatPage) && localStorage.getItem("shared_agent_api_key")) {
+      const apiKey = localStorage.getItem("shared_agent_api_key");
+      config.headers = config.headers || {};
+      config.headers["x-api-key"] = apiKey;
+    } else {
+      // Caso contrário, usar a autenticação normal com JWT
+      const match = document.cookie.match(/(?:^|; )access_token=([^;]*)/);
+      const token = match ? decodeURIComponent(match[1]) : null;
+      if (token) {
+        config.headers = config.headers || {};
+        config.headers["Authorization"] = `Bearer ${token}`;
+      }
+    }
+  }
+  return config;
+});
+
+// Interceptor to handle 401 Unauthorized responses
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // Check if we have a 401 Unauthorized error and we're in a browser context
+    if (error.response && error.response.status === 401 && typeof window !== "undefined") {
+      // Skip logout for login endpoint and other auth endpoints
+      const isAuthEndpoint = error.config.url && (
+        error.config.url.includes('/auth/login') || 
+        error.config.url.includes('/auth/register') ||
+        error.config.url.includes('/auth/forgot-password') ||
+        error.config.url.includes('/auth/reset-password')
+      );
+
+      // Skip logout for shared chat page
+      const isSharedChatPage = typeof window !== "undefined" && 
+        window.location.pathname.startsWith('/shared-chat');
+
+      if (!isAuthEndpoint && !isSharedChatPage) {
+        forceLogout();
+      }
+    }
+    
+    return Promise.reject(error);
+  }
+);
+
+export default api;
diff --git a/frontend/services/authService.ts b/frontend/services/authService.ts
new file mode 100644
index 00000000..483fcb36
--- /dev/null
+++ b/frontend/services/authService.ts
@@ -0,0 +1,56 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /services/authService.ts                                              │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import api from "./api";
+import {
+  RegisterRequest,
+  RegisterResponse,
+  LoginRequest,
+  LoginResponse,
+  ResendVerificationRequest,
+  ForgotPasswordRequest,
+  ResetPasswordRequest,
+  MeResponse,
+  ChangePasswordRequest,
+} from "../types/auth";
+
+export const register = (data: RegisterRequest) =>
+  api.post<RegisterResponse>("/api/v1/auth/register", data);
+export const login = (data: LoginRequest) =>
+  api.post<LoginResponse>("/api/v1/auth/login", data);
+export const verifyEmail = (code: string) =>
+  api.get(`/api/v1/auth/verify-email/${code}`);
+export const resendVerification = (data: ResendVerificationRequest) =>
+  api.post("/api/v1/auth/resend-verification", data);
+export const forgotPassword = (data: ForgotPasswordRequest) =>
+  api.post("/api/v1/auth/forgot-password", data);
+export const resetPassword = (data: ResetPasswordRequest) =>
+  api.post("/api/v1/auth/reset-password", data);
+export const getMe = () => api.post<MeResponse>("/api/v1/auth/me");
+export const changePassword = (data: ChangePasswordRequest) =>
+  api.post("/api/v1/auth/change-password", data);
diff --git a/frontend/services/clientService.ts b/frontend/services/clientService.ts
new file mode 100644
index 00000000..cfcf6f9f
--- /dev/null
+++ b/frontend/services/clientService.ts
@@ -0,0 +1,87 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /services/clientService.ts                                            │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import api from "./api";
+
+export interface Client {
+  id: string;
+  name: string;
+  email: string;
+  created_at: string;
+  users_count?: number;
+  agents_count?: number;
+}
+
+export interface CreateClientRequest {
+  name: string;
+  email: string;
+  password: string;
+}
+
+export interface UpdateClientRequest {
+  name: string;
+  email: string;
+}
+
+export interface ListClientsResponse {
+  items: Client[];
+  total: number;
+}
+
+export const createClient = async (client: any) => {
+  try {
+    const response = await api.post("/api/v1/clients", client);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const listClients = (skip = 0, limit = 10) =>
+  api.get<Client[]>(`/api/v1/clients/?skip=${skip}&limit=${limit}`);
+export const getClient = (clientId: string) =>
+  api.get<Client>(`/api/v1/clients/${clientId}`);
+export const updateClient = (clientId: string, data: UpdateClientRequest) =>
+  api.put<Client>(`/api/v1/clients/${clientId}`, data);
+export const deleteClient = async (id: string) => {
+  try {
+    const response = await api.delete(`/api/v1/clients/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const impersonateClient = async (id: string) => {
+  try {
+    const response = await api.post(`/api/v1/clients/${id}/impersonate`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/frontend/services/mcpServerService.ts b/frontend/services/mcpServerService.ts
new file mode 100644
index 00000000..85a4ba63
--- /dev/null
+++ b/frontend/services/mcpServerService.ts
@@ -0,0 +1,45 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /services/mcpServerService.ts                                         │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import api from "./api";
+import { MCPServer, MCPServerCreate } from "../types/mcpServer";
+
+export const createMCPServer = (data: MCPServerCreate) =>
+  api.post<MCPServer>("/api/v1/mcp-servers/", data);
+
+export const listMCPServers = (skip = 0, limit = 100) =>
+  api.get<MCPServer[]>(`/api/v1/mcp-servers/?skip=${skip}&limit=${limit}`);
+
+export const getMCPServer = (id: string) =>
+  api.get<MCPServer>(`/api/v1/mcp-servers/${id}`);
+
+export const updateMCPServer = (id: string, data: MCPServerCreate) =>
+  api.put<MCPServer>(`/api/v1/mcp-servers/${id}`, data);
+
+export const deleteMCPServer = (id: string) =>
+  api.delete(`/api/v1/mcp-servers/${id}`);
diff --git a/frontend/services/sessionService.ts b/frontend/services/sessionService.ts
new file mode 100644
index 00000000..fe3383ca
--- /dev/null
+++ b/frontend/services/sessionService.ts
@@ -0,0 +1,142 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /services/sessionService.ts                                           │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+import api from "./api";
+
+export interface ChatSession {
+  id: string;
+  app_name: string;
+  user_id: string;
+  state: Record<string, any>;
+  events: any[];
+  last_update_time: number;
+  update_time: string;
+  create_time: string;
+  created_at: string;
+  agent_id: string;
+  client_id: string;
+}
+
+export interface ChatPart {
+  text?: string;
+  functionCall?: any;
+  function_call?: any;
+  functionResponse?: any;
+  function_response?: any;
+  inline_data?: {
+    data: string;
+    mime_type: string;
+    metadata?: {
+      filename?: string;
+      [key: string]: any;
+    };
+    fileId?: string;
+  };
+  videoMetadata?: any;
+  thought?: any;
+  codeExecutionResult?: any;
+  executableCode?: any;
+  file_data?: {
+    filename?: string;
+    fileId?: string;
+    [key: string]: any;
+  };
+}
+
+export interface AttachedFile {
+  filename: string;
+  content_type: string;
+  data?: string;
+  size?: number;
+}
+
+export interface InlineData {
+  type: string;
+  data: string;
+}
+
+export interface ChatMessage {
+  id: string;
+  content: {
+    parts: ChatPart[];
+    role: string;
+    inlineData?: InlineData[];
+    files?: AttachedFile[];
+  };
+  author: string;
+  timestamp: number;
+  [key: string]: any;
+}
+
+export const generateExternalId = () => {
+  const now = new Date();
+  return `${now.getFullYear()}${String(now.getMonth() + 1).padStart(
+    2,
+    "0"
+  )}${String(now.getDate()).padStart(2, "0")}_${String(now.getHours()).padStart(
+    2,
+    "0"
+  )}${String(now.getMinutes()).padStart(2, "0")}${String(
+    now.getSeconds()
+  ).padStart(2, "0")}`;
+};
+
+export const listSessions = (clientId: string) =>
+  api.get<ChatSession[]>(`/api/v1/sessions/client/${clientId}`);
+
+export const getSessionMessages = (sessionId: string) =>
+  api.get<ChatMessage[]>(`/api/v1/sessions/${sessionId}/messages`);
+
+export const createSession = (clientId: string, agentId: string) => {
+  const externalId = generateExternalId();
+  const sessionId = `${externalId}_${agentId}`;
+
+  return api.post<ChatSession>(`/api/v1/sessions/`, {
+    id: sessionId,
+    client_id: clientId,
+    agent_id: agentId,
+  });
+};
+
+export const deleteSession = (sessionId: string) => {
+  return api.delete<ChatSession>(`/api/v1/sessions/${sessionId}`);
+};
+
+export const sendMessage = (
+  sessionId: string,
+  agentId: string,
+  message: string
+) => {
+  const externalId = sessionId.split("_")[0];
+
+  return api.post<ChatMessage>(`/api/v1/chat`, {
+    agent_id: agentId,
+    external_id: externalId,
+    message: message,
+  });
+};
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
new file mode 100644
index 00000000..649edfc5
--- /dev/null
+++ b/frontend/styles/globals.css
@@ -0,0 +1,122 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /styles/globals.css                                                   │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
new file mode 100644
index 00000000..23a1196d
--- /dev/null
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,81 @@
+import type { Config } from "tailwindcss"
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "*.{js,ts,jsx,tsx,mdx}",
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config
+
+export default config
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 00000000..4b2dc7ba
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "target": "ES6",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/frontend/types/agent.ts b/frontend/types/agent.ts
new file mode 100644
index 00000000..b9983862
--- /dev/null
+++ b/frontend/types/agent.ts
@@ -0,0 +1,153 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /types/agent.ts                                                       │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+export type AgentType =
+  | "llm"
+  | "a2a"
+  | "sequential"
+  | "parallel"
+  | "loop"
+  | "workflow"
+  | "task";
+
+export interface ToolConfig {
+  id: string;
+  envs: Record<string, string>;
+}
+
+export interface MCPServerConfig {
+  id: string;
+  envs: Record<string, string>;
+  tools: string[];
+  selected_tools?: string[];
+}
+
+export interface CustomMCPServer {
+  url: string;
+  headers?: Record<string, string>;
+}
+
+export interface HTTPToolParameter {
+  type: string;
+  required: boolean;
+  description: string;
+}
+
+export interface HTTPToolParameters {
+  path_params?: Record<string, string>;
+  query_params?: Record<string, string | string[]>;
+  body_params?: Record<string, HTTPToolParameter>;
+}
+
+export interface HTTPToolErrorHandling {
+  timeout: number;
+  retry_count: number;
+  fallback_response: Record<string, string>;
+}
+
+export interface HTTPTool {
+  name: string;
+  method: string;
+  values: Record<string, string>;
+  headers: Record<string, string>;
+  endpoint: string;
+  parameters: HTTPToolParameters;
+  description: string;
+  error_handling: HTTPToolErrorHandling;
+}
+
+export interface CustomTools {
+  http_tools: HTTPTool[];
+}
+
+export interface WorkflowData {
+  nodes: any[];
+  edges: any[];
+}
+
+export interface TaskConfig {
+  agent_id: string;
+  description: string;
+  expected_output: string;
+  enabled_tools?: string[];
+}
+
+export interface AgentConfig {
+  // LLM config
+  api_key?: string;
+  tools?: ToolConfig[];
+  custom_tools?: CustomTools;
+  mcp_servers?: MCPServerConfig[];
+  custom_mcp_servers?: CustomMCPServer[];
+
+  // Sequential, Parallel e Loop config
+  sub_agents?: string[];
+  agent_tools?: string[];
+
+  // Loop config
+  max_iterations?: number;
+
+  // Workflow config
+  workflow?: WorkflowData;
+
+  // Task config
+  tasks?: TaskConfig[];
+}
+
+export interface Agent {
+  id: string;
+  client_id: string;
+  folder_id?: string;
+  name: string;
+  description?: string;
+  role?: string;
+  goal?: string;
+  type: AgentType;
+  model?: string;
+  api_key_id?: string;
+  instruction?: string;
+  agent_card_url?: string;
+  config?: AgentConfig;
+  tasks?: TaskConfig[];
+  created_at: string;
+  updated_at?: string;
+}
+
+export interface AgentCreate {
+  client_id: string;
+  name: string;
+  description?: string;
+  role?: string;
+  goal?: string;
+  type: AgentType;
+  model?: string;
+  api_key_id?: string;
+  instruction?: string;
+  agent_card_url?: string;
+  config?: AgentConfig;
+}
diff --git a/frontend/types/aiModels.ts b/frontend/types/aiModels.ts
new file mode 100644
index 00000000..4f84fa7c
--- /dev/null
+++ b/frontend/types/aiModels.ts
@@ -0,0 +1,414 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /types/aiModels.ts                                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+export const availableModels = [
+  // GPT-4.1 series
+  { value: "openai/gpt-4.1", label: "GPT-4.1", provider: "openai" },
+  { value: "openai/gpt-4.1-nano", label: "GPT-4.1 Nano", provider: "openai" },
+  { value: "openai/gpt-4.1-mini", label: "GPT-4.1 Mini", provider: "openai" },
+
+  // GPT-4.5 Preview
+  {
+    value: "openai/gpt-4.5-preview",
+    label: "GPT-4.5 Preview",
+    provider: "openai",
+  },
+
+  // GPT-4 Turbo & GPT-4o
+  { value: "openai/gpt-4", label: "GPT-4 Turbo", provider: "openai" },
+  { value: "openai/gpt-4o", label: "GPT-4o", provider: "openai" },
+  { value: "openai/gpt-4o-mini", label: "GPT-4o Mini", provider: "openai" },
+
+  // GPT-4 Legacy
+  { value: "openai/gpt-4-32k", label: "GPT-4 32K", provider: "openai" },
+
+  // GPT-3.5 Turbo series
+  {
+    value: "openai/gpt-3.5-turbo",
+    label: "GPT-3.5 Turbo",
+    provider: "openai",
+  },
+  {
+    value: "openai/gpt-3.5-turbo-16k",
+    label: "GPT-3.5 Turbo 16K",
+    provider: "openai",
+  },
+
+  // Gemini Preview models
+  {
+    value: "gemini/gemini-2.5-pro-preview-05-06",
+    label: "Gemini 2.5 Pro (Preview)",
+    provider: "gemini",
+  },
+  {
+    value: "gemini/gemini-2.5-flash-preview-04-17",
+    label: "Gemini 2.5 Flash (Preview)",
+    provider: "gemini",
+  },
+
+  // Gemini GA models
+  {
+    value: "gemini/gemini-2.0-flash",
+    label: "Gemini 2.0 Flash",
+    provider: "gemini",
+  },
+  {
+    value: "gemini/gemini-2.0-flash-lite",
+    label: "Gemini 2.0 Flash-Lite",
+    provider: "gemini",
+  },
+  {
+    value: "gemini/gemini-2.0-flash-live-001",
+    label: "Gemini 2.0 Flash Live",
+    provider: "gemini",
+  },
+
+  // Gemini Legacy models
+  {
+    value: "gemini/gemini-1.5-pro",
+    label: "Gemini 1.5 Pro",
+    provider: "gemini",
+  },
+  {
+    value: "gemini/gemini-1.5-flash",
+    label: "Gemini 1.5 Flash",
+    provider: "gemini",
+  },
+  {
+    value: "gemini/gemini-1.5-flash-8b",
+    label: "Gemini 1.5 Flash-8B",
+    provider: "gemini",
+  },
+
+  // Claude 3.7 models
+  {
+    value: "anthropic/claude-3-7-sonnet-20250219",
+    label: "Claude 3.7 Sonnet",
+    provider: "anthropic",
+  },
+
+  // Claude 3.5 models
+  {
+    value: "anthropic/claude-3-5-sonnet-20241022",
+    label: "Claude 3.5 Sonnet v2",
+    provider: "anthropic",
+  },
+  {
+    value: "anthropic/claude-3-5-sonnet-20240620",
+    label: "Claude 3.5 Sonnet",
+    provider: "anthropic",
+  },
+  {
+    value: "anthropic/claude-3-5-haiku-20241022",
+    label: "Claude 3.5 Haiku",
+    provider: "anthropic",
+  },
+
+  // Claude 3 models
+  {
+    value: "anthropic/claude-3-opus-20240229",
+    label: "Claude 3 Opus",
+    provider: "anthropic",
+  },
+  {
+    value: "anthropic/claude-3-sonnet-20240229",
+    label: "Claude 3 Sonnet",
+    provider: "anthropic",
+  },
+  {
+    value: "anthropic/claude-3-haiku-20240307",
+    label: "Claude 3 Haiku",
+    provider: "anthropic",
+  },
+
+  // Groq Production Models
+  {
+    value: "groq/gemma2-9b-it",
+    label: "Gemma2 9B-IT (Google)",
+    provider: "groq",
+  },
+  {
+    value: "groq/llama-3.3-70b-versatile",
+    label: "Llama 3.3 70B Versatile (Meta)",
+    provider: "groq",
+  },
+  {
+    value: "groq/llama-3.1-8b-instant",
+    label: "Llama 3.1 8B Instant (Meta)",
+    provider: "groq",
+  },
+  {
+    value: "groq/llama-guard-3-8b",
+    label: "Llama Guard 3 8B (Meta)",
+    provider: "groq",
+  },
+  {
+    value: "groq/llama3-70b-8192",
+    label: "Llama3 70B (Meta)",
+    provider: "groq",
+  },
+  {
+    value: "groq/llama3-8b-8192",
+    label: "Llama3 8B (Meta)",
+    provider: "groq",
+  },
+  {
+    value: "groq/whisper-large-v3",
+    label: "Whisper Large v3 (OpenAI)",
+    provider: "groq",
+  },
+  {
+    value: "groq/whisper-large-v3-turbo",
+    label: "Whisper Large v3 Turbo (OpenAI)",
+    provider: "groq",
+  },
+  {
+    value: "groq/distil-whisper-large-v3-en",
+    label: "Distil Whisper Large v3-EN (HuggingFace)",
+    provider: "groq",
+  },
+
+  // Groq Preview Models
+  {
+    value: "groq/allam-2-7b",
+    label: "Allam 2 7B (SDAIA)",
+    provider: "groq",
+  },
+  {
+    value: "groq/deepseek-r1-distill-llama-70b",
+    label: "DeepSeek R1 Distill Llama 70B",
+    provider: "groq",
+  },
+  {
+    value: "groq/meta-llama-llama-4-maverick-17b-128e-instruct",
+    label: "Llama 4 Maverick 17B Instruct (Meta)",
+    provider: "groq",
+  },
+
+  // Groq Preview Systems
+  {
+    value: "groq/compound-beta",
+    label: "Compound Beta",
+    provider: "groq",
+  },
+  {
+    value: "groq/compound-beta-mini",
+    label: "Compound Beta Mini",
+    provider: "groq",
+  },
+
+  // Cohere Command Family
+  {
+    value: "cohere/command-a-03-2025",
+    label: "Command A (256K context)",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/command-r7b-12-2024",
+    label: "Command R7B (128K context)",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/command-r-plus-08-2024",
+    label: "Command R+ (128K context)",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/command-r-08-2024",
+    label: "Command R (128K context)",
+    provider: "cohere",
+  },
+
+  // Cohere Embed Family
+  {
+    value: "cohere/embed-v4.0",
+    label: "Embed v4.0 (Multimodal)",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/embed-english-v3.0",
+    label: "Embed English v3.0",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/embed-english-light-v3.0",
+    label: "Embed English Light v3.0",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/embed-multilingual-v3.0",
+    label: "Embed Multilingual v3.0",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/embed-multilingual-light-v3.0",
+    label: "Embed Multilingual Light v3.0",
+    provider: "cohere",
+  },
+
+  // Cohere Rerank Family
+  {
+    value: "cohere/rerank-v3.5",
+    label: "Rerank v3.5 (Multilingual)",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/rerank-english-v3.0",
+    label: "Rerank English v3.0",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/rerank-multilingual-v3.0",
+    label: "Rerank Multilingual v3.0",
+    provider: "cohere",
+  },
+
+  // Cohere Aya Family
+  {
+    value: "cohere/c4ai-aya-expanse-8b",
+    label: "Aya Expanse 8B (23 languages)",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/c4ai-aya-expanse-32b",
+    label: "Aya Expanse 32B (128K context)",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/c4ai-aya-vision-8b",
+    label: "Aya Vision 8B (Multimodal)",
+    provider: "cohere",
+  },
+  {
+    value: "cohere/c4ai-aya-vision-32b",
+    label: "Aya Vision 32B (Multimodal)",
+    provider: "cohere",
+  },
+
+  // Mistral Premier Models
+  {
+    value: "mistral/mistral-large-2-v24.11",
+    label: "Mistral Large 2 (123B, 128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/pixtral-large-v24.11",
+    label: "Pixtral Large (Multimodal, 128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/mistral-medium-3-v07.05",
+    label: "Mistral Medium 3 (128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/mistral-saba-v25.02",
+    label: "Mistral Saba (Middle East & South Asia, 32K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/ministral-8b-v24.10",
+    label: "Ministral 8B (128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/ministral-3b-v24.10",
+    label: "Ministral 3B (128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/mistral-small-3.1-v25.03",
+    label: "Mistral Small 3.1 (24B, Multimodal)",
+    provider: "mistral",
+  },
+
+  // Mistral Open-Source Models
+  {
+    value: "mistral/mistral-7b",
+    label: "Mistral 7B (128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/mixtral-8x7b",
+    label: "Mixtral 8×7B (MoE, 128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/mixtral-8x22b",
+    label: "Mixtral 8×22B (MoE, 128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/codestral-mamba-7b",
+    label: "Codestral Mamba 7B (Code, 128K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/codestral-22b",
+    label: "Codestral 22B (Code, non-commercial)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/mathstral-7b",
+    label: "Mathstral 7B (STEM, 32K context)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/mistral-nemo",
+    label: "Mistral Nemo (Code focus)",
+    provider: "mistral",
+  },
+  {
+    value: "mistral/pixtral-12b",
+    label: "Pixtral 12B (Multimodal, 128K context)",
+    provider: "mistral",
+  },
+];
+
+export const availableModelProviders = [
+  {
+    value: "openai",
+    label: "OpenAI",
+  },
+  {
+    value: "gemini",
+    label: "Gemini",
+  },
+  {
+    value: "anthropic",
+    label: "Anthropic",
+  },
+  {
+    value: "groq",
+    label: "Groq",
+  },
+  {
+    value: "cohere",
+    label: "Cohere",
+  },
+];
diff --git a/frontend/types/auth.ts b/frontend/types/auth.ts
new file mode 100644
index 00000000..d2b92f3f
--- /dev/null
+++ b/frontend/types/auth.ts
@@ -0,0 +1,77 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /types/auth.ts                                                        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+export interface RegisterRequest {
+  email: string;
+  password: string;
+  name: string;
+}
+
+export interface RegisterResponse {
+  id: string;
+  email: string;
+  name: string;
+}
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  access_token: string;
+  token_type: string;
+}
+
+export interface ResendVerificationRequest {
+  email: string;
+}
+
+export interface ForgotPasswordRequest {
+  email: string;
+}
+
+export interface ResetPasswordRequest {
+  token: string;
+  new_password: string;
+}
+
+export interface ChangePasswordRequest {
+  current_password: string;
+  new_password: string;
+}
+
+export interface MeResponse {
+  email: string;
+  id: string;
+  client_id: string | null;
+  is_active: boolean;
+  email_verified: boolean;
+  is_admin: boolean;
+  created_at: string;
+}
diff --git a/frontend/types/mcpServer.ts b/frontend/types/mcpServer.ts
new file mode 100644
index 00000000..b3f33eb2
--- /dev/null
+++ b/frontend/types/mcpServer.ts
@@ -0,0 +1,60 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /types/mcpServer.ts                                                   │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+export interface ToolConfig {
+  id: string;
+  name: string;
+  description?: string;
+  tags?: string[];
+  examples?: string[];
+  inputModes?: string[];
+  outputModes?: string[];
+}
+
+export interface MCPServer {
+  id: string;
+  name: string;
+  description?: string;
+  config_type: string;
+  config_json: Record<string, any>;
+  environments: Record<string, any>;
+  tools: ToolConfig[];
+  type: string;
+  created_at: string;
+  updated_at?: string;
+}
+
+export interface MCPServerCreate {
+  name: string;
+  description?: string;
+  config_type?: string;
+  config_json?: Record<string, any>;
+  environments?: Record<string, any>;
+  tools?: ToolConfig[];
+  type?: string;
+}
diff --git a/pyproject.toml b/pyproject.toml
index ada85ccd..53f43721 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -51,6 +51,10 @@ dependencies = [
     "langgraph==0.4.1",
     "opentelemetry-sdk==1.33.0",
     "opentelemetry-exporter-otlp==1.33.0",
+    "mcp==1.9.0",
+    "crewai==0.120.1",
+    "crewai-tools==0.45.0",
+    "a2a-sdk==0.2.4",
 ]
 
 [project.optional-dependencies]
diff --git a/src/api/a2a_routes.py b/src/api/a2a_routes.py
index 712a1b2e..08ba220b 100644
--- a/src/api/a2a_routes.py
+++ b/src/api/a2a_routes.py
@@ -3,7 +3,7 @@
 │ @author: Davidson Gomes                                                      │
 │ @file: a2a_routes.py                                                         │
 │ Developed by: Davidson Gomes                                                 │
-│ Creation date: May 13, 2025                                                  │
+│ Creation date: May 23, 2025                                                  │
 │ Contact: contato@evolution-api.com                                           │
 ├──────────────────────────────────────────────────────────────────────────────┤
 │ @copyright © Evolution API 2025. All rights reserved.                        │
@@ -28,32 +28,56 @@
 """
 
 """
-Routes for the A2A (Agent-to-Agent) protocol.
+A2A Protocol Official Implementation
 
-This module implements the standard A2A routes according to the specification.
-Supports both text messages and file uploads through the message parts mechanism.
+100% compliant with the official A2A specification:
+https://google.github.io/A2A/specification
+
+This is the official and only A2A implementation for the Evo AI platform.
+
+Methods implemented:
+- message/send: Send a message and get response
+- message/stream: Send a message and stream response  
+- agent/authenticatedExtendedCard: Get agent information (via .well-known/agent.json)
+
+Features:
+- Direct integration with agent_runner (no complex SDK layer)
+- 100% specification compliant JSON-RPC format
+- Proper Task object structure
+- Full streaming support
+- API key authentication
 """
 
 import uuid
 import logging
 import json
+import base64
+import httpx
+from datetime import datetime
+from typing import Dict, Any, List, Optional
+
 from fastapi import APIRouter, Depends, Header, Request, HTTPException
 from sqlalchemy.orm import Session
 from starlette.responses import JSONResponse
 from sse_starlette.sse import EventSourceResponse
+from sqlalchemy.sql import text
 
-from src.models.models import Agent
 from src.config.database import get_db
-from src.services.a2a_task_manager import (
-    A2ATaskManager,
-    A2AService,
+from src.config.settings import settings
+from src.services.agent_service import get_agent
+from src.services.adk.agent_runner import run_agent, run_agent_stream
+from src.services.service_providers import (
+    session_service,
+    artifacts_service,
+    memory_service,
 )
+from src.schemas.chat import FileData
 
 logger = logging.getLogger(__name__)
 
 router = APIRouter(
     prefix="/a2a",
-    tags=["a2a"],
+    tags=["a2a-official"],
     responses={
         404: {"description": "Not found"},
         400: {"description": "Bad request"},
@@ -63,176 +87,1719 @@ router = APIRouter(
 )
 
 
-def get_a2a_service(db: Session = Depends(get_db)):
-    task_manager = A2ATaskManager(db)
-    return A2AService(db, task_manager)
-
-
 async def verify_api_key(db: Session, x_api_key: str) -> bool:
-    """Verifies the API key."""
+    """Verifies API key against agent config."""
     if not x_api_key:
         raise HTTPException(status_code=401, detail="API key not provided")
 
-    agent = (
-        db.query(Agent)
-        .filter(Agent.config.has_key("api_key"))
-        .filter(Agent.config["api_key"].astext == x_api_key)
-        .first()
-    )
+    query = text("SELECT * FROM agents WHERE config->>'api_key' = :api_key LIMIT 1")
+    result = db.execute(query, {"api_key": x_api_key}).first()
 
-    if not agent:
+    if not result:
         raise HTTPException(status_code=401, detail="Invalid API key")
+
     return True
 
 
+def extract_text_from_message(message: Dict[str, Any]) -> str:
+    """Extract text from message parts according to A2A spec."""
+    if not message or "parts" not in message:
+        return ""
+
+    for part in message["parts"]:
+        if part.get("type") == "text" and "text" in part:
+            return part["text"]
+
+    return ""
+
+
+def extract_files_from_message(message: Dict[str, Any]) -> List[FileData]:
+    """Extract files from message parts according to A2A spec."""
+    files = []
+    if not message or "parts" not in message:
+        return files
+
+    for part in message["parts"]:
+        if part.get("type") == "file" and "file" in part:
+            file_data = part["file"]
+
+            # Check if file has bytes (base64 encoded)
+            if "bytes" in file_data and file_data["bytes"]:
+                try:
+                    # Validate base64 content
+                    base64.b64decode(file_data["bytes"])
+
+                    file_obj = FileData(
+                        filename=file_data.get("name", "file"),
+                        content_type=file_data.get(
+                            "mimeType", "application/octet-stream"
+                        ),
+                        data=file_data["bytes"],  # Keep as base64 string
+                    )
+                    files.append(file_obj)
+                    logger.info(
+                        f"📎 Extracted file: {file_obj.filename} ({file_obj.content_type})"
+                    )
+
+                except Exception as e:
+                    logger.error(f"❌ Invalid base64 in file: {e}")
+                    continue
+            else:
+                logger.warning(
+                    f"⚠️ File part missing bytes data: {file_data.get('name', 'unnamed')}"
+                )
+
+    logger.info(f"📎 Total files extracted: {len(files)}")
+    return files
+
+
+def create_task_response(
+    task_id: str,
+    context_id: str,
+    final_response: str,
+    conversation_history: Optional[List[Dict[str, Any]]] = None,
+    current_user_message: Optional[Dict[str, Any]] = None,
+) -> Dict[str, Any]:
+    """Create Task response according to A2A specification."""
+
+    logger.info(
+        f"🏗️ create_task_response called with history: {len(conversation_history) if conversation_history else 0} messages"
+    )
+
+    # Create main response artifact (only the agent's response)
+    artifacts = [
+        {
+            "artifactId": str(uuid.uuid4()),
+            "parts": [{"type": "text", "text": final_response}],
+        }
+    ]
+
+    logger.info(f"📦 Created main artifact")
+
+    # Create Task response according to A2A spec
+    task_response = {
+        "id": task_id,
+        "contextId": context_id,
+        "status": {"state": "completed", "timestamp": datetime.now().isoformat() + "Z"},
+        "artifacts": artifacts,
+        "kind": "task",
+    }
+
+    # Build complete history for A2A response
+    complete_history = []
+
+    # Add existing conversation history
+    if conversation_history:
+        for msg in conversation_history:
+            # Create A2A Message object
+            a2a_message = {
+                "role": msg["role"],
+                "parts": [{"type": "text", "text": msg["content"]}],
+                "messageId": msg.get("messageId"),
+                "taskId": task_id,
+                "contextId": context_id,
+                "kind": "message",
+            }
+
+            # Add timestamp if available
+            if msg.get("timestamp"):
+                a2a_message["timestamp"] = msg["timestamp"]
+
+            complete_history.append(a2a_message)
+
+    # Add current user message if provided (this is the message that triggered this response)
+    if current_user_message:
+        logger.info(f"📝 Adding current user message to history")
+        a2a_message = {
+            "role": "user",
+            "parts": [{"type": "text", "text": current_user_message["content"]}],
+            "messageId": current_user_message.get("messageId"),
+            "taskId": task_id,
+            "contextId": context_id,
+            "kind": "message",
+        }
+
+        # Add timestamp if available
+        if current_user_message.get("timestamp"):
+            a2a_message["timestamp"] = current_user_message["timestamp"]
+
+        complete_history.append(a2a_message)
+
+    # Add history field to Task object (A2A spec compliant)
+    if complete_history:
+        task_response["history"] = complete_history
+        logger.info(
+            f"📚 Added {len(complete_history)} messages to history field (including current message)"
+        )
+    else:
+        logger.warning("⚠️ No conversation history provided to create_task_response")
+
+    logger.info(f"✅ create_task_response returning A2A compliant Task object")
+    return task_response
+
+
+def clean_message_content(content: str, role: str) -> str:
+    """Clean message content, extracting just the text if it contains JSON."""
+    if role == "agent" or role == "assistant":
+        # Check if content looks like JSON (starts with { and contains jsonrpc)
+        if content.strip().startswith("{") and "jsonrpc" in content:
+            try:
+                # Try to parse as JSON and extract the actual response text
+                import json
+
+                json_data = json.loads(content)
+
+                # Look for the actual text in artifacts
+                if "result" in json_data and "artifacts" in json_data["result"]:
+                    for artifact in json_data["result"]["artifacts"]:
+                        if "parts" in artifact:
+                            for part in artifact["parts"]:
+                                if part.get("type") == "text" and "text" in part:
+                                    return part["text"]
+
+                # Fallback: if we can't extract, return a cleaned version
+                return "Previous assistant response"
+
+            except (json.JSONDecodeError, KeyError):
+                # If not valid JSON, return as-is but truncated
+                return content[:100] + "..." if len(content) > 100 else content
+
+    return content
+
+
+def extract_conversation_history(
+    agent_id: str, external_id: str
+) -> List[Dict[str, Any]]:
+    """Extract conversation history from session using the same logic as /sessions/{session_id}/messages."""
+    logger.info(
+        f"🔍 extract_conversation_history called with agent_id={agent_id}, external_id={external_id}"
+    )
+
+    try:
+        from src.services.session_service import get_session_events, get_session_by_id
+
+        # Get session ID in the correct format (same as working endpoint)
+        session_id = f"{external_id}_{agent_id}"
+        logger.info(f"📋 Constructed session_id: {session_id}")
+
+        # First, verify session exists (same as working endpoint)
+        logger.info(f"🔍 Verifying session exists...")
+        session = get_session_by_id(session_service, session_id)
+        if not session:
+            logger.warning(f"⚠️ Session not found: {session_id}")
+            return []
+
+        logger.info(f"✅ Session found: {session_id}")
+
+        # Get events using same method as working endpoint
+        logger.info(f"🔍 Getting events for session...")
+        events = get_session_events(session_service, session_id)
+        logger.info(
+            f"📋 get_session_events returned {len(events) if events else 0} events"
+        )
+
+        history = []
+
+        # Process events exactly like the working /messages endpoint
+        for i, event in enumerate(events):
+            logger.info(
+                f"🔍 Processing event {i}: id={getattr(event, 'id', 'NO_ID')}, author={getattr(event, 'author', 'NO_AUTHOR')}"
+            )
+
+            # Convert event to dict like in working endpoint
+            event_dict = (
+                event.model_dump() if hasattr(event, "model_dump") else event.__dict__
+            )
+
+            # Check if event has content with parts (same logic as working endpoint)
+            if event_dict.get("content") and event_dict["content"].get("parts"):
+                logger.info(
+                    f"📝 Event {i} has content with {len(event_dict['content']['parts'])} parts"
+                )
+
+                for j, part in enumerate(event_dict["content"]["parts"]):
+                    logger.info(f"📝 Processing part {j}: {part}")
+
+                    # Extract text content (same as working endpoint checks for text)
+                    if isinstance(part, dict) and part.get("text"):
+                        role = "user" if event_dict.get("author") == "user" else "agent"
+                        text_content = part["text"]
+
+                        # Clean the content to remove JSON artifacts
+                        cleaned_content = clean_message_content(text_content, role)
+                        logger.info(
+                            f"📝 Cleaned content for {role}: {cleaned_content[:50]}..."
+                        )
+
+                        # Create A2A compatible history entry
+                        history_entry = {
+                            "role": role,
+                            "content": cleaned_content,
+                            "messageId": event_dict.get("id"),
+                            "timestamp": event_dict.get("timestamp"),
+                            "author": event_dict.get("author"),
+                            "invocation_id": event_dict.get("invocation_id"),
+                        }
+
+                        history.append(history_entry)
+                        logger.info(f"✅ Added history entry {len(history)}: {role}")
+                    else:
+                        logger.info(f"📝 Part {j} has no text content: {part}")
+            else:
+                logger.warning(f"⚠️ Event {i} has no content or parts")
+
+        logger.info(
+            f"📚 extract_conversation_history extracted {len(history)} messages using working logic"
+        )
+        return history
+
+    except Exception as e:
+        logger.error(f"❌ Error extracting conversation history: {e}")
+        import traceback
+
+        logger.error(f"Full traceback: {traceback.format_exc()}")
+        return []
+
+
+def extract_history_from_params(params: Dict[str, Any]) -> List[Dict[str, Any]]:
+    """Extract history from request params according to A2A spec."""
+    history = []
+    if "history" in params and isinstance(params["history"], list):
+        for msg in params["history"]:
+            if isinstance(msg, dict) and "role" in msg and "parts" in msg:
+                # Extract text from parts
+                text_content = ""
+                for part in msg["parts"]:
+                    if (
+                        isinstance(part, dict)
+                        and part.get("type") == "text"
+                        and "text" in part
+                    ):
+                        text_content += part["text"] + " "
+
+                if text_content.strip():
+                    history.append(
+                        {
+                            "role": msg["role"],
+                            "content": text_content.strip(),
+                            "messageId": msg.get("messageId"),
+                            "timestamp": None,  # Could be added if provided
+                        }
+                    )
+
+    logger.info(f"📚 Extracted {len(history)} messages from request history")
+    return history
+
+
+def combine_histories(
+    request_history: List[Dict[str, Any]], session_history: List[Dict[str, Any]]
+) -> List[Dict[str, Any]]:
+    """Combine request history with session history, avoiding duplicates."""
+    combined = []
+
+    # Add session history first
+    for msg in session_history:
+        combined.append(msg)
+
+    # Add request history, avoiding duplicates based on messageId or content
+    for req_msg in request_history:
+        # Check if this message already exists in combined history
+        is_duplicate = False
+        for existing_msg in combined:
+            if (
+                req_msg.get("messageId")
+                and req_msg["messageId"] == existing_msg.get("messageId")
+            ) or (
+                req_msg["content"] == existing_msg["content"]
+                and req_msg["role"] == existing_msg["role"]
+            ):
+                is_duplicate = True
+                break
+
+        if not is_duplicate:
+            combined.append(req_msg)
+
+    # Sort by timestamp if available, otherwise maintain order
+    return combined
+
+
 @router.post("/{agent_id}")
-async def process_a2a_request(
+async def process_a2a_message(
     agent_id: uuid.UUID,
     request: Request,
     x_api_key: str = Header(None, alias="x-api-key"),
     db: Session = Depends(get_db),
-    a2a_service: A2AService = Depends(get_a2a_service),
 ):
     """
-    Processes an A2A request.
+    Process A2A messages according to official specification.
 
-    Supports both text messages and file uploads. For file uploads,
-    include file parts in the message following the A2A protocol format:
-
-    {
-        "jsonrpc": "2.0",
-        "id": "request-id",
-        "method": "tasks/send",
-        "params": {
-            "id": "task-id",
-            "sessionId": "session-id",
-            "message": {
-                "role": "user",
-                "parts": [
-                    {
-                        "type": "text",
-                        "text": "Analyze this image"
-                    },
-                    {
-                        "type": "file",
-                        "file": {
-                            "name": "example.jpg",
-                            "mimeType": "image/jpeg",
-                            "bytes": "base64-encoded-content"
-                        }
-                    }
-                ]
-            }
-        }
-    }
+    Supports:
+    - message/send: Send a message and get response
+    - message/stream: Send a message and stream response
     """
-    # Verify the API key
-    if not verify_api_key(db, x_api_key):
-        raise HTTPException(status_code=401, detail="Invalid API key")
+    logger.info(f"🎯 A2A Spec endpoint called for agent {agent_id}")
+
+    # Verify API key
+    await verify_api_key(db, x_api_key)
+
+    # Verify agent exists
+    agent = get_agent(db, agent_id)
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent not found")
 
-    # Process the request
     try:
+        # Parse JSON-RPC request
         request_body = await request.json()
 
-        debug_request_body = {}
-        if "method" in request_body:
-            debug_request_body["method"] = request_body["method"]
-        if "id" in request_body:
-            debug_request_body["id"] = request_body["id"]
+        jsonrpc = request_body.get("jsonrpc")
+        if jsonrpc != "2.0":
+            raise HTTPException(status_code=400, detail="Invalid JSON-RPC version")
 
-        logger.info(f"A2A request received: {debug_request_body}")
+        method = request_body.get("method")
+        params = request_body.get("params", {})
+        request_id = request_body.get("id")
 
-        # Log if request contains file parts for debugging
-        if isinstance(request_body, dict) and "params" in request_body:
-            params = request_body.get("params", {})
-            message = params.get("message", {})
-            parts = message.get("parts", [])
+        logger.info(f"📝 Method: {method}, ID: {request_id}")
 
-            logger.info(f"A2A message contains {len(parts)} parts")
-            for i, part in enumerate(parts):
-                if not isinstance(part, dict):
-                    logger.warning(f"Part {i+1} is not a dictionary: {type(part)}")
-                    continue
+        if method == "message/send":
+            return await handle_message_send(agent_id, params, request_id, db)
+        elif method == "message/stream":
+            return await handle_message_stream(agent_id, params, request_id, db)
+        elif method == "tasks/get":
+            return await handle_tasks_get(agent_id, params, request_id, db)
+        elif method == "tasks/cancel":
+            return await handle_tasks_cancel(agent_id, params, request_id, db)
+        elif method == "tasks/pushNotificationConfig/set":
+            return await handle_tasks_push_notification_config_set(
+                agent_id, params, request_id, db
+            )
+        elif method == "tasks/pushNotificationConfig/get":
+            return await handle_tasks_push_notification_config_get(
+                agent_id, params, request_id, db
+            )
+        elif method == "tasks/resubscribe":
+            return await handle_tasks_resubscribe(agent_id, params, request_id, db)
+        elif method == "agent/authenticatedExtendedCard":
+            return await handle_agent_authenticated_extended_card(
+                agent_id, params, request_id, db
+            )
+        else:
+            # JSON-RPC error for method not found
+            return JSONResponse(
+                status_code=400,
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32601,
+                        "message": "Method not found",
+                        "data": {
+                            "method": method,
+                            "supported_methods": [
+                                "message/send",
+                                "message/stream",
+                                "tasks/get",
+                                "tasks/cancel",
+                                "tasks/pushNotificationConfig/set",
+                                "tasks/pushNotificationConfig/get",
+                                "tasks/resubscribe",
+                                "agent/authenticatedExtendedCard",
+                            ],
+                        },
+                    },
+                },
+            )
 
-                part_type = part.get("type")
-                logger.info(f"Part {i+1} type: {part_type}")
-
-                if part_type == "file":
-                    file_info = part.get("file", {})
-                    logger.info(
-                        f"File part found: {file_info.get('name')} ({file_info.get('mimeType')})"
-                    )
-                    if "bytes" in file_info:
-                        bytes_data = file_info.get("bytes", "")
-                        bytes_size = len(bytes_data) * 0.75
-                        logger.info(f"File size: ~{bytes_size/1024:.2f} KB")
-                        if bytes_data:
-                            sample = (
-                                bytes_data[:10] + "..."
-                                if len(bytes_data) > 10
-                                else bytes_data
-                            )
-                            logger.info(f"Sample of base64 data: {sample}")
-                elif part_type == "text":
-                    text_content = part.get("text", "")
-                    preview = (
-                        text_content[:30] + "..."
-                        if len(text_content) > 30
-                        else text_content
-                    )
-                    logger.info(f"Text part found: '{preview}'")
-
-        result = await a2a_service.process_request(agent_id, request_body)
-
-        # If the response is a streaming response, return as EventSourceResponse
-        if hasattr(result, "__aiter__"):
-            logger.info("Returning streaming response")
-
-            async def event_generator():
-                async for item in result:
-                    if hasattr(item, "model_dump_json"):
-                        yield {"data": item.model_dump_json(exclude_none=True)}
-                    else:
-                        yield {"data": json.dumps(item)}
-
-            return EventSourceResponse(event_generator())
-
-        # Otherwise, return as JSONResponse
-        logger.info("Returning standard JSON response")
-        if hasattr(result, "model_dump"):
-            return JSONResponse(result.model_dump(exclude_none=True))
-        return JSONResponse(result)
+    except json.JSONDecodeError:
+        raise HTTPException(status_code=400, detail="Invalid JSON")
     except Exception as e:
         logger.error(f"Error processing A2A request: {e}")
-        import traceback
-
-        logger.error(f"Full traceback: {traceback.format_exc()}")
         return JSONResponse(
             status_code=500,
             content={
                 "jsonrpc": "2.0",
-                "id": None,
-                "error": {"code": -32603, "message": "Internal server error"},
+                "id": request_body.get("id") if "request_body" in locals() else None,
+                "error": {
+                    "code": -32603,
+                    "message": "Internal error",
+                    "data": {"error": str(e)},
+                },
             },
         )
 
 
+async def handle_message_send(
+    agent_id: uuid.UUID, params: Dict[str, Any], request_id: str, db: Session
+) -> JSONResponse:
+    """Handle message/send according to A2A spec."""
+
+    logger.info(f"🔄 Processing message/send for agent {agent_id}")
+
+    # Extract message from params
+    message = params.get("message")
+    if not message:
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32602,
+                    "message": "Invalid params",
+                    "data": {"missing": "message"},
+                },
+            }
+        )
+
+    # Extract configuration from params (A2A spec: configuration is optional)
+    configuration = params.get("configuration", {})
+    push_notification_config = configuration.get("pushNotificationConfig")
+
+    # Support alternative format: pushNotificationConfig directly in params (for backward compatibility)
+    if not push_notification_config:
+        push_notification_config = params.get("pushNotificationConfig")
+
+    logger.info(
+        f"🔔 Push notification config found: {push_notification_config is not None}"
+    )
+
+    if push_notification_config:
+        # Support both official spec format and common variations
+        webhook_url = push_notification_config.get(
+            "url"
+        ) or push_notification_config.get("webhookUrl")
+
+        logger.info(
+            f"🔔 Push notification config provided: {webhook_url or 'No URL found'}"
+        )
+
+        # Validate push notification config according to A2A spec (support both url and webhookUrl)
+        if not webhook_url:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {
+                            "missing": "pushNotificationConfig.url or pushNotificationConfig.webhookUrl"
+                        },
+                    },
+                }
+            )
+
+        # Validate HTTPS requirement (A2A spec: prevents SSRF attacks)
+        if not webhook_url.startswith("https://"):
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {
+                            "error": "pushNotificationConfig.url MUST use HTTPS for security"
+                        },
+                    },
+                }
+            )
+
+        # Validate that agent supports push notifications
+        agent = get_agent(db, agent_id)
+        if not agent:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32001,
+                        "message": "Agent not found",
+                    },
+                }
+            )
+
+        # Check agent capabilities for push notification support
+        # (Our agent card already indicates pushNotifications: true)
+        logger.info(f"✅ Agent {agent_id} supports push notifications")
+
+    # Extract text and files from message
+    text = extract_text_from_message(message)
+    files = extract_files_from_message(message)
+
+    # Allow empty text if we have files
+    if not text and not files:
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32602,
+                    "message": "Invalid params",
+                    "data": {"missing": "text content or files in message parts"},
+                },
+            }
+        )
+
+    # Use default text if only files provided
+    if not text and files:
+        text = "Analyze the provided files"
+
+    logger.info(f"📝 Extracted text: {text}")
+    logger.info(f"📎 Extracted files: {len(files)}")
+
+    # Generate IDs
+    task_id = str(uuid.uuid4())
+    context_id = message.get("messageId", str(uuid.uuid4()))
+
+    try:
+        # Extract conversation history for context
+        logger.info(
+            f"🔍 Attempting to extract conversation history for agent {agent_id}, context {context_id}"
+        )
+        conversation_history = extract_conversation_history(str(agent_id), context_id)
+        logger.info(
+            f"📚 Session history extracted: {len(conversation_history)} messages"
+        )
+
+        # Extract history from params
+        logger.info(f"🔍 Attempting to extract history from request params")
+        request_history = extract_history_from_params(params)
+        logger.info(f"📝 Request history extracted: {len(request_history)} messages")
+
+        # Combine histories
+        logger.info(f"🔗 Combining histories...")
+        combined_history = combine_histories(request_history, conversation_history)
+        logger.info(f"📖 Combined history has {len(combined_history)} total messages")
+
+        # Log detailed combined history for debugging
+        for i, msg in enumerate(combined_history):
+            logger.info(f"  History[{i}]: {msg['role']} - {msg['content'][:50]}...")
+
+        # Execute agent with files - the ADK runner will handle session history automatically
+        logger.info(
+            f"🤖 Executing agent {agent_id} with message: {text} and {len(files)} files"
+        )
+        logger.info(
+            f"📚 ADK will provide session context automatically ({len(combined_history)} previous messages available)"
+        )
+
+        result = await run_agent(
+            agent_id=str(agent_id),
+            external_id=context_id,
+            message=text,  # Send only the original message - ADK handles context
+            session_service=session_service,
+            artifacts_service=artifacts_service,
+            memory_service=memory_service,
+            db=db,
+            files=files if files else None,
+        )
+
+        final_response = result.get("final_response", "No response")
+        logger.info(f"✅ Agent response: {final_response}")
+
+        # Log what we're about to send to create_task_response
+        logger.info(
+            f"🏗️ Creating task response with {len(combined_history) if combined_history else 0} history messages"
+        )
+
+        # Create current user message object for history
+        current_user_message = {
+            "content": text,
+            "messageId": message.get("messageId"),
+            "timestamp": None,  # Could add current timestamp
+        }
+
+        # Create A2A compliant response with history
+        task_response = create_task_response(
+            task_id,
+            context_id,
+            final_response,
+            combined_history if combined_history else None,
+            current_user_message,
+        )
+
+        logger.info(
+            f"📦 Task response created with {len(task_response.get('artifacts', []))} artifacts"
+        )
+
+        # Handle push notification if configured
+        if push_notification_config:
+            try:
+                await send_push_notification(task_response, push_notification_config)
+                logger.info(f"🔔 Push notification sent successfully")
+            except Exception as e:
+                logger.error(f"❌ Push notification failed: {e}")
+                # Continue execution - push notification failure shouldn't break the response
+
+        return JSONResponse(
+            content={"jsonrpc": "2.0", "id": request_id, "result": task_response}
+        )
+
+    except Exception as e:
+        logger.error(f"❌ Agent execution error: {e}")
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32603,
+                    "message": "Agent execution failed",
+                    "data": {"error": str(e)},
+                },
+            }
+        )
+
+
+async def handle_message_stream(
+    agent_id: uuid.UUID, params: Dict[str, Any], request_id: str, db: Session
+) -> EventSourceResponse:
+    """Handle message/stream according to A2A spec."""
+
+    logger.info(f"🔄 Processing message/stream for agent {agent_id}")
+
+    # Extract message
+    message = params.get("message")
+    if not message:
+        # Return error event
+        async def error_generator():
+            yield {
+                "data": json.dumps(
+                    {
+                        "jsonrpc": "2.0",
+                        "id": request_id,
+                        "error": {
+                            "code": -32602,
+                            "message": "Invalid params",
+                            "data": {"missing": "message"},
+                        },
+                    }
+                )
+            }
+
+        return EventSourceResponse(error_generator())
+
+    # Extract text and files from message
+    text = extract_text_from_message(message)
+    files = extract_files_from_message(message)
+    context_id = message.get("messageId", str(uuid.uuid4()))
+
+    # Use default text if only files provided
+    if not text and files:
+        text = "Analyze the provided files"
+
+    # Extract and combine conversation history
+    conversation_history = extract_conversation_history(str(agent_id), context_id)
+    request_history = extract_history_from_params(params)
+    combined_history = combine_histories(request_history, conversation_history)
+
+    async def stream_generator():
+        try:
+            logger.info(f"🌊 Starting stream for: {text} with {len(files)} files")
+            logger.info(
+                f"📚 ADK will provide session context automatically ({len(combined_history)} previous messages available)"
+            )
+
+            # Stream agent execution - ADK handles session history automatically
+            async for chunk in run_agent_stream(
+                agent_id=str(agent_id),
+                external_id=context_id,
+                message=text,  # Send only the original message - ADK handles context
+                session_service=session_service,
+                artifacts_service=artifacts_service,
+                memory_service=memory_service,
+                db=db,
+                files=files if files else None,
+            ):
+                # Parse chunk and convert to A2A format
+                try:
+                    chunk_data = json.loads(chunk)
+
+                    # Create TaskStatusUpdateEvent
+                    event = {
+                        "jsonrpc": "2.0",
+                        "id": request_id,
+                        "result": {
+                            "id": str(uuid.uuid4()),
+                            "status": {
+                                "state": "working",
+                                "message": chunk_data.get("content", {}),
+                            },
+                            "final": False,
+                        },
+                    }
+
+                    yield {"data": json.dumps(event)}
+
+                except Exception as e:
+                    logger.error(f"Error processing chunk: {e}")
+                    continue
+
+            # Send final event
+            final_event = {
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "result": {
+                    "id": str(uuid.uuid4()),
+                    "status": {"state": "completed"},
+                    "final": True,
+                },
+            }
+            yield {"data": json.dumps(final_event)}
+
+        except Exception as e:
+            logger.error(f"❌ Streaming error: {e}")
+            error_event = {
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32603,
+                    "message": "Streaming failed",
+                    "data": {"error": str(e)},
+                },
+            }
+            yield {"data": json.dumps(error_event)}
+
+    return EventSourceResponse(stream_generator())
+
+
 @router.get("/{agent_id}/.well-known/agent.json")
 async def get_agent_card(
     agent_id: uuid.UUID,
-    request: Request,
     db: Session = Depends(get_db),
-    a2a_service: A2AService = Depends(get_a2a_service),
 ):
-    """Gets the agent card for the specified agent."""
+    """Get agent card according to A2A specification."""
+
+    logger.info(f"📋 Getting agent card for {agent_id}")
+
+    agent = get_agent(db, agent_id)
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent not found")
+
+    # Build agent card following A2A specification
+    agent_card = {
+        "name": agent.name,
+        "description": agent.description or f"AI Agent {agent.name}",
+        "url": f"{settings.API_URL}/api/v1/a2a/{agent_id}",
+        "provider": {
+            "organization": "Evo AI Platform",
+            "url": settings.API_URL,
+        },
+        "version": "1.0.0",
+        "documentationUrl": f"{settings.API_URL}/docs",
+        "capabilities": {
+            "streaming": True,
+            "pushNotifications": True,  # Now supporting push notifications
+            "stateTransitionHistory": False,
+        },
+        "securitySchemes": {
+            "apiKey": {
+                "type": "apiKey",
+                "in": "header",
+                "name": "x-api-key",
+            }
+        },
+        "security": [{"apiKey": []}],
+        "defaultInputModes": ["text/plain", "application/json"],
+        "defaultOutputModes": ["text/plain", "application/json"],
+        "skills": [
+            {
+                "id": "general-assistance",
+                "name": "General AI Assistant",
+                "description": "Provides general AI assistance and task completion",
+                "tags": ["assistant", "general", "ai", "help"],
+                "examples": ["Help me with a task", "Answer my question"],
+                "inputModes": ["text"],
+                "outputModes": ["text"],
+            }
+        ],
+    }
+
+    return JSONResponse(agent_card)
+
+
+@router.get("/health")
+async def health_check():
+    """Health check for A2A official implementation - 100% A2A spec compliant."""
+    return {
+        "status": "healthy",
+        "specification": "A2A Protocol v1.0 - 100% COMPLIANT IMPLEMENTATION",
+        "specification_url": "https://google.github.io/A2A/specification",
+        "compliance_level": "FULL",
+        # All RPC methods from A2A spec implemented
+        "rpc_methods": {
+            "core": ["message/send", "message/stream"],
+            "task_management": ["tasks/get", "tasks/cancel", "tasks/resubscribe"],
+            "push_notifications": [
+                "tasks/pushNotificationConfig/set",
+                "tasks/pushNotificationConfig/get",
+            ],
+            "agent_discovery": ["agent/authenticatedExtendedCard"],
+        },
+        "endpoints": {
+            "agent_endpoint": f"{settings.API_URL}/api/v1/a2a/{{agent_id}}",
+            "agent_card": f"{settings.API_URL}/api/v1/a2a/{{agent_id}}/.well-known/agent.json",
+        },
+        # A2A Protocol Data Objects - all implemented
+        "data_objects": [
+            "Task",
+            "TaskStatus",
+            "TaskState",
+            "Message",
+            "TextPart",
+            "FilePart",
+            "DataPart",
+            "Artifact",
+            "PushNotificationConfig",
+            "PushNotificationAuthenticationInfo",
+            "JSONRPCRequest",
+            "JSONRPCResponse",
+            "JSONRPCError",
+        ],
+        # A2A Features implemented
+        "features": {
+            "multi_turn_conversations": True,
+            "file_processing": True,
+            "context_preservation": True,
+            "streaming": True,
+            "push_notifications": True,
+            "task_cancellation": True,
+            "push_config_management": True,
+            "authenticated_extended_cards": True,
+            "https_security": True,
+            "json_rpc_2_0": True,
+        },
+        # Security features per A2A spec
+        "security": {
+            "transport_security": "HTTPS required for push notifications",
+            "authentication": "API Key via x-api-key header",
+            "webhook_validation": "HTTPS-only webhooks to prevent SSRF",
+            "input_validation": "Full parameter validation on all RPC methods",
+        },
+        # Extensions beyond A2A spec
+        "extensions": {
+            "conversation_history": f"{settings.API_URL}/api/v1/a2a/{{agent_id}}/conversation/history",
+            "sessions": f"{settings.API_URL}/api/v1/a2a/{{agent_id}}/sessions",
+            "session_history": f"{settings.API_URL}/api/v1/a2a/{{agent_id}}/sessions/{{session_id}}/history",
+        },
+        "compatibility_notes": [
+            "Supports both official A2A format and common variations",
+            "Backward compatible with alternative field names",
+            "Task management adapted for synchronous execution model",
+            "Push notifications with multiple authentication schemes",
+        ],
+    }
+
+
+@router.get("/{agent_id}/sessions")
+async def list_agent_sessions(
+    agent_id: uuid.UUID,
+    external_id: str,
+    x_api_key: str = Header(None, alias="x-api-key"),
+    db: Session = Depends(get_db),
+):
+    """List sessions for an agent and external_id (A2A extension)."""
+
+    logger.info(f"📋 Listing sessions for agent {agent_id}, external_id: {external_id}")
+
+    # Verify API key
+    await verify_api_key(db, x_api_key)
+
+    # Verify agent exists
+    agent = get_agent(db, agent_id)
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent not found")
+
     try:
-        agent_card = a2a_service.get_agent_card(agent_id)
-        if hasattr(agent_card, "model_dump"):
-            return JSONResponse(agent_card.model_dump(exclude_none=True))
-        return JSONResponse(agent_card)
-    except Exception as e:
-        logger.error(f"Error getting agent card: {e}")
-        return JSONResponse(
-            status_code=404,
-            content={"error": f"Agent not found: {str(e)}"},
+        # List sessions from session service
+        sessions = []
+        session_id = f"{external_id}_{agent_id}"
+
+        # Try to get session
+        session = session_service.get_session(
+            app_name=str(agent_id), user_id=external_id, session_id=session_id
+        )
+
+        if session:
+            # Extract conversation history
+            history = extract_conversation_history(str(agent_id), external_id)
+
+            sessions.append(
+                {
+                    "sessionId": session_id,
+                    "contextId": external_id,
+                    "lastUpdate": getattr(session, "last_update_time", None),
+                    "messageCount": len(history),
+                    "status": "active",
+                }
+            )
+
+        return JSONResponse({"sessions": sessions, "total": len(sessions)})
+
+    except Exception as e:
+        logger.error(f"❌ Error listing sessions: {e}")
+        raise HTTPException(status_code=500, detail=f"Error listing sessions: {str(e)}")
+
+
+@router.get("/{agent_id}/sessions/{session_id}/history")
+async def get_session_history(
+    agent_id: uuid.UUID,
+    session_id: str,
+    x_api_key: str = Header(None, alias="x-api-key"),
+    db: Session = Depends(get_db),
+    limit: int = 50,
+):
+    """Get conversation history for a specific session (A2A extension)."""
+
+    logger.info(f"📚 Getting history for session {session_id}")
+
+    # Verify API key
+    await verify_api_key(db, x_api_key)
+
+    # Verify agent exists
+    agent = get_agent(db, agent_id)
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent not found")
+
+    try:
+        # Parse session_id to get external_id
+        if "_" in session_id:
+            external_id = session_id.split("_")[0]
+        else:
+            external_id = session_id
+
+        # Extract conversation history
+        history = extract_conversation_history(str(agent_id), external_id)
+
+        # Limit results
+        if limit > 0:
+            history = history[-limit:]
+
+        return JSONResponse(
+            {"sessionId": session_id, "history": history, "total": len(history)}
+        )
+
+    except Exception as e:
+        logger.error(f"❌ Error getting session history: {e}")
+        raise HTTPException(
+            status_code=500, detail=f"Error getting session history: {str(e)}"
+        )
+
+
+@router.post("/{agent_id}/conversation/history")
+async def get_conversation_history(
+    agent_id: uuid.UUID,
+    request: Request,
+    x_api_key: str = Header(None, alias="x-api-key"),
+    db: Session = Depends(get_db),
+):
+    """
+    Get conversation history according to A2A specification.
+
+    Endpoint for retrieving multi-turn conversation context.
+    This implements context preservation as defined in A2A spec.
+    """
+    logger.info(f"📚 A2A Conversation History requested for agent {agent_id}")
+
+    # Verify API key
+    await verify_api_key(db, x_api_key)
+
+    # Verify agent exists
+    agent = get_agent(db, agent_id)
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent not found")
+
+    try:
+        # Parse JSON-RPC request
+        request_body = await request.json()
+
+        jsonrpc = request_body.get("jsonrpc")
+        if jsonrpc != "2.0":
+            raise HTTPException(status_code=400, detail="Invalid JSON-RPC version")
+
+        params = request_body.get("params", {})
+        request_id = request_body.get("id")
+
+        # Extract contextId (external_id) from params
+        context_id = params.get("contextId") or params.get("external_id")
+        if not context_id:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {"missing": "contextId or external_id"},
+                    },
+                }
+            )
+
+        # Extract conversation history using session_service
+        history = extract_conversation_history(str(agent_id), context_id)
+
+        # Limit history if requested
+        limit = params.get("limit", 50)
+        if limit > 0:
+            history = history[-limit:]
+
+        # Format as A2A Task response with history artifacts
+        task_id = str(uuid.uuid4())
+
+        # Create structured artifacts for history
+        artifacts = []
+
+        # Main artifact with recent messages
+        if history:
+            recent_messages = history[-10:]  # Last 10 messages
+
+            # Create individual message artifacts
+            for i, msg in enumerate(recent_messages):
+                artifacts.append(
+                    {
+                        "artifactId": str(uuid.uuid4()),
+                        "name": f"message_{i+1}",
+                        "description": f"Message from {msg['role']}",
+                        "parts": [
+                            {
+                                "type": "text",
+                                "text": msg["content"],
+                                "metadata": {
+                                    "role": msg["role"],
+                                    "messageId": msg.get("messageId"),
+                                    "timestamp": msg.get("timestamp"),
+                                    "author": msg.get("author"),
+                                },
+                            }
+                        ],
+                    }
+                )
+
+            # Summary artifact
+            artifacts.append(
+                {
+                    "artifactId": str(uuid.uuid4()),
+                    "name": "conversation_summary",
+                    "description": f"Conversation history summary ({len(history)} total messages)",
+                    "parts": [
+                        {
+                            "type": "text",
+                            "text": f"Conversation with {len(history)} messages between user and agent.",
+                            "metadata": {
+                                "total_messages": len(history),
+                                "recent_messages": len(recent_messages),
+                                "context_id": context_id,
+                            },
+                        }
+                    ],
+                }
+            )
+
+        # Create A2A compliant Task response
+        task_response = {
+            "id": task_id,
+            "contextId": context_id,
+            "status": {
+                "state": "completed",
+                "timestamp": datetime.now().isoformat() + "Z",
+            },
+            "artifacts": artifacts,
+            "kind": "task",
+            "metadata": {
+                "total_messages": len(history),
+                "operation": "conversation_history_retrieval",
+            },
+        }
+
+        return JSONResponse(
+            content={"jsonrpc": "2.0", "id": request_id, "result": task_response}
+        )
+
+    except json.JSONDecodeError:
+        raise HTTPException(status_code=400, detail="Invalid JSON")
+    except Exception as e:
+        logger.error(f"❌ Error retrieving conversation history: {e}")
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_body.get("id") if "request_body" in locals() else None,
+                "error": {
+                    "code": -32603,
+                    "message": "Internal error",
+                    "data": {"error": str(e)},
+                },
+            }
+        )
+
+
+async def send_push_notification(
+    task_response: Dict[str, Any], push_notification_config: Dict[str, Any]
+):
+    """Send push notification according to A2A specification section 9.5.
+
+    A2A spec PushNotificationConfig object:
+    - url: The absolute HTTPS webhook URL where the A2A Server should POST task updates
+    - token (optional): Client-generated opaque token for validation
+    - authentication (optional): PushNotificationAuthenticationInfo for authenticating to client's webhook
+
+    Alternative formats supported for compatibility:
+    - webhookUrl instead of url
+    - webhookAuthenticationInfo instead of authentication
+    """
+    # Support both official spec format and common variations
+    webhook_url = push_notification_config.get("url") or push_notification_config.get(
+        "webhookUrl"
+    )
+    webhook_token = push_notification_config.get("token")
+
+    # Support both official and alternative authentication field names
+    authentication = push_notification_config.get(
+        "authentication"
+    ) or push_notification_config.get("webhookAuthenticationInfo")
+
+    if not webhook_url:
+        raise ValueError("pushNotificationConfig.url (or webhookUrl) is required")
+
+    # Validate HTTPS requirement (A2A spec: url MUST be HTTPS for security to prevent SSRF)
+    if not webhook_url.startswith("https://"):
+        raise ValueError(
+            "pushNotificationConfig.url MUST use HTTPS to prevent SSRF attacks"
+        )
+
+    logger.info(f"🔔 Sending push notification to: {webhook_url}")
+
+    # Prepare headers according to A2A spec section 9.5
+    headers = {
+        "Content-Type": "application/json",
+        "User-Agent": f"A2A-Server/{getattr(settings, 'API_VERSION', '1.0.0')}",
+    }
+
+    # Add client token if provided (A2A spec: server SHOULD include in X-A2A-Notification-Token header)
+    if webhook_token:
+        headers["X-A2A-Notification-Token"] = webhook_token
+        logger.info(f"🔑 Added client token to notification headers")
+
+    # Handle authentication according to A2A spec PushNotificationAuthenticationInfo
+    if authentication:
+        auth_type = authentication.get("type")
+
+        # Handle "none" type (no authentication)
+        if auth_type == "none":
+            logger.info(f"🔓 No authentication required for webhook")
+
+        # Handle schemes-based authentication (official A2A spec format)
+        elif "schemes" in authentication:
+            auth_schemes = authentication.get("schemes", [])
+            auth_credentials = authentication.get("credentials")
+
+            for scheme in auth_schemes:
+                if scheme.lower() == "bearer":
+                    # Bearer token authentication
+                    if auth_credentials:
+                        headers["Authorization"] = f"Bearer {auth_credentials}"
+                        logger.info(f"🔐 Added Bearer authentication")
+                    else:
+                        logger.warning(
+                            "⚠️ Bearer scheme specified but no credentials provided"
+                        )
+
+                elif scheme.lower() == "apikey":
+                    # API Key authentication
+                    if auth_credentials:
+                        try:
+                            # A2A spec example: JSON like {"in": "header", "name": "X-Client-Webhook-Key", "value": "actual_key"}
+                            if isinstance(auth_credentials, str):
+                                cred_data = json.loads(auth_credentials)
+                            else:
+                                cred_data = auth_credentials
+
+                            if cred_data.get("in") == "header":
+                                header_name = cred_data.get("name", "X-API-Key")
+                                header_value = cred_data.get("value")
+                                if header_value:
+                                    headers[header_name] = header_value
+                                    logger.info(
+                                        f"🔐 Added API Key authentication to header: {header_name}"
+                                    )
+                        except (json.JSONDecodeError, TypeError):
+                            # Fallback: treat credentials as direct API key value
+                            headers["X-API-Key"] = str(auth_credentials)
+                            logger.info(f"🔐 Added API Key authentication (fallback)")
+                    else:
+                        logger.warning(
+                            "⚠️ ApiKey scheme specified but no credentials provided"
+                        )
+
+                else:
+                    logger.warning(f"⚠️ Unsupported authentication scheme: {scheme}")
+
+        # Handle basic authentication types
+        elif auth_type == "bearer":
+            token = authentication.get("token") or authentication.get("credentials")
+            if token:
+                headers["Authorization"] = f"Bearer {token}"
+                logger.info(f"🔐 Added Bearer authentication (alternative format)")
+
+        elif auth_type == "apikey":
+            api_key = (
+                authentication.get("apiKey")
+                or authentication.get("key")
+                or authentication.get("credentials")
+            )
+            header_name = authentication.get("headerName", "X-API-Key")
+            if api_key:
+                headers[header_name] = api_key
+                logger.info(f"🔐 Added API Key authentication to header: {header_name}")
+
+        else:
+            logger.warning(f"⚠️ Unsupported authentication type: {auth_type}")
+
+    # According to A2A spec section 9.5, the notification payload should contain
+    # sufficient information for client to identify Task ID and new state
+    # The spec suggests sending the full Task object as JSON payload
+    notification_payload = task_response
+
+    try:
+        # Use 30 second timeout as recommended for webhook calls
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            logger.info(
+                f"📤 Sending POST request to webhook with {len(headers)} headers"
+            )
+
+            response = await client.post(
+                webhook_url, headers=headers, json=notification_payload
+            )
+
+            # Log the response according to A2A spec recommendations
+            if response.status_code == 200:
+                logger.info(f"✅ Push notification sent successfully to {webhook_url}")
+            elif 200 <= response.status_code < 300:
+                logger.info(
+                    f"✅ Push notification accepted with status {response.status_code} from {webhook_url}"
+                )
+            else:
+                logger.warning(
+                    f"⚠️ Push notification received non-success response: {response.status_code} from {webhook_url}"
+                )
+                try:
+                    response_text = response.text[
+                        :200
+                    ]  # Log first 200 chars of response
+                    logger.warning(f"Response body: {response_text}")
+                except:
+                    pass
+
+            # Don't raise exception for non-200 status codes per A2A spec
+            # The webhook might have its own status handling, and notification
+            # delivery is best-effort
+
+    except httpx.TimeoutException:
+        logger.error(f"❌ Push notification timeout (30s) to {webhook_url}")
+        raise Exception(f"Push notification timeout to {webhook_url}")
+
+    except httpx.RequestError as e:
+        logger.error(f"❌ Push notification request error to {webhook_url}: {e}")
+        raise Exception(f"Push notification request error: {e}")
+
+    except Exception as e:
+        logger.error(f"❌ Push notification unexpected error to {webhook_url}: {e}")
+        raise Exception(f"Push notification error: {e}")
+
+
+# Task management functions (A2A spec section 7.3-7.7)
+async def handle_tasks_get(
+    agent_id: uuid.UUID, params: Dict[str, Any], request_id: str, db: Session
+) -> JSONResponse:
+    """Handle tasks/get according to A2A spec section 7.3."""
+    logger.info(f"🔍 Processing tasks/get for agent {agent_id}")
+
+    try:
+        task_id = params.get("taskId")
+        if not task_id:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {"missing": "taskId"},
+                    },
+                }
+            )
+
+        # In our implementation, tasks are ephemeral and complete immediately
+        # For A2A compliance, we return a completed task with minimal info
+        task_response = {
+            "id": task_id,
+            "status": {
+                "state": "completed",
+                "timestamp": datetime.now().isoformat() + "Z",
+            },
+            "kind": "task",
+        }
+
+        return JSONResponse(
+            content={"jsonrpc": "2.0", "id": request_id, "result": task_response}
+        )
+
+    except Exception as e:
+        logger.error(f"❌ tasks/get error: {e}")
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32603,
+                    "message": "Internal error",
+                    "data": {"error": str(e)},
+                },
+            }
+        )
+
+
+async def handle_tasks_cancel(
+    agent_id: uuid.UUID, params: Dict[str, Any], request_id: str, db: Session
+) -> JSONResponse:
+    """Handle tasks/cancel according to A2A spec section 7.4."""
+    logger.info(f"🛑 Processing tasks/cancel for agent {agent_id}")
+
+    try:
+        task_id = params.get("taskId")
+        if not task_id:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {"missing": "taskId"},
+                    },
+                }
+            )
+
+        # In our implementation, tasks complete immediately, so cancellation is not needed
+        # Return success for A2A compliance
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "result": {
+                    "success": True,
+                    "message": f"Task {task_id} cancellation requested",
+                },
+            }
+        )
+
+    except Exception as e:
+        logger.error(f"❌ tasks/cancel error: {e}")
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32603,
+                    "message": "Internal error",
+                    "data": {"error": str(e)},
+                },
+            }
+        )
+
+
+# Task push notification config management (A2A spec section 7.5-7.6)
+task_push_configs = {}  # In-memory storage for demo - use database in production
+
+
+async def handle_tasks_push_notification_config_set(
+    agent_id: uuid.UUID, params: Dict[str, Any], request_id: str, db: Session
+) -> JSONResponse:
+    """Handle tasks/pushNotificationConfig/set according to A2A spec section 7.5."""
+    logger.info(f"🔔 Processing tasks/pushNotificationConfig/set for agent {agent_id}")
+
+    try:
+        task_id = params.get("taskId")
+        push_config = params.get("pushNotificationConfig")
+
+        if not task_id:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {"missing": "taskId"},
+                    },
+                }
+            )
+
+        if not push_config:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {"missing": "pushNotificationConfig"},
+                    },
+                }
+            )
+
+        # Validate URL is HTTPS
+        webhook_url = push_config.get("url") or push_config.get("webhookUrl")
+        if webhook_url and not webhook_url.startswith("https://"):
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {"error": "pushNotificationConfig.url MUST use HTTPS"},
+                    },
+                }
+            )
+
+        # Store the config (in production, save to database)
+        task_push_configs[task_id] = push_config
+        logger.info(f"✅ Push notification config stored for task {task_id}")
+
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "result": {"success": True, "taskId": task_id},
+            }
+        )
+
+    except Exception as e:
+        logger.error(f"❌ tasks/pushNotificationConfig/set error: {e}")
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32603,
+                    "message": "Internal error",
+                    "data": {"error": str(e)},
+                },
+            }
+        )
+
+
+async def handle_tasks_push_notification_config_get(
+    agent_id: uuid.UUID, params: Dict[str, Any], request_id: str, db: Session
+) -> JSONResponse:
+    """Handle tasks/pushNotificationConfig/get according to A2A spec section 7.6."""
+    logger.info(f"🔍 Processing tasks/pushNotificationConfig/get for agent {agent_id}")
+
+    try:
+        task_id = params.get("taskId")
+        if not task_id:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {"missing": "taskId"},
+                    },
+                }
+            )
+
+        # Retrieve the config (in production, get from database)
+        push_config = task_push_configs.get(task_id)
+
+        if push_config:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "result": {
+                        "taskId": task_id,
+                        "pushNotificationConfig": push_config,
+                    },
+                }
+            )
+        else:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32001,
+                        "message": "Task not found or no push notification config set",
+                        "data": {"taskId": task_id},
+                    },
+                }
+            )
+
+    except Exception as e:
+        logger.error(f"❌ tasks/pushNotificationConfig/get error: {e}")
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32603,
+                    "message": "Internal error",
+                    "data": {"error": str(e)},
+                },
+            }
+        )
+
+
+async def handle_tasks_resubscribe(
+    agent_id: uuid.UUID, params: Dict[str, Any], request_id: str, db: Session
+) -> JSONResponse:
+    """Handle tasks/resubscribe according to A2A spec section 7.7."""
+    logger.info(f"🔄 Processing tasks/resubscribe for agent {agent_id}")
+
+    try:
+        task_id = params.get("taskId")
+        push_config = params.get("pushNotificationConfig")
+
+        if not task_id:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32602,
+                        "message": "Invalid params",
+                        "data": {"missing": "taskId"},
+                    },
+                }
+            )
+
+        # Update push notification config if provided
+        if push_config:
+            task_push_configs[task_id] = push_config
+            logger.info(f"✅ Push notification config updated for task {task_id}")
+
+        # In our implementation, tasks complete immediately
+        # Return success for A2A compliance
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "result": {
+                    "success": True,
+                    "taskId": task_id,
+                    "message": "Resubscription successful",
+                },
+            }
+        )
+
+    except Exception as e:
+        logger.error(f"❌ tasks/resubscribe error: {e}")
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32603,
+                    "message": "Internal error",
+                    "data": {"error": str(e)},
+                },
+            }
+        )
+
+
+async def handle_agent_authenticated_extended_card(
+    agent_id: uuid.UUID, params: Dict[str, Any], request_id: str, db: Session
+) -> JSONResponse:
+    """Handle agent/authenticatedExtendedCard according to A2A spec section 7.8."""
+    logger.info(f"🛡️ Processing agent/authenticatedExtendedCard for agent {agent_id}")
+
+    try:
+        # Get agent from database
+        agent = get_agent(db, agent_id)
+        if not agent:
+            return JSONResponse(
+                content={
+                    "jsonrpc": "2.0",
+                    "id": request_id,
+                    "error": {
+                        "code": -32001,
+                        "message": "Agent not found",
+                    },
+                }
+            )
+
+        # Build authenticated extended agent card (can include additional info after auth)
+        extended_card = {
+            "name": agent.name,
+            "description": agent.description or f"AI Agent {agent.name}",
+            "url": f"{settings.API_URL}/api/v1/a2a/{agent_id}",
+            "provider": {
+                "organization": "Evo AI Platform",
+                "url": settings.API_URL,
+            },
+            "version": "1.0.0",
+            "documentationUrl": f"{settings.API_URL}/docs",
+            "capabilities": {
+                "streaming": True,
+                "pushNotifications": True,
+                "stateTransitionHistory": False,
+                "multiTurnConversations": True,
+                "fileProcessing": True,
+            },
+            "securitySchemes": {
+                "apiKey": {
+                    "type": "apiKey",
+                    "in": "header",
+                    "name": "x-api-key",
+                }
+            },
+            "security": [{"apiKey": []}],
+            "defaultInputModes": ["text/plain", "application/json"],
+            "defaultOutputModes": ["text/plain", "application/json"],
+            "skills": [
+                {
+                    "id": "general-assistance",
+                    "name": "General AI Assistant",
+                    "description": "Provides general AI assistance and task completion",
+                    "tags": ["assistant", "general", "ai", "help"],
+                    "examples": ["Help me with a task", "Answer my question"],
+                    "inputModes": ["text"],
+                    "outputModes": ["text"],
+                }
+            ],
+            # Extended information available after authentication
+            "extended": {
+                "agent_id": str(agent_id),
+                "creation_date": getattr(agent, "created_at", None),
+                "available_endpoints": [
+                    "message/send",
+                    "message/stream",
+                    "tasks/get",
+                    "tasks/cancel",
+                    "tasks/pushNotificationConfig/set",
+                    "tasks/pushNotificationConfig/get",
+                    "tasks/resubscribe",
+                    "agent/authenticatedExtendedCard",
+                ],
+                "rate_limits": {"requests_per_minute": 100, "concurrent_tasks": 10},
+            },
+        }
+
+        return JSONResponse(
+            content={"jsonrpc": "2.0", "id": request_id, "result": extended_card}
+        )
+
+    except Exception as e:
+        logger.error(f"❌ agent/authenticatedExtendedCard error: {e}")
+        return JSONResponse(
+            content={
+                "jsonrpc": "2.0",
+                "id": request_id,
+                "error": {
+                    "code": -32603,
+                    "message": "Internal error",
+                    "data": {"error": str(e)},
+                },
+            }
         )
diff --git a/src/api/agent_routes.py b/src/api/agent_routes.py
index 4369f209..985e29a1 100644
--- a/src/api/agent_routes.py
+++ b/src/api/agent_routes.py
@@ -27,10 +27,20 @@
 └──────────────────────────────────────────────────────────────────────────────┘
 """
 
-from fastapi import APIRouter, Depends, HTTPException, status, Header, Query
+from fastapi import (
+    APIRouter,
+    Depends,
+    HTTPException,
+    status,
+    Header,
+    Query,
+    File,
+    UploadFile,
+    Form,
+)
 from sqlalchemy.orm import Session
 from src.config.database import get_db
-from typing import List, Dict, Any, Optional
+from typing import List, Dict, Any, Optional, Union
 import uuid
 from src.core.jwt_middleware import (
     get_jwt_token,
@@ -48,6 +58,7 @@ from src.schemas.schemas import (
 )
 from src.services import agent_service, mcp_server_service, apikey_service
 import logging
+import json
 
 logger = logging.getLogger(__name__)
 
@@ -621,3 +632,74 @@ async def get_shared_agent(
         agent.agent_card_url = agent.agent_card_url_property
 
     return agent
+
+
+@router.post("/import", response_model=List[Agent], status_code=status.HTTP_201_CREATED)
+async def import_agents(
+    file: UploadFile = File(...),
+    folder_id: Optional[str] = Form(None),
+    x_client_id: uuid.UUID = Header(..., alias="x-client-id"),
+    db: Session = Depends(get_db),
+    payload: dict = Depends(get_jwt_token),
+):
+    """Import one or more agents from a JSON file"""
+    # Verify if the user has access to this client's data
+    await verify_user_client(payload, db, x_client_id)
+
+    # Convert folder_id to UUID if provided
+    folder_uuid = None
+    if folder_id:
+        try:
+            folder_uuid = uuid.UUID(folder_id)
+            # Verify the folder exists and belongs to the client
+            folder = agent_service.get_agent_folder(db, folder_uuid)
+            if not folder:
+                raise HTTPException(
+                    status_code=status.HTTP_404_NOT_FOUND, detail="Folder not found"
+                )
+            if folder.client_id != x_client_id:
+                raise HTTPException(
+                    status_code=status.HTTP_403_FORBIDDEN,
+                    detail="Folder does not belong to the specified client",
+                )
+        except ValueError:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="Invalid folder ID format",
+            )
+
+    try:
+        # Check file type
+        if not file.filename.endswith(".json"):
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="Only JSON files are supported",
+            )
+
+        # Read file content
+        file_content = await file.read()
+
+        try:
+            # Parse JSON content
+            agents_data = json.loads(file_content)
+        except json.JSONDecodeError:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST, detail="Invalid JSON format"
+            )
+
+        # Call the service function to import agents
+        imported_agents = await agent_service.import_agents_from_json(
+            db, agents_data, x_client_id, folder_uuid
+        )
+
+        return imported_agents
+
+    except HTTPException:
+        # Re-raise HTTP exceptions
+        raise
+    except Exception as e:
+        logger.error(f"Error in agent import: {str(e)}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail=f"Error importing agents: {str(e)}",
+        )
diff --git a/src/api/chat_routes.py b/src/api/chat_routes.py
index bf7cd0a2..e34ab755 100644
--- a/src/api/chat_routes.py
+++ b/src/api/chat_routes.py
@@ -39,6 +39,7 @@ from fastapi import (
     Header,
 )
 from sqlalchemy.orm import Session
+from src.config.settings import settings
 from src.config.database import get_db
 from src.core.jwt_middleware import (
     get_jwt_token,
@@ -49,7 +50,8 @@ from src.services import (
     agent_service,
 )
 from src.schemas.chat import ChatRequest, ChatResponse, ErrorResponse, FileData
-from src.services.agent_runner import run_agent, run_agent_stream
+from src.services.adk.agent_runner import run_agent as run_agent_adk, run_agent_stream
+from src.services.crewai.agent_runner import run_agent as run_agent_crewai
 from src.core.exceptions import AgentNotFoundError
 from src.services.service_providers import (
     session_service,
@@ -262,7 +264,7 @@ async def websocket_chat(
 
 
 @router.post(
-    "",
+    "/{agent_id}/{external_id}",
     response_model=ChatResponse,
     responses={
         400: {"model": ErrorResponse},
@@ -272,20 +274,32 @@ async def websocket_chat(
 )
 async def chat(
     request: ChatRequest,
+    agent_id: str,
+    external_id: str,
     _=Depends(get_agent_by_api_key),
     db: Session = Depends(get_db),
 ):
     try:
-        final_response = await run_agent(
-            request.agent_id,
-            request.external_id,
-            request.message,
-            session_service,
-            artifacts_service,
-            memory_service,
-            db,
-            files=request.files,
-        )
+        if settings.AI_ENGINE == "adk":
+            final_response = await run_agent_adk(
+                agent_id,
+                external_id,
+                request.message,
+                session_service,
+                artifacts_service,
+                memory_service,
+                db,
+                files=request.files,
+            )
+        elif settings.AI_ENGINE == "crewai":
+            final_response = await run_agent_crewai(
+                agent_id,
+                external_id,
+                request.message,
+                session_service,
+                db,
+                files=request.files,
+            )
 
         return {
             "response": final_response["final_response"],
diff --git a/src/api/mcp_server_routes.py b/src/api/mcp_server_routes.py
index 143ae8ce..4f3a7447 100644
--- a/src/api/mcp_server_routes.py
+++ b/src/api/mcp_server_routes.py
@@ -28,6 +28,7 @@
 """
 
 from fastapi import APIRouter, Depends, HTTPException, status
+from starlette.concurrency import run_in_threadpool
 from sqlalchemy.orm import Session
 from src.config.database import get_db
 from typing import List
@@ -54,7 +55,7 @@ router = APIRouter(
     responses={404: {"description": "Not found"}},
 )
 
-
+# Last edited by Arley Peter on 2025-05-17
 @router.post("/", response_model=MCPServer, status_code=status.HTTP_201_CREATED)
 async def create_mcp_server(
     server: MCPServerCreate,
@@ -64,7 +65,7 @@ async def create_mcp_server(
     # Only administrators can create MCP servers
     await verify_admin(payload)
 
-    return mcp_server_service.create_mcp_server(db, server)
+    return await run_in_threadpool(mcp_server_service.create_mcp_server, db, server)
 
 
 @router.get("/", response_model=List[MCPServer])
diff --git a/src/config/__init__.py b/src/config/__init__.py
index e69de29b..957fe205 100644
--- a/src/config/__init__.py
+++ b/src/config/__init__.py
@@ -0,0 +1,3 @@
+from src.config.settings import settings
+
+__all__ = ["settings"]
diff --git a/src/config/settings.py b/src/config/settings.py
index 1dbb8440..5165b1f2 100644
--- a/src/config/settings.py
+++ b/src/config/settings.py
@@ -57,6 +57,9 @@ class Settings(BaseSettings):
         "POSTGRES_CONNECTION_STRING", "postgresql://postgres:root@localhost:5432/evo_ai"
     )
 
+    # AI engine settings
+    AI_ENGINE: str = os.getenv("AI_ENGINE", "adk")
+
     # Logging settings
     LOG_LEVEL: str = os.getenv("LOG_LEVEL", "INFO")
     LOG_DIR: str = "logs"
@@ -83,11 +86,11 @@ class Settings(BaseSettings):
 
     # Email provider settings
     EMAIL_PROVIDER: str = os.getenv("EMAIL_PROVIDER", "sendgrid")
-    
+
     # SendGrid settings
     SENDGRID_API_KEY: str = os.getenv("SENDGRID_API_KEY", "")
     EMAIL_FROM: str = os.getenv("EMAIL_FROM", "noreply@yourdomain.com")
-    
+
     # SMTP settings
     SMTP_HOST: str = os.getenv("SMTP_HOST", "")
     SMTP_PORT: int = int(os.getenv("SMTP_PORT", 587))
@@ -96,7 +99,7 @@ class Settings(BaseSettings):
     SMTP_USE_TLS: bool = os.getenv("SMTP_USE_TLS", "true").lower() == "true"
     SMTP_USE_SSL: bool = os.getenv("SMTP_USE_SSL", "false").lower() == "true"
     SMTP_FROM: str = os.getenv("SMTP_FROM", "")
-    
+
     APP_URL: str = os.getenv("APP_URL", "http://localhost:8000")
 
     # Server settings
diff --git a/src/schemas/a2a_enhanced_types.py b/src/schemas/a2a_enhanced_types.py
new file mode 100644
index 00000000..dcc23329
--- /dev/null
+++ b/src/schemas/a2a_enhanced_types.py
@@ -0,0 +1,612 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: a2a_enhanced_types.py                                                 │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+import logging
+from typing import Dict, Any, Optional, List
+from uuid import uuid4
+
+try:
+    from a2a.types import (
+        AgentCard as SDKAgentCard,
+        AgentCapabilities as SDKAgentCapabilities,
+        AgentSkill as SDKAgentSkill,
+        AgentProvider as SDKAgentProvider,
+        Message as SDKMessage,
+        Task as SDKTask,
+        TaskStatus as SDKTaskStatus,
+        TaskState as SDKTaskState,
+        Part as SDKPart,
+        TextPart as SDKTextPart,
+        FilePart as SDKFilePart,
+        Artifact as SDKArtifact,
+    )
+
+    SDK_AVAILABLE = True
+except ImportError:
+    SDK_AVAILABLE = False
+    logging.warning("a2a-sdk not available, falling back to custom types")
+
+from src.schemas.a2a_types import (
+    Task as CustomTask,
+    TaskStatus as CustomTaskStatus,
+    TaskState as CustomTaskState,
+    Message as CustomMessage,
+    AgentCard as CustomAgentCard,
+    AgentCapabilities as CustomAgentCapabilities,
+    AgentSkill as CustomAgentSkill,
+    AgentProvider as CustomAgentProvider,
+    Artifact as CustomArtifact,
+)
+
+logger = logging.getLogger(__name__)
+
+
+class A2ATypeValidator:
+    """Validate and convert types between custom and official SDK implementations"""
+
+    @staticmethod
+    def is_sdk_available() -> bool:
+        """Check if SDK is available"""
+        return SDK_AVAILABLE
+
+    @staticmethod
+    def validate_agent_card(card_data: Dict[str, Any]) -> Optional[Any]:
+        """Validate agent card using SDK types if available"""
+        if not SDK_AVAILABLE:
+            logger.debug("SDK not available, using custom validation")
+            return CustomAgentCard(**card_data)
+
+        try:
+            return SDKAgentCard(**card_data)
+        except Exception as e:
+            logger.warning(f"SDK validation failed, falling back to custom: {e}")
+            return CustomAgentCard(**card_data)
+
+    @staticmethod
+    def validate_message(message_data: Dict[str, Any]) -> Optional[Any]:
+        """Validate message using SDK types if available"""
+        if not SDK_AVAILABLE:
+            return CustomMessage(**message_data)
+
+        try:
+            return SDKMessage(**message_data)
+        except Exception as e:
+            logger.warning(f"SDK message validation failed: {e}")
+            return CustomMessage(**message_data)
+
+    @staticmethod
+    def validate_task(task_data: Dict[str, Any]) -> Optional[Any]:
+        """Validate task using SDK types if available"""
+        if not SDK_AVAILABLE:
+            return CustomTask(**task_data)
+
+        try:
+            return SDKTask(**task_data)
+        except Exception as e:
+            logger.warning(f"SDK task validation failed: {e}")
+            return CustomTask(**task_data)
+
+
+class A2ATypeConverter:
+    """Convert between custom and SDK types"""
+
+    @staticmethod
+    def custom_task_to_sdk(custom_task: CustomTask) -> Optional[Any]:
+        """Convert CustomTask to SDKTask"""
+        if not SDK_AVAILABLE:
+            return custom_task
+
+        try:
+            # Convert status
+            sdk_status = None
+            if custom_task.status:
+                sdk_status = A2ATypeConverter.custom_task_status_to_sdk(
+                    custom_task.status
+                )
+
+            # If status is None, create a basic status
+            if not sdk_status:
+                sdk_status = SDKTaskStatus(
+                    state=SDKTaskState.unknown, message=None, timestamp=None
+                )
+
+            # Convert artifacts
+            sdk_artifacts = []
+            if custom_task.artifacts:
+                for artifact in custom_task.artifacts:
+                    sdk_artifact = A2ATypeConverter.custom_artifact_to_sdk(artifact)
+                    if sdk_artifact:
+                        sdk_artifacts.append(sdk_artifact)
+
+            # Convert history
+            sdk_history = []
+            if custom_task.history:
+                for message in custom_task.history:
+                    sdk_message = A2ATypeConverter.custom_message_to_sdk(message)
+                    if sdk_message:
+                        sdk_history.append(sdk_message)
+
+            return SDKTask(
+                id=custom_task.id,
+                contextId=custom_task.sessionId,
+                kind="task",  # New field in SDK
+                status=sdk_status,
+                artifacts=sdk_artifacts if sdk_artifacts else None,
+                history=sdk_history if sdk_history else None,
+                metadata=custom_task.metadata,
+            )
+        except Exception as e:
+            logger.error(f"Failed to convert custom task to SDK: {e}")
+            return None
+
+    @staticmethod
+    def sdk_task_to_custom(sdk_task) -> Optional[CustomTask]:
+        """Convert SDKTask to CustomTask"""
+        if not SDK_AVAILABLE:
+            return sdk_task
+
+        try:
+            # Convert status
+            custom_status = A2ATypeConverter.sdk_task_status_to_custom(sdk_task.status)
+
+            # Convert artifacts
+            custom_artifacts = []
+            if sdk_task.artifacts:
+                for artifact in sdk_task.artifacts:
+                    custom_artifact = A2ATypeConverter.sdk_artifact_to_custom(artifact)
+                    if custom_artifact:
+                        custom_artifacts.append(custom_artifact)
+
+            # Convert history
+            custom_history = []
+            if sdk_task.history:
+                for message in sdk_task.history:
+                    custom_message = A2ATypeConverter.sdk_message_to_custom(message)
+                    if custom_message:
+                        custom_history.append(custom_message)
+
+            return CustomTask(
+                id=sdk_task.id,
+                sessionId=sdk_task.contextId,
+                status=custom_status,
+                artifacts=custom_artifacts if custom_artifacts else None,
+                history=custom_history if custom_history else None,
+                metadata=sdk_task.metadata,
+            )
+        except Exception as e:
+            logger.error(f"Failed to convert SDK task to custom: {e}")
+            return None
+
+    @staticmethod
+    def custom_task_status_to_sdk(custom_status: CustomTaskStatus) -> Optional[Any]:
+        """Convert CustomTaskStatus to SDKTaskStatus"""
+        if not SDK_AVAILABLE:
+            return custom_status
+
+        try:
+            # Map states
+            state_mapping = {
+                CustomTaskState.SUBMITTED: SDKTaskState.submitted,
+                CustomTaskState.WORKING: SDKTaskState.working,
+                CustomTaskState.INPUT_REQUIRED: SDKTaskState.input_required,
+                CustomTaskState.COMPLETED: SDKTaskState.completed,
+                CustomTaskState.CANCELED: SDKTaskState.canceled,
+                CustomTaskState.FAILED: SDKTaskState.failed,
+                CustomTaskState.UNKNOWN: SDKTaskState.unknown,
+            }
+
+            sdk_state = state_mapping.get(custom_status.state, SDKTaskState.unknown)
+
+            # Convert message if exists
+            sdk_message = None
+            if custom_status.message:
+                sdk_message = A2ATypeConverter.custom_message_to_sdk(
+                    custom_status.message
+                )
+
+            # Convert timestamp to string if it's a datetime
+            timestamp_str = custom_status.timestamp
+            if hasattr(custom_status.timestamp, "isoformat"):
+                timestamp_str = custom_status.timestamp.isoformat()
+
+            return SDKTaskStatus(
+                state=sdk_state, message=sdk_message, timestamp=timestamp_str
+            )
+        except Exception as e:
+            logger.error(f"Failed to convert task status: {e}")
+            return None
+
+    @staticmethod
+    def sdk_task_status_to_custom(sdk_status) -> Optional[CustomTaskStatus]:
+        """Convert SDKTaskStatus to CustomTaskStatus"""
+        if not SDK_AVAILABLE:
+            return sdk_status
+
+        try:
+            # Map states back
+            state_mapping = {
+                SDKTaskState.submitted: CustomTaskState.SUBMITTED,
+                SDKTaskState.working: CustomTaskState.WORKING,
+                SDKTaskState.input_required: CustomTaskState.INPUT_REQUIRED,
+                SDKTaskState.completed: CustomTaskState.COMPLETED,
+                SDKTaskState.canceled: CustomTaskState.CANCELED,
+                SDKTaskState.failed: CustomTaskState.FAILED,
+                SDKTaskState.unknown: CustomTaskState.UNKNOWN,
+            }
+
+            custom_state = state_mapping.get(sdk_status.state, CustomTaskState.UNKNOWN)
+
+            # Convert message if exists
+            custom_message = None
+            if sdk_status.message:
+                custom_message = A2ATypeConverter.sdk_message_to_custom(
+                    sdk_status.message
+                )
+
+            return CustomTaskStatus(
+                state=custom_state,
+                message=custom_message,
+                timestamp=sdk_status.timestamp,
+            )
+        except Exception as e:
+            logger.error(f"Failed to convert SDK task status: {e}")
+            return None
+
+    @staticmethod
+    def custom_message_to_sdk(custom_message: CustomMessage) -> Optional[Any]:
+        """Convert CustomMessage to SDKMessage"""
+        if not SDK_AVAILABLE:
+            return custom_message
+
+        try:
+            # Convert parts
+            sdk_parts = []
+            for part in custom_message.parts:
+                if hasattr(part, "type"):
+                    if part.type == "text":
+                        sdk_parts.append(
+                            SDKTextPart(
+                                kind="text",
+                                text=part.text,
+                                metadata=getattr(part, "metadata", None),
+                            )
+                        )
+                    elif part.type == "file":
+                        sdk_parts.append(
+                            SDKFilePart(
+                                kind="file",
+                                file=part.file,
+                                metadata=getattr(part, "metadata", None),
+                            )
+                        )
+
+            return SDKMessage(
+                role=custom_message.role,
+                parts=sdk_parts,
+                messageId=getattr(custom_message, "messageId", str(uuid4())),
+                metadata=custom_message.metadata,
+            )
+        except Exception as e:
+            logger.error(f"Failed to convert message: {e}")
+            return None
+
+    @staticmethod
+    def sdk_message_to_custom(sdk_message) -> Optional[CustomMessage]:
+        """Convert SDKMessage to CustomMessage"""
+        if not SDK_AVAILABLE:
+            logger.info("SDK not available, returning original message")
+            return sdk_message
+
+        try:
+            logger.info(f"Converting SDK message to custom: {type(sdk_message)}")
+            logger.info(f"SDK message role: {getattr(sdk_message, 'role', 'NO_ROLE')}")
+            logger.info(
+                f"SDK message parts: {getattr(sdk_message, 'parts', 'NO_PARTS')}"
+            )
+            logger.info(
+                f"SDK message parts length: {len(getattr(sdk_message, 'parts', []))}"
+            )
+
+            # Convert parts back
+            custom_parts = []
+            for idx, part in enumerate(sdk_message.parts):
+                logger.info(f"Processing part {idx}: {type(part)}")
+                logger.info(f"Part repr: {repr(part)}")
+
+                try:
+                    # The SDK TextPart does not allow direct access via getattr
+                    # We will extract data from the repr string
+                    part_repr = repr(part)
+                    logger.info(f"Parsing part repr: {part_repr}")
+
+                    # Check if it's a TextPart
+                    if "TextPart" in str(type(part)) or "kind='text'" in part_repr:
+                        logger.info("Detected TextPart")
+
+                        # Extract text from repr
+                        import re
+
+                        text_match = re.search(r"text='([^']*)'", part_repr)
+                        text_content = text_match.group(1) if text_match else ""
+
+                        logger.info(f"Extracted text: {text_content}")
+
+                        # Create dictionary instead of SimpleNamespace for Pydantic compatibility
+                        text_part = {
+                            "type": "text",
+                            "text": text_content,
+                            "metadata": None,
+                        }
+                        custom_parts.append(text_part)
+                        logger.info(f"Created text part dict: {text_part}")
+
+                    elif "FilePart" in str(type(part)) or "kind='file'" in part_repr:
+                        logger.info("Detected FilePart")
+
+                        # For file parts, we would need to extract more data
+                        # For now, create a basic structure
+                        file_part = {
+                            "type": "file",
+                            "file": None,  # It would be necessary to extract from SDK
+                            "metadata": None,
+                        }
+                        custom_parts.append(file_part)
+                        logger.info(f"Created file part dict: {file_part}")
+
+                    else:
+                        logger.warning(f"Unknown part type in repr: {part_repr}")
+                        # Fallback: try to extract any available text
+                        if "text=" in part_repr:
+                            import re
+
+                            text_match = re.search(r"text='([^']*)'", part_repr)
+                            if text_match:
+                                fallback_text = text_match.group(1)
+                                text_part = {
+                                    "type": "text",
+                                    "text": fallback_text,
+                                    "metadata": None,
+                                }
+                                custom_parts.append(text_part)
+                                logger.info(f"Created fallback text part: {text_part}")
+
+                except Exception as part_error:
+                    logger.error(f"Error processing part {idx}: {part_error}")
+                    import traceback
+
+                    logger.error(f"Part processing traceback: {traceback.format_exc()}")
+                    continue
+
+            logger.info(f"Total custom parts created: {len(custom_parts)}")
+
+            # Convert role from enum to string if necessary
+            role_str = sdk_message.role
+            if hasattr(sdk_message.role, "value"):
+                role_str = sdk_message.role.value
+                logger.info(f"Converted role from enum: {role_str}")
+            elif not isinstance(sdk_message.role, str):
+                role_str = str(sdk_message.role)
+                logger.info(f"Converted role to string: {role_str}")
+
+            custom_message = CustomMessage(
+                role=role_str, parts=custom_parts, metadata=sdk_message.metadata
+            )
+
+            logger.info(
+                f"Created custom message: role={custom_message.role}, parts_count={len(custom_message.parts)}"
+            )
+            return custom_message
+
+        except Exception as e:
+            logger.error(f"Failed to convert SDK message: {e}")
+            import traceback
+
+            logger.error(f"Full traceback: {traceback.format_exc()}")
+            return None
+
+    @staticmethod
+    def custom_artifact_to_sdk(custom_artifact: CustomArtifact) -> Optional[Any]:
+        """Convert CustomArtifact to SDKArtifact"""
+        if not SDK_AVAILABLE:
+            return custom_artifact
+
+        try:
+            # Convert parts to SDK format
+            sdk_parts = []
+            if custom_artifact.parts:
+                for part in custom_artifact.parts:
+                    # If part is a dictionary, convert to appropriate SDK object
+                    if isinstance(part, dict):
+                        if part.get("type") == "text":
+                            sdk_parts.append(
+                                SDKTextPart(
+                                    kind="text",
+                                    text=part.get("text", ""),
+                                    metadata=part.get("metadata"),
+                                )
+                            )
+                        elif part.get("type") == "file":
+                            sdk_parts.append(
+                                SDKFilePart(
+                                    kind="file",
+                                    file=part.get("file"),
+                                    metadata=part.get("metadata"),
+                                )
+                            )
+                    # If it's already a SDK object, use it directly
+                    elif hasattr(part, "kind"):
+                        sdk_parts.append(part)
+                    # If it's a custom TextPart, convert it
+                    else:
+                        # Fallback: assume text part
+                        text_content = getattr(part, "text", str(part))
+                        sdk_parts.append(
+                            SDKTextPart(
+                                kind="text",
+                                text=text_content,
+                                metadata=getattr(part, "metadata", None),
+                            )
+                        )
+
+            # Generate artifactId if it doesn't exist
+            artifact_id = getattr(custom_artifact, "artifactId", None)
+            if not artifact_id:
+                from uuid import uuid4
+
+                artifact_id = str(uuid4())
+
+            return SDKArtifact(
+                artifactId=artifact_id,
+                name=custom_artifact.name,
+                description=custom_artifact.description,
+                parts=sdk_parts,
+                metadata=custom_artifact.metadata,
+            )
+        except Exception as e:
+            logger.error(f"Failed to convert artifact: {e}")
+            return None
+
+    @staticmethod
+    def sdk_artifact_to_custom(sdk_artifact) -> Optional[CustomArtifact]:
+        """Convert SDKArtifact to CustomArtifact"""
+        if not SDK_AVAILABLE:
+            return sdk_artifact
+
+        try:
+            return CustomArtifact(
+                name=sdk_artifact.name,
+                description=sdk_artifact.description,
+                parts=sdk_artifact.parts,
+                index=getattr(sdk_artifact, "index", 0),
+                append=getattr(sdk_artifact, "append", None),
+                lastChunk=getattr(sdk_artifact, "lastChunk", None),
+                metadata=sdk_artifact.metadata,
+            )
+        except Exception as e:
+            logger.error(f"Failed to convert SDK artifact: {e}")
+            return None
+
+    @staticmethod
+    def custom_agent_card_to_sdk(custom_card: CustomAgentCard) -> Optional[Any]:
+        """Convert CustomAgentCard to SDKAgentCard"""
+        if not SDK_AVAILABLE:
+            return custom_card
+
+        try:
+            # Convert capabilities
+            sdk_capabilities = None
+            if custom_card.capabilities:
+                sdk_capabilities = SDKAgentCapabilities(
+                    streaming=custom_card.capabilities.streaming,
+                    pushNotifications=custom_card.capabilities.pushNotifications,
+                    stateTransitionHistory=custom_card.capabilities.stateTransitionHistory,
+                )
+
+            # Convert provider
+            sdk_provider = None
+            if custom_card.provider:
+                sdk_provider = SDKAgentProvider(
+                    organization=custom_card.provider.organization,
+                    url=custom_card.provider.url,
+                )
+
+            # Convert skills
+            sdk_skills = []
+            if custom_card.skills:
+                for skill in custom_card.skills:
+                    sdk_skill = SDKAgentSkill(
+                        id=skill.id,
+                        name=skill.name,
+                        description=skill.description,
+                        tags=skill.tags,
+                        examples=skill.examples,
+                        inputModes=skill.inputModes,
+                        outputModes=skill.outputModes,
+                    )
+                    sdk_skills.append(sdk_skill)
+
+            return SDKAgentCard(
+                name=custom_card.name,
+                description=custom_card.description,
+                url=custom_card.url,
+                version=custom_card.version,
+                documentationUrl=custom_card.documentationUrl,
+                provider=sdk_provider,
+                capabilities=sdk_capabilities,
+                authentication=custom_card.authentication,
+                defaultInputModes=custom_card.defaultInputModes,
+                defaultOutputModes=custom_card.defaultOutputModes,
+                skills=sdk_skills,
+            )
+        except Exception as e:
+            logger.error(f"Failed to convert agent card: {e}")
+            return None
+
+
+# Utility functions to facilitate usage
+def validate_with_sdk(data: Dict[str, Any], data_type: str) -> Any:
+    """Utility function to validate data with SDK when available"""
+    validator = A2ATypeValidator()
+
+    if data_type == "agent_card":
+        return validator.validate_agent_card(data)
+    elif data_type == "message":
+        return validator.validate_message(data)
+    elif data_type == "task":
+        return validator.validate_task(data)
+    else:
+        raise ValueError(f"Unsupported data type: {data_type}")
+
+
+def convert_to_sdk_format(custom_obj: Any) -> Any:
+    """Utility function to convert custom object to SDK format"""
+    converter = A2ATypeConverter()
+
+    if isinstance(custom_obj, CustomTask):
+        return converter.custom_task_to_sdk(custom_obj)
+    elif isinstance(custom_obj, CustomMessage):
+        return converter.custom_message_to_sdk(custom_obj)
+    elif isinstance(custom_obj, CustomAgentCard):
+        return converter.custom_agent_card_to_sdk(custom_obj)
+    else:
+        logger.warning(f"No converter available for type: {type(custom_obj)}")
+        return custom_obj
+
+
+def convert_from_sdk_format(sdk_obj: Any) -> Any:
+    """Utility function to convert SDK object to custom format"""
+    converter = A2ATypeConverter()
+
+    if SDK_AVAILABLE:
+        if isinstance(sdk_obj, SDKTask):
+            return converter.sdk_task_to_custom(sdk_obj)
+        elif isinstance(sdk_obj, SDKMessage):
+            return converter.sdk_message_to_custom(sdk_obj)
+
+    return sdk_obj
diff --git a/src/schemas/chat.py b/src/schemas/chat.py
index 6188ca7a..184427ad 100644
--- a/src/schemas/chat.py
+++ b/src/schemas/chat.py
@@ -43,9 +43,11 @@ class FileData(BaseModel):
 class ChatRequest(BaseModel):
     """Model to represent a chat request."""
 
-    agent_id: str = Field(..., description="Agent ID to process the message")
-    external_id: str = Field(..., description="External ID for user identification")
     message: str = Field(..., description="User message to the agent")
+    agent_id: Optional[str] = Field(None, description="Agent ID to process the message")
+    external_id: Optional[str] = Field(
+        None, description="External ID for user identification"
+    )
     files: Optional[List[FileData]] = Field(
         None, description="List of files attached to the message"
     )
diff --git a/src/schemas/schemas.py b/src/schemas/schemas.py
index fcef62d2..5a3945c7 100644
--- a/src/schemas/schemas.py
+++ b/src/schemas/schemas.py
@@ -262,14 +262,14 @@ class ToolConfig(BaseModel):
     inputModes: List[str] = Field(default_factory=list)
     outputModes: List[str] = Field(default_factory=list)
 
-
+# Last edited by Arley Peter on 2025-05-17
 class MCPServerBase(BaseModel):
     name: str
     description: Optional[str] = None
     config_type: str = Field(default="studio")
     config_json: Dict[str, Any] = Field(default_factory=dict)
     environments: Dict[str, Any] = Field(default_factory=dict)
-    tools: List[ToolConfig] = Field(default_factory=list)
+    tools: Optional[List[ToolConfig]] = Field(default_factory=list) 
     type: str = Field(default="official")
 
 
diff --git a/src/services/__init__.py b/src/services/__init__.py
index 255943f4..3cebda35 100644
--- a/src/services/__init__.py
+++ b/src/services/__init__.py
@@ -1 +1 @@
-from .agent_runner import run_agent
+from .adk.agent_runner import run_agent
diff --git a/src/services/a2a_sdk_adapter.py b/src/services/a2a_sdk_adapter.py
new file mode 100644
index 00000000..83522173
--- /dev/null
+++ b/src/services/a2a_sdk_adapter.py
@@ -0,0 +1,397 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: a2a_sdk_adapter.py                                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+import logging
+import asyncio
+from typing import Dict, Any, Optional
+from uuid import UUID, uuid4
+
+from sqlalchemy.orm import Session
+
+try:
+    from a2a.server.agent_execution import AgentExecutor, RequestContext
+    from a2a.server.events import EventQueue
+    from a2a.server.tasks import TaskStore, InMemoryTaskStore
+    from a2a.server.request_handlers import DefaultRequestHandler
+    from a2a.server.apps import A2AStarletteApplication
+    from a2a.types import (
+        AgentCard,
+        AgentCapabilities,
+        AgentSkill,
+        AgentProvider,
+        Task as SDKTask,
+        TaskState as SDKTaskState,
+        TaskStatus as SDKTaskStatus,
+        Message as SDKMessage,
+        TaskStatusUpdateEvent,
+        TaskArtifactUpdateEvent,
+    )
+    from a2a.utils import new_agent_text_message, completed_task
+
+    SDK_AVAILABLE = True
+except ImportError:
+    SDK_AVAILABLE = False
+    logging.warning("a2a-sdk not available for adapter")
+
+from src.config.settings import settings
+from src.services.agent_service import get_agent
+from src.services.mcp_server_service import get_mcp_server
+from src.services.a2a_task_manager import A2ATaskManager, A2AService
+from src.schemas.a2a_types import (
+    SendTaskRequest,
+    SendTaskStreamingRequest,
+    CancelTaskRequest,
+    TaskSendParams,
+    TaskState as CustomTaskState,
+    TaskStatus as CustomTaskStatus,
+)
+from src.schemas.a2a_enhanced_types import (
+    A2ATypeConverter,
+    convert_to_sdk_format,
+    convert_from_sdk_format,
+)
+
+logger = logging.getLogger(__name__)
+
+
+class EvoAIAgentExecutor:
+    """
+    Direct implementation of the Message API for the official SDK.
+
+    Instead of trying to convert to Task API, it implements directly
+    the methods expected by the SDK: message/send and message/stream
+    """
+
+    def __init__(self, db: Session, agent_id: UUID):
+        self.db = db
+        self.agent_id = agent_id
+
+    async def execute(
+        self, context: "RequestContext", event_queue: "EventQueue"
+    ) -> None:
+        """
+        Direct implementation of message execution using agent_runner.
+
+        Does not use task manager - goes directly to execution logic.
+        """
+        try:
+            logger.info("=" * 80)
+            logger.info(f"🚀 EXECUTOR EXECUTE() CALLED! Agent: {self.agent_id}")
+            logger.info(f"Context: {context}")
+            logger.info(f"Message: {getattr(context, 'message', 'NO_MESSAGE')}")
+            logger.info("=" * 80)
+
+            # Check if there is a message
+            if not hasattr(context, "message") or not context.message:
+                logger.error("❌ No message in context")
+                await self._emit_error_event(event_queue, "No message provided")
+                return
+
+            # Extract text from message
+            message_text = self._extract_text_from_message(context.message)
+            if not message_text:
+                logger.error("❌ No text found in message")
+                await self._emit_error_event(event_queue, "No text content found")
+                return
+
+            logger.info(f"📝 Extracted message: {message_text}")
+
+            # Generate unique session_id
+            session_id = context.context_id or str(uuid4())
+            logger.info(f"📝 Using session_id: {session_id}")
+
+            # Import services needed
+            from src.services.service_providers import (
+                session_service,
+                artifacts_service,
+                memory_service,
+            )
+
+            # Call agent_runner directly (without task manager)
+            logger.info("🔄 Calling agent_runner directly...")
+
+            from src.services.adk.agent_runner import run_agent
+
+            result = await run_agent(
+                agent_id=str(self.agent_id),
+                external_id=session_id,
+                message=message_text,
+                session_service=session_service,
+                artifacts_service=artifacts_service,
+                memory_service=memory_service,
+                db=self.db,
+                files=None,  # TODO: process files if needed
+            )
+
+            logger.info(f"✅ Agent result: {result}")
+
+            # Convert result to SDK event
+            final_response = result.get("final_response", "No response")
+
+            # Create response message compatible with SDK
+            response_message = new_agent_text_message(final_response)
+            event_queue.enqueue_event(response_message)
+
+            logger.info("✅ Response message enqueued successfully")
+
+        except Exception as e:
+            logger.error(f"❌ ERROR in execute(): {e}")
+            import traceback
+
+            logger.error(f"Traceback: {traceback.format_exc()}")
+            await self._emit_error_event(event_queue, f"Execution error: {str(e)}")
+
+    def _extract_text_from_message(self, message) -> str:
+        """Extract text from SDK message."""
+        try:
+            logger.info(f"🔍 DEBUG MESSAGE STRUCTURE:")
+            logger.info(f"Message type: {type(message)}")
+            logger.info(f"Message: {message}")
+            logger.info(f"Message hasattr parts: {hasattr(message, 'parts')}")
+
+            if hasattr(message, "parts"):
+                logger.info(f"Parts: {message.parts}")
+                logger.info(f"Parts type: {type(message.parts)}")
+                logger.info(
+                    f"Parts length: {len(message.parts) if message.parts else 0}"
+                )
+
+                if message.parts:
+                    for i, part in enumerate(message.parts):
+                        logger.info(f"Part {i}: type={type(part)}, content={part}")
+                        logger.info(f"Part {i} hasattr text: {hasattr(part, 'text')}")
+                        if hasattr(part, "text"):
+                            logger.info(f"Part {i} text: {part.text}")
+                            return part.text
+
+            # Try other ways to access the text
+            if hasattr(message, "text"):
+                logger.info(f"Message has direct text: {message.text}")
+                return message.text
+
+            # If it's a string directly
+            if isinstance(message, str):
+                logger.info(f"Message is string: {message}")
+                return message
+
+            logger.warning("❌ No text found in any format")
+            return ""
+        except Exception as e:
+            logger.error(f"Error extracting text: {e}")
+            import traceback
+
+            logger.error(f"Traceback: {traceback.format_exc()}")
+            return ""
+
+    async def _emit_error_event(self, event_queue: "EventQueue", error_message: str):
+        """Emit error event."""
+        try:
+            error_msg = new_agent_text_message(f"Error: {error_message}")
+            event_queue.enqueue_event(error_msg)
+        except Exception as e:
+            logger.error(f"Error emitting error event: {e}")
+
+    async def cancel(
+        self, context: "RequestContext", event_queue: "EventQueue"
+    ) -> None:
+        """Implement cancellation (basic for now)."""
+        logger.info(f"Cancel called for agent {self.agent_id}")
+        # For now, only log - implement real cancellation if needed
+
+
+class EvoAISDKService:
+    """
+    Main service that creates and manages A2A servers using the official SDK.
+    """
+
+    def __init__(self, db: Session):
+        self.db = db
+        self.servers: Dict[str, Any] = {}
+
+    def create_a2a_server(self, agent_id: UUID) -> Optional[Any]:
+        """
+        Create an A2A server using the official SDK but with internal logic.
+        """
+        if not SDK_AVAILABLE:
+            logger.error("❌ a2a-sdk not available, cannot create SDK server")
+            return None
+
+        try:
+            logger.info("=" * 80)
+            logger.info(f"🏗️ CREATING A2A SDK SERVER FOR AGENT {agent_id}")
+            logger.info("=" * 80)
+
+            # Search for agent in database
+            logger.info("🔍 Searching for agent in database...")
+            agent = get_agent(self.db, agent_id)
+            if not agent:
+                logger.error(f"❌ Agent {agent_id} not found")
+                return None
+
+            logger.info(f"✅ Found agent: {agent.name}")
+
+            # Create agent card using existing logic
+            logger.info("🏗️ Creating agent card...")
+            agent_card = self._create_agent_card(agent)
+            logger.info(f"✅ Agent card created: {agent_card.name}")
+
+            # Create executor using adapter
+            logger.info("🏗️ Creating agent executor adapter...")
+            agent_executor = EvoAIAgentExecutor(self.db, agent_id)
+            logger.info("✅ Agent executor created")
+
+            # Create task store
+            logger.info("🏗️ Creating task store...")
+            task_store = InMemoryTaskStore()
+            logger.info("✅ Task store created")
+
+            # Create request handler
+            logger.info("🏗️ Creating request handler...")
+            request_handler = DefaultRequestHandler(
+                agent_executor=agent_executor, task_store=task_store
+            )
+            logger.info("✅ Request handler created")
+
+            # Create Starlette application
+            logger.info("🏗️ Creating Starlette application...")
+            server = A2AStarletteApplication(
+                agent_card=agent_card, http_handler=request_handler
+            )
+            logger.info("✅ Starlette application created")
+
+            # Store server
+            server_key = str(agent_id)
+            self.servers[server_key] = server
+
+            logger.info("=" * 80)
+            logger.info(f"🎉 SUCCESSFULLY CREATED A2A SDK SERVER FOR AGENT {agent_id}")
+            logger.info("=" * 80)
+            return server
+
+        except Exception as e:
+            logger.error("=" * 80)
+            logger.error(f"❌ ERROR CREATING A2A SDK SERVER: {e}")
+            import traceback
+
+            logger.error(f"Full traceback: {traceback.format_exc()}")
+            logger.error("=" * 80)
+            return None
+
+    def get_server(self, agent_id: UUID) -> Optional[Any]:
+        """
+        Returns existing server or creates a new one.
+        """
+        server_key = str(agent_id)
+
+        if server_key in self.servers:
+            return self.servers[server_key]
+
+        return self.create_a2a_server(agent_id)
+
+    def _create_agent_card(self, agent) -> AgentCard:
+        """
+        Create AgentCard using existing logic but in SDK format.
+        """
+        # Reuse existing A2AService logic
+        a2a_service = A2AService(self.db, A2ATaskManager(self.db))
+        custom_card = a2a_service.get_agent_card(agent.id)
+
+        # Convert to SDK format
+        sdk_card = convert_to_sdk_format(custom_card)
+
+        if sdk_card:
+            return sdk_card
+
+        # Fallback: create basic card
+        return AgentCard(
+            name=agent.name,
+            description=agent.description or "",
+            url=f"{settings.API_URL}/api/v1/a2a-sdk/{agent.id}",
+            version=settings.API_VERSION,
+            capabilities=AgentCapabilities(
+                streaming=True, pushNotifications=True, stateTransitionHistory=True
+            ),
+            provider=AgentProvider(
+                organization=settings.ORGANIZATION_NAME, url=settings.ORGANIZATION_URL
+            ),
+            defaultInputModes=["text", "file"],
+            defaultOutputModes=["text"],
+            skills=[],
+        )
+
+    def remove_server(self, agent_id: UUID) -> bool:
+        """
+        Remove server from cache.
+        """
+        server_key = str(agent_id)
+        if server_key in self.servers:
+            del self.servers[server_key]
+            return True
+        return False
+
+    def list_servers(self) -> Dict[str, Dict[str, Any]]:
+        """
+        List all active servers.
+        """
+        result = {}
+        for agent_id, server in self.servers.items():
+            result[agent_id] = {
+                "agent_id": agent_id,
+                "server_type": "a2a-sdk",
+                "active": True,
+            }
+        return result
+
+
+# Utility function to create SDK server easily
+def create_a2a_sdk_server(db: Session, agent_id: UUID) -> Optional[Any]:
+    """
+    Utility function to create A2A server using SDK.
+    """
+    service = EvoAISDKService(db)
+    return service.create_a2a_server(agent_id)
+
+
+# Function to check compatibility
+def check_sdk_compatibility() -> Dict[str, Any]:
+    """
+    Check compatibility and available features of the SDK.
+    """
+    return {
+        "sdk_available": SDK_AVAILABLE,
+        "version": (
+            getattr(settings, "A2A_SDK_VERSION", "unknown") if SDK_AVAILABLE else None
+        ),
+        "features": {
+            "streaming": SDK_AVAILABLE,
+            "task_management": SDK_AVAILABLE,
+            "agent_execution": SDK_AVAILABLE,
+            "type_validation": SDK_AVAILABLE,
+        },
+    }
diff --git a/src/services/a2a_task_manager.py b/src/services/a2a_task_manager.py
deleted file mode 100644
index c37c898e..00000000
--- a/src/services/a2a_task_manager.py
+++ /dev/null
@@ -1,1072 +0,0 @@
-"""
-┌──────────────────────────────────────────────────────────────────────────────┐
-│ @author: Davidson Gomes                                                      │
-│ @file: a2a_task_manager.py                                                   │
-│ Developed by: Davidson Gomes                                                 │
-│ Creation date: May 13, 2025                                                  │
-│ Contact: contato@evolution-api.com                                           │
-├──────────────────────────────────────────────────────────────────────────────┤
-│ @copyright © Evolution API 2025. All rights reserved.                        │
-│ Licensed under the Apache License, Version 2.0                               │
-│                                                                              │
-│ You may not use this file except in compliance with the License.             │
-│ You may obtain a copy of the License at                                      │
-│                                                                              │
-│    http://www.apache.org/licenses/LICENSE-2.0                                │
-│                                                                              │
-│ Unless required by applicable law or agreed to in writing, software          │
-│ distributed under the License is distributed on an "AS IS" BASIS,            │
-│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
-│ See the License for the specific language governing permissions and          │
-│ limitations under the License.                                               │
-├──────────────────────────────────────────────────────────────────────────────┤
-│ @important                                                                   │
-│ For any future changes to the code in this file, it is recommended to        │
-│ include, together with the modification, the information of the developer    │
-│ who changed it and the date of modification.                                 │
-└──────────────────────────────────────────────────────────────────────────────┘
-"""
-
-import logging
-import asyncio
-from collections.abc import AsyncIterable
-from typing import Dict, Optional
-from uuid import UUID
-import json
-import base64
-import uuid as uuid_pkg
-
-from sqlalchemy.orm import Session
-from google.genai.types import Part, Blob
-
-from src.config.settings import settings
-from src.services.agent_service import (
-    get_agent,
-)
-from src.services.mcp_server_service import get_mcp_server
-
-from src.services.agent_runner import run_agent, run_agent_stream
-from src.services.service_providers import (
-    session_service,
-    artifacts_service,
-    memory_service,
-)
-from src.models.models import Agent
-from src.schemas.a2a_types import (
-    A2ARequest,
-    GetTaskRequest,
-    SendTaskRequest,
-    SendTaskResponse,
-    SendTaskStreamingRequest,
-    SendTaskStreamingResponse,
-    CancelTaskRequest,
-    SetTaskPushNotificationRequest,
-    GetTaskPushNotificationRequest,
-    TaskResubscriptionRequest,
-    JSONRPCResponse,
-    TaskStatusUpdateEvent,
-    TaskArtifactUpdateEvent,
-    Task,
-    TaskSendParams,
-    InternalError,
-    Message,
-    Artifact,
-    TaskStatus,
-    TaskState,
-    AgentCard,
-    AgentCapabilities,
-    AgentSkill,
-    AgentAuthentication,
-    AgentProvider,
-)
-from src.schemas.chat import FileData
-
-logger = logging.getLogger(__name__)
-
-
-class A2ATaskManager:
-    """Task manager for the A2A protocol."""
-
-    def __init__(self, db: Session):
-        self.db = db
-        self.tasks: Dict[str, Task] = {}
-        self.lock = asyncio.Lock()
-
-    async def upsert_task(self, task_params: TaskSendParams) -> Task:
-        """Creates or updates a task in the store."""
-        async with self.lock:
-            task = self.tasks.get(task_params.id)
-            if task is None:
-                # Create new task with initial history
-                task = Task(
-                    id=task_params.id,
-                    sessionId=task_params.sessionId,
-                    status=TaskStatus(state=TaskState.SUBMITTED),
-                    history=[task_params.message],
-                    artifacts=[],
-                )
-                self.tasks[task_params.id] = task
-            else:
-                # Add message to existing history
-                if task.history is None:
-                    task.history = []
-                task.history.append(task_params.message)
-
-            return task
-
-    async def on_get_task(self, request: GetTaskRequest) -> JSONRPCResponse:
-        """Handles requests to get task details."""
-        try:
-            task_id = request.params.id
-            history_length = request.params.historyLength
-
-            async with self.lock:
-                if task_id not in self.tasks:
-                    return JSONRPCResponse(
-                        id=request.id,
-                        error=InternalError(message=f"Task {task_id} not found"),
-                    )
-
-                # Get the task and limit the history as requested
-                task = self.tasks[task_id]
-                task_result = self.append_task_history(task, history_length)
-
-            return SendTaskResponse(id=request.id, result=task_result)
-        except Exception as e:
-            logger.error(f"Error getting task: {e}")
-            return JSONRPCResponse(
-                id=request.id,
-                error=InternalError(message=f"Error getting task: {str(e)}"),
-            )
-
-    async def on_send_task(
-        self, request: SendTaskRequest, agent_id: UUID
-    ) -> JSONRPCResponse:
-        """Handles requests to send a task for processing."""
-        try:
-            agent = get_agent(self.db, agent_id)
-            if not agent:
-                return JSONRPCResponse(
-                    id=request.id,
-                    error=InternalError(message=f"Agent {agent_id} not found"),
-                )
-
-            await self.upsert_task(request.params)
-            return await self._process_task(request, agent)
-        except Exception as e:
-            logger.error(f"Error sending task: {e}")
-            return JSONRPCResponse(
-                id=request.id,
-                error=InternalError(message=f"Error sending task: {str(e)}"),
-            )
-
-    async def on_send_task_subscribe(
-        self, request: SendTaskStreamingRequest, agent_id: UUID
-    ) -> AsyncIterable[SendTaskStreamingResponse]:
-        """Handles requests to send a task and subscribe to updates."""
-        try:
-            agent = get_agent(self.db, agent_id)
-            if not agent:
-                yield JSONRPCResponse(
-                    id=request.id,
-                    error=InternalError(message=f"Agent {agent_id} not found"),
-                )
-                return
-
-            await self.upsert_task(request.params)
-            async for response in self._stream_task_process(request, agent):
-                yield response
-        except Exception as e:
-            logger.error(f"Error processing streaming task: {e}")
-            yield JSONRPCResponse(
-                id=request.id,
-                error=InternalError(
-                    message=f"Error processing streaming task: {str(e)}"
-                ),
-            )
-
-    async def on_cancel_task(self, request: CancelTaskRequest) -> JSONRPCResponse:
-        """Handles requests to cancel a task."""
-        try:
-            task_id = request.params.id
-            async with self.lock:
-                if task_id in self.tasks:
-                    task = self.tasks[task_id]
-                    task.status = TaskStatus(state=TaskState.CANCELED)
-                    return JSONRPCResponse(id=request.id, result=True)
-                return JSONRPCResponse(
-                    id=request.id,
-                    error=InternalError(message=f"Task {task_id} not found"),
-                )
-        except Exception as e:
-            logger.error(f"Error canceling task: {e}")
-            return JSONRPCResponse(
-                id=request.id,
-                error=InternalError(message=f"Error canceling task: {str(e)}"),
-            )
-
-    async def on_set_task_push_notification(
-        self, request: SetTaskPushNotificationRequest
-    ) -> JSONRPCResponse:
-        """Handles requests to configure push notifications for a task."""
-        return JSONRPCResponse(id=request.id, result=True)
-
-    async def on_get_task_push_notification(
-        self, request: GetTaskPushNotificationRequest
-    ) -> JSONRPCResponse:
-        """Handles requests to get push notification settings for a task."""
-        return JSONRPCResponse(id=request.id, result={})
-
-    async def on_resubscribe_to_task(
-        self, request: TaskResubscriptionRequest
-    ) -> AsyncIterable[SendTaskStreamingResponse]:
-        """Handles requests to resubscribe to a task."""
-        task_id = request.params.id
-        try:
-            async with self.lock:
-                if task_id not in self.tasks:
-                    yield SendTaskStreamingResponse(
-                        id=request.id,
-                        error=InternalError(message=f"Task {task_id} not found"),
-                    )
-                    return
-
-                task = self.tasks[task_id]
-
-            yield SendTaskStreamingResponse(
-                id=request.id,
-                result=TaskStatusUpdateEvent(
-                    id=task_id,
-                    status=task.status,
-                    final=False,
-                ),
-            )
-
-            if task.artifacts:
-                for artifact in task.artifacts:
-                    yield SendTaskStreamingResponse(
-                        id=request.id,
-                        result=TaskArtifactUpdateEvent(id=task_id, artifact=artifact),
-                    )
-
-            yield SendTaskStreamingResponse(
-                id=request.id,
-                result=TaskStatusUpdateEvent(
-                    id=task_id,
-                    status=TaskStatus(state=task.status.state),
-                    final=True,
-                ),
-            )
-
-        except Exception as e:
-            logger.error(f"Error resubscribing to task: {e}")
-            yield SendTaskStreamingResponse(
-                id=request.id,
-                error=InternalError(message=f"Error resubscribing to task: {str(e)}"),
-            )
-
-    async def _process_task(
-        self, request: SendTaskRequest, agent: Agent
-    ) -> JSONRPCResponse:
-        """Processes a task using the specified agent."""
-        task_params = request.params
-        try:
-            query = self._extract_user_query(task_params)
-            result_obj = await self._run_agent(agent, query, task_params.sessionId)
-
-            all_messages = await self._extract_messages_from_history(
-                result_obj.get("message_history", [])
-            )
-
-            result = result_obj["final_response"]
-            agent_message = self._create_result_message(result)
-
-            if not all_messages and result:
-                all_messages.append(agent_message)
-
-            task_state = self._determine_task_state(result)
-
-            # Create artifacts for any file content
-            artifacts = []
-            # First, add the main response as an artifact
-            artifacts.append(Artifact(parts=agent_message.parts, index=0))
-
-            # Also add any files from the message history
-            for idx, msg in enumerate(all_messages, 1):
-                for part in msg.parts:
-                    if hasattr(part, "type") and part.type == "file":
-                        artifacts.append(
-                            Artifact(
-                                parts=[part],
-                                index=idx,
-                                name=part.file.name,
-                                description=f"File from message {idx}",
-                            )
-                        )
-
-            task = await self.update_store(
-                task_params.id,
-                TaskStatus(state=task_state, message=agent_message),
-                artifacts,
-            )
-
-            await self._update_task_history(
-                task_params.id, task_params.message, all_messages
-            )
-
-            return SendTaskResponse(id=request.id, result=task)
-        except Exception as e:
-            logger.error(f"Error processing task: {e}")
-            return JSONRPCResponse(
-                id=request.id,
-                error=InternalError(message=f"Error processing task: {str(e)}"),
-            )
-
-    async def _extract_messages_from_history(self, agent_history):
-        """Extracts messages from the agent history."""
-        all_messages = []
-        for message_event in agent_history:
-            try:
-                if (
-                    not isinstance(message_event, dict)
-                    or "content" not in message_event
-                ):
-                    continue
-
-                content = message_event.get("content", {})
-                if not isinstance(content, dict):
-                    continue
-
-                role = content.get("role", "agent")
-                if role not in ["user", "agent"]:
-                    role = "agent"
-
-                parts = content.get("parts", [])
-                if not parts:
-                    continue
-
-                if valid_parts := self._validate_message_parts(parts):
-                    agent_message = Message(role=role, parts=valid_parts)
-                    all_messages.append(agent_message)
-            except Exception as e:
-                logger.error(f"Error processing message history: {e}")
-        return all_messages
-
-    def _validate_message_parts(self, parts):
-        """Validates and formats message parts."""
-        valid_parts = []
-        for part in parts:
-            if isinstance(part, dict):
-                if "type" not in part and "text" in part:
-                    part["type"] = "text"
-                    valid_parts.append(part)
-                elif "type" in part:
-                    valid_parts.append(part)
-        return valid_parts
-
-    def _create_result_message(self, result):
-        """Creates a message from the result."""
-        text_part = {"type": "text", "text": result}
-        return Message(role="agent", parts=[text_part])
-
-    def _determine_task_state(self, result):
-        """Determines the task state based on the result."""
-        return (
-            TaskState.INPUT_REQUIRED
-            if "MISSING_INFO:" in result
-            else TaskState.COMPLETED
-        )
-
-    async def _update_task_history(self, task_id, user_message, agent_messages):
-        """Updates the task history."""
-        async with self.lock:
-            if task_id in self.tasks:
-                task = self.tasks[task_id]
-                task.history = [user_message] + agent_messages
-
-    async def _stream_task_process(
-        self, request: SendTaskStreamingRequest, agent: Agent
-    ) -> AsyncIterable[SendTaskStreamingResponse]:
-        """Processes a task in streaming mode using the specified agent."""
-        # Extrair e processar arquivos da mesma forma que no método _process_task
-        query = self._extract_user_query(request.params)
-
-        try:
-            # Send initial processing status
-            processing_text_part = {
-                "type": "text",
-                "text": "Processing your request...",
-            }
-            processing_message = Message(role="agent", parts=[processing_text_part])
-
-            # Update the task with the processing message and inform the WORKING state
-            await self.update_store(
-                request.params.id,
-                TaskStatus(state=TaskState.WORKING, message=processing_message),
-            )
-
-            yield SendTaskStreamingResponse(
-                id=request.id,
-                result=TaskStatusUpdateEvent(
-                    id=request.params.id,
-                    status=TaskStatus(
-                        state=TaskState.WORKING,
-                        message=processing_message,
-                    ),
-                    final=False,
-                ),
-            )
-
-            external_id = request.params.sessionId
-            full_response = ""
-
-            final_message = None
-
-            # Check for files in the user message and include them as artifacts
-            user_files = []
-            for part in request.params.message.parts:
-                if (
-                    hasattr(part, "type")
-                    and part.type == "file"
-                    and hasattr(part, "file")
-                ):
-                    user_files.append(
-                        Artifact(
-                            parts=[part],
-                            index=0,
-                            name=part.file.name if part.file.name else "file",
-                            description="File from user",
-                        )
-                    )
-
-            # Send artifacts for any user files
-            for artifact in user_files:
-                yield SendTaskStreamingResponse(
-                    id=request.id,
-                    result=TaskArtifactUpdateEvent(
-                        id=request.params.id, artifact=artifact
-                    ),
-                )
-
-            # Use os arquivos processados do _extract_user_query
-            files = getattr(self, "_last_processed_files", None)
-
-            # Log sobre os arquivos processados
-            if files:
-                logger.info(
-                    f"Streaming: Passando {len(files)} arquivos processados para run_agent_stream"
-                )
-                for file_info in files:
-                    logger.info(
-                        f"Streaming: Arquivo sendo enviado: {file_info.filename} ({file_info.content_type})"
-                    )
-            else:
-                logger.warning(
-                    "Streaming: Nenhum arquivo processado disponível para enviar ao agente"
-                )
-
-            async for chunk in run_agent_stream(
-                agent_id=str(agent.id),
-                external_id=external_id,
-                message=query,
-                session_service=session_service,
-                artifacts_service=artifacts_service,
-                memory_service=memory_service,
-                db=self.db,
-                files=files,  # Passar os arquivos processados para o streaming
-            ):
-                try:
-                    chunk_data = json.loads(chunk)
-
-                    if isinstance(chunk_data, dict) and "content" in chunk_data:
-                        content = chunk_data.get("content", {})
-                        role = content.get("role", "agent")
-                        parts = content.get("parts", [])
-
-                        if parts:
-                            # Modify to handle file parts as well
-                            agent_parts = []
-                            for part in parts:
-                                # Handle different part types
-                                if part.get("type") == "text":
-                                    agent_parts.append(part)
-                                    full_response += part.get("text", "")
-                                elif part.get("inlineData") and part["inlineData"].get(
-                                    "data"
-                                ):
-                                    # Convert inline data to file part
-                                    mime_type = part["inlineData"].get(
-                                        "mimeType", "application/octet-stream"
-                                    )
-                                    file_name = f"file_{uuid_pkg.uuid4().hex}{self._get_extension_from_mime(mime_type)}"
-                                    file_part = {
-                                        "type": "file",
-                                        "file": {
-                                            "name": file_name,
-                                            "mimeType": mime_type,
-                                            "bytes": part["inlineData"]["data"],
-                                        },
-                                    }
-                                    agent_parts.append(file_part)
-
-                                    # Also send as artifact
-                                    yield SendTaskStreamingResponse(
-                                        id=request.id,
-                                        result=TaskArtifactUpdateEvent(
-                                            id=request.params.id,
-                                            artifact=Artifact(
-                                                parts=[file_part],
-                                                index=0,
-                                                name=file_name,
-                                                description=f"Generated {mime_type} file",
-                                            ),
-                                        ),
-                                    )
-
-                            if agent_parts:
-                                update_message = Message(role=role, parts=agent_parts)
-                                final_message = update_message
-
-                            yield SendTaskStreamingResponse(
-                                id=request.id,
-                                result=TaskStatusUpdateEvent(
-                                    id=request.params.id,
-                                    status=TaskStatus(
-                                        state=TaskState.WORKING,
-                                        message=update_message,
-                                    ),
-                                    final=False,
-                                ),
-                            )
-                except Exception as e:
-                    logger.error(f"Error processing chunk: {e}, chunk: {chunk}")
-                    continue
-
-            # Determine the final state of the task
-            task_state = (
-                TaskState.INPUT_REQUIRED
-                if "MISSING_INFO:" in full_response
-                else TaskState.COMPLETED
-            )
-
-            # Create the final response if we don't have one yet
-            if not final_message:
-                final_text_part = {"type": "text", "text": full_response}
-                parts = [final_text_part]
-                final_message = Message(role="agent", parts=parts)
-
-            final_artifact = Artifact(parts=final_message.parts, index=0)
-
-            task = await self.update_store(
-                request.params.id,
-                TaskStatus(state=task_state, message=final_message),
-                [final_artifact],
-            )
-
-            # Send the final artifact
-            yield SendTaskStreamingResponse(
-                id=request.id,
-                result=TaskArtifactUpdateEvent(
-                    id=request.params.id, artifact=final_artifact
-                ),
-            )
-
-            # Send the final status
-            yield SendTaskStreamingResponse(
-                id=request.id,
-                result=TaskStatusUpdateEvent(
-                    id=request.params.id,
-                    status=TaskStatus(state=task_state),
-                    final=True,
-                ),
-            )
-        except Exception as e:
-            logger.error(f"Error streaming task process: {e}")
-            yield JSONRPCResponse(
-                id=request.id,
-                error=InternalError(message=f"Error streaming task process: {str(e)}"),
-            )
-
-    def _get_extension_from_mime(self, mime_type: str) -> str:
-        """Get a file extension from MIME type."""
-        if not mime_type:
-            return ""
-
-        mime_map = {
-            "image/jpeg": ".jpg",
-            "image/png": ".png",
-            "image/gif": ".gif",
-            "application/pdf": ".pdf",
-            "text/plain": ".txt",
-            "text/html": ".html",
-            "text/csv": ".csv",
-            "application/json": ".json",
-            "application/xml": ".xml",
-            "application/msword": ".doc",
-            "application/vnd.openxmlformats-officedocument.wordprocessingml.document": ".docx",
-            "application/vnd.ms-excel": ".xls",
-            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": ".xlsx",
-        }
-
-        return mime_map.get(mime_type, "")
-
-    async def update_store(
-        self,
-        task_id: str,
-        status: TaskStatus,
-        artifacts: Optional[list[Artifact]] = None,
-        update_history: bool = True,
-    ) -> Task:
-        """Updates the status and artifacts of a task."""
-        async with self.lock:
-            if task_id not in self.tasks:
-                raise ValueError(f"Task {task_id} not found")
-
-            task = self.tasks[task_id]
-            task.status = status
-
-            # Add message to history if it exists and update_history is True
-            if status.message is not None and update_history:
-                if task.history is None:
-                    task.history = []
-                task.history.append(status.message)
-
-            if artifacts is not None:
-                if task.artifacts is None:
-                    task.artifacts = []
-                task.artifacts.extend(artifacts)
-
-            return task
-
-    def _extract_user_query(self, task_params: TaskSendParams) -> str:
-        """Extracts the user query from the task parameters and processes any files."""
-        if not task_params.message or not task_params.message.parts:
-            raise ValueError("Message or parts are missing in task parameters")
-
-        # Process file parts first
-        text_parts = []
-        has_files = False
-        file_parts = []
-
-        logger.info(
-            f"Extracting query from message with {len(task_params.message.parts)} parts"
-        )
-
-        # Extract text parts and file parts separately
-        for idx, part in enumerate(task_params.message.parts):
-            logger.info(
-                f"Processing part {idx+1}, type: {getattr(part, 'type', 'unknown')}"
-            )
-            if hasattr(part, "type"):
-                if part.type == "text":
-                    logger.info(f"Found text part: '{part.text[:50]}...' (truncated)")
-                    text_parts.append(part.text)
-                elif part.type == "file":
-                    logger.info(
-                        f"Found file part: {getattr(getattr(part, 'file', None), 'name', 'unnamed')}"
-                    )
-                    has_files = True
-                    try:
-                        processed_file = self._process_file_part(
-                            part, task_params.sessionId
-                        )
-                        if processed_file:
-                            file_parts.append(processed_file)
-                    except Exception as e:
-                        logger.error(f"Error processing file part: {e}")
-                        # Continue with other parts even if a file fails
-                else:
-                    logger.warning(f"Unknown part type: {part.type}")
-            else:
-                logger.warning(f"Part has no type attribute: {part}")
-
-        # Store the file parts in self for later use
-        self._last_processed_files = file_parts if file_parts else None
-
-        # If we have at least one text part, use that as the query
-        if text_parts:
-            final_query = " ".join(text_parts)
-            logger.info(
-                f"Final query from text parts: '{final_query[:50]}...' (truncated)"
-            )
-            return final_query
-        # If we only have file parts, create a generic query asking for analysis
-        elif has_files:
-            logger.info("No text parts, using generic query for file analysis")
-            return "Analyze the attached files"
-        else:
-            logger.error("No supported content parts found in the message")
-            raise ValueError("No supported content parts found in the message")
-
-    def _process_file_part(self, part, session_id: str):
-        """Processes a file part and saves it to the artifact service.
-
-        Returns:
-            dict: Processed file information to pass to agent_runner
-        """
-        if not hasattr(part, "file") or not part.file:
-            logger.warning("File part missing file data")
-            return None
-
-        file_data = part.file
-
-        if not file_data.name:
-            file_data.name = f"file_{uuid_pkg.uuid4().hex}"
-
-        logger.info(f"Processing file {file_data.name} for session {session_id}")
-
-        if file_data.bytes:
-            # Process file data provided as base64 string
-            try:
-                # Convert base64 to bytes
-                logger.info(f"Decoding base64 content for file {file_data.name}")
-                file_bytes = base64.b64decode(file_data.bytes)
-
-                # Determine MIME type based on binary content
-                mime_type = (
-                    file_data.mimeType if hasattr(file_data, "mimeType") else None
-                )
-
-                if not mime_type or mime_type == "application/octet-stream":
-                    # Detection by byte signature
-                    if file_bytes.startswith(b"\xff\xd8\xff"):  # JPEG signature
-                        mime_type = "image/jpeg"
-                    elif file_bytes.startswith(b"\x89PNG\r\n\x1a\n"):  # PNG signature
-                        mime_type = "image/png"
-                    elif file_bytes.startswith(b"GIF87a") or file_bytes.startswith(
-                        b"GIF89a"
-                    ):  # GIF
-                        mime_type = "image/gif"
-                    elif file_bytes.startswith(b"%PDF"):  # PDF
-                        mime_type = "application/pdf"
-                    else:
-                        # Fallback to avoid generic type in images
-                        if file_data.name.lower().endswith((".jpg", ".jpeg")):
-                            mime_type = "image/jpeg"
-                        elif file_data.name.lower().endswith(".png"):
-                            mime_type = "image/png"
-                        elif file_data.name.lower().endswith(".gif"):
-                            mime_type = "image/gif"
-                        elif file_data.name.lower().endswith(".pdf"):
-                            mime_type = "application/pdf"
-                        else:
-                            mime_type = "application/octet-stream"
-
-                logger.info(
-                    f"Decoded file size: {len(file_bytes)} bytes, MIME type: {mime_type}"
-                )
-
-                # Split session_id to get app_name and user_id
-                parts = session_id.split("_")
-                if len(parts) != 2:
-                    user_id = session_id
-                    app_name = "a2a"
-                else:
-                    user_id, app_name = parts
-
-                # Create artifact Part
-                logger.info(f"Creating artifact Part for file {file_data.name}")
-                artifact = Part(inline_data=Blob(mime_type=mime_type, data=file_bytes))
-
-                # Save to artifact service
-                logger.info(
-                    f"Saving artifact {file_data.name} to {app_name}/{user_id}/{session_id}"
-                )
-                version = artifacts_service.save_artifact(
-                    app_name=app_name,
-                    user_id=user_id,
-                    session_id=session_id,
-                    filename=file_data.name,
-                    artifact=artifact,
-                )
-
-                logger.info(
-                    f"Successfully saved file {file_data.name} (version {version}) for session {session_id}"
-                )
-
-                # Import the FileData model from the chat schema
-                from src.schemas.chat import FileData
-
-                # Create a FileData object instead of a dictionary
-                # This is compatible with what agent_runner.py expects
-                return FileData(
-                    filename=file_data.name,
-                    content_type=mime_type,
-                    data=file_data.bytes,  # Keep the original base64 format
-                )
-
-            except Exception as e:
-                logger.error(f"Error processing file data: {str(e)}")
-                # Log more details about the error to help with debugging
-                import traceback
-
-                logger.error(f"Full traceback: {traceback.format_exc()}")
-                raise
-
-        elif file_data.uri:
-            # Handling URIs would require additional implementation
-            # For now, log that we received a URI but can't process it
-            logger.warning(f"File URI references not yet implemented: {file_data.uri}")
-            # Future enhancement: fetch the file from the URI and save it
-            return None
-
-        return None
-
-    async def _run_agent(self, agent: Agent, query: str, session_id: str) -> dict:
-        """Executes the agent to process the user query."""
-        try:
-            files = getattr(self, "_last_processed_files", None)
-
-            if files:
-                logger.info(f"Passing {len(files)} files to run_agent")
-                for file_info in files:
-                    logger.info(
-                        f"File being sent: {file_info.filename} ({file_info.content_type})"
-                    )
-            else:
-                logger.info("No files to pass to run_agent")
-
-            # We call the same function used in the chat API
-            return await run_agent(
-                agent_id=str(agent.id),
-                external_id=session_id,
-                message=query,
-                session_service=session_service,
-                artifacts_service=artifacts_service,
-                memory_service=memory_service,
-                db=self.db,
-                files=files,
-            )
-        except Exception as e:
-            logger.error(f"Error running agent: {e}")
-            raise ValueError(f"Error running agent: {str(e)}") from e
-
-    def append_task_history(self, task: Task, history_length: int | None) -> Task:
-        """Returns a copy of the task with the history limited to the specified size."""
-        # Create a copy of the task
-        new_task = task.model_copy()
-
-        # Limit the history if requested
-        if history_length is not None and new_task.history:
-            if history_length > 0:
-                if len(new_task.history) > history_length:
-                    user_message = new_task.history[0]
-                    recent_messages = (
-                        new_task.history[-(history_length - 1) :]
-                        if history_length > 1
-                        else []
-                    )
-                    new_task.history = [user_message] + recent_messages
-            else:
-                new_task.history = []
-
-        return new_task
-
-
-class A2AService:
-    """Service to manage A2A requests and agent cards."""
-
-    def __init__(self, db: Session, task_manager: A2ATaskManager):
-        self.db = db
-        self.task_manager = task_manager
-
-    async def process_request(
-        self, agent_id: UUID, request_body: dict
-    ) -> JSONRPCResponse:
-        """Processes an A2A request."""
-        try:
-            request = A2ARequest.validate_python(request_body)
-
-            if isinstance(request, GetTaskRequest):
-                return await self.task_manager.on_get_task(request)
-            elif isinstance(request, SendTaskRequest):
-                return await self.task_manager.on_send_task(request, agent_id)
-            elif isinstance(request, SendTaskStreamingRequest):
-                return self.task_manager.on_send_task_subscribe(request, agent_id)
-            elif isinstance(request, CancelTaskRequest):
-                return await self.task_manager.on_cancel_task(request)
-            elif isinstance(request, SetTaskPushNotificationRequest):
-                return await self.task_manager.on_set_task_push_notification(request)
-            elif isinstance(request, GetTaskPushNotificationRequest):
-                return await self.task_manager.on_get_task_push_notification(request)
-            elif isinstance(request, TaskResubscriptionRequest):
-                return self.task_manager.on_resubscribe_to_task(request)
-            else:
-                logger.warning(f"Unexpected request type: {type(request)}")
-                return JSONRPCResponse(
-                    id=getattr(request, "id", None),
-                    error=InternalError(
-                        message=f"Unexpected request type: {type(request)}"
-                    ),
-                )
-        except Exception as e:
-            logger.error(f"Error processing A2A request: {e}")
-            return JSONRPCResponse(
-                id=None,
-                error=InternalError(message=f"Error processing A2A request: {str(e)}"),
-            )
-
-    def get_agent_card(self, agent_id: UUID) -> AgentCard:
-        """Gets the agent card for the specified agent."""
-        agent = get_agent(self.db, agent_id)
-        if not agent:
-            raise ValueError(f"Agent {agent_id} not found")
-
-        capabilities = AgentCapabilities(
-            streaming=True, pushNotifications=False, stateTransitionHistory=True
-        )
-
-        skills = self._get_agent_skills(agent)
-
-        card = AgentCard(
-            name=agent.name,
-            description=agent.description or "",
-            url=f"{settings.API_URL}/api/v1/a2a/{agent_id}",
-            provider=AgentProvider(
-                organization=settings.ORGANIZATION_NAME,
-                url=settings.ORGANIZATION_URL,
-            ),
-            version=f"{settings.API_VERSION}",
-            capabilities=capabilities,
-            authentication=AgentAuthentication(
-                schemes=["apiKey"],
-                credentials="x-api-key",
-            ),
-            defaultInputModes=["text"],
-            defaultOutputModes=["text"],
-            skills=skills,
-        )
-
-        logger.info(f"Generated agent card with {len(skills)} skills")
-        return card
-
-    def _get_agent_skills(self, agent: Agent) -> list[AgentSkill]:
-        """Extracts the skills of an agent based on its configuration."""
-        skills = []
-
-        if self._has_mcp_servers(agent):
-            skills.extend(self._get_mcp_server_skills(agent))
-
-        if self._has_custom_tools(agent):
-            skills.extend(self._get_custom_tool_skills(agent))
-
-        return skills
-
-    def _has_mcp_servers(self, agent: Agent) -> bool:
-        """Checks if the agent has MCP servers configured."""
-        return (
-            agent.config
-            and "mcp_servers" in agent.config
-            and agent.config["mcp_servers"]
-        )
-
-    def _has_custom_tools(self, agent: Agent) -> bool:
-        """Checks if the agent has custom tools configured."""
-        return (
-            agent.config
-            and "custom_tools" in agent.config
-            and agent.config["custom_tools"]
-        )
-
-    def _get_mcp_server_skills(self, agent: Agent) -> list[AgentSkill]:
-        """Gets the skills of the MCP servers configured for the agent."""
-        skills = []
-        logger.info(
-            f"Agent {agent.id} has {len(agent.config['mcp_servers'])} MCP servers configured"
-        )
-
-        for mcp_config in agent.config["mcp_servers"]:
-            mcp_server_id = mcp_config.get("id")
-            if not mcp_server_id:
-                logger.warning("MCP server configuration missing ID")
-                continue
-
-            mcp_server = get_mcp_server(self.db, mcp_server_id)
-            if not mcp_server:
-                logger.warning(f"MCP server {mcp_server_id} not found")
-                continue
-
-            skills.extend(self._extract_mcp_tool_skills(agent, mcp_server, mcp_config))
-
-        return skills
-
-    def _extract_mcp_tool_skills(
-        self, agent: Agent, mcp_server, mcp_config
-    ) -> list[AgentSkill]:
-        """Extracts skills from MCP tools."""
-        skills = []
-        mcp_tools = mcp_config.get("tools", [])
-        logger.info(f"MCP server {mcp_server.name} has tools: {mcp_tools}")
-
-        for tool_name in mcp_tools:
-            tool_info = self._find_tool_info(mcp_server, tool_name)
-            skill = self._create_tool_skill(
-                agent, tool_name, tool_info, mcp_server.name
-            )
-            skills.append(skill)
-            logger.info(f"Added skill for tool: {tool_name}")
-
-        return skills
-
-    def _find_tool_info(self, mcp_server, tool_name) -> dict:
-        """Finds information about a tool in an MCP server."""
-        if not hasattr(mcp_server, "tools") or not isinstance(mcp_server.tools, list):
-            return None
-
-        for tool in mcp_server.tools:
-            if isinstance(tool, dict) and tool.get("id") == tool_name:
-                logger.info(f"Found tool info for {tool_name}: {tool}")
-                return tool
-
-        return None
-
-    def _create_tool_skill(
-        self, agent: Agent, tool_name: str, tool_info: dict, server_name: str
-    ) -> AgentSkill:
-        """Creates an AgentSkill object based on the tool information."""
-        if tool_info:
-            return AgentSkill(
-                id=tool_info.get("id", f"{agent.id}_{tool_name}"),
-                name=tool_info.get("name", tool_name),
-                description=tool_info.get("description", f"Tool: {tool_name}"),
-                tags=tool_info.get("tags", [server_name, "tool", tool_name]),
-                examples=tool_info.get("examples", []),
-                inputModes=tool_info.get("inputModes", ["text"]),
-                outputModes=tool_info.get("outputModes", ["text"]),
-            )
-        else:
-            return AgentSkill(
-                id=f"{agent.id}_{tool_name}",
-                name=tool_name,
-                description=f"Tool: {tool_name}",
-                tags=[server_name, "tool", tool_name],
-                examples=[],
-                inputModes=["text"],
-                outputModes=["text"],
-            )
-
-    def _get_custom_tool_skills(self, agent: Agent) -> list[AgentSkill]:
-        """Gets the skills of the custom tools of the agent."""
-        skills = []
-        custom_tools = agent.config["custom_tools"]
-
-        if "http_tools" in custom_tools and custom_tools["http_tools"]:
-            logger.info(f"Agent has {len(custom_tools['http_tools'])} HTTP tools")
-            for http_tool in custom_tools["http_tools"]:
-                skill = AgentSkill(
-                    id=f"{agent.id}_http_{http_tool['name']}",
-                    name=http_tool["name"],
-                    description=http_tool.get(
-                        "description", f"HTTP Tool: {http_tool['name']}"
-                    ),
-                    tags=http_tool.get(
-                        "tags", ["http", "custom_tool", http_tool["method"]]
-                    ),
-                    examples=http_tool.get("examples", []),
-                    inputModes=http_tool.get("inputModes", ["text"]),
-                    outputModes=http_tool.get("outputModes", ["text"]),
-                )
-                skills.append(skill)
-                logger.info(f"Added skill for HTTP tool: {http_tool['name']}")
-
-        return skills
diff --git a/src/services/custom_agents/__init__.py b/src/services/adk/__init__.py
similarity index 100%
rename from src/services/custom_agents/__init__.py
rename to src/services/adk/__init__.py
diff --git a/src/services/agent_builder.py b/src/services/adk/agent_builder.py
similarity index 98%
rename from src/services/agent_builder.py
rename to src/services/adk/agent_builder.py
index 00b1b368..c461bafd 100644
--- a/src/services/agent_builder.py
+++ b/src/services/adk/agent_builder.py
@@ -36,11 +36,11 @@ from src.schemas.schemas import Agent
 from src.utils.logger import setup_logger
 from src.core.exceptions import AgentNotFoundError
 from src.services.agent_service import get_agent
-from src.services.custom_tools import CustomToolBuilder
-from src.services.mcp_service import MCPService
-from src.services.custom_agents.a2a_agent import A2ACustomAgent
-from src.services.custom_agents.workflow_agent import WorkflowAgent
-from src.services.custom_agents.task_agent import TaskAgent
+from src.services.adk.custom_tools import CustomToolBuilder
+from src.services.adk.mcp_service import MCPService
+from src.services.adk.custom_agents.a2a_agent import A2ACustomAgent
+from src.services.adk.custom_agents.workflow_agent import WorkflowAgent
+from src.services.adk.custom_agents.task_agent import TaskAgent
 from src.services.apikey_service import get_decrypted_api_key
 from sqlalchemy.orm import Session
 from contextlib import AsyncExitStack
@@ -214,7 +214,7 @@ class AgentBuilder:
             else:
                 raise ValueError(f"Invalid agent type: {agent.type}")
 
-            sub_agents.append((sub_agent, exit_stack))
+            sub_agents.append(sub_agent)
             logger.info(f"Sub-agent added: {agent.name}")
 
         logger.info(f"Sub-agents created: {len(sub_agents)}")
diff --git a/src/services/agent_runner.py b/src/services/adk/agent_runner.py
similarity index 99%
rename from src/services/agent_runner.py
rename to src/services/adk/agent_runner.py
index 4e205875..ef727f5f 100644
--- a/src/services/agent_runner.py
+++ b/src/services/adk/agent_runner.py
@@ -35,7 +35,7 @@ from google.adk.artifacts.in_memory_artifact_service import InMemoryArtifactServ
 from src.utils.logger import setup_logger
 from src.core.exceptions import AgentNotFoundError, InternalServerError
 from src.services.agent_service import get_agent
-from src.services.agent_builder import AgentBuilder
+from src.services.adk.agent_builder import AgentBuilder
 from sqlalchemy.orm import Session
 from typing import Optional, AsyncGenerator
 import asyncio
diff --git a/src/services/adk/custom_agents/__init__.py b/src/services/adk/custom_agents/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/src/services/adk/custom_agents/a2a_agent.py b/src/services/adk/custom_agents/a2a_agent.py
new file mode 100644
index 00000000..6297351e
--- /dev/null
+++ b/src/services/adk/custom_agents/a2a_agent.py
@@ -0,0 +1,474 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: a2a_agent.py                                                          │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+from google.adk.agents import BaseAgent
+from google.adk.agents.invocation_context import InvocationContext
+from google.adk.events import Event
+from google.genai.types import Content, Part
+
+from typing import AsyncGenerator, List, Dict, Any, Optional
+import json
+import os
+
+from src.schemas.a2a_types import AgentCard
+from src.utils.a2a_enhanced_client import (
+    EnhancedA2AClient,
+    A2AClientConfig,
+    A2AImplementation,
+    A2AResponse,
+)
+
+from uuid import uuid4
+
+
+class A2ACustomAgent(BaseAgent):
+    """
+    Enhanced A2A agent that uses the official a2a-sdk client.
+
+    This agent automatically detects and uses the best available A2A implementation
+    (custom or SDK) and provides better error handling and type validation.
+    """
+
+    # Field declarations for Pydantic
+    agent_card_url: str
+    agent_card: Optional[AgentCard]
+    timeout: int
+    base_url: str
+    api_key: Optional[str]
+    preferred_implementation: A2AImplementation
+
+    def __init__(
+        self,
+        name: str,
+        agent_card_url: str,
+        timeout: int = 300,
+        api_key: Optional[str] = None,
+        preferred_implementation: A2AImplementation = A2AImplementation.AUTO,
+        sub_agents: List[BaseAgent] = [],
+        **kwargs,
+    ):
+        """
+        Initialize the enhanced A2A agent.
+
+        Args:
+            name: Agent name
+            agent_card_url: A2A agent card URL
+            timeout: Maximum execution time (seconds)
+            api_key: API key for authentication (if None, will try to get from env)
+            preferred_implementation: Preferred A2A implementation (auto, custom, sdk)
+            sub_agents: List of sub-agents to be executed after the A2A agent
+        """
+        # Extract base_url from agent_card_url
+        base_url = agent_card_url
+        if "/.well-known/agent.json" in base_url:
+            base_url = base_url.split("/.well-known/agent.json")[0]
+
+        # Extract base URL for API calls (remove agent-specific parts)
+        if "/api/v1/a2a/" in base_url:
+            base_url = base_url.split("/api/v1/a2a/")[0]
+        elif "/api/v1/a2a-sdk/" in base_url:
+            base_url = base_url.split("/api/v1/a2a-sdk/")[0]
+
+        # Get API key from parameter or environment
+        if not api_key:
+            api_key = os.getenv("EVO_AI_API_KEY") or os.getenv("API_KEY")
+
+        if not api_key:
+            print("Warning: No API key provided. This may cause authentication errors.")
+
+        print(f"Enhanced A2A agent initialized for URL: {agent_card_url}")
+        print(f"Base URL: {base_url}")
+        print(f"Preferred implementation: {preferred_implementation.value}")
+
+        # Initialize base class
+        super().__init__(
+            name=name,
+            agent_card_url=agent_card_url,
+            base_url=base_url,
+            agent_card=None,
+            timeout=timeout,
+            api_key=api_key,
+            preferred_implementation=preferred_implementation,
+            sub_agents=sub_agents,
+            **kwargs,
+        )
+
+    async def fetch_agent_card(self) -> AgentCard:
+        """Fetch the agent card using the enhanced client."""
+        if self.agent_card:
+            return self.agent_card
+
+        print(f"Fetching agent card from: {self.agent_card_url}")
+
+        try:
+            # Extract agent ID from URL
+            agent_id = self._extract_agent_id_from_url(self.agent_card_url)
+
+            # Create enhanced client
+            config = A2AClientConfig(
+                base_url=self.base_url,
+                api_key=self.api_key or "default-key",
+                implementation=self.preferred_implementation,
+                timeout=self.timeout,
+            )
+
+            async with EnhancedA2AClient(config) as client:
+                response = await client.get_agent_card(agent_id)
+
+                if response.success:
+                    print(
+                        f"Agent card fetched using {response.implementation_used.value} implementation"
+                    )
+                    self.agent_card = AgentCard(**response.data)
+                    return self.agent_card
+                else:
+                    raise ValueError(f"Failed to fetch agent card: {response.error}")
+
+        except Exception as e:
+            print(f"Error fetching agent card: {e}")
+            # Fallback to basic agent card
+            self.agent_card = AgentCard(
+                name="A2A Agent",
+                description="External A2A Agent",
+                url=self.agent_card_url,
+                version="1.0.0",
+                capabilities={"streaming": True},
+                defaultInputModes=["text"],
+                defaultOutputModes=["text"],
+                skills=[],
+            )
+            return self.agent_card
+
+    def _extract_agent_id_from_url(self, url: str) -> str:
+        """Extract agent ID from the agent card URL."""
+        try:
+            # Handle different URL formats
+            if "/api/v1/a2a/" in url:
+                # Custom implementation URL
+                parts = url.split("/api/v1/a2a/")[1]
+                return parts.split("/")[0]
+            elif "/api/v1/a2a-sdk/" in url:
+                # SDK implementation URL
+                parts = url.split("/api/v1/a2a-sdk/")[1]
+                return parts.split("/")[0]
+            else:
+                # Try to extract from path
+                path_parts = url.split("/")
+                for i, part in enumerate(path_parts):
+                    if part in ["a2a", "a2a-sdk"] and i + 1 < len(path_parts):
+                        return path_parts[i + 1]
+
+                # Fallback: use last meaningful part
+                meaningful_parts = [
+                    p
+                    for p in path_parts
+                    if p and p != ".well-known" and p != "agent.json"
+                ]
+                return meaningful_parts[-1] if meaningful_parts else "unknown-agent"
+
+        except Exception as e:
+            print(f"Error extracting agent ID from URL {url}: {e}")
+            return "unknown-agent"
+
+    async def _run_async_impl(
+        self, ctx: InvocationContext
+    ) -> AsyncGenerator[Event, None]:
+        """
+        Enhanced A2A implementation using the official SDK client.
+
+        This method uses the EnhancedA2AClient which automatically detects
+        and uses the best available implementation (custom or SDK).
+        """
+
+        try:
+            # 1. Fetch the agent card if we haven't already
+            try:
+                agent_card = await self.fetch_agent_card()
+                print(f"Agent card fetched: {agent_card.name}")
+            except Exception as e:
+                error_msg = f"Failed to fetch agent card: {str(e)}"
+                print(error_msg)
+                yield Event(
+                    author=self.name,
+                    content=Content(role="agent", parts=[Part(text=error_msg)]),
+                )
+                return
+
+            # 2. Extract the user's message from the context
+            user_message = self._extract_user_message(ctx)
+
+            if not user_message:
+                error_msg = "No user message found"
+                print(error_msg)
+                yield Event(
+                    author=self.name,
+                    content=Content(role="agent", parts=[Part(text=error_msg)]),
+                )
+                return
+
+            # 3. Extract agent ID and create enhanced client
+            agent_id = self._extract_agent_id_from_url(self.agent_card_url)
+
+            config = A2AClientConfig(
+                base_url=self.base_url,
+                api_key=self.api_key or "default-key",
+                implementation=self.preferred_implementation,
+                timeout=self.timeout,
+            )
+
+            print(f"Sending message to A2A agent {agent_id}: {user_message[:100]}...")
+
+            # 4. Use enhanced client to communicate with the agent
+            async with EnhancedA2AClient(config) as client:
+                # Use session ID as a stable identifier
+                session_id = (
+                    str(ctx.session.id)
+                    if ctx.session and hasattr(ctx.session, "id")
+                    else str(uuid4())
+                )
+
+                # Check if the agent supports streaming
+                supports_streaming = self._agent_supports_streaming(agent_card)
+
+                if supports_streaming:
+                    print("Agent supports streaming, using streaming API")
+                    await self._process_streaming_response(
+                        client, agent_id, user_message, session_id
+                    )
+                else:
+                    print("Agent does not support streaming, using regular API")
+                    await self._process_regular_response(
+                        client, agent_id, user_message, session_id
+                    )
+
+            # 5. Run sub-agents
+            for sub_agent in self.sub_agents:
+                async for event in sub_agent.run_async(ctx):
+                    yield event
+
+        except Exception as e:
+            # Handle any uncaught error
+            error_msg = f"Error executing enhanced A2A agent: {str(e)}"
+            print(error_msg)
+            yield Event(
+                author=self.name,
+                content=Content(
+                    role="agent",
+                    parts=[Part(text=error_msg)],
+                ),
+            )
+
+    def _extract_user_message(self, ctx: InvocationContext) -> Optional[str]:
+        """Extract user message from the invocation context."""
+        user_message = None
+
+        # Search for the user's message in the session events
+        if ctx.session and hasattr(ctx.session, "events") and ctx.session.events:
+            for event in reversed(ctx.session.events):
+                if event.author == "user" and event.content and event.content.parts:
+                    user_message = event.content.parts[0].text
+                    print("Message found in session events")
+                    break
+
+        # Check in the session state if the message was not found in the events
+        if not user_message and ctx.session and ctx.session.state:
+            if "user_message" in ctx.session.state:
+                user_message = ctx.session.state["user_message"]
+            elif "message" in ctx.session.state:
+                user_message = ctx.session.state["message"]
+
+        return user_message
+
+    def _agent_supports_streaming(self, agent_card: AgentCard) -> bool:
+        """Check if the agent supports streaming."""
+        try:
+            if hasattr(agent_card, "capabilities"):
+                if hasattr(agent_card.capabilities, "streaming"):
+                    return agent_card.capabilities.streaming
+                elif isinstance(agent_card.capabilities, dict):
+                    return agent_card.capabilities.get("streaming", False)
+            return False
+        except Exception as e:
+            print(f"Error checking streaming capability: {e}")
+            return False
+
+    async def _process_streaming_response(
+        self, client: EnhancedA2AClient, agent_id: str, message: str, session_id: str
+    ) -> AsyncGenerator[Event, None]:
+        """Process streaming response from the A2A agent."""
+        try:
+            async for response_chunk in client.send_message_streaming(
+                agent_id=agent_id, message=message, session_id=session_id
+            ):
+                if response_chunk.success:
+                    print(
+                        f"Streaming chunk received using {response_chunk.implementation_used.value}"
+                    )
+
+                    # Extract and yield agent response
+                    event = self._create_event_from_response(response_chunk)
+                    if event:
+                        yield event
+                else:
+                    print(f"Streaming error: {response_chunk.error}")
+                    yield Event(
+                        author=self.name,
+                        content=Content(
+                            role="agent",
+                            parts=[
+                                Part(text=f"Streaming error: {response_chunk.error}")
+                            ],
+                        ),
+                    )
+
+        except Exception as e:
+            error_msg = f"Error in streaming: {str(e)}"
+            print(error_msg)
+            yield Event(
+                author=self.name,
+                content=Content(role="agent", parts=[Part(text=error_msg)]),
+            )
+
+    async def _process_regular_response(
+        self, client: EnhancedA2AClient, agent_id: str, message: str, session_id: str
+    ) -> AsyncGenerator[Event, None]:
+        """Process regular (non-streaming) response from the A2A agent."""
+        try:
+            response = await client.send_message(
+                agent_id=agent_id, message=message, session_id=session_id
+            )
+
+            if response.success:
+                print(f"Response received using {response.implementation_used.value}")
+
+                # Extract and yield agent response
+                event = self._create_event_from_response(response)
+                if event:
+                    yield event
+                else:
+                    yield Event(
+                        author=self.name,
+                        content=Content(
+                            role="agent",
+                            parts=[
+                                Part(text="Received response without readable content")
+                            ],
+                        ),
+                    )
+            else:
+                error_msg = f"Request failed: {response.error}"
+                print(error_msg)
+                yield Event(
+                    author=self.name,
+                    content=Content(role="agent", parts=[Part(text=error_msg)]),
+                )
+
+        except Exception as e:
+            error_msg = f"Error in regular request: {str(e)}"
+            print(error_msg)
+            yield Event(
+                author=self.name,
+                content=Content(role="agent", parts=[Part(text=error_msg)]),
+            )
+
+    def _create_event_from_response(self, response: A2AResponse) -> Optional[Event]:
+        """Create an Event from an A2A response."""
+        try:
+            response_data = response.data
+
+            if not response_data:
+                return None
+
+            # Handle different response formats
+            parts = []
+
+            # Try to extract message parts from various response structures
+            if isinstance(response_data, dict):
+                # Handle JSON-RPC response
+                if "result" in response_data:
+                    result = response_data["result"]
+
+                    # Handle task status with message
+                    if isinstance(result, dict) and "status" in result:
+                        status = result["status"]
+                        if "message" in status and "parts" in status["message"]:
+                            message_parts = status["message"]["parts"]
+                            for part in message_parts:
+                                if part.get("type") == "text" and "text" in part:
+                                    parts.append(Part(text=part["text"]))
+
+                    # Handle direct message response
+                    elif isinstance(result, dict) and "message" in result:
+                        message = result["message"]
+                        if isinstance(message, str):
+                            parts.append(Part(text=message))
+                        elif isinstance(message, dict) and "parts" in message:
+                            for part in message["parts"]:
+                                if part.get("type") == "text" and "text" in part:
+                                    parts.append(Part(text=part["text"]))
+
+                # Handle streaming event format
+                elif "data" in response_data:
+                    data = response_data["data"]
+                    if isinstance(data, str):
+                        parts.append(Part(text=data))
+                    elif isinstance(data, dict):
+                        # Recursively handle nested data
+                        nested_event = self._create_event_from_response(
+                            A2AResponse(success=True, data=data)
+                        )
+                        return nested_event
+
+            # If we extracted parts, create the event
+            if parts:
+                return Event(
+                    author=self.name,
+                    content=Content(role="agent", parts=parts),
+                )
+
+            # Fallback: try to convert response to string
+            elif response_data:
+                text_content = str(response_data)
+                if text_content and text_content != "None":
+                    return Event(
+                        author=self.name,
+                        content=Content(role="agent", parts=[Part(text=text_content)]),
+                    )
+
+            return None
+
+        except Exception as e:
+            print(f"Error creating event from response: {e}")
+            return Event(
+                author=self.name,
+                content=Content(
+                    role="agent",
+                    parts=[Part(text=f"Error processing response: {str(e)}")],
+                ),
+            )
diff --git a/src/services/custom_agents/task_agent.py b/src/services/adk/custom_agents/task_agent.py
similarity index 99%
rename from src/services/custom_agents/task_agent.py
rename to src/services/adk/custom_agents/task_agent.py
index b2247b4b..a1329dd2 100644
--- a/src/services/custom_agents/task_agent.py
+++ b/src/services/adk/custom_agents/task_agent.py
@@ -162,7 +162,7 @@ class TaskAgent(BaseAgent):
                     ),
                 )
 
-                from src.services.agent_builder import AgentBuilder
+                from src.services.adk.agent_builder import AgentBuilder
 
                 print(f"Building agent in Task agent: {agent.name}")
                 agent_builder = AgentBuilder(self.db)
diff --git a/src/services/custom_agents/workflow_agent.py b/src/services/adk/custom_agents/workflow_agent.py
similarity index 91%
rename from src/services/custom_agents/workflow_agent.py
rename to src/services/adk/custom_agents/workflow_agent.py
index 97c99ba4..18376347 100644
--- a/src/services/custom_agents/workflow_agent.py
+++ b/src/services/adk/custom_agents/workflow_agent.py
@@ -6,6 +6,9 @@
 │ Creation date: May 13, 2025                                                  │
 │ Contact: contato@evolution-api.com                                           │
 ├──────────────────────────────────────────────────────────────────────────────┤
+│ @contributors:                                                               │
+│ Victor Calazans - delay node implementation (May 17, 2025)                   │
+├──────────────────────────────────────────────────────────────────────────────┤
 │ @copyright © Evolution API 2025. All rights reserved.                        │
 │ Licensed under the Apache License, Version 2.0                               │
 │                                                                              │
@@ -116,7 +119,7 @@ class WorkflowAgent(BaseAgent):
             if not content:
                 content = [
                     Event(
-                        author="workflow_agent",
+                        author=f"workflow-node:{node_id}",
                         content=Content(parts=[Part(text="Content not found")]),
                     )
                 ]
@@ -133,6 +136,12 @@ class WorkflowAgent(BaseAgent):
             # Store specific results for this node
             node_outputs = state.get("node_outputs", {})
             node_outputs[node_id] = {"started_at": datetime.now().isoformat()}
+            
+            new_event = Event(
+                author=f"workflow-node:{node_id}",
+                content=Content(parts=[Part(text="Workflow started")]),
+            )
+            content = content + [new_event]
 
             yield {
                 "content": content,
@@ -168,7 +177,7 @@ class WorkflowAgent(BaseAgent):
                 yield {
                     "content": [
                         Event(
-                            author="workflow_agent",
+                            author=f"workflow-node:{node_id}",
                             content=Content(parts=[Part(text="Agent not found")]),
                         )
                     ],
@@ -181,7 +190,7 @@ class WorkflowAgent(BaseAgent):
                 return
 
             # Import moved to inside the function to avoid circular import
-            from src.services.agent_builder import AgentBuilder
+            from src.services.adk.agent_builder import AgentBuilder
 
             agent_builder = AgentBuilder(self.db)
             root_agent, exit_stack = await agent_builder.build_agent(agent)
@@ -189,7 +198,12 @@ class WorkflowAgent(BaseAgent):
             new_content = []
             async for event in root_agent.run_async(ctx):
                 conversation_history.append(event)
-                new_content.append(event)
+                
+                modified_event = Event(
+                    author=f"workflow-node:{node_id}", content=event.content
+                )
+                new_content.append(modified_event)
+
 
             print(f"New content: {new_content}")
 
@@ -281,7 +295,7 @@ class WorkflowAgent(BaseAgent):
 
                 condition_content = [
                     Event(
-                        author="workflow_agent",
+                        author=f"workflow-node:{node_id}",
                         content=Content(parts=[Part(text="Cycle limit reached")]),
                     )
                 ]
@@ -312,7 +326,7 @@ class WorkflowAgent(BaseAgent):
 
             condition_content = [
                 Event(
-                    author=label,
+                    author=f"workflow-node:{node_id}",
                     content=Content(
                         parts=[
                             Part(
@@ -320,10 +334,9 @@ class WorkflowAgent(BaseAgent):
                             )
                         ]
                     ),
-                )
-            ]
+                )            ]
             content = content + condition_content
-
+            
             yield {
                 "content": content,
                 "status": "condition_evaluated",
@@ -332,7 +345,7 @@ class WorkflowAgent(BaseAgent):
                 "conversation_history": conversation_history,
                 "session_id": session_id,
             }
-
+            
         async def message_node_function(
             state: State, node_id: str, node_data: Dict[str, Any]
         ) -> AsyncGenerator[State, None]:
@@ -349,7 +362,7 @@ class WorkflowAgent(BaseAgent):
             label = node_data.get("label", "message_node")
 
             new_event = Event(
-                author=label,
+                author=f"workflow-node:{node_id}",
                 content=Content(parts=[Part(text=message_content)]),
             )
             content = content + [new_event]
@@ -365,15 +378,63 @@ class WorkflowAgent(BaseAgent):
                 "status": "message_added",
                 "node_outputs": node_outputs,
                 "cycle_count": state.get("cycle_count", 0),
+                "conversation_history": conversation_history,            "session_id": session_id,
+            }
+            
+        async def delay_node_function(
+            state: State, node_id: str, node_data: Dict[str, Any]
+        ) -> AsyncGenerator[State, None]:
+            delay_data = node_data.get("delay", {})
+            delay_value = delay_data.get("value", 0)
+            delay_unit = delay_data.get("unit", "seconds")
+            delay_description = delay_data.get("description", "")
+            
+            # Convert to seconds based on unit
+            delay_seconds = delay_value
+            if delay_unit == "minutes":
+                delay_seconds = delay_value * 60
+            elif delay_unit == "hours":
+                delay_seconds = delay_value * 3600
+            
+            label = node_data.get("label", "delay_node")
+            print(f"\n⏱️ DELAY-NODE: {delay_value} {delay_unit} - {delay_description}")
+            
+            content = state.get("content", [])
+            session_id = state.get("session_id", "")
+            conversation_history = state.get("conversation_history", [])
+
+            # Store node output information
+            node_outputs = state.get("node_outputs", {})
+            node_outputs[node_id] = {
+                "delay_value": delay_value,
+                "delay_unit": delay_unit,
+                "delay_seconds": delay_seconds,
+                "delay_start_time": datetime.now().isoformat(),
+            }
+            
+            # Actually perform the delay
+            import asyncio
+            await asyncio.sleep(delay_seconds)
+            
+            
+            # Update node outputs with completion information
+            node_outputs[node_id]["delay_end_time"] = datetime.now().isoformat()
+            node_outputs[node_id]["delay_completed"] = True
+            
+            yield {
+                "content": content,
+                "status": "delay_completed",
+                "node_outputs": node_outputs,            "cycle_count": state.get("cycle_count", 0),
                 "conversation_history": conversation_history,
                 "session_id": session_id,
             }
-
+            
         return {
             "start-node": start_node_function,
             "agent-node": agent_node_function,
             "condition-node": condition_node_function,
             "message-node": message_node_function,
+            "delay-node": delay_node_function,
         }
 
     def _evaluate_condition(self, condition: Dict[str, Any], state: State) -> bool:
@@ -863,7 +924,7 @@ class WorkflowAgent(BaseAgent):
         error_msg = f"Error executing the workflow agent: {str(error)}"
         print(error_msg)
         return Event(
-            author=self.name,
+            author=f"workflow-error:{self.name}",
             content=Content(
                 role="agent",
                 parts=[Part(text=error_msg)],
diff --git a/src/services/custom_tools.py b/src/services/adk/custom_tools.py
similarity index 93%
rename from src/services/custom_tools.py
rename to src/services/adk/custom_tools.py
index f8ac96b8..0adde66c 100644
--- a/src/services/custom_tools.py
+++ b/src/services/adk/custom_tools.py
@@ -31,6 +31,7 @@ from typing import Any, Dict, List
 from google.adk.tools import FunctionTool
 import requests
 import json
+import urllib.parse
 from src.utils.logger import setup_logger
 
 logger = setup_logger(__name__)
@@ -70,7 +71,9 @@ class CustomToolBuilder:
                 url = endpoint
                 for param, value in path_params.items():
                     if param in all_values:
-                        url = url.replace(f"{{{param}}}", str(all_values[param]))
+                        # URL encode the value for URL safe characters
+                        replacement_value = urllib.parse.quote(str(all_values[param]), safe='')
+                        url = url.replace(f"{{{param}}}", replacement_value)
 
                 # Process query parameters
                 query_params_dict = {}
@@ -119,8 +122,12 @@ class CustomToolBuilder:
                         f"Error in the request: {response.status_code} - {response.text}"
                     )
 
-                # Always returns the response as a string
-                return json.dumps(response.json())
+                # Try to parse the response as JSON, if it fails, return the text content
+                try:
+                    return json.dumps(response.json())
+                except ValueError:
+                    # Response is not JSON, return the text content
+                    return json.dumps({"content": response.text})
 
             except Exception as e:
                 logger.error(f"Error executing tool {name}: {str(e)}")
diff --git a/src/services/mcp_service.py b/src/services/adk/mcp_service.py
similarity index 100%
rename from src/services/mcp_service.py
rename to src/services/adk/mcp_service.py
diff --git a/src/services/agent_service.py b/src/services/agent_service.py
index b699daf8..c49fc88d 100644
--- a/src/services/agent_service.py
+++ b/src/services/agent_service.py
@@ -995,3 +995,343 @@ def get_agents_by_folder(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
             detail="Error listing agents of folder",
         )
+
+
+async def import_agents_from_json(
+    db: Session,
+    agents_data: Dict[str, Any],
+    client_id: uuid.UUID,
+    folder_id: Optional[uuid.UUID] = None,
+) -> List[Agent]:
+    """
+    Import one or more agents from JSON data
+
+    Args:
+        db (Session): Database session
+        agents_data (Dict[str, Any]): JSON data containing agent definitions
+        client_id (uuid.UUID): Client ID to associate with the imported agents
+        folder_id (Optional[uuid.UUID]): Optional folder ID to assign agents to
+
+    Returns:
+        List[Agent]: List of imported agents
+    """
+    # Check if the JSON contains a single agent or multiple agents
+    if "agents" in agents_data:
+        # Multiple agents import
+        agents_list = agents_data["agents"]
+        if not isinstance(agents_list, list):
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="The 'agents' field must contain a list of agent definitions",
+            )
+    else:
+        # Single agent import
+        agents_list = [agents_data]
+
+    imported_agents = []
+    errors = []
+    id_mapping = {}  # Maps original IDs to newly created agent IDs
+
+    # First pass: Import all non-workflow agents to establish ID mappings
+    for agent_data in agents_list:
+        # Skip workflow agents in the first pass, we'll handle them in the second pass
+        if agent_data.get("type") == "workflow":
+            continue
+
+        try:
+            # Store original ID if present for reference mapping
+            original_id = None
+            if "id" in agent_data:
+                original_id = agent_data["id"]
+                del agent_data["id"]  # Always create a new agent with new ID
+
+            # Set the client ID for this agent if not provided
+            if "client_id" not in agent_data:
+                agent_data["client_id"] = str(client_id)
+            else:
+                # Ensure the provided client_id matches the authenticated client
+                agent_client_id = uuid.UUID(agent_data["client_id"])
+                if agent_client_id != client_id:
+                    raise HTTPException(
+                        status_code=status.HTTP_403_FORBIDDEN,
+                        detail=f"Cannot import agent for client ID {agent_client_id}",
+                    )
+
+            # Set folder_id if provided and not already set in the agent data
+            if folder_id and "folder_id" not in agent_data:
+                agent_data["folder_id"] = str(folder_id)
+
+            # Process config: Keep original configuration intact except for agent references
+            if "config" in agent_data and agent_data["config"]:
+                config = agent_data["config"]
+
+                # Process sub_agents if present
+                if "sub_agents" in config and config["sub_agents"]:
+                    processed_sub_agents = []
+
+                    for sub_agent_id in config["sub_agents"]:
+                        try:
+                            # Check if agent exists in database
+                            existing_agent = get_agent(db, sub_agent_id)
+                            if existing_agent:
+                                processed_sub_agents.append(str(existing_agent.id))
+                            else:
+                                logger.warning(
+                                    f"Referenced sub_agent {sub_agent_id} not found - will be skipped"
+                                )
+                        except Exception as e:
+                            logger.warning(
+                                f"Error processing sub_agent {sub_agent_id}: {str(e)}"
+                            )
+
+                    config["sub_agents"] = processed_sub_agents
+
+                # Process agent_tools if present
+                if "agent_tools" in config and config["agent_tools"]:
+                    processed_agent_tools = []
+
+                    for agent_tool_id in config["agent_tools"]:
+                        try:
+                            # Check if agent exists in database
+                            existing_agent = get_agent(db, agent_tool_id)
+                            if existing_agent:
+                                processed_agent_tools.append(str(existing_agent.id))
+                            else:
+                                logger.warning(
+                                    f"Referenced agent_tool {agent_tool_id} not found - will be skipped"
+                                )
+                        except Exception as e:
+                            logger.warning(
+                                f"Error processing agent_tool {agent_tool_id}: {str(e)}"
+                            )
+
+                    config["agent_tools"] = processed_agent_tools
+
+            # Convert to AgentCreate schema
+            agent_create = AgentCreate(**agent_data)
+
+            # Create the agent using existing create_agent function
+            db_agent = await create_agent(db, agent_create)
+
+            # Store mapping from original ID to new ID
+            if original_id:
+                id_mapping[original_id] = str(db_agent.id)
+
+            # If folder_id is provided but not in agent_data (couldn't be set at creation time)
+            # assign the agent to the folder after creation
+            if folder_id and not agent_data.get("folder_id"):
+                db_agent = assign_agent_to_folder(db, db_agent.id, folder_id)
+
+            # Set agent card URL if needed
+            if not db_agent.agent_card_url:
+                db_agent.agent_card_url = db_agent.agent_card_url_property
+
+            imported_agents.append(db_agent)
+
+        except Exception as e:
+            # Log the error and continue with other agents
+            agent_name = agent_data.get("name", "Unknown")
+            error_msg = f"Error importing agent '{agent_name}': {str(e)}"
+            logger.error(error_msg)
+            errors.append(error_msg)
+
+    # Second pass: Process workflow agents
+    for agent_data in agents_list:
+        # Only process workflow agents in the second pass
+        if agent_data.get("type") != "workflow":
+            continue
+
+        try:
+            # Store original ID if present for reference mapping
+            original_id = None
+            if "id" in agent_data:
+                original_id = agent_data["id"]
+                del agent_data["id"]  # Always create a new agent with new ID
+
+            # Set the client ID for this agent if not provided
+            if "client_id" not in agent_data:
+                agent_data["client_id"] = str(client_id)
+            else:
+                # Ensure the provided client_id matches the authenticated client
+                agent_client_id = uuid.UUID(agent_data["client_id"])
+                if agent_client_id != client_id:
+                    raise HTTPException(
+                        status_code=status.HTTP_403_FORBIDDEN,
+                        detail=f"Cannot import agent for client ID {agent_client_id}",
+                    )
+
+            # Set folder_id if provided and not already set in the agent data
+            if folder_id and "folder_id" not in agent_data:
+                agent_data["folder_id"] = str(folder_id)
+
+            # Process workflow nodes
+            if "config" in agent_data and agent_data["config"]:
+                config = agent_data["config"]
+
+                # Process workflow nodes
+                if "workflow" in config and config["workflow"]:
+                    workflow = config["workflow"]
+
+                    if "nodes" in workflow and isinstance(workflow["nodes"], list):
+                        for node in workflow["nodes"]:
+                            if (
+                                isinstance(node, dict)
+                                and node.get("type") == "agent-node"
+                            ):
+                                if "data" in node and "agent" in node["data"]:
+                                    agent_node = node["data"]["agent"]
+
+                                    # Store the original node ID
+                                    node_agent_id = None
+                                    if "id" in agent_node:
+                                        node_agent_id = agent_node["id"]
+
+                                        # Check if this ID is in our mapping (we created it in this import)
+                                        if node_agent_id in id_mapping:
+                                            # Use our newly created agent
+                                            # Get the agent from database with the mapped ID
+                                            mapped_id = uuid.UUID(
+                                                id_mapping[node_agent_id]
+                                            )
+                                            db_agent = get_agent(db, mapped_id)
+                                            if db_agent:
+                                                # Replace with database agent definition
+                                                # Extract agent data as dictionary
+                                                agent_dict = {
+                                                    "id": str(db_agent.id),
+                                                    "name": db_agent.name,
+                                                    "description": db_agent.description,
+                                                    "role": db_agent.role,
+                                                    "goal": db_agent.goal,
+                                                    "type": db_agent.type,
+                                                    "model": db_agent.model,
+                                                    "instruction": db_agent.instruction,
+                                                    "config": db_agent.config,
+                                                }
+                                                node["data"]["agent"] = agent_dict
+                                        else:
+                                            # Check if this agent exists in database
+                                            try:
+                                                existing_agent = get_agent(
+                                                    db, node_agent_id
+                                                )
+                                                if existing_agent:
+                                                    # Replace with database agent definition
+                                                    # Extract agent data as dictionary
+                                                    agent_dict = {
+                                                        "id": str(existing_agent.id),
+                                                        "name": existing_agent.name,
+                                                        "description": existing_agent.description,
+                                                        "role": existing_agent.role,
+                                                        "goal": existing_agent.goal,
+                                                        "type": existing_agent.type,
+                                                        "model": existing_agent.model,
+                                                        "instruction": existing_agent.instruction,
+                                                        "config": existing_agent.config,
+                                                    }
+                                                    node["data"]["agent"] = agent_dict
+                                                else:
+                                                    # Agent doesn't exist, so we'll create a new one
+                                                    # First, remove ID to get a new one
+                                                    if "id" in agent_node:
+                                                        del agent_node["id"]
+
+                                                    # Set client_id to match parent
+                                                    agent_node["client_id"] = str(
+                                                        client_id
+                                                    )
+
+                                                    # Create agent
+                                                    inner_agent_create = AgentCreate(
+                                                        **agent_node
+                                                    )
+                                                    inner_db_agent = await create_agent(
+                                                        db, inner_agent_create
+                                                    )
+
+                                                    # Replace with the new agent
+                                                    # Extract agent data as dictionary
+                                                    agent_dict = {
+                                                        "id": str(inner_db_agent.id),
+                                                        "name": inner_db_agent.name,
+                                                        "description": inner_db_agent.description,
+                                                        "role": inner_db_agent.role,
+                                                        "goal": inner_db_agent.goal,
+                                                        "type": inner_db_agent.type,
+                                                        "model": inner_db_agent.model,
+                                                        "instruction": inner_db_agent.instruction,
+                                                        "config": inner_db_agent.config,
+                                                    }
+                                                    node["data"]["agent"] = agent_dict
+                                            except Exception as e:
+                                                logger.warning(
+                                                    f"Error processing agent node {node_agent_id}: {str(e)}"
+                                                )
+                                                # Continue using the agent definition as is,
+                                                # but without ID to get a new one
+                                                if "id" in agent_node:
+                                                    del agent_node["id"]
+                                                agent_node["client_id"] = str(client_id)
+
+                # Process sub_agents if present
+                if "sub_agents" in config and config["sub_agents"]:
+                    processed_sub_agents = []
+
+                    for sub_agent_id in config["sub_agents"]:
+                        # Check if agent exists in database
+                        try:
+                            # Check if this is an agent we just created
+                            if sub_agent_id in id_mapping:
+                                processed_sub_agents.append(id_mapping[sub_agent_id])
+                            else:
+                                # Check if this agent exists in database
+                                existing_agent = get_agent(db, sub_agent_id)
+                                if existing_agent:
+                                    processed_sub_agents.append(str(existing_agent.id))
+                                else:
+                                    logger.warning(
+                                        f"Referenced sub_agent {sub_agent_id} not found - will be skipped"
+                                    )
+                        except Exception as e:
+                            logger.warning(
+                                f"Error processing sub_agent {sub_agent_id}: {str(e)}"
+                            )
+
+                    config["sub_agents"] = processed_sub_agents
+
+            # Convert to AgentCreate schema
+            agent_create = AgentCreate(**agent_data)
+
+            # Create the agent using existing create_agent function
+            db_agent = await create_agent(db, agent_create)
+
+            # Store mapping from original ID to new ID
+            if original_id:
+                id_mapping[original_id] = str(db_agent.id)
+
+            # If folder_id is provided but not in agent_data (couldn't be set at creation time)
+            # assign the agent to the folder after creation
+            if folder_id and not agent_data.get("folder_id"):
+                db_agent = assign_agent_to_folder(db, db_agent.id, folder_id)
+
+            # Set agent card URL if needed
+            if not db_agent.agent_card_url:
+                db_agent.agent_card_url = db_agent.agent_card_url_property
+
+            imported_agents.append(db_agent)
+
+        except Exception as e:
+            # Log the error and continue with other agents
+            agent_name = agent_data.get("name", "Unknown")
+            error_msg = f"Error importing agent '{agent_name}': {str(e)}"
+            logger.error(error_msg)
+            errors.append(error_msg)
+
+    # If no agents were imported successfully, raise an error
+    if not imported_agents and errors:
+        raise HTTPException(
+            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+            detail={"message": "Failed to import any agents", "errors": errors},
+        )
+
+    return imported_agents
diff --git a/src/services/crewai/agent_builder.py b/src/services/crewai/agent_builder.py
new file mode 100644
index 00000000..d9a3b685
--- /dev/null
+++ b/src/services/crewai/agent_builder.py
@@ -0,0 +1,219 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: agent_builder.py                                                      │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+from typing import List, Tuple, Optional
+from src.schemas.schemas import Agent
+from src.schemas.agent_config import AgentTask
+from src.services.crewai.custom_tool import CustomToolBuilder
+from src.services.crewai.mcp_service import MCPService
+from src.utils.logger import setup_logger
+from src.services.apikey_service import get_decrypted_api_key
+from sqlalchemy.orm import Session
+from contextlib import AsyncExitStack
+from crewai import LLM, Agent as LlmAgent, Crew, Task, Process
+
+from datetime import datetime
+import uuid
+
+logger = setup_logger(__name__)
+
+
+class AgentBuilder:
+    def __init__(self, db: Session):
+        self.db = db
+        self.custom_tool_builder = CustomToolBuilder()
+        self.mcp_service = MCPService()
+
+    async def _get_api_key(self, agent: Agent) -> str:
+        """Get the API key for the agent."""
+        api_key = None
+
+        # Get API key from api_key_id
+        if hasattr(agent, "api_key_id") and agent.api_key_id:
+            if decrypted_key := get_decrypted_api_key(self.db, agent.api_key_id):
+                logger.info(f"Using stored API key for agent {agent.name}")
+                api_key = decrypted_key
+            else:
+                logger.error(f"Stored API key not found for agent {agent.name}")
+                raise ValueError(
+                    f"API key with ID {agent.api_key_id} not found or inactive"
+                )
+        else:
+            # Check if there is an API key in the config (temporary field)
+            config_api_key = agent.config.get("api_key") if agent.config else None
+            if config_api_key:
+                logger.info(f"Using config API key for agent {agent.name}")
+                # Check if it is a UUID of a stored key
+                try:
+                    key_id = uuid.UUID(config_api_key)
+                    if decrypted_key := get_decrypted_api_key(self.db, key_id):
+                        logger.info("Config API key is a valid reference")
+                        api_key = decrypted_key
+                    else:
+                        # Use the key directly
+                        api_key = config_api_key
+                except (ValueError, TypeError):
+                    # It is not a UUID, use directly
+                    api_key = config_api_key
+            else:
+                logger.error(f"No API key configured for agent {agent.name}")
+                raise ValueError(
+                    f"Agent {agent.name} does not have a configured API key"
+                )
+
+        return api_key
+
+    async def _create_llm(self, agent: Agent) -> LLM:
+        """Create an LLM from the agent data."""
+        api_key = await self._get_api_key(agent)
+
+        return LLM(model=agent.model, api_key=api_key)
+
+    async def _create_llm_agent(
+        self, agent: Agent, enabled_tools: List[str] = []
+    ) -> Tuple[LlmAgent, Optional[AsyncExitStack]]:
+        """Create an LLM agent from the agent data."""
+        # Get custom tools from the configuration
+        custom_tools = []
+        custom_tools = self.custom_tool_builder.build_tools(agent.config)
+
+        # # Get MCP tools from the configuration
+        mcp_tools = []
+        mcp_exit_stack = None
+        if agent.config.get("mcp_servers") or agent.config.get("custom_mcp_servers"):
+            try:
+                mcp_tools, mcp_exit_stack = await self.mcp_service.build_tools(
+                    agent.config, self.db
+                )
+            except Exception as e:
+                logger.error(f"Error building MCP tools: {e}")
+                # Continue without MCP tools
+                mcp_tools = []
+                mcp_exit_stack = None
+
+        # # Get agent tools
+        # agent_tools = await self._agent_tools_builder(agent)
+
+        # Combine all tools
+        all_tools = custom_tools + mcp_tools
+
+        if enabled_tools:
+            all_tools = [tool for tool in all_tools if tool.name in enabled_tools]
+            logger.info(f"Enabled tools enabled. Total tools: {len(all_tools)}")
+
+        now = datetime.now()
+        current_datetime = now.strftime("%d/%m/%Y %H:%M")
+        current_day_of_week = now.strftime("%A")
+        current_date_iso = now.strftime("%Y-%m-%d")
+        current_time = now.strftime("%H:%M")
+
+        # Substitute variables in the prompt
+        formatted_prompt = agent.instruction.format(
+            current_datetime=current_datetime,
+            current_day_of_week=current_day_of_week,
+            current_date_iso=current_date_iso,
+            current_time=current_time,
+        )
+
+        llm_agent = LlmAgent(
+            role=agent.role,
+            goal=agent.goal,
+            backstory=formatted_prompt,
+            llm=await self._create_llm(agent),
+            tools=all_tools,
+            verbose=True,
+            cache=True,
+            # memory=True,
+        )
+
+        return llm_agent, mcp_exit_stack
+
+    async def _create_tasks(
+        self, agent: LlmAgent, tasks: List[AgentTask] = []
+    ) -> List[Task]:
+        """Create tasks from the agent data."""
+        tasks_list = []
+        if tasks:
+            tasks_list.extend(
+                Task(
+                    name=task.name,
+                    description=task.description,
+                    expected_output=task.expected_output,
+                    agent=agent,
+                    verbose=True,
+                )
+                for task in tasks
+            )
+        return tasks_list
+
+    async def build_crew(self, agents: List[LlmAgent], tasks: List[Task] = []) -> Crew:
+        """Create a crew from the agent data."""
+        return Crew(
+            agents=agents,
+            tasks=tasks,
+            process=Process.sequential,
+            verbose=True,
+        )
+
+    async def build_llm_agent(
+        self, root_agent, enabled_tools: List[str] = []
+    ) -> Tuple[LlmAgent, Optional[AsyncExitStack]]:
+        """Build an LLM agent with its sub-agents."""
+        logger.info("Creating LLM agent")
+
+        try:
+            result = await self._create_llm_agent(root_agent, enabled_tools)
+
+            if isinstance(result, tuple) and len(result) == 2:
+                return result
+            else:
+                return result, None
+        except Exception as e:
+            logger.error(f"Error in build_llm_agent: {e}")
+            raise
+
+    async def build_agent(
+        self, root_agent, enabled_tools: List[str] = []
+    ) -> Tuple[LlmAgent, Optional[AsyncExitStack]]:
+        """Build the appropriate agent based on the type of the root agent."""
+        if root_agent.type == "llm":
+            agent, exit_stack = await self.build_llm_agent(root_agent, enabled_tools)
+            return agent, exit_stack
+        elif root_agent.type == "a2a":
+            raise ValueError("A2A agents are not supported yet")
+            # return await self.build_a2a_agent(root_agent)
+        elif root_agent.type == "workflow":
+            raise ValueError("Workflow agents are not supported yet")
+            # return await self.build_workflow_agent(root_agent)
+        elif root_agent.type == "task":
+            raise ValueError("Task agents are not supported yet")
+            # return await self.build_task_agent(root_agent)
+        else:
+            raise ValueError(f"Invalid agent type: {root_agent.type}")
+            # return await self.build_composite_agent(root_agent)
diff --git a/src/services/crewai/agent_runner.py b/src/services/crewai/agent_runner.py
new file mode 100644
index 00000000..e3855d16
--- /dev/null
+++ b/src/services/crewai/agent_runner.py
@@ -0,0 +1,595 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: agent_runner.py                                                       │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+from crewai import Crew, Task, Agent as LlmAgent
+from src.services.crewai.session_service import (
+    CrewSessionService,
+    Event,
+    Content,
+    Part,
+    Session,
+)
+from src.services.crewai.agent_builder import AgentBuilder
+from src.utils.logger import setup_logger
+from src.core.exceptions import AgentNotFoundError, InternalServerError
+from src.services.agent_service import get_agent
+from sqlalchemy.orm import Session
+from typing import Optional, AsyncGenerator
+import asyncio
+import json
+from datetime import datetime
+from src.utils.otel import get_tracer
+from opentelemetry import trace
+import base64
+
+logger = setup_logger(__name__)
+
+
+def extract_text_from_output(crew_output):
+    """Extract text from CrewOutput object."""
+    if hasattr(crew_output, "raw") and crew_output.raw:
+        return crew_output.raw
+    elif hasattr(crew_output, "__str__"):
+        return str(crew_output)
+
+    # Fallback if no text found
+    return "Unable to extract a valid response."
+
+
+async def run_agent(
+    agent_id: str,
+    external_id: str,
+    message: str,
+    session_service: CrewSessionService,
+    db: Session,
+    session_id: Optional[str] = None,
+    timeout: float = 60.0,
+    files: Optional[list] = None,
+):
+    tracer = get_tracer()
+    with tracer.start_as_current_span(
+        "run_agent",
+        attributes={
+            "agent_id": agent_id,
+            "external_id": external_id,
+            "session_id": session_id or f"{external_id}_{agent_id}",
+            "message": message,
+            "has_files": files is not None and len(files) > 0,
+        },
+    ):
+        exit_stack = None
+        try:
+            logger.info(
+                f"Starting execution of agent {agent_id} for external_id {external_id}"
+            )
+            logger.info(f"Received message: {message}")
+
+            if files and len(files) > 0:
+                logger.info(f"Received {len(files)} files with message")
+
+            get_root_agent = get_agent(db, agent_id)
+            logger.info(
+                f"Root agent found: {get_root_agent.name} (type: {get_root_agent.type})"
+            )
+
+            if get_root_agent is None:
+                raise AgentNotFoundError(f"Agent with ID {agent_id} not found")
+
+            # Using the AgentBuilder to create the agent
+            agent_builder = AgentBuilder(db)
+            result = await agent_builder.build_agent(get_root_agent)
+
+            # Check how the result is structured
+            if isinstance(result, tuple) and len(result) == 2:
+                root_agent, exit_stack = result
+            else:
+                # If the result is not a tuple of 2 elements
+                root_agent = result
+                exit_stack = None
+                logger.warning("build_agent did not return an exit_stack")
+
+            # TODO: files should be processed here
+
+            # Fetch session information
+            crew_session_id = f"{external_id}_{agent_id}"
+            if session_id is None:
+                session_id = crew_session_id
+
+            logger.info(f"Searching session for external_id {external_id}")
+            try:
+                session = session_service.get_session(
+                    agent_id=agent_id,
+                    external_id=external_id,
+                    session_id=crew_session_id,
+                )
+            except Exception as e:
+                logger.warning(f"Error getting session: {str(e)}")
+                session = None
+
+            if session is None:
+                logger.info(f"Creating new session for external_id {external_id}")
+                session = session_service.create_session(
+                    agent_id=agent_id,
+                    external_id=external_id,
+                    session_id=crew_session_id,
+                )
+
+            # Add user message to session
+            session.events.append(
+                Event(
+                    author="user",
+                    content=Content(parts=[{"text": message}]),
+                    timestamp=datetime.now().timestamp(),
+                )
+            )
+
+            # Save session to database
+            session_service.save_session(session)
+
+            # Build message history for context
+            conversation_history = []
+            if session and session.events:
+                for event in session.events:
+                    if event.author and event.content and event.content.parts:
+                        for part in event.content.parts:
+                            if isinstance(part, dict) and "text" in part:
+                                role = "User" if event.author == "user" else "Assistant"
+                                conversation_history.append(f"{role}: {part['text']}")
+
+            # Build description with history as context
+            task_description = (
+                f"Conversation history:\n" + "\n".join(conversation_history)
+                if conversation_history
+                else ""
+            )
+            task_description += f"\n\nCurrent user message: {message}"
+
+            task = Task(
+                name="resolve_user_request",
+                description=task_description,
+                expected_output="Response to the user request",
+                agent=root_agent,
+                verbose=True,
+            )
+
+            crew = await agent_builder.build_crew([root_agent], [task])
+
+            # Use normal kickoff or kickoff_async instead of kickoff_for_each
+            if hasattr(crew, "kickoff_async"):
+                crew_output = await crew.kickoff_async(inputs={"message": message})
+            else:
+                loop = asyncio.get_event_loop()
+                crew_output = await loop.run_in_executor(
+                    None, lambda: crew.kickoff(inputs={"message": message})
+                )
+
+            # Extract response and add to session
+            final_text = extract_text_from_output(crew_output)
+
+            # Add agent response as event in session
+            session.events.append(
+                Event(
+                    author=get_root_agent.name,
+                    content=Content(parts=[{"text": final_text}]),
+                    timestamp=datetime.now().timestamp(),
+                )
+            )
+
+            # Save session with new event
+            session_service.save_session(session)
+
+            logger.info("Starting agent execution")
+
+            final_response_text = "No final response captured."
+            message_history = []
+
+            try:
+                response_queue = asyncio.Queue()
+                execution_completed = asyncio.Event()
+
+                async def process_events():
+                    try:
+                        # Log the result
+                        logger.info(f"Crew output: {crew_output}")
+
+                        # Signal that execution is complete
+                        execution_completed.set()
+
+                        # Extract text from CrewOutput object
+                        final_text = "Unable to extract a valid response."
+
+                        if hasattr(crew_output, "raw") and crew_output.raw:
+                            final_text = crew_output.raw
+                        elif hasattr(crew_output, "__str__"):
+                            final_text = str(crew_output)
+
+                        # If still empty or None, check crew artifacts
+                        if not final_text or final_text.strip() == "":
+                            # Try to get from agent messages
+                            if hasattr(root_agent, "messages") and root_agent.messages:
+                                # Get the last message from the agent
+                                for msg in reversed(root_agent.messages):
+                                    if hasattr(msg, "content") and msg.content:
+                                        final_text = msg.content
+                                        break
+
+                            # If still empty, use a fallback
+                            if not final_text or final_text.strip() == "":
+                                final_text = "The agent could not produce a valid response. Please try again with a different question."
+
+                        # Put the extracted text in the queue
+                        await response_queue.put(final_text)
+                    except Exception as e:
+                        logger.error(f"Error in process_events: {str(e)}")
+                        # Provide a more helpful error response
+                        error_response = f"An error occurred during processing: {str(e)}\n\nIf you are trying to use external tools such as Brave Search, please make sure the connection is working properly."
+                        await response_queue.put(error_response)
+                        execution_completed.set()
+
+                task = asyncio.create_task(process_events())
+
+                try:
+                    wait_task = asyncio.create_task(execution_completed.wait())
+                    done, pending = await asyncio.wait({wait_task}, timeout=timeout)
+
+                    for p in pending:
+                        p.cancel()
+
+                    if not execution_completed.is_set():
+                        logger.warning(
+                            f"Agent execution timed out after {timeout} seconds"
+                        )
+                        await response_queue.put(
+                            "The response took too long and was interrupted."
+                        )
+
+                    final_response_text = await response_queue.get()
+
+                except Exception as e:
+                    logger.error(f"Error waiting for response: {str(e)}")
+                    final_response_text = f"Error processing response: {str(e)}"
+
+                # Add the session to memory after completion
+                # completed_session = session_service.get_session(
+                #     app_name=agent_id,
+                #     user_id=external_id,
+                #     session_id=crew_session_id,
+                # )
+
+                # memory_service.add_session_to_memory(completed_session)
+
+                # Cancel the processing task if it is still running
+                if not task.done():
+                    task.cancel()
+                    try:
+                        await task
+                    except asyncio.CancelledError:
+                        logger.info("Task cancelled successfully")
+                    except Exception as e:
+                        logger.error(f"Error cancelling task: {str(e)}")
+
+            except Exception as e:
+                logger.error(f"Error processing request: {str(e)}")
+                raise InternalServerError(str(e)) from e
+
+            logger.info("Agent execution completed successfully")
+            return {
+                "final_response": final_response_text,
+                "message_history": message_history,
+            }
+        except AgentNotFoundError as e:
+            logger.error(f"Error processing request: {str(e)}")
+            raise e
+        except Exception as e:
+            logger.error(f"Internal error processing request: {str(e)}", exc_info=True)
+            raise InternalServerError(str(e))
+        finally:
+            # Clean up MCP connection - MUST be executed in the same task
+            if exit_stack:
+                logger.info("Closing MCP server connection...")
+                try:
+                    if hasattr(exit_stack, "aclose"):
+                        # If it's an AsyncExitStack
+                        await exit_stack.aclose()
+                    elif isinstance(exit_stack, list):
+                        # If it's a list of adapters
+                        for adapter in exit_stack:
+                            if hasattr(adapter, "close"):
+                                adapter.close()
+                except Exception as e:
+                    logger.error(f"Error closing MCP connection: {e}")
+                    # Do not raise the exception to not obscure the original error
+
+
+def convert_sets(obj):
+    if isinstance(obj, set):
+        return list(obj)
+    elif isinstance(obj, dict):
+        return {k: convert_sets(v) for k, v in obj.items()}
+    elif isinstance(obj, list):
+        return [convert_sets(i) for i in obj]
+    else:
+        return obj
+
+
+async def run_agent_stream(
+    agent_id: str,
+    external_id: str,
+    message: str,
+    db: Session,
+    session_id: Optional[str] = None,
+    files: Optional[list] = None,
+) -> AsyncGenerator[str, None]:
+    tracer = get_tracer()
+    span = tracer.start_span(
+        "run_agent_stream",
+        attributes={
+            "agent_id": agent_id,
+            "external_id": external_id,
+            "session_id": session_id or f"{external_id}_{agent_id}",
+            "message": message,
+            "has_files": files is not None and len(files) > 0,
+        },
+    )
+    exit_stack = None
+    try:
+        with trace.use_span(span, end_on_exit=True):
+            try:
+                logger.info(
+                    f"Starting streaming execution of agent {agent_id} for external_id {external_id}"
+                )
+                logger.info(f"Received message: {message}")
+
+                if files and len(files) > 0:
+                    logger.info(f"Received {len(files)} files with message")
+
+                get_root_agent = get_agent(db, agent_id)
+                logger.info(
+                    f"Root agent found: {get_root_agent.name} (type: {get_root_agent.type})"
+                )
+
+                if get_root_agent is None:
+                    raise AgentNotFoundError(f"Agent with ID {agent_id} not found")
+
+                # Using the AgentBuilder to create the agent
+                agent_builder = AgentBuilder(db)
+                result = await agent_builder.build_agent(get_root_agent)
+
+                # Check how the result is structured
+                if isinstance(result, tuple) and len(result) == 2:
+                    root_agent, exit_stack = result
+                else:
+                    # If the result is not a tuple of 2 elements
+                    root_agent = result
+                    exit_stack = None
+                    logger.warning("build_agent did not return an exit_stack")
+
+                # TODO: files should be processed here
+
+                # Fetch session history if available
+                session_id = f"{external_id}_{agent_id}"
+
+                # Create an instance of the session service
+                try:
+                    from src.config.settings import get_settings
+
+                    settings = get_settings()
+                    db_url = settings.DATABASE_URL
+                except ImportError:
+                    # Fallback to local SQLite if cannot import settings
+                    db_url = "sqlite:///data/crew_sessions.db"
+
+                session_service = CrewSessionService(db_url)
+
+                try:
+                    # Try to get existing session
+                    session = session_service.get_session(
+                        agent_id=agent_id,
+                        external_id=external_id,
+                        session_id=session_id,
+                    )
+                except Exception as e:
+                    logger.warning(f"Could not load session: {e}")
+                    session = None
+
+                # Build message history for context
+                conversation_history = []
+
+                if session and session.events:
+                    for event in session.events:
+                        if event.author and event.content and event.content.parts:
+                            for part in event.content.parts:
+                                if isinstance(part, dict) and "text" in part:
+                                    role = (
+                                        "User"
+                                        if event.author == "user"
+                                        else "Assistant"
+                                    )
+                                    conversation_history.append(
+                                        f"{role}: {part['text']}"
+                                    )
+
+                # Build description with history
+                task_description = (
+                    f"Conversation history:\n" + "\n".join(conversation_history)
+                    if conversation_history
+                    else ""
+                )
+                task_description += f"\n\nCurrent user message: {message}"
+
+                task = Task(
+                    name="resolve_user_request",
+                    description=task_description,
+                    expected_output="Response to the user request",
+                    agent=root_agent,
+                    verbose=True,
+                )
+
+                crew = await agent_builder.build_crew([root_agent], [task])
+
+                logger.info("Starting agent streaming execution")
+
+                try:
+                    # Check if we can process messages with kickoff_for_each
+                    if hasattr(crew, "kickoff_for_each"):
+                        # Create input with current message
+                        inputs = [{"message": message}]
+                        logger.info(
+                            f"Using kickoff_for_each for streaming with {len(inputs)} input(s)"
+                        )
+
+                        # Execute kickoff_for_each
+                        results = crew.kickoff_for_each(inputs=inputs)
+
+                        # Print results and save to session
+                        for i, result in enumerate(results):
+                            logger.info(f"Result of event {i+1}: {result}")
+
+                            # If we have a session, save the response to it
+                            if session:
+                                # Add agent response as event
+                                session.events.append(
+                                    Event(
+                                        author="agent",
+                                        content=Content(parts=[{"text": result}]),
+                                        timestamp=datetime.now().timestamp(),
+                                    )
+                                )
+
+                        # Save current session with new message
+                        if session:
+                            # Also add user message if it doesn't exist yet
+                            if not any(
+                                e.author == "user"
+                                and any(
+                                    p.get("text") == message for p in e.content.parts
+                                )
+                                for e in session.events
+                                if e.content and e.content.parts
+                            ):
+                                session.events.append(
+                                    Event(
+                                        author="user",
+                                        content=Content(parts=[{"text": message}]),
+                                        timestamp=datetime.now().timestamp(),
+                                    )
+                                )
+                            # Save session
+                            try:
+                                session_service.save_session(session)
+                                logger.info(f"Session saved successfully: {session_id}")
+                            except Exception as e:
+                                logger.error(f"Error saving session: {e}")
+
+                        # Use last result as final output
+                        crew_output = results[-1] if results else None
+                    else:
+                        # CrewAI kickoff method is synchronous, fallback if kickoff_for_each not available
+                        logger.info(
+                            "kickoff_for_each not available, using standard kickoff for streaming"
+                        )
+                        crew_output = crew.kickoff()
+
+                    logger.info(f"Crew output: {crew_output}")
+
+                    # Extract the actual text content
+                    if hasattr(crew_output, "raw") and crew_output.raw:
+                        final_output = crew_output.raw
+                    elif hasattr(crew_output, "__str__"):
+                        final_output = str(crew_output)
+                    else:
+                        final_output = "Could not extract text from response"
+
+                    # Save response to session (for fallback case of normal kickoff)
+                    if session and not hasattr(crew, "kickoff_for_each"):
+                        # Add agent response
+                        session.events.append(
+                            Event(
+                                author="agent",
+                                content=Content(parts=[{"text": final_output}]),
+                                timestamp=datetime.now().timestamp(),
+                            )
+                        )
+
+                        # Add user message if it doesn't exist yet
+                        if not any(
+                            e.author == "user"
+                            and any(p.get("text") == message for p in e.content.parts)
+                            for e in session.events
+                            if e.content and e.content.parts
+                        ):
+                            session.events.append(
+                                Event(
+                                    author="user",
+                                    content=Content(parts=[{"text": message}]),
+                                    timestamp=datetime.now().timestamp(),
+                                )
+                            )
+
+                        # Save session
+                        try:
+                            session_service.save_session(session)
+                            logger.info(
+                                f"Session saved successfully (method: kickoff): {session_id}"
+                            )
+                        except Exception as e:
+                            logger.error(f"Error saving session: {e}")
+
+                    yield json.dumps({"text": final_output})
+                except Exception as e:
+                    logger.error(f"Error processing request: {str(e)}")
+                    raise InternalServerError(str(e)) from e
+                finally:
+                    # Clean up MCP connection
+                    if exit_stack:
+                        logger.info("Closing MCP server connection...")
+                        try:
+                            if hasattr(exit_stack, "aclose"):
+                                # If it's an AsyncExitStack
+                                await exit_stack.aclose()
+                            elif isinstance(exit_stack, list):
+                                # If it's a list of adapters
+                                for adapter in exit_stack:
+                                    if hasattr(adapter, "close"):
+                                        adapter.close()
+                        except Exception as e:
+                            logger.error(f"Error closing MCP connection: {e}")
+                            # Do not raise the exception to not obscure the original error
+
+                logger.info("Agent streaming execution completed successfully")
+            except AgentNotFoundError as e:
+                logger.error(f"Error processing request: {str(e)}")
+                raise InternalServerError(str(e)) from e
+            except Exception as e:
+                logger.error(
+                    f"Internal error processing request: {str(e)}", exc_info=True
+                )
+                raise InternalServerError(str(e))
+    finally:
+        span.end()
diff --git a/src/services/crewai/custom_tool.py b/src/services/crewai/custom_tool.py
new file mode 100644
index 00000000..0a5d15ec
--- /dev/null
+++ b/src/services/crewai/custom_tool.py
@@ -0,0 +1,369 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: custom_tool.py                                                        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+from typing import Any, Dict, List, Type
+from crewai.tools import BaseTool, tool
+import requests
+import json
+from src.utils.logger import setup_logger
+from pydantic import BaseModel, Field, create_model
+
+logger = setup_logger(__name__)
+
+
+class CustomToolBuilder:
+    def __init__(self):
+        self.tools = []
+
+    def _create_http_tool(self, tool_config: Dict[str, Any]) -> BaseTool:
+        """Create an HTTP tool based on the provided configuration."""
+        # Extract configuration parameters
+        name = tool_config["name"]
+        description = tool_config["description"]
+        endpoint = tool_config["endpoint"]
+        method = tool_config["method"]
+        headers = tool_config.get("headers", {})
+        parameters = tool_config.get("parameters", {}) or {}
+        values = tool_config.get("values", {})
+        error_handling = tool_config.get("error_handling", {})
+
+        path_params = parameters.get("path_params") or {}
+        query_params = parameters.get("query_params") or {}
+        body_params = parameters.get("body_params") or {}
+
+        # Dynamic creation of the input schema for the tool
+        field_definitions = {}
+
+        # Add all parameters as fields
+        for param in (
+            list(path_params.keys())
+            + list(query_params.keys())
+            + list(body_params.keys())
+        ):
+            # Default to string type for all parameters
+            field_definitions[param] = (
+                str,
+                Field(..., description=f"Parameter {param}"),
+            )
+
+        # If there are no parameters but default values, use those as optional fields
+        if not field_definitions and values:
+            for param, value in values.items():
+                param_type = type(value)
+                field_definitions[param] = (
+                    param_type,
+                    Field(default=value, description=f"Parameter {param}"),
+                )
+
+        # Create dynamic input schema model in line with the documentation
+        tool_input_model = create_model(
+            f"{name.replace(' ', '')}Input", **field_definitions
+        )
+
+        # Create the HTTP tool using crewai's BaseTool class
+        # Following the pattern in the documentation
+        def create_http_tool_class():
+            # Capture variables from outer scope
+            _name = name
+            _description = description
+            _tool_input_model = tool_input_model
+
+            class HttpTool(BaseTool):
+                name: str = _name
+                description: str = _description
+                args_schema: Type[BaseModel] = _tool_input_model
+
+                def _run(self, **kwargs):
+                    """Execute the HTTP request and return the result."""
+                    try:
+                        # Combines default values with provided values
+                        all_values = {**values, **kwargs}
+
+                        # Substitutes placeholders in headers
+                        processed_headers = {
+                            k: v.format(**all_values) if isinstance(v, str) else v
+                            for k, v in headers.items()
+                        }
+
+                        # Processes path parameters
+                        url = endpoint
+                        for param, value in path_params.items():
+                            if param in all_values:
+                                url = url.replace(
+                                    f"{{{param}}}", str(all_values[param])
+                                )
+
+                        # Process query parameters
+                        query_params_dict = {}
+                        for param, value in query_params.items():
+                            if isinstance(value, list):
+                                # If the value is a list, join with comma
+                                query_params_dict[param] = ",".join(value)
+                            elif param in all_values:
+                                # If the parameter is in the values, use the provided value
+                                query_params_dict[param] = all_values[param]
+                            else:
+                                # Otherwise, use the default value from the configuration
+                                query_params_dict[param] = value
+
+                        # Adds default values to query params if they are not present
+                        for param, value in values.items():
+                            if (
+                                param not in query_params_dict
+                                and param not in path_params
+                            ):
+                                query_params_dict[param] = value
+
+                        body_data = {}
+                        for param, param_config in body_params.items():
+                            if param in all_values:
+                                body_data[param] = all_values[param]
+
+                        # Adds default values to body if they are not present
+                        for param, value in values.items():
+                            if (
+                                param not in body_data
+                                and param not in query_params_dict
+                                and param not in path_params
+                            ):
+                                body_data[param] = value
+
+                        # Makes the HTTP request
+                        response = requests.request(
+                            method=method,
+                            url=url,
+                            headers=processed_headers,
+                            params=query_params_dict,
+                            json=body_data or None,
+                            timeout=error_handling.get("timeout", 30),
+                        )
+
+                        if response.status_code >= 400:
+                            raise requests.exceptions.HTTPError(
+                                f"Error in the request: {response.status_code} - {response.text}"
+                            )
+
+                        # Always returns the response as a string
+                        return json.dumps(response.json())
+
+                    except Exception as e:
+                        logger.error(f"Error executing tool {name}: {str(e)}")
+                        return json.dumps(
+                            error_handling.get(
+                                "fallback_response",
+                                {"error": "tool_execution_error", "message": str(e)},
+                            )
+                        )
+
+            return HttpTool
+
+        # Create the tool instance
+        HttpToolClass = create_http_tool_class()
+        http_tool = HttpToolClass()
+
+        # Add cache function following the documentation
+        def http_cache_function(arguments: dict, result: str) -> bool:
+            """Determines whether to cache the result based on arguments and result."""
+            # Default implementation: cache all successful results
+            try:
+                # If the result is parseable JSON and not an error, cache it
+                result_obj = json.loads(result)
+                return not (isinstance(result_obj, dict) and "error" in result_obj)
+            except Exception:
+                # If result is not valid JSON, don't cache
+                return False
+
+        # Assign the cache function to the tool
+        http_tool.cache_function = http_cache_function
+
+        return http_tool
+
+    def _create_http_tool_with_decorator(self, tool_config: Dict[str, Any]) -> Any:
+        """Create an HTTP tool using the tool decorator."""
+        # Extract configuration parameters
+        name = tool_config["name"]
+        description = tool_config["description"]
+        endpoint = tool_config["endpoint"]
+        method = tool_config["method"]
+        headers = tool_config.get("headers", {})
+        parameters = tool_config.get("parameters", {}) or {}
+        values = tool_config.get("values", {})
+        error_handling = tool_config.get("error_handling", {})
+
+        path_params = parameters.get("path_params") or {}
+        query_params = parameters.get("query_params") or {}
+        body_params = parameters.get("body_params") or {}
+
+        # Create function docstring with parameter documentation
+        param_list = (
+            list(path_params.keys())
+            + list(query_params.keys())
+            + list(body_params.keys())
+        )
+        doc_params = []
+        for param in param_list:
+            doc_params.append(f"    {param}: Parameter description")
+
+        docstring = (
+            f"{description}\n\nParameters:\n"
+            + "\n".join(doc_params)
+            + "\n\nReturns:\n    String containing the response in JSON format"
+        )
+
+        # Create the tool function using the decorator pattern in the documentation
+        @tool(name=name)
+        def http_tool(**kwargs):
+            """Tool function created dynamically."""
+            try:
+                # Combines default values with provided values
+                all_values = {**values, **kwargs}
+
+                # Substitutes placeholders in headers
+                processed_headers = {
+                    k: v.format(**all_values) if isinstance(v, str) else v
+                    for k, v in headers.items()
+                }
+
+                # Processes path parameters
+                url = endpoint
+                for param, value in path_params.items():
+                    if param in all_values:
+                        url = url.replace(f"{{{param}}}", str(all_values[param]))
+
+                # Process query parameters
+                query_params_dict = {}
+                for param, value in query_params.items():
+                    if isinstance(value, list):
+                        # If the value is a list, join with comma
+                        query_params_dict[param] = ",".join(value)
+                    elif param in all_values:
+                        # If the parameter is in the values, use the provided value
+                        query_params_dict[param] = all_values[param]
+                    else:
+                        # Otherwise, use the default value from the configuration
+                        query_params_dict[param] = value
+
+                # Adds default values to query params if they are not present
+                for param, value in values.items():
+                    if param not in query_params_dict and param not in path_params:
+                        query_params_dict[param] = value
+
+                body_data = {}
+                for param, param_config in body_params.items():
+                    if param in all_values:
+                        body_data[param] = all_values[param]
+
+                # Adds default values to body if they are not present
+                for param, value in values.items():
+                    if (
+                        param not in body_data
+                        and param not in query_params_dict
+                        and param not in path_params
+                    ):
+                        body_data[param] = value
+
+                # Makes the HTTP request
+                response = requests.request(
+                    method=method,
+                    url=url,
+                    headers=processed_headers,
+                    params=query_params_dict,
+                    json=body_data or None,
+                    timeout=error_handling.get("timeout", 30),
+                )
+
+                if response.status_code >= 400:
+                    raise requests.exceptions.HTTPError(
+                        f"Error in the request: {response.status_code} - {response.text}"
+                    )
+
+                # Always returns the response as a string
+                return json.dumps(response.json())
+
+            except Exception as e:
+                logger.error(f"Error executing tool {name}: {str(e)}")
+                return json.dumps(
+                    error_handling.get(
+                        "fallback_response",
+                        {"error": "tool_execution_error", "message": str(e)},
+                    )
+                )
+
+        # Replace the docstring
+        http_tool.__doc__ = docstring
+
+        # Add cache function following the documentation
+        def http_cache_function(arguments: dict, result: str) -> bool:
+            """Determines whether to cache the result based on arguments and result."""
+            # Default implementation: cache all successful results
+            try:
+                # If the result is parseable JSON and not an error, cache it
+                result_obj = json.loads(result)
+                return not (isinstance(result_obj, dict) and "error" in result_obj)
+            except Exception:
+                # If result is not valid JSON, don't cache
+                return False
+
+        # Assign the cache function to the tool
+        http_tool.cache_function = http_cache_function
+
+        return http_tool
+
+    def build_tools(self, tools_config: Dict[str, Any]) -> List[BaseTool]:
+        """Builds a list of tools based on the provided configuration. Accepts both 'tools' and 'custom_tools' (with http_tools)."""
+        self.tools = []
+
+        # Find HTTP tools configuration in various possible locations
+        http_tools = []
+        if tools_config.get("http_tools"):
+            http_tools = tools_config.get("http_tools", [])
+        elif tools_config.get("custom_tools") and tools_config["custom_tools"].get(
+            "http_tools"
+        ):
+            http_tools = tools_config["custom_tools"].get("http_tools", [])
+        elif (
+            tools_config.get("tools")
+            and isinstance(tools_config["tools"], dict)
+            and tools_config["tools"].get("http_tools")
+        ):
+            http_tools = tools_config["tools"].get("http_tools", [])
+
+        # Determine which implementation method to use (BaseTool or decorator)
+        use_decorator = tools_config.get("use_decorator", False)
+
+        # Create tools for each HTTP tool configuration
+        for http_tool_config in http_tools:
+            if use_decorator:
+                self.tools.append(
+                    self._create_http_tool_with_decorator(http_tool_config)
+                )
+            else:
+                self.tools.append(self._create_http_tool(http_tool_config))
+
+        return self.tools
diff --git a/src/services/crewai/mcp_service.py b/src/services/crewai/mcp_service.py
new file mode 100644
index 00000000..f3f671d4
--- /dev/null
+++ b/src/services/crewai/mcp_service.py
@@ -0,0 +1,264 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: mcp_service.py                                                        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+from typing import Any, Dict, List, Optional, Tuple
+from contextlib import ExitStack
+import os
+import sys
+from src.utils.logger import setup_logger
+from src.services.mcp_server_service import get_mcp_server
+from sqlalchemy.orm import Session
+
+try:
+    from crewai_tools import MCPServerAdapter
+    from mcp import StdioServerParameters
+
+    HAS_MCP_PACKAGES = True
+except ImportError:
+    logger = setup_logger(__name__)
+    logger.error(
+        "MCP packages are not installed. Please install mcp and crewai-tools[mcp]"
+    )
+    HAS_MCP_PACKAGES = False
+
+logger = setup_logger(__name__)
+
+
+class MCPService:
+    def __init__(self):
+        self.tools = []
+        self.exit_stack = ExitStack()
+
+    def _connect_to_mcp_server(
+        self, server_config: Dict[str, Any]
+    ) -> Tuple[List[Any], Optional[ExitStack]]:
+        """Connect to a specific MCP server and return its tools."""
+        if not HAS_MCP_PACKAGES:
+            logger.error("Cannot connect to MCP server: MCP packages not installed")
+            return [], None
+
+        try:
+            # Determines the type of server (local or remote)
+            if "url" in server_config:
+                # Remote server (SSE) - Simplified approach using direct dictionary
+                sse_config = {"url": server_config["url"]}
+
+                # Add headers if provided
+                if "headers" in server_config and server_config["headers"]:
+                    sse_config["headers"] = server_config["headers"]
+
+                # Create the MCPServerAdapter with the SSE configuration
+                mcp_adapter = MCPServerAdapter(sse_config)
+            else:
+                # Local server (Stdio)
+                command = server_config.get("command", "npx")
+                args = server_config.get("args", [])
+
+                # Adds environment variables if specified
+                env = server_config.get("env", {})
+                if env:
+                    for key, value in env.items():
+                        os.environ[key] = value
+
+                connection_params = StdioServerParameters(
+                    command=command, args=args, env=env
+                )
+
+                # Create the MCPServerAdapter with the Stdio connection parameters
+                mcp_adapter = MCPServerAdapter(connection_params)
+
+            # Get tools from the adapter
+            tools = mcp_adapter.tools
+
+            # Return tools and the adapter (which serves as an exit stack)
+            return tools, mcp_adapter
+
+        except Exception as e:
+            logger.error(f"Error connecting to MCP server: {e}")
+            return [], None
+
+    def _filter_incompatible_tools(self, tools: List[Any]) -> List[Any]:
+        """Filters incompatible tools with the model."""
+        problematic_tools = [
+            "create_pull_request_review",  # This tool causes the 400 INVALID_ARGUMENT error
+        ]
+
+        filtered_tools = []
+        removed_count = 0
+
+        for tool in tools:
+            if tool.name in problematic_tools:
+                logger.warning(f"Removing incompatible tool: {tool.name}")
+                removed_count += 1
+            else:
+                filtered_tools.append(tool)
+
+        if removed_count > 0:
+            logger.warning(f"Removed {removed_count} incompatible tools.")
+
+        return filtered_tools
+
+    def _filter_tools_by_agent(
+        self, tools: List[Any], agent_tools: List[str]
+    ) -> List[Any]:
+        """Filters tools compatible with the agent."""
+        if not agent_tools:
+            return tools
+
+        filtered_tools = []
+        for tool in tools:
+            logger.info(f"Tool: {tool.name}")
+            if tool.name in agent_tools:
+                filtered_tools.append(tool)
+        return filtered_tools
+
+    async def build_tools(
+        self, mcp_config: Dict[str, Any], db: Session
+    ) -> Tuple[List[Any], Any]:
+        """Builds a list of tools from multiple MCP servers."""
+        if not HAS_MCP_PACKAGES:
+            logger.error("Cannot build MCP tools: MCP packages not installed")
+            return [], None
+
+        self.tools = []
+        self.exit_stack = ExitStack()
+        adapter_list = []
+
+        try:
+            mcp_servers = mcp_config.get("mcp_servers", [])
+            if mcp_servers is not None:
+                # Process each MCP server in the configuration
+                for server in mcp_servers:
+                    try:
+                        # Search for the MCP server in the database
+                        mcp_server = get_mcp_server(db, server["id"])
+                        if not mcp_server:
+                            logger.warning(f"MCP Server not found: {server['id']}")
+                            continue
+
+                        # Prepares the server configuration
+                        server_config = mcp_server.config_json.copy()
+
+                        # Replaces the environment variables in the config_json
+                        if "env" in server_config and server_config["env"] is not None:
+                            for key, value in server_config["env"].items():
+                                if value and value.startswith("env@@"):
+                                    env_key = value.replace("env@@", "")
+                                    if server.get("envs") and env_key in server.get(
+                                        "envs", {}
+                                    ):
+                                        server_config["env"][key] = server["envs"][
+                                            env_key
+                                        ]
+                                    else:
+                                        logger.warning(
+                                            f"Environment variable '{env_key}' not provided for the MCP server {mcp_server.name}"
+                                        )
+                                        continue
+
+                        logger.info(f"Connecting to MCP server: {mcp_server.name}")
+                        tools, adapter = self._connect_to_mcp_server(server_config)
+
+                        if tools and adapter:
+                            # Filters incompatible tools
+                            filtered_tools = self._filter_incompatible_tools(tools)
+
+                            # Filters tools compatible with the agent
+                            if agent_tools := server.get("tools", []):
+                                filtered_tools = self._filter_tools_by_agent(
+                                    filtered_tools, agent_tools
+                                )
+                            self.tools.extend(filtered_tools)
+
+                            # Add to the adapter list for cleanup later
+                            adapter_list.append(adapter)
+                            logger.info(
+                                f"MCP Server {mcp_server.name} connected successfully. Added {len(filtered_tools)} tools."
+                            )
+                        else:
+                            logger.warning(
+                                f"Failed to connect or no tools available for {mcp_server.name}"
+                            )
+
+                    except Exception as e:
+                        logger.error(
+                            f"Error connecting to MCP server {server.get('id', 'unknown')}: {e}"
+                        )
+                        continue
+
+            custom_mcp_servers = mcp_config.get("custom_mcp_servers", [])
+            if custom_mcp_servers is not None:
+                # Process custom MCP servers
+                for server in custom_mcp_servers:
+                    if not server:
+                        logger.warning(
+                            "Empty server configuration found in custom_mcp_servers"
+                        )
+                        continue
+
+                    try:
+                        logger.info(
+                            f"Connecting to custom MCP server: {server.get('url', 'unknown')}"
+                        )
+                        tools, adapter = self._connect_to_mcp_server(server)
+
+                        if tools:
+                            self.tools.extend(tools)
+                        else:
+                            logger.warning("No tools returned from custom MCP server")
+                            continue
+
+                        if adapter:
+                            adapter_list.append(adapter)
+                            logger.info(
+                                f"Custom MCP server connected successfully. Added {len(tools)} tools."
+                            )
+                        else:
+                            logger.warning("No adapter returned from custom MCP server")
+                    except Exception as e:
+                        logger.error(
+                            f"Error connecting to custom MCP server {server.get('url', 'unknown')}: {e}"
+                        )
+                        continue
+
+            logger.info(
+                f"MCP Toolset created successfully. Total of {len(self.tools)} tools."
+            )
+
+        except Exception as e:
+            # Ensure cleanup
+            for adapter in adapter_list:
+                if hasattr(adapter, "close"):
+                    adapter.close()
+            logger.error(f"Fatal error connecting to MCP servers: {e}")
+            # Return empty lists in case of error
+            return [], None
+
+        # Return the tools and the adapter list for cleanup
+        return self.tools, adapter_list
diff --git a/src/services/crewai/session_service.py b/src/services/crewai/session_service.py
new file mode 100644
index 00000000..6b8cec75
--- /dev/null
+++ b/src/services/crewai/session_service.py
@@ -0,0 +1,637 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: session_service.py                                                    │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+from datetime import datetime
+import json
+import uuid
+import base64
+import copy
+from typing import Any, Dict, List, Optional, Union, Set
+
+from sqlalchemy import create_engine, Boolean, Text, ForeignKeyConstraint
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.ext.mutable import MutableDict
+from sqlalchemy.orm import (
+    sessionmaker,
+    relationship,
+    DeclarativeBase,
+    Mapped,
+    mapped_column,
+)
+from sqlalchemy.sql import func
+from sqlalchemy.types import DateTime, PickleType, String
+from sqlalchemy.dialects import postgresql
+from sqlalchemy.types import TypeDecorator
+
+from pydantic import BaseModel
+
+from src.utils.logger import setup_logger
+
+logger = setup_logger(__name__)
+
+
+class DynamicJSON(TypeDecorator):
+    """JSON type compatible with ADK that uses JSONB in PostgreSQL and TEXT with JSON
+    serialization for other databases."""
+
+    impl = Text  # Default implementation is TEXT
+
+    def load_dialect_impl(self, dialect):
+        if dialect.name == "postgresql":
+            return dialect.type_descriptor(postgresql.JSONB)
+        else:
+            return dialect.type_descriptor(Text)
+
+    def process_bind_param(self, value, dialect):
+        if value is not None:
+            if dialect.name == "postgresql":
+                return value
+            else:
+                return json.dumps(value)
+        return value
+
+    def process_result_value(self, value, dialect):
+        if value is not None:
+            if dialect.name == "postgresql":
+                return value
+            else:
+                return json.loads(value)
+        return value
+
+
+class Base(DeclarativeBase):
+    """Base class for database tables."""
+
+    pass
+
+
+class StorageSession(Base):
+    """Represents a session stored in the database, compatible with ADK."""
+
+    __tablename__ = "sessions"
+
+    app_name: Mapped[str] = mapped_column(String, primary_key=True)
+    user_id: Mapped[str] = mapped_column(String, primary_key=True)
+    id: Mapped[str] = mapped_column(
+        String, primary_key=True, default=lambda: str(uuid.uuid4())
+    )
+
+    state: Mapped[MutableDict[str, Any]] = mapped_column(
+        MutableDict.as_mutable(DynamicJSON), default={}
+    )
+
+    create_time: Mapped[DateTime] = mapped_column(DateTime(), default=func.now())
+    update_time: Mapped[DateTime] = mapped_column(
+        DateTime(), default=func.now(), onupdate=func.now()
+    )
+
+    storage_events: Mapped[list["StorageEvent"]] = relationship(
+        "StorageEvent",
+        back_populates="storage_session",
+    )
+
+    def __repr__(self):
+        return f"<StorageSession(id={self.id}, update_time={self.update_time})>"
+
+
+class StorageEvent(Base):
+    """Represents an event stored in the database, compatible with ADK."""
+
+    __tablename__ = "events"
+
+    id: Mapped[str] = mapped_column(String, primary_key=True)
+    app_name: Mapped[str] = mapped_column(String, primary_key=True)
+    user_id: Mapped[str] = mapped_column(String, primary_key=True)
+    session_id: Mapped[str] = mapped_column(String, primary_key=True)
+
+    invocation_id: Mapped[str] = mapped_column(String)
+    author: Mapped[str] = mapped_column(String)
+    branch: Mapped[str] = mapped_column(String, nullable=True)
+    timestamp: Mapped[DateTime] = mapped_column(DateTime(), default=func.now())
+    content: Mapped[dict[str, Any]] = mapped_column(DynamicJSON, nullable=True)
+    actions: Mapped[MutableDict[str, Any]] = mapped_column(PickleType)
+
+    long_running_tool_ids_json: Mapped[Optional[str]] = mapped_column(
+        Text, nullable=True
+    )
+    grounding_metadata: Mapped[dict[str, Any]] = mapped_column(
+        DynamicJSON, nullable=True
+    )
+    partial: Mapped[bool] = mapped_column(Boolean, nullable=True)
+    turn_complete: Mapped[bool] = mapped_column(Boolean, nullable=True)
+    error_code: Mapped[str] = mapped_column(String, nullable=True)
+    error_message: Mapped[str] = mapped_column(String, nullable=True)
+    interrupted: Mapped[bool] = mapped_column(Boolean, nullable=True)
+
+    storage_session: Mapped[StorageSession] = relationship(
+        "StorageSession",
+        back_populates="storage_events",
+    )
+
+    __table_args__ = (
+        ForeignKeyConstraint(
+            ["app_name", "user_id", "session_id"],
+            ["sessions.app_name", "sessions.user_id", "sessions.id"],
+            ondelete="CASCADE",
+        ),
+    )
+
+    @property
+    def long_running_tool_ids(self) -> set[str]:
+        return (
+            set(json.loads(self.long_running_tool_ids_json))
+            if self.long_running_tool_ids_json
+            else set()
+        )
+
+    @long_running_tool_ids.setter
+    def long_running_tool_ids(self, value: set[str]):
+        if value is None:
+            self.long_running_tool_ids_json = None
+        else:
+            self.long_running_tool_ids_json = json.dumps(list(value))
+
+
+class StorageAppState(Base):
+    """Represents an application state stored in the database, compatible with ADK."""
+
+    __tablename__ = "app_states"
+
+    app_name: Mapped[str] = mapped_column(String, primary_key=True)
+    state: Mapped[MutableDict[str, Any]] = mapped_column(
+        MutableDict.as_mutable(DynamicJSON), default={}
+    )
+    update_time: Mapped[DateTime] = mapped_column(
+        DateTime(), default=func.now(), onupdate=func.now()
+    )
+
+
+class StorageUserState(Base):
+    """Represents a user state stored in the database, compatible with ADK."""
+
+    __tablename__ = "user_states"
+
+    app_name: Mapped[str] = mapped_column(String, primary_key=True)
+    user_id: Mapped[str] = mapped_column(String, primary_key=True)
+    state: Mapped[MutableDict[str, Any]] = mapped_column(
+        MutableDict.as_mutable(DynamicJSON), default={}
+    )
+    update_time: Mapped[DateTime] = mapped_column(
+        DateTime(), default=func.now(), onupdate=func.now()
+    )
+
+
+# Pydantic model classes compatible with ADK
+class State:
+    """Utility class for states, compatible with ADK."""
+
+    APP_PREFIX = "app:"
+    USER_PREFIX = "user:"
+    TEMP_PREFIX = "temp:"
+
+
+class Content(BaseModel):
+    """Event content model, compatible with ADK."""
+
+    parts: List[Dict[str, Any]]
+
+
+class Part(BaseModel):
+    """Content part model, compatible with ADK."""
+
+    text: Optional[str] = None
+
+
+class Event(BaseModel):
+    """Event model, compatible with ADK."""
+
+    id: Optional[str] = None
+    author: str
+    branch: Optional[str] = None
+    invocation_id: Optional[str] = None
+    content: Optional[Content] = None
+    actions: Optional[Dict[str, Any]] = None
+    timestamp: Optional[float] = None
+    long_running_tool_ids: Optional[Set[str]] = None
+    grounding_metadata: Optional[Dict[str, Any]] = None
+    partial: Optional[bool] = None
+    turn_complete: Optional[bool] = None
+    error_code: Optional[str] = None
+    error_message: Optional[str] = None
+    interrupted: Optional[bool] = None
+
+
+class Session(BaseModel):
+    """Session model, compatible with ADK."""
+
+    app_name: str
+    user_id: str
+    id: str
+    state: Dict[str, Any] = {}
+    events: List[Event] = []
+    last_update_time: float
+
+    class Config:
+        arbitrary_types_allowed = True
+
+
+class CrewSessionService:
+    """Service for managing CrewAI agent sessions using ADK tables."""
+
+    def __init__(self, db_url: str):
+        """
+        Initializes the session service.
+
+        Args:
+            db_url: Database connection URL.
+        """
+        try:
+            self.engine = create_engine(db_url)
+        except Exception as e:
+            raise ValueError(f"Failed to create database engine: {e}")
+
+        # Create all tables
+        Base.metadata.create_all(self.engine)
+        self.Session = sessionmaker(bind=self.engine)
+        logger.info(f"CrewSessionService started with database at {db_url}")
+
+    def create_session(
+        self, agent_id: str, external_id: str, session_id: Optional[str] = None
+    ) -> Session:
+        """
+        Creates a new session for an agent.
+
+        Args:
+            agent_id: Agent ID (used as app_name in ADK)
+            external_id: External ID (used as user_id in ADK)
+            session_id: Optional session ID
+
+        Returns:
+            Session: The created session
+        """
+        session_id = session_id or str(uuid.uuid4())
+
+        with self.Session() as db_session:
+            # Check if app and user states already exist
+            storage_app_state = db_session.get(StorageAppState, (agent_id))
+            storage_user_state = db_session.get(
+                StorageUserState, (agent_id, external_id)
+            )
+
+            app_state = storage_app_state.state if storage_app_state else {}
+            user_state = storage_user_state.state if storage_user_state else {}
+
+            # Create states if they don't exist
+            if not storage_app_state:
+                storage_app_state = StorageAppState(app_name=agent_id, state={})
+                db_session.add(storage_app_state)
+
+            if not storage_user_state:
+                storage_user_state = StorageUserState(
+                    app_name=agent_id, user_id=external_id, state={}
+                )
+                db_session.add(storage_user_state)
+
+            # Create session
+            storage_session = StorageSession(
+                app_name=agent_id,
+                user_id=external_id,
+                id=session_id,
+                state={},
+            )
+            db_session.add(storage_session)
+            db_session.commit()
+
+            # Get timestamp
+            db_session.refresh(storage_session)
+
+            # Merge states for response
+            merged_state = _merge_state(app_state, user_state, {})
+
+            # Create Session object for return
+            session = Session(
+                app_name=agent_id,
+                user_id=external_id,
+                id=session_id,
+                state=merged_state,
+                last_update_time=storage_session.update_time.timestamp(),
+            )
+
+        logger.info(
+            f"Session created: {session_id} for agent {agent_id} and user {external_id}"
+        )
+        return session
+
+    def get_session(
+        self, agent_id: str, external_id: str, session_id: str
+    ) -> Optional[Session]:
+        """
+        Retrieves a session from the database.
+
+        Args:
+            agent_id: Agent ID
+            external_id: User ID
+            session_id: Session ID
+
+        Returns:
+            Optional[Session]: The retrieved session or None if not found
+        """
+        with self.Session() as db_session:
+            storage_session = db_session.get(
+                StorageSession, (agent_id, external_id, session_id)
+            )
+
+            if storage_session is None:
+                return None
+
+            # Fetch session events
+            storage_events = (
+                db_session.query(StorageEvent)
+                .filter(StorageEvent.session_id == storage_session.id)
+                .filter(StorageEvent.app_name == agent_id)
+                .filter(StorageEvent.user_id == external_id)
+                .all()
+            )
+
+            # Fetch states
+            storage_app_state = db_session.get(StorageAppState, (agent_id))
+            storage_user_state = db_session.get(
+                StorageUserState, (agent_id, external_id)
+            )
+
+            app_state = storage_app_state.state if storage_app_state else {}
+            user_state = storage_user_state.state if storage_user_state else {}
+            session_state = storage_session.state
+
+            # Merge states
+            merged_state = _merge_state(app_state, user_state, session_state)
+
+            # Create session
+            session = Session(
+                app_name=agent_id,
+                user_id=external_id,
+                id=session_id,
+                state=merged_state,
+                last_update_time=storage_session.update_time.timestamp(),
+            )
+
+            # Add events
+            session.events = [
+                Event(
+                    id=e.id,
+                    author=e.author,
+                    branch=e.branch,
+                    invocation_id=e.invocation_id,
+                    content=_decode_content(e.content),
+                    actions=e.actions,
+                    timestamp=e.timestamp.timestamp(),
+                    long_running_tool_ids=e.long_running_tool_ids,
+                    grounding_metadata=e.grounding_metadata,
+                    partial=e.partial,
+                    turn_complete=e.turn_complete,
+                    error_code=e.error_code,
+                    error_message=e.error_message,
+                    interrupted=e.interrupted,
+                )
+                for e in storage_events
+            ]
+
+            return session
+
+    def save_session(self, session: Session) -> None:
+        """
+        Saves a session to the database.
+
+        Args:
+            session: The session to save
+        """
+        with self.Session() as db_session:
+            storage_session = db_session.get(
+                StorageSession, (session.app_name, session.user_id, session.id)
+            )
+
+            if not storage_session:
+                logger.error(f"Session not found: {session.id}")
+                return
+
+            # Check states
+            storage_app_state = db_session.get(StorageAppState, (session.app_name))
+            storage_user_state = db_session.get(
+                StorageUserState, (session.app_name, session.user_id)
+            )
+
+            # Extract state deltas
+            app_state_delta = {}
+            user_state_delta = {}
+            session_state_delta = {}
+
+            # Apply state deltas
+            if storage_app_state and app_state_delta:
+                storage_app_state.state.update(app_state_delta)
+
+            if storage_user_state and user_state_delta:
+                storage_user_state.state.update(user_state_delta)
+
+            storage_session.state.update(session_state_delta)
+
+            # Save new events
+            for event in session.events:
+                # Check if event already exists
+                existing_event = (
+                    (
+                        db_session.query(StorageEvent)
+                        .filter(StorageEvent.id == event.id)
+                        .filter(StorageEvent.app_name == session.app_name)
+                        .filter(StorageEvent.user_id == session.user_id)
+                        .filter(StorageEvent.session_id == session.id)
+                        .first()
+                    )
+                    if event.id
+                    else None
+                )
+
+                if existing_event:
+                    continue
+
+                # Generate ID for the event if it doesn't exist
+                if not event.id:
+                    event.id = str(uuid.uuid4())
+
+                # Create timestamp if it doesn't exist
+                if not event.timestamp:
+                    event.timestamp = datetime.now().timestamp()
+
+                # Create StorageEvent object
+                storage_event = StorageEvent(
+                    id=event.id,
+                    app_name=session.app_name,
+                    user_id=session.user_id,
+                    session_id=session.id,
+                    invocation_id=event.invocation_id or str(uuid.uuid4()),
+                    author=event.author,
+                    branch=event.branch,
+                    timestamp=datetime.fromtimestamp(event.timestamp),
+                    actions=event.actions or {},
+                    long_running_tool_ids=event.long_running_tool_ids or set(),
+                    grounding_metadata=event.grounding_metadata,
+                    partial=event.partial,
+                    turn_complete=event.turn_complete,
+                    error_code=event.error_code,
+                    error_message=event.error_message,
+                    interrupted=event.interrupted,
+                )
+
+                # Encode content, if it exists
+                if event.content:
+                    encoded_content = event.content.model_dump(exclude_none=True)
+                    # Solution for serialization issues with multimedia content
+                    for p in encoded_content.get("parts", []):
+                        if "inline_data" in p:
+                            p["inline_data"]["data"] = (
+                                base64.b64encode(p["inline_data"]["data"]).decode(
+                                    "utf-8"
+                                ),
+                            )
+                    storage_event.content = encoded_content
+
+                db_session.add(storage_event)
+
+            # Commit changes
+            db_session.commit()
+
+            # Update timestamp in session
+            db_session.refresh(storage_session)
+            session.last_update_time = storage_session.update_time.timestamp()
+
+        logger.info(f"Session saved: {session.id} with {len(session.events)} events")
+
+    def list_sessions(self, agent_id: str, external_id: str) -> List[Dict[str, Any]]:
+        """
+        Lists all sessions for an agent and user.
+
+        Args:
+            agent_id: Agent ID
+            external_id: User ID
+
+        Returns:
+            List[Dict[str, Any]]: List of summarized sessions
+        """
+        with self.Session() as db_session:
+            sessions = (
+                db_session.query(StorageSession)
+                .filter(StorageSession.app_name == agent_id)
+                .filter(StorageSession.user_id == external_id)
+                .all()
+            )
+
+            result = []
+            for session in sessions:
+                result.append(
+                    {
+                        "app_name": session.app_name,
+                        "user_id": session.user_id,
+                        "id": session.id,
+                        "created_at": session.create_time.isoformat(),
+                        "updated_at": session.update_time.isoformat(),
+                    }
+                )
+
+            return result
+
+    def delete_session(self, agent_id: str, external_id: str, session_id: str) -> bool:
+        """
+        Deletes a session from the database.
+
+        Args:
+            agent_id: Agent ID
+            external_id: User ID
+            session_id: Session ID
+
+        Returns:
+            bool: True if the session was deleted, False otherwise
+        """
+        from sqlalchemy import delete
+
+        with self.Session() as db_session:
+            stmt = delete(StorageSession).where(
+                StorageSession.app_name == agent_id,
+                StorageSession.user_id == external_id,
+                StorageSession.id == session_id,
+            )
+            result = db_session.execute(stmt)
+            db_session.commit()
+
+            logger.info(f"Session deleted: {session_id}")
+            return result.rowcount > 0
+
+
+# Utility functions compatible with ADK
+
+
+def _extract_state_delta(state: dict[str, Any]):
+    """Extracts state deltas between app, user, and session."""
+    app_state_delta = {}
+    user_state_delta = {}
+    session_state_delta = {}
+
+    if state:
+        for key in state.keys():
+            if key.startswith(State.APP_PREFIX):
+                app_state_delta[key.removeprefix(State.APP_PREFIX)] = state[key]
+            elif key.startswith(State.USER_PREFIX):
+                user_state_delta[key.removeprefix(State.USER_PREFIX)] = state[key]
+            elif not key.startswith(State.TEMP_PREFIX):
+                session_state_delta[key] = state[key]
+
+    return app_state_delta, user_state_delta, session_state_delta
+
+
+def _merge_state(app_state, user_state, session_state):
+    """Merges app, user, and session states into a single object."""
+    merged_state = copy.deepcopy(session_state)
+
+    for key in app_state.keys():
+        merged_state[State.APP_PREFIX + key] = app_state[key]
+
+    for key in user_state.keys():
+        merged_state[State.USER_PREFIX + key] = user_state[key]
+
+    return merged_state
+
+
+def _decode_content(content: Optional[dict[str, Any]]) -> Optional[Content]:
+    """Decodes event content potentially with binary data."""
+    if not content:
+        return None
+
+    for p in content.get("parts", []):
+        if "inline_data" in p and isinstance(p["inline_data"].get("data"), tuple):
+            p["inline_data"]["data"] = base64.b64decode(p["inline_data"]["data"][0])
+
+    return Content.model_validate(content)
diff --git a/src/services/custom_agents/a2a_agent.py b/src/services/custom_agents/a2a_agent.py
deleted file mode 100644
index e2c10433..00000000
--- a/src/services/custom_agents/a2a_agent.py
+++ /dev/null
@@ -1,412 +0,0 @@
-"""
-┌──────────────────────────────────────────────────────────────────────────────┐
-│ @author: Davidson Gomes                                                      │
-│ @file: a2a_agent.py                                                          │
-│ Developed by: Davidson Gomes                                                 │
-│ Creation date: May 13, 2025                                                  │
-│ Contact: contato@evolution-api.com                                           │
-├──────────────────────────────────────────────────────────────────────────────┤
-│ @copyright © Evolution API 2025. All rights reserved.                        │
-│ Licensed under the Apache License, Version 2.0                               │
-│                                                                              │
-│ You may not use this file except in compliance with the License.             │
-│ You may obtain a copy of the License at                                      │
-│                                                                              │
-│    http://www.apache.org/licenses/LICENSE-2.0                                │
-│                                                                              │
-│ Unless required by applicable law or agreed to in writing, software          │
-│ distributed under the License is distributed on an "AS IS" BASIS,            │
-│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
-│ See the License for the specific language governing permissions and          │
-│ limitations under the License.                                               │
-├──────────────────────────────────────────────────────────────────────────────┤
-│ @important                                                                   │
-│ For any future changes to the code in this file, it is recommended to        │
-│ include, together with the modification, the information of the developer    │
-│ who changed it and the date of modification.                                 │
-└──────────────────────────────────────────────────────────────────────────────┘
-"""
-
-from google.adk.agents import BaseAgent
-from google.adk.agents.invocation_context import InvocationContext
-from google.adk.events import Event
-from google.genai.types import Content, Part
-
-from typing import AsyncGenerator, List, Dict, Any, Optional
-import json
-
-import httpx
-from httpx_sse import connect_sse
-
-from src.schemas.a2a_types import (
-    AgentCard,
-    Message,
-    TextPart,
-    TaskSendParams,
-    SendTaskRequest,
-    SendTaskStreamingRequest,
-    TaskState,
-)
-
-from uuid import uuid4
-
-
-class A2ACustomAgent(BaseAgent):
-    """
-    Custom agent that implements the A2A protocol directly.
-
-    This agent implements the interaction with an external A2A service.
-    """
-
-    # Field declarations for Pydantic
-    agent_card_url: str
-    agent_card: Optional[AgentCard]
-    timeout: int
-    base_url: str
-
-    def __init__(
-        self,
-        name: str,
-        agent_card_url: str,
-        timeout: int = 300,
-        sub_agents: List[BaseAgent] = [],
-        **kwargs,
-    ):
-        """
-        Initialize the A2A agent.
-
-        Args:
-            name: Agent name
-            agent_card_url: A2A agent card URL
-            timeout: Maximum execution time (seconds)
-            sub_agents: List of sub-agents to be executed after the A2A agent
-        """
-        # Create base_url from agent_card_url
-        base_url = agent_card_url
-        if "/.well-known/agent.json" in base_url:
-            base_url = base_url.split("/.well-known/agent.json")[0]
-
-        print(f"A2A agent initialized for URL: {agent_card_url}")
-
-        # Initialize base class
-        super().__init__(
-            name=name,
-            agent_card_url=agent_card_url,
-            base_url=base_url,  # Pass base_url here
-            agent_card=None,
-            timeout=timeout,
-            sub_agents=sub_agents,
-            **kwargs,
-        )
-
-    async def fetch_agent_card(self) -> AgentCard:
-        """Fetch the agent card from the A2A service."""
-        if self.agent_card:
-            return self.agent_card
-
-        card_url = f"{self.base_url}/.well-known/agent.json"
-        print(f"Fetching agent card from: {card_url}")
-
-        async with httpx.AsyncClient() as client:
-            response = await client.get(card_url)
-            response.raise_for_status()
-            try:
-                card_data = response.json()
-                self.agent_card = AgentCard(**card_data)
-                return self.agent_card
-            except json.JSONDecodeError as e:
-                raise ValueError(f"Failed to parse agent card: {str(e)}")
-
-    async def _run_async_impl(
-        self, ctx: InvocationContext
-    ) -> AsyncGenerator[Event, None]:
-        """
-        Implementation of the A2A protocol according to the Google ADK documentation.
-
-        This method follows the pattern of implementing custom agents,
-        sending the user's message to the A2A service and monitoring the response.
-        """
-
-        try:
-            # 1. First, fetch the agent card if we haven't already
-            try:
-                agent_card = await self.fetch_agent_card()
-                print(f"Agent card fetched: {agent_card.name}")
-            except Exception as e:
-                error_msg = f"Failed to fetch agent card: {str(e)}"
-                print(error_msg)
-                yield Event(
-                    author=self.name,
-                    content=Content(role="agent", parts=[Part(text=error_msg)]),
-                )
-                return
-
-            # 2. Extract the user's message from the context
-            user_message = None
-
-            # Search for the user's message in the session events
-            if ctx.session and hasattr(ctx.session, "events") and ctx.session.events:
-                for event in reversed(ctx.session.events):
-                    if event.author == "user" and event.content and event.content.parts:
-                        user_message = event.content.parts[0].text
-                        print("Message found in session events")
-                        break
-
-            # Check in the session state if the message was not found in the events
-            if not user_message and ctx.session and ctx.session.state:
-                if "user_message" in ctx.session.state:
-                    user_message = ctx.session.state["user_message"]
-                elif "message" in ctx.session.state:
-                    user_message = ctx.session.state["message"]
-
-            if not user_message:
-                error_msg = "No user message found"
-                print(error_msg)
-                yield Event(
-                    author=self.name,
-                    content=Content(role="agent", parts=[Part(text=error_msg)]),
-                )
-                return
-
-            # 3. Create and format the task to send to the A2A agent
-            print(f"Sending task to A2A agent: {user_message[:100]}...")
-
-            # Use the session ID as a stable identifier
-            session_id = (
-                str(ctx.session.id)
-                if ctx.session and hasattr(ctx.session, "id")
-                else str(uuid4())
-            )
-            task_id = str(uuid4())
-
-            # Prepare the message for the A2A agent
-            formatted_message = Message(
-                role="user",
-                parts=[TextPart(text=user_message)],
-            )
-
-            # Prepare the task parameters
-            task_params = TaskSendParams(
-                id=task_id,
-                sessionId=session_id,
-                message=formatted_message,
-                acceptedOutputModes=["text"],
-            )
-
-            # 4. Check if the agent supports streaming
-            supports_streaming = (
-                agent_card.capabilities.streaming if agent_card.capabilities else False
-            )
-
-            if supports_streaming:
-                print("Agent supports streaming, using streaming API")
-                # Process with streaming
-                try:
-                    request = SendTaskStreamingRequest(
-                        method="tasks/sendSubscribe", params=task_params
-                    )
-
-                    try:
-                        async with httpx.AsyncClient() as client:
-                            response = await client.post(
-                                self.base_url,
-                                json=request.model_dump(),
-                                headers={"Accept": "text/event-stream"},
-                                timeout=self.timeout,
-                            )
-                            response.raise_for_status()
-
-                            async for line in response.aiter_lines():
-                                if line.startswith("data:"):
-                                    data = line[5:].strip()
-                                    if data:
-                                        try:
-                                            result = json.loads(data)
-                                            print(f"Stream event received: {result}")
-
-                                            # Check if this is a status update with a message
-                                            if (
-                                                "result" in result
-                                                and "status" in result["result"]
-                                                and "message"
-                                                in result["result"]["status"]
-                                                and "parts"
-                                                in result["result"]["status"]["message"]
-                                            ):
-                                                message_parts = result["result"][
-                                                    "status"
-                                                ]["message"]["parts"]
-                                                parts = [
-                                                    Part(text=part["text"])
-                                                    for part in message_parts
-                                                    if part.get("type") == "text"
-                                                    and "text" in part
-                                                ]
-
-                                                if parts:
-                                                    yield Event(
-                                                        author=self.name,
-                                                        content=Content(
-                                                            role="agent", parts=parts
-                                                        ),
-                                                    )
-
-                                            # Check if this is a final message
-                                            if (
-                                                "result" in result
-                                                and result.get("result", {}).get(
-                                                    "final", False
-                                                )
-                                                and "status" in result["result"]
-                                                and result["result"]["status"].get(
-                                                    "state"
-                                                )
-                                                in [
-                                                    TaskState.COMPLETED,
-                                                    TaskState.CANCELED,
-                                                    TaskState.FAILED,
-                                                ]
-                                            ):
-                                                print(
-                                                    "Received final message, stream complete"
-                                                )
-                                                break
-                                        except json.JSONDecodeError as e:
-                                            print(f"Error parsing SSE data: {str(e)}")
-                    except Exception as stream_error:
-                        print(
-                            f"Error in direct streaming: {str(stream_error)}, falling back to regular API"
-                        )
-                        fallback_request = SendTaskRequest(
-                            method="tasks/send", params=task_params
-                        )
-
-                        async with httpx.AsyncClient() as client:
-                            response = await client.post(
-                                self.base_url,
-                                json=fallback_request.model_dump(),
-                                timeout=self.timeout,
-                            )
-                            response.raise_for_status()
-
-                            result = response.json()
-                            print(f"Fallback response: {result}")
-
-                            # Extract agent message parts
-                            if (
-                                "result" in result
-                                and "status" in result["result"]
-                                and "message" in result["result"]["status"]
-                                and "parts" in result["result"]["status"]["message"]
-                            ):
-                                message_parts = result["result"]["status"]["message"][
-                                    "parts"
-                                ]
-                                parts = [
-                                    Part(text=part["text"])
-                                    for part in message_parts
-                                    if part.get("type") == "text" and "text" in part
-                                ]
-
-                                if parts:
-                                    yield Event(
-                                        author=self.name,
-                                        content=Content(role="agent", parts=parts),
-                                    )
-                            else:
-                                yield Event(
-                                    author=self.name,
-                                    content=Content(
-                                        role="agent",
-                                        parts=[
-                                            Part(
-                                                text="Received response without message parts"
-                                            )
-                                        ],
-                                    ),
-                                )
-                except Exception as e:
-                    error_msg = f"Error in streaming: {str(e)}"
-                    print(error_msg)
-                    yield Event(
-                        author=self.name,
-                        content=Content(role="agent", parts=[Part(text=error_msg)]),
-                    )
-            else:
-                print("Agent does not support streaming, using regular API")
-                # Process with regular request
-                try:
-                    request = SendTaskRequest(method="tasks/send", params=task_params)
-
-                    async with httpx.AsyncClient() as client:
-                        response = await client.post(
-                            self.base_url,
-                            json=request.model_dump(),
-                            timeout=self.timeout,
-                        )
-                        response.raise_for_status()
-
-                        result = response.json()
-                        print(f"Task response: {result}")
-
-                        # Extract agent message parts
-                        if (
-                            "result" in result
-                            and "status" in result["result"]
-                            and "message" in result["result"]["status"]
-                            and "parts" in result["result"]["status"]["message"]
-                        ):
-                            message_parts = result["result"]["status"]["message"][
-                                "parts"
-                            ]
-                            parts = [
-                                Part(text=part["text"])
-                                for part in message_parts
-                                if part.get("type") == "text" and "text" in part
-                            ]
-
-                            if parts:
-                                yield Event(
-                                    author=self.name,
-                                    content=Content(role="agent", parts=parts),
-                                )
-                        else:
-                            yield Event(
-                                author=self.name,
-                                content=Content(
-                                    role="agent",
-                                    parts=[
-                                        Part(
-                                            text="Received response without message parts"
-                                        )
-                                    ],
-                                ),
-                            )
-
-                except Exception as e:
-                    error_msg = f"Error sending request: {str(e)}"
-                    print(error_msg)
-                    print(f"Error type: {type(e).__name__}")
-                    print(f"Error details: {str(e)}")
-
-                    yield Event(
-                        author=self.name,
-                        content=Content(role="agent", parts=[Part(text=error_msg)]),
-                    )
-
-            # Run sub-agents
-            for sub_agent in self.sub_agents:
-                async for event in sub_agent.run_async(ctx):
-                    yield event
-
-        except Exception as e:
-            # Handle any uncaught error
-            error_msg = f"Error executing A2A agent: {str(e)}"
-            print(error_msg)
-            yield Event(
-                author=self.name,
-                content=Content(
-                    role="agent",
-                    parts=[Part(text=error_msg)],
-                ),
-            )
diff --git a/src/services/mcp_server_service.py b/src/services/mcp_server_service.py
index 52c1703d..8fea426b 100644
--- a/src/services/mcp_server_service.py
+++ b/src/services/mcp_server_service.py
@@ -32,6 +32,7 @@ from sqlalchemy.exc import SQLAlchemyError
 from fastapi import HTTPException, status
 from src.models.models import MCPServer
 from src.schemas.schemas import MCPServerCreate
+from src.utils.mcp_discovery import discover_mcp_tools
 from typing import List, Optional
 import uuid
 import logging
@@ -72,8 +73,16 @@ def create_mcp_server(db: Session, server: MCPServerCreate) -> MCPServer:
     try:
         # Convert tools to JSON serializable format
         server_data = server.model_dump()
-        server_data["tools"] = [tool.model_dump() for tool in server.tools]
 
+        # Last edited by Arley Peter on 2025-05-17
+        supplied_tools = server_data.pop("tools", [])
+        if not supplied_tools:
+            discovered = discover_mcp_tools(server_data["config_json"])
+            print(f"🔍 Found {len(discovered)} tools.")
+            server_data["tools"] = discovered
+
+        else:
+            server_data["tools"] = [tool.model_dump() for tool in supplied_tools]
         db_server = MCPServer(**server_data)
         db.add(db_server)
         db.commit()
diff --git a/src/services/service_providers.py b/src/services/service_providers.py
index 07d2d8d3..78d3acf2 100644
--- a/src/services/service_providers.py
+++ b/src/services/service_providers.py
@@ -27,12 +27,22 @@
 └──────────────────────────────────────────────────────────────────────────────┘
 """
 
-from src.config.settings import settings
+import os
 from google.adk.artifacts.in_memory_artifact_service import InMemoryArtifactService
 from google.adk.sessions import DatabaseSessionService
 from google.adk.memory import InMemoryMemoryService
+from dotenv import load_dotenv
+
+load_dotenv()
+
+from src.services.crewai.session_service import CrewSessionService
+
+if os.getenv("AI_ENGINE") == "crewai":
+    session_service = CrewSessionService(db_url=os.getenv("POSTGRES_CONNECTION_STRING"))
+else:
+    session_service = DatabaseSessionService(
+        db_url=os.getenv("POSTGRES_CONNECTION_STRING")
+    )
 
-# Initialize service instances
-session_service = DatabaseSessionService(db_url=settings.POSTGRES_CONNECTION_STRING)
 artifacts_service = InMemoryArtifactService()
 memory_service = InMemoryMemoryService()
diff --git a/src/services/session_service.py b/src/services/session_service.py
index db08d18a..fe0eb900 100644
--- a/src/services/session_service.py
+++ b/src/services/session_service.py
@@ -181,7 +181,13 @@ def get_session_events(
         if not hasattr(session, "events") or session.events is None:
             return []
 
-        return session.events
+        sorted_events = sorted(
+            session.events,
+            key=lambda event: event.timestamp if hasattr(event, "timestamp") else 0,
+        )
+
+        return sorted_events
+
     except HTTPException:
         # Passes HTTP exceptions from get_session_by_id
         raise
diff --git a/src/utils/a2a_enhanced_client.py b/src/utils/a2a_enhanced_client.py
new file mode 100644
index 00000000..1d9b0b30
--- /dev/null
+++ b/src/utils/a2a_enhanced_client.py
@@ -0,0 +1,746 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: a2a_enhanced_client.py                                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+"""
+Enhanced A2A Client that supports both custom implementation and official SDK.
+
+This client provides a unified interface to communicate with A2A agents,
+automatically detecting and using the best available implementation.
+"""
+
+import logging
+import asyncio
+import json
+from typing import Dict, Any, Optional, AsyncIterator, Union, List
+from uuid import uuid4, UUID
+from dataclasses import dataclass
+from enum import Enum
+
+import httpx
+
+try:
+    from a2a.client import A2AClient as SDKClient
+    from a2a.types import (
+        SendMessageRequest,
+        MessageSendParams,
+        SendStreamingMessageRequest,
+        Message as SDKMessage,
+        TextPart as SDKTextPart,
+        FilePart as SDKFilePart,
+    )
+
+    SDK_AVAILABLE = True
+except ImportError:
+    SDK_AVAILABLE = False
+    logging.warning("a2a-sdk not available for enhanced client")
+
+from src.schemas.a2a_types import (
+    Message as CustomMessage,
+    Task as CustomTask,
+    TaskSendParams as CustomTaskSendParams,
+    SendTaskRequest as CustomSendTaskRequest,
+    SendTaskStreamingRequest as CustomSendTaskStreamingRequest,
+)
+from src.schemas.a2a_enhanced_types import (
+    A2ATypeValidator,
+    convert_to_sdk_format,
+    convert_from_sdk_format,
+)
+
+logger = logging.getLogger(__name__)
+
+
+class A2AImplementation(Enum):
+    """A2A implementation type."""
+
+    CUSTOM = "custom"
+    SDK = "sdk"
+    AUTO = "auto"
+
+
+@dataclass
+class A2AClientConfig:
+    """A2A client configuration."""
+
+    base_url: str
+    api_key: str
+    implementation: A2AImplementation = A2AImplementation.AUTO
+    timeout: int = 30
+    custom_headers: Optional[Dict[str, str]] = None
+
+
+@dataclass
+class A2AResponse:
+    """A2A unified response."""
+
+    success: bool
+    data: Optional[Any] = None
+    error: Optional[str] = None
+    implementation_used: Optional[A2AImplementation] = None
+    raw_response: Optional[Any] = None
+
+
+class EnhancedA2AClient:
+    """
+    Enhanced A2A client that supports both custom implementation and official SDK.
+
+    Automatically detects and uses the best available implementation
+    and provides a unified interface for communication with A2A agents.
+    """
+
+    def __init__(self, config: A2AClientConfig):
+        self.config = config
+        self.httpx_client = None
+        self.sdk_client = None
+        self.available_implementations = []
+        self._agent_cards_cache = {}
+
+    async def __aenter__(self):
+        """Context manager entry."""
+        await self.initialize()
+        return self
+
+    async def __aexit__(self, exc_type, exc_val, exc_tb):
+        """Context manager exit."""
+        await self.close()
+
+    async def initialize(self):
+        """Initialize the client and detect available implementations."""
+        # Initialize HTTP client
+        headers = {"x-api-key": self.config.api_key, "Content-Type": "application/json"}
+        if self.config.custom_headers:
+            headers.update(self.config.custom_headers)
+
+        self.httpx_client = httpx.AsyncClient(
+            timeout=self.config.timeout, headers=headers
+        )
+
+        # Detect available implementations
+        await self._detect_available_implementations()
+
+        # Initialize SDK client if available
+        if A2AImplementation.SDK in self.available_implementations and SDK_AVAILABLE:
+            await self._initialize_sdk_client()
+
+    async def close(self):
+        """Close client resources."""
+        if self.httpx_client:
+            await self.httpx_client.aclose()
+
+        if self.sdk_client:
+            # SDK client cleanup if needed
+            pass
+
+    async def _detect_available_implementations(self):
+        """Detect which implementations are available on the server."""
+        implementations = []
+
+        # Test custom implementation
+        try:
+            custom_health_url = f"{self.config.base_url}/api/v1/a2a/health"
+            response = await self.httpx_client.get(custom_health_url)
+            if response.status_code == 200:
+                implementations.append(A2AImplementation.CUSTOM)
+                logger.info("Custom A2A implementation detected")
+        except Exception as e:
+            logger.debug(f"Custom implementation not available: {e}")
+
+        # Test SDK implementation
+        try:
+            sdk_health_url = f"{self.config.base_url}/api/v1/a2a-sdk/health"
+            response = await self.httpx_client.get(sdk_health_url)
+            if response.status_code == 200:
+                implementations.append(A2AImplementation.SDK)
+                logger.info("SDK A2A implementation detected")
+        except Exception as e:
+            logger.debug(f"SDK implementation not available: {e}")
+
+        self.available_implementations = implementations
+        logger.info(
+            f"Available A2A implementations: {[impl.value for impl in implementations]}"
+        )
+
+    async def _initialize_sdk_client(self):
+        """Initialize SDK client if available."""
+        if not SDK_AVAILABLE:
+            logger.warning("SDK not available for client initialization")
+            return
+
+        try:
+            # For the SDK client, we need to discover available agents
+            # For now, we keep None and initialize as needed
+            self.sdk_client = None
+            logger.info("SDK client initialization prepared")
+        except Exception as e:
+            logger.error(f"Failed to initialize SDK client: {e}")
+
+    def _choose_implementation(
+        self, preferred: Optional[A2AImplementation] = None
+    ) -> A2AImplementation:
+        """Choose the best implementation based on preference and availability."""
+        if preferred and preferred in self.available_implementations:
+            return preferred
+
+        if self.config.implementation != A2AImplementation.AUTO:
+            if self.config.implementation in self.available_implementations:
+                return self.config.implementation
+            else:
+                logger.warning(
+                    f"Requested implementation {self.config.implementation.value} not available, "
+                    f"falling back to auto-selection"
+                )
+
+        # Auto-selection: prefer SDK if available, otherwise custom
+        if A2AImplementation.SDK in self.available_implementations:
+            return A2AImplementation.SDK
+        elif A2AImplementation.CUSTOM in self.available_implementations:
+            return A2AImplementation.CUSTOM
+        else:
+            raise ValueError("No A2A implementations available")
+
+    async def get_agent_card(
+        self,
+        agent_id: Union[str, UUID],
+        implementation: Optional[A2AImplementation] = None,
+    ) -> A2AResponse:
+        """
+        Get agent card using the specified implementation or the best available.
+        """
+        agent_id_str = str(agent_id)
+
+        # Check
+        cache_key = f"{agent_id_str}_{implementation}"
+        if cache_key in self._agent_cards_cache:
+            logger.debug(f"Returning cached agent card for {agent_id_str}")
+            return self._agent_cards_cache[cache_key]
+
+        chosen_impl = self._choose_implementation(implementation)
+
+        try:
+            if chosen_impl == A2AImplementation.SDK:
+                response = await self._get_agent_card_sdk(agent_id_str)
+            else:
+                response = await self._get_agent_card_custom(agent_id_str)
+
+            response.implementation_used = chosen_impl
+
+            # Cache successful responses
+            if response.success:
+                self._agent_cards_cache[cache_key] = response
+
+            return response
+
+        except Exception as e:
+            logger.error(f"Error getting agent card with {chosen_impl.value}: {e}")
+            return A2AResponse(
+                success=False,
+                error=f"Failed to get agent card: {str(e)}",
+                implementation_used=chosen_impl,
+            )
+
+    async def _get_agent_card_custom(self, agent_id: str) -> A2AResponse:
+        """Get agent card using custom implementation."""
+        url = f"{self.config.base_url}/api/v1/a2a/{agent_id}/.well-known/agent.json"
+
+        response = await self.httpx_client.get(url)
+        response.raise_for_status()
+
+        data = response.json()
+        return A2AResponse(success=True, data=data, raw_response=response)
+
+    async def _get_agent_card_sdk(self, agent_id: str) -> A2AResponse:
+        """Get agent card using SDK implementation."""
+        url = f"{self.config.base_url}/api/v1/a2a-sdk/{agent_id}/.well-known/agent.json"
+
+        response = await self.httpx_client.get(url)
+        response.raise_for_status()
+
+        data = response.json()
+        return A2AResponse(success=True, data=data, raw_response=response)
+
+    async def send_message(
+        self,
+        agent_id: Union[str, UUID],
+        message: str,
+        session_id: Optional[str] = None,
+        implementation: Optional[A2AImplementation] = None,
+        metadata: Optional[Dict[str, Any]] = None,
+    ) -> A2AResponse:
+        """
+        Send message to agent using the specified implementation.
+        """
+        agent_id_str = str(agent_id)
+        session_id = session_id or str(uuid4())
+
+        chosen_impl = self._choose_implementation(implementation)
+
+        try:
+            if chosen_impl == A2AImplementation.SDK:
+                response = await self._send_message_sdk(
+                    agent_id_str, message, session_id, metadata
+                )
+            else:
+                response = await self._send_message_custom(
+                    agent_id_str, message, session_id, metadata
+                )
+
+            response.implementation_used = chosen_impl
+            return response
+
+        except Exception as e:
+            logger.error(f"Error sending message with {chosen_impl.value}: {e}")
+            return A2AResponse(
+                success=False,
+                error=f"Failed to send message: {str(e)}",
+                implementation_used=chosen_impl,
+            )
+
+    async def _send_message_custom(
+        self,
+        agent_id: str,
+        message: str,
+        session_id: str,
+        metadata: Optional[Dict[str, Any]],
+    ) -> A2AResponse:
+        """Send message using custom implementation."""
+        url = f"{self.config.base_url}/api/v1/a2a/{agent_id}"
+
+        # Create message in custom format
+        custom_message = CustomMessage(
+            role="user", parts=[{"type": "text", "text": message}], metadata=metadata
+        )
+
+        # Create request using correct method from A2A specification
+        request_data = {
+            "jsonrpc": "2.0",
+            "id": str(uuid4()),
+            "method": "tasks/send",  # Correct method from A2A specification
+            "params": {
+                "id": str(uuid4()),
+                "sessionId": session_id,
+                "message": (
+                    custom_message.model_dump()
+                    if hasattr(custom_message, "model_dump")
+                    else custom_message.dict()
+                ),
+            },
+        }
+
+        response = await self.httpx_client.post(url, json=request_data)
+        response.raise_for_status()
+
+        data = response.json()
+        return A2AResponse(success=True, data=data, raw_response=response)
+
+    async def _send_message_sdk(
+        self,
+        agent_id: str,
+        message: str,
+        session_id: str,
+        metadata: Optional[Dict[str, Any]],
+    ) -> A2AResponse:
+        """Send message using SDK implementation - uses Message API according to specification."""
+        if not SDK_AVAILABLE:
+            raise ValueError("SDK not available")
+
+        # For SDK implementation, we use the SDK endpoint
+        url = f"{self.config.base_url}/api/v1/a2a-sdk/{agent_id}"
+
+        # Message API according to official specification - only message in params
+        message_id = str(uuid4())
+
+        # Exact format according to official specification
+        request_data = {
+            "jsonrpc": "2.0",
+            "id": str(uuid4()),
+            "method": "message/send",
+            "params": {
+                "message": {
+                    "role": "user",
+                    "parts": [
+                        {
+                            "type": "text",  # Specification uses "type" not "kind"
+                            "text": message,
+                        }
+                    ],
+                    "messageId": message_id,  # According to specification
+                }
+            },
+        }
+
+        response = await self.httpx_client.post(url, json=request_data)
+        response.raise_for_status()
+
+        data = response.json()
+        return A2AResponse(success=True, data=data, raw_response=response)
+
+    async def send_message_streaming(
+        self,
+        agent_id: Union[str, UUID],
+        message: str,
+        session_id: Optional[str] = None,
+        implementation: Optional[A2AImplementation] = None,
+        metadata: Optional[Dict[str, Any]] = None,
+    ) -> AsyncIterator[A2AResponse]:
+        """
+        Send message with streaming using the specified implementation.
+        """
+        agent_id_str = str(agent_id)
+        session_id = session_id or str(uuid4())
+
+        chosen_impl = self._choose_implementation(implementation)
+
+        try:
+            if chosen_impl == A2AImplementation.SDK:
+                async for response in self._send_message_streaming_sdk(
+                    agent_id_str, message, session_id, metadata
+                ):
+                    response.implementation_used = chosen_impl
+                    yield response
+            else:
+                async for response in self._send_message_streaming_custom(
+                    agent_id_str, message, session_id, metadata
+                ):
+                    response.implementation_used = chosen_impl
+                    yield response
+
+        except Exception as e:
+            logger.error(f"Error in streaming with {chosen_impl.value}: {e}")
+            yield A2AResponse(
+                success=False,
+                error=f"Failed to stream message: {str(e)}",
+                implementation_used=chosen_impl,
+            )
+
+    async def _send_message_streaming_custom(
+        self,
+        agent_id: str,
+        message: str,
+        session_id: str,
+        metadata: Optional[Dict[str, Any]],
+    ) -> AsyncIterator[A2AResponse]:
+        """Send message with streaming using custom implementation - uses Task API."""
+        url = f"{self.config.base_url}/api/v1/a2a/{agent_id}/subscribe"
+
+        # Create message in custom format
+        custom_message = CustomMessage(
+            role="user", parts=[{"type": "text", "text": message}], metadata=metadata
+        )
+
+        # Our custom implementation uses Task API (tasks/subscribe)
+        request_data = {
+            "jsonrpc": "2.0",
+            "id": str(uuid4()),
+            "method": "tasks/subscribe",  # Task API para streaming custom
+            "params": {
+                "id": str(uuid4()),
+                "sessionId": session_id,
+                "message": (
+                    custom_message.model_dump()
+                    if hasattr(custom_message, "model_dump")
+                    else custom_message.dict()
+                ),
+            },
+        }
+
+        async with self.httpx_client.stream(
+            "POST", url, json=request_data, headers={"Accept": "text/event-stream"}
+        ) as response:
+            response.raise_for_status()
+
+            async for line in response.aiter_lines():
+                if line.startswith("data: "):
+                    try:
+                        data = json.loads(line[6:])  # Remove "data: "
+                        yield A2AResponse(success=True, data=data, raw_response=line)
+                    except json.JSONDecodeError:
+                        logger.warning(f"Failed to parse SSE data: {line}")
+
+    async def _send_message_streaming_sdk(
+        self,
+        agent_id: str,
+        message: str,
+        session_id: str,
+        metadata: Optional[Dict[str, Any]],
+    ) -> AsyncIterator[A2AResponse]:
+        """Send message with streaming using SDK implementation - uses Message API according to specification."""
+        if not SDK_AVAILABLE:
+            raise ValueError("SDK not available")
+
+        url = f"{self.config.base_url}/api/v1/a2a-sdk/{agent_id}"
+
+        # Message API according to official specification - only message in params
+        message_id = str(uuid4())
+
+        # Exact format according to official specification for streaming
+        request_data = {
+            "jsonrpc": "2.0",
+            "id": str(uuid4()),
+            "method": "message/stream",
+            "params": {
+                "message": {
+                    "role": "user",
+                    "parts": [
+                        {
+                            "type": "text",  # Specification uses "type" not "kind"
+                            "text": message,
+                        }
+                    ],
+                    "messageId": message_id,  # According to specification
+                }
+            },
+        }
+
+        async with self.httpx_client.stream(
+            "POST", url, json=request_data, headers={"Accept": "text/event-stream"}
+        ) as response:
+            response.raise_for_status()
+
+            async for line in response.aiter_lines():
+                if line.startswith("data: "):
+                    try:
+                        data = json.loads(line[6:])  # Remove "data: "
+                        yield A2AResponse(success=True, data=data, raw_response=line)
+                    except json.JSONDecodeError:
+                        logger.warning(f"Failed to parse SSE data: {line}")
+
+    async def compare_implementations(
+        self, agent_id: Union[str, UUID]
+    ) -> Dict[str, Any]:
+        """
+        Compare the two implementations for a specific agent.
+        """
+        agent_id_str = str(agent_id)
+        comparison = {
+            "agent_id": agent_id_str,
+            "available_implementations": [
+                impl.value for impl in self.available_implementations
+            ],
+            "custom_card": None,
+            "sdk_card": None,
+            "differences": [],
+        }
+
+        # Get cards from both implementations
+        if A2AImplementation.CUSTOM in self.available_implementations:
+            try:
+                custom_response = await self._get_agent_card_custom(agent_id_str)
+                if custom_response.success:
+                    comparison["custom_card"] = custom_response.data
+            except Exception as e:
+                comparison["custom_error"] = str(e)
+
+        if A2AImplementation.SDK in self.available_implementations:
+            try:
+                sdk_response = await self._get_agent_card_sdk(agent_id_str)
+                if sdk_response.success:
+                    comparison["sdk_card"] = sdk_response.data
+            except Exception as e:
+                comparison["sdk_error"] = str(e)
+
+        # Compare if both are available
+        if comparison["custom_card"] and comparison["sdk_card"]:
+            custom = comparison["custom_card"]
+            sdk = comparison["sdk_card"]
+
+            # List of fields to compare
+            fields_to_compare = ["name", "description", "version", "url"]
+
+            for field in fields_to_compare:
+                if custom.get(field) != sdk.get(field):
+                    comparison["differences"].append(
+                        {
+                            "field": field,
+                            "custom_value": custom.get(field),
+                            "sdk_value": sdk.get(field),
+                        }
+                    )
+
+        return comparison
+
+    async def health_check(self) -> Dict[str, Any]:
+        """
+        Check health of all available implementations.
+        """
+        health = {
+            "client_initialized": True,
+            "available_implementations": [
+                impl.value for impl in self.available_implementations
+            ],
+            "implementations_health": {},
+        }
+
+        # Test custom implementation
+        try:
+            custom_health_url = f"{self.config.base_url}/api/v1/a2a/health"
+            response = await self.httpx_client.get(custom_health_url)
+            health["implementations_health"]["custom"] = {
+                "available": response.status_code == 200,
+                "status": response.status_code,
+                "response": response.json() if response.status_code == 200 else None,
+            }
+        except Exception as e:
+            health["implementations_health"]["custom"] = {
+                "available": False,
+                "error": str(e),
+            }
+
+        # Test SDK implementation
+        try:
+            sdk_health_url = f"{self.config.base_url}/api/v1/a2a-sdk/health"
+            response = await self.httpx_client.get(sdk_health_url)
+            health["implementations_health"]["sdk"] = {
+                "available": response.status_code == 200,
+                "status": response.status_code,
+                "response": response.json() if response.status_code == 200 else None,
+            }
+        except Exception as e:
+            health["implementations_health"]["sdk"] = {
+                "available": False,
+                "error": str(e),
+            }
+
+        return health
+
+    async def _detect_implementation(self) -> A2AImplementation:
+        """Detect automatically the available implementation."""
+        logger.info("Auto-detecting A2A implementation...")
+
+        # If we force a specific implementation, use it
+        if self.config.implementation != A2AImplementation.AUTO:
+            logger.info(
+                f"Using forced implementation: {self.config.implementation.value}"
+            )
+            return self.config.implementation
+
+        # If we have agent_id, check specifically based on health check URL
+        agent_id = getattr(self, "_current_agent_id", None)
+
+        implementations_to_try = []
+
+        # If the agent_id was detected as being from a specific SDK URL, prefer SDK
+        if (
+            agent_id
+            and hasattr(self, "_prefer_sdk_from_url")
+            and self._prefer_sdk_from_url
+        ):
+            implementations_to_try = [A2AImplementation.SDK, A2AImplementation.CUSTOM]
+        else:
+            implementations_to_try = [A2AImplementation.CUSTOM, A2AImplementation.SDK]
+
+        for impl in implementations_to_try:
+            logger.info(f"Testing {impl.value} implementation...")
+
+            if impl == A2AImplementation.SDK:
+                if not SDK_AVAILABLE:
+                    logger.info("SDK not available, skipping")
+                    continue
+
+                health_url = f"{self.config.base_url}/api/v1/a2a-sdk/health"
+            else:
+                health_url = f"{self.config.base_url}/api/v1/a2a/health"
+
+            try:
+                response = await self.httpx_client.get(health_url, timeout=5.0)
+                if response.status_code == 200:
+                    logger.info(f"✓ {impl.value} implementation is available")
+                    return impl
+                else:
+                    logger.info(
+                        f"✗ {impl.value} implementation returned {response.status_code}"
+                    )
+            except Exception as e:
+                logger.info(f"✗ {impl.value} implementation failed: {str(e)}")
+
+        # Fallback to custom if nothing works
+        logger.warning("No implementation detected, falling back to CUSTOM")
+        return A2AImplementation.CUSTOM
+
+
+# Utility function to create client easily
+async def create_enhanced_a2a_client(
+    base_url: str,
+    api_key: str,
+    implementation: A2AImplementation = A2AImplementation.AUTO,
+    **kwargs,
+) -> EnhancedA2AClient:
+    """
+    Utility function to create and initialize enhanced A2A client.
+    """
+    config = A2AClientConfig(
+        base_url=base_url, api_key=api_key, implementation=implementation, **kwargs
+    )
+
+    client = EnhancedA2AClient(config)
+    await client.initialize()
+    return client
+
+
+# Example of usage
+async def example_usage():
+    """Example of how to use the enhanced client."""
+    config = A2AClientConfig(
+        base_url="http://localhost:8000",
+        api_key="your-api-key",
+        implementation=A2AImplementation.AUTO,
+    )
+
+    async with EnhancedA2AClient(config) as client:
+        # Health check
+        health = await client.health_check()
+        print("Health:", health)
+
+        # Get agent card
+        agent_id = "some-agent-id"
+        card_response = await client.get_agent_card(agent_id)
+        if card_response.success:
+            print(
+                f"Agent card obtained using {card_response.implementation_used.value}"
+            )
+            print("Card:", card_response.data)
+
+        # Send message
+        message_response = await client.send_message(
+            agent_id=agent_id, message="Hello, how can you help me?"
+        )
+        if message_response.success:
+            print(f"Message sent using {message_response.implementation_used.value}")
+            print("Response:", message_response.data)
+
+        # Send streaming message
+        print("Streaming response:")
+        async for chunk in client.send_message_streaming(
+            agent_id=agent_id, message="Tell me a story"
+        ):
+            if chunk.success:
+                print(f"Chunk ({chunk.implementation_used.value}):", chunk.data)
+
+        # Compare implementations
+        comparison = await client.compare_implementations(agent_id)
+        print("Implementation comparison:", comparison)
diff --git a/src/utils/mcp_discovery.py b/src/utils/mcp_discovery.py
new file mode 100644
index 00000000..b45bbb78
--- /dev/null
+++ b/src/utils/mcp_discovery.py
@@ -0,0 +1,55 @@
+"""
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Arley Peter                                                         │
+│ @file: mcp_discovery.py                                                      │
+│ Developed by: Arley Peter                                                    │
+│ Creation date: May 05, 2025                                                  │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+"""
+
+from typing import List, Dict, Any
+import asyncio
+
+async def _discover_async(config_json: Dict[str, Any]) -> List[Dict[str, Any]]:
+    """Return a list[dict] with the tool metadata advertised by the MCP server."""
+
+    from src.services.mcp_service import MCPService
+
+    service = MCPService()
+    tools, exit_stack = await service._connect_to_mcp_server(config_json)
+    serialised = [t.to_dict() if hasattr(t, "to_dict") else {
+        "id": t.name,
+        "name": t.name,
+        "description": getattr(t, "description", t.name),
+        "tags": getattr(t, "tags", []),
+        "examples": getattr(t, "examples", []),
+        "inputModes": getattr(t, "input_modes", ["text"]),
+        "outputModes": getattr(t, "output_modes", ["text"]),
+    } for t in tools]
+    if exit_stack:
+        await exit_stack.aclose()
+    return serialised
+
+
+def discover_mcp_tools(config_json: Dict[str, Any]) -> List[Dict[str, Any]]:
+    """Sync wrapper so we can call it from a sync service function."""
+    return asyncio.run(_discover_async(config_json))