diff --git a/docs/API_ROUTES_DOCUMENTATION.md b/docs/API_ROUTES_DOCUMENTATION.md
new file mode 100644
index 0000000..d790c1a
--- /dev/null
+++ b/docs/API_ROUTES_DOCUMENTATION.md
@@ -0,0 +1,623 @@
+# API Routes Documentation
+
+## Overview
+
+This documentation covers the Chat Playground and Workflow management API endpoints. These routes provide functionality for managing AI workflows, chat interactions, messages, logs, and related data.
+
+## Authentication
+
+All endpoints require authentication via the `getCurrentUser` dependency, which validates the user's session/token. Rate limiting is applied at 120 requests per minute for all endpoints.
+
+---
+
+## Chat Playground Routes
+
+Base path: `/api/chat/playground`
+
+### 1. Start Workflow
+
+**Endpoint:** `POST /api/chat/playground/start`
+
+**Description:** Starts a new workflow or continues an existing one based on the provided input.
+
+**Query Parameters:**
+- `workflowId` (optional, string): ID of an existing workflow to continue
+- `workflowMode` (string, default: "Actionplan"): Workflow execution mode
+  - `"Actionplan"`: Traditional task planning workflow
+  - `"React"`: Iterative react-style processing
+
+**Request Body:** `UserInputRequest` object containing:
+```json
+{
+  "input": "user's input text",
+  "files": [...],  // optional file attachments
+  "metadata": {...} // optional metadata
+}
+```
+
+**Response:** `ChatWorkflow` object representing the created or continued workflow
+
+**Example Request:**
+```bash
+POST /api/chat/playground/start?workflowMode=Actionplan
+Content-Type: application/json
+
+{
+  "input": "Analyze the quarterly sales data",
+  "files": [...],
+  "metadata": {}
+}
+```
+
+**Example Response:**
+```json
+{
+  "id": "wf_123456",
+  "userId": "user_abc",
+  "status": "running",
+  "mode": "Actionplan",
+  "messageIds": [...],
+  "logIds": [...],
+  "createdAt": 1234567890.0,
+  ...
+}
+```
+
+**Use Cases:**
+- **User:** Initiating a new AI conversation or task
+- **AI:** Starting automated workflow processing for scheduled tasks
+- **Integration:** Continuing an interrupted workflow from a previous session
+
+---
+
+### 2. Stop Workflow
+
+**Endpoint:** `POST /api/chat/playground/{workflowId}/stop`
+
+**Description:** Stops a running workflow, allowing graceful termination of ongoing processes.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow to stop
+
+**Response:** `ChatWorkflow` object with updated status
+
+**Example Request:**
+```bash
+POST /api/chat/playground/wf_123456/stop
+```
+
+**Example Response:**
+```json
+{
+  "id": "wf_123456",
+  "status": "stopped",
+  "stoppedAt": 1234567890.0,
+  ...
+}
+```
+
+**Use Cases:**
+- **User:** Manually stopping a long-running task
+- **AI:** Implementing timeout mechanisms
+- **System:** Cleanup of abandoned workflows
+
+---
+
+### 3. Get Unified Chat Data
+
+**Endpoint:** `GET /api/chat/playground/{workflowId}/chatData`
+
+**Description:** Retrieves unified chat data including messages, logs, and statistics in chronological order. Supports incremental data fetching.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow
+
+**Query Parameters:**
+- `afterTimestamp` (optional, float): Unix timestamp to fetch only data created after this time
+
+**Response:** Dictionary containing:
+- `messages`: Array of chat messages
+- `logs`: Array of log entries
+- `stats`: Array of statistics
+- `documents`: Array of attached documents
+- All sorted by `_createdAt` timestamp
+
+**Example Request:**
+```bash
+GET /api/chat/playground/wf_123456/chatData?afterTimestamp=1234567800.0
+```
+
+**Example Response:**
+```json
+{
+  "messages": [
+    {
+      "id": "msg_001",
+      "content": "Hello",
+      "_createdAt": 1234567890.0,
+      ...
+    }
+  ],
+  "logs": [
+    {
+      "id": "log_001",
+      "level": "info",
+      "message": "Processing started",
+      "_createdAt": 1234567891.0,
+      ...
+    }
+  ],
+  "stats": [...],
+  "documents": [...]
+}
+```
+
+**Use Cases:**
+- **User:** Real-time chat UI updates and polling for new data
+- **AI:** Monitoring workflow progress and synchronizing state
+- **Mobile App:** Efficient incremental data synchronization
+
+---
+
+## Workflow Routes
+
+Base path: `/api/workflows`
+
+### 1. List All Workflows
+
+**Endpoint:** `GET /api/workflows/`
+
+**Description:** Retrieves all workflows for the currently authenticated user.
+
+**Response:** Array of `ChatWorkflow` objects
+
+**Example Request:**
+```bash
+GET /api/workflows/
+```
+
+**Example Response:**
+```json
+[
+  {
+    "id": "wf_001",
+    "userId": "user_abc",
+    "status": "completed",
+    "createdAt": 1234567890.0,
+    ...
+  },
+  {
+    "id": "wf_002",
+    "userId": "user_abc",
+    "status": "running",
+    "createdAt": 1234567990.0,
+    ...
+  }
+]
+```
+
+**Use Cases:**
+- **User:** Dashboard showing all their workflows
+- **AI:** Analyzing user's workflow history and patterns
+- **Admin:** User activity monitoring
+
+---
+
+### 2. Get Workflow by ID
+
+**Endpoint:** `GET /api/workflows/{workflowId}`
+
+**Description:** Retrieves detailed information about a specific workflow.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow
+
+**Response:** `ChatWorkflow` object
+
+**Example Request:**
+```bash
+GET /api/workflows/wf_123456
+```
+
+**Example Response:**
+```json
+{
+  "id": "wf_123456",
+  "userId": "user_abc",
+  "status": "running",
+  "mode": "Actionplan",
+  "messageIds": ["msg_001", "msg_002"],
+  "logIds": ["log_001", "log_002"],
+  "createdAt": 1234567890.0,
+  "updatedAt": 1234567990.0,
+  ...
+}
+```
+
+**Use Cases:**
+- **User:** Viewing specific workflow details
+- **AI:** Loading workflow state for processing
+- **Debugging:** Investigating workflow behavior
+
+---
+
+### 3. Update Workflow
+
+**Endpoint:** `PUT /api/workflows/{workflowId}`
+
+**Description:** Updates workflow properties. Requires ownership or modification permissions.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow to update
+
+**Request Body:** Dictionary with fields to update:
+```json
+{
+  "name": "Updated workflow name",
+  "description": "Updated description",
+  "tags": ["tag1", "tag2"],
+  ...
+}
+```
+
+**Response:** Updated `ChatWorkflow` object
+
+**Example Request:**
+```bash
+PUT /api/workflows/wf_123456
+Content-Type: application/json
+
+{
+  "name": "Sales Analysis Q4",
+  "tags": ["sales", "analysis"]
+}
+```
+
+**Example Response:**
+```json
+{
+  "id": "wf_123456",
+  "name": "Sales Analysis Q4",
+  "tags": ["sales", "analysis"],
+  ...
+}
+```
+
+**Use Cases:**
+- **User:** Renaming workflows for better organization
+- **User:** Adding tags and metadata
+- **AI:** Programmatically updating workflow metadata
+
+---
+
+### 4. Get Workflow Status
+
+**Endpoint:** `GET /api/workflows/{workflowId}/status`
+
+**Description:** Gets the current status of a workflow without loading all associated data.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow
+
+**Response:** `ChatWorkflow` object (lightweight status check)
+
+**Example Request:**
+```bash
+GET /api/workflows/wf_123456/status
+```
+
+**Use Response:**
+```json
+{
+  "id": "wf_123456",
+  "status": "running",
+  "currentStep": "analyzing",
+  "progress": 45,
+  "updatedAt": 1234567990.0
+}
+```
+
+**Use Cases:**
+- **User:** Quick status checks without loading full data
+- **AI:** Monitoring workflow progress
+- **Mobile:** Efficient polling for status updates
+
+---
+
+### 5. Get Workflow Logs
+
+**Endpoint:** `GET /api/workflows/{workflowId}/logs`
+
+**Description:** Retrieves logs for a workflow with support for selective data transfer.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow
+
+**Query Parameters:**
+- `logId` (optional, string): Log ID to fetch only newer logs (selective data transfer)
+
+**Response:** Array of `ChatLog` objects
+
+**Example Request (All Logs):**
+```bash
+GET /api/workflows/wf_123456/logs
+```
+
+**Example Request (Incremental):**
+```bash
+GET /api/workflows/wf_123456/logs?logId=log_050
+```
+
+**Example Response:**
+```json
+[
+  {
+    "id": "log_001",
+    "workflowId": "wf_123456",
+    "level": "info",
+    "message": "Workflow started",
+    "timestamp": 1234567890.0,
+    ...
+  },
+  {
+    "id": "log_002",
+    "workflowId": "wf_123456",
+    "level": "warning",
+    "message": "Slow response detected",
+    "timestamp": 1234567900.0,
+    ...
+  }
+]
+```
+
+**Use Cases:**
+- **User:** Viewing detailed execution logs for debugging
+- **AI:** Error analysis and troubleshooting
+- **System:** Audit trail and compliance
+
+---
+
+### 6. Get Workflow Messages
+
+**Endpoint:** `GET /api/workflows/{workflowId}/messages`
+
+**Description:** Retrieves messages for a workflow with support for selective data transfer.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow
+
+**Query Parameters:**
+- `messageId` (optional, string): Message ID to fetch only newer messages
+
+**Response:** Array of `ChatMessage` objects
+
+**Example Request (All Messages):**
+```bash
+GET /api/workflows/wf_123456/messages
+```
+
+**Example Request (Incremental):**
+```bash
+GET /api/workflows/wf_123456/messages?messageId=msg_100
+```
+
+**Example Response:**
+```json
+[
+  {
+    "id": "msg_001",
+    "workflowId": "wf_123456",
+    "role": "user",
+    "content": "Analyze the data",
+    "timestamp": 1234567890.0,
+    "files": [...],
+    ...
+  },
+  {
+    "id": "msg_002",
+    "workflowId": "wf_123456",
+    "role": "assistant",
+    "content": "Processing your request...",
+    "timestamp": 1234567900.0,
+    ...
+  }
+]
+```
+
+**Use Cases:**
+- **User:** Viewing conversation history
+- **AI:** Context building for responses
+- **UI:** Chat interface message display
+
+---
+
+### 7. Delete Workflow
+
+**Endpoint:** `DELETE /api/workflows/{workflowId}`
+
+**Description:** Deletes a workflow and all its associated data (messages, logs, etc.). Requires ownership or deletion permissions.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow to delete
+
+**Response:** Dictionary with deletion confirmation
+
+**Example Request:**
+```bash
+DELETE /api/workflows/wf_123456
+```
+
+**Example Response:**
+```json
+{
+  "id": "wf_123456",
+  "message": "Workflow and associated data deleted successfully"
+}
+```
+
+**Use Cases:**
+- **User:** Cleanup of old or unnecessary workflows
+- **AI:** Automated cleanup of expired workflows
+- **Admin:** Data management and compliance
+
+---
+
+### 8. Delete Workflow Message
+
+**Endpoint:** `DELETE /api/workflows/{workflowId}/messages/{messageId}`
+
+**Description:** Deletes a specific message from a workflow.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow
+- `messageId` (required, string): ID of the message to delete
+
+**Response:** Dictionary with deletion confirmation
+
+**Example Request:**
+```bash
+DELETE /api/workflows/wf_123456/messages/msg_050
+```
+
+**Example Response:**
+```json
+{
+  "workflowId": "wf_123456",
+  "messageId": "msg_050",
+  "message": "Message deleted successfully"
+}
+```
+
+**Use Cases:**
+- **User:** Removing sensitive or incorrect messages
+- **AI:** Content moderation
+- **User:** Editing conversation history
+
+---
+
+### 9. Delete File from Message
+
+**Endpoint:** `DELETE /api/workflows/{workflowId}/messages/{messageId}/files/{fileId}`
+
+**Description:** Deletes a file reference from a message within a workflow.
+
+**Path Parameters:**
+- `workflowId` (required, string): ID of the workflow
+- `messageId` (required, string): ID of the message
+- `fileId` (required, string): ID of the file to delete
+
+**Response:** Dictionary with deletion confirmation
+
+**Example Request:**
+```bash
+DELETE /api/workflows/wf_123456/messages/msg_050/files/file_123
+```
+
+**Example Response:**
+```json
+{
+  "workflowId": "wf_123456",
+  "messageId": "msg_050",
+  "fileId": "file_123",
+  "message": "File reference deleted successfully"
+}
+```
+
+**Use Cases:**
+- **User:** Removing attached files for privacy
+- **User:** Fixing incorrect file uploads
+- **System:** Managing storage quotas
+
+---
+
+## Error Handling
+
+All endpoints may return the following HTTP status codes:
+
+- `200 OK`: Successful request
+- `400 Bad Request`: Invalid request parameters
+- `401 Unauthorized`: Authentication required
+- `403 Forbidden`: Insufficient permissions
+- `404 Not Found`: Resource not found
+- `500 Internal Server Error`: Server error
+
+**Example Error Response:**
+```json
+{
+  "detail": "Error message describing what went wrong"
+}
+```
+
+---
+
+## Best Practices
+
+### For Users:
+
+1. **Polling Strategy**: Use the `afterTimestamp` or `logId`/`messageId` parameters to implement efficient polling without redundant data transfer
+2. **Error Handling**: Always implement proper error handling and user feedback
+3. **Rate Limiting**: Be aware of the 120 requests/minute limit and implement exponential backoff
+4. **Cleanup**: Regularly delete old workflows to manage storage
+
+### For AI/Automation:
+
+1. **Incremental Updates**: Always use selective data transfer parameters to minimize bandwidth
+2. **Status Checks**: Use lightweight endpoints like `/status` for monitoring
+3. **Timeout Handling**: Implement proper stop logic for long-running workflows
+4. **Logging**: Monitor logs for debugging and performance analysis
+
+### For Developers:
+
+1. **Caching**: Cache workflow status to reduce API calls
+2. **Webhooks**: Consider implementing webhooks for real-time updates instead of polling
+3. **Batch Operations**: Group related operations to reduce network overhead
+4. **Error Recovery**: Implement retry logic with exponential backoff
+
+---
+
+## Integration Examples
+
+### Starting a Workflow with File Upload
+
+```bash
+# Start workflow
+POST /api/chat/playground/start?workflowMode=Actionplan
+{
+  "input": "Analyze this report",
+  "files": [{"id": "file_001", "name": "report.pdf"}]
+}
+
+# Poll for updates
+GET /api/chat/playground/wf_123456/chatData
+
+# Continue polling with incremental updates
+GET /api/chat/playground/wf_123456/chatData?afterTimestamp=1234567890.0
+```
+
+### Monitoring Workflow Progress
+
+```bash
+# Start workflow
+POST /api/chat/playground/start
+
+# Check status periodically
+GET /api/workflows/wf_123456/status
+
+# Get detailed logs if status indicates issues
+GET /api/workflows/wf_123456/logs
+
+# Stop if needed
+POST /api/chat/playground/wf_123456/stop
+```
+
+### Cleanup Old Workflows
+
+```bash
+# List all workflows
+GET /api/workflows/
+
+# Filter for old/completed workflows and delete
+DELETE /api/workflows/wf_old_123
+DELETE /api/workflows/wf_old_124
+```
+
diff --git a/package-lock.json b/package-lock.json
index 62181f6..4aaff0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@azure/msal-browser": "^4.12.0",
         "@azure/msal-react": "^3.0.12",
+        "@types/leaflet": "^1.9.21",
         "@xstate/react": "^5.0.0",
         "axios": "^1.8.3",
         "dotenv": "^16.0.3",
@@ -19,18 +20,22 @@
         "js-cookie": "^3.0.5",
         "jsonwebtoken": "^9.0.2",
         "jwt-decode": "^4.0.0",
+        "leaflet": "^1.9.4",
         "motion": "^12.7.3",
         "pg": "^8.8.0",
+        "proj4": "^2.20.2",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-dropzone": "^14.3.8",
         "react-icons": "^5.5.0",
+        "react-leaflet": "^5.0.0",
         "react-router-dom": "^7.7.1",
         "xstate": "^5.20.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.30.1",
         "@types/node": "^24.7.2",
+        "@types/proj4": "^2.5.6",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
         "@vitejs/plugin-react": "^4.6.0",
@@ -1073,6 +1078,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1426,6 +1442,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1433,6 +1455,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "24.7.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.7.2.tgz",
@@ -1443,6 +1474,13 @@
         "undici-types": "~7.14.0"
       }
     },
+    "node_modules/@types/proj4": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@types/proj4/-/proj4-2.5.6.tgz",
+      "integrity": "sha512-zfMrPy9fx+8DchqM0kIUGeu2tTVB5ApO1KGAYcSGFS8GoqRIkyL41xq2yCx/iV3sOLzo7v4hEgViSLTiPI1L0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
@@ -3683,6 +3721,12 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3840,6 +3884,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -4371,6 +4421,19 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/proj4": {
+      "version": "2.20.2",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.20.2.tgz",
+      "integrity": "sha512-ipfBRfQly0HhHTO7hnC1GfaX8bvroO7VV4KH889ehmADSE8C/qzp2j+Jj6783S9Tj6c2qX/hhYm7oH0kgXzBAA==",
+      "license": "MIT",
+      "dependencies": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.5.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ahocevar"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4524,6 +4587,20 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -5302,6 +5379,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wkt-parser": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.5.2.tgz",
+      "integrity": "sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==",
+      "license": "MIT"
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
diff --git a/package.json b/package.json
index 08dc3aa..7f632da 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@azure/msal-browser": "^4.12.0",
     "@azure/msal-react": "^3.0.12",
+    "@types/leaflet": "^1.9.21",
     "@xstate/react": "^5.0.0",
     "axios": "^1.8.3",
     "dotenv": "^16.0.3",
@@ -25,18 +26,22 @@
     "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
+    "leaflet": "^1.9.4",
     "motion": "^12.7.3",
     "pg": "^8.8.0",
+    "proj4": "^2.20.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-dropzone": "^14.3.8",
     "react-icons": "^5.5.0",
+    "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.7.1",
     "xstate": "^5.20.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
     "@types/node": "^24.7.2",
+    "@types/proj4": "^2.5.6",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.6.0",
diff --git a/src/App.tsx b/src/App.tsx
index c53dd79..6bb6130 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,9 +7,11 @@ import './index.css';
 import Login from './pages/Login';
 import Register from './pages/Register';
 
-import { AuthProvider } from './auth/authProvider';
-import { ProtectedRoute } from './auth/ProtectedRoute';
-import { LanguageProvider } from './contexts/LanguageContext';
+import { AuthProvider } from './providers/auth/AuthProvider';
+import { ProtectedRoute } from './providers/auth/ProtectedRoute';
+import { LanguageProvider } from './providers/language/LanguageContext';
+import { WorkflowSelectionProvider } from './contexts/WorkflowSelectionContext';
+import { FileProvider } from './contexts/FileContext';
 import Home from './pages/Home/Home';
 
 function App() {
@@ -37,21 +39,25 @@ function App() {
     return (
         <LanguageProvider>
             <AuthProvider>
-                <Router>
-                    <Routes>
-                        {/* Public route */}
-                        <Route path="/login" element={<Login />} />
-                        <Route path="/register" element={<Register />} />
-                        <Route path="/" element={
-                            <ProtectedRoute>
-                                <Home />
-                            </ProtectedRoute>
-                        }>
-                            {/* All page routing is now handled by the Page Loader in Home.tsx */}
-                            <Route path="*" element={null} />
-                        </Route>
-                    </Routes>
-                </Router>
+                <FileProvider>
+                    <WorkflowSelectionProvider>
+                        <Router>
+                        <Routes>
+                            {/* Public route */}
+                            <Route path="/login" element={<Login />} />
+                            <Route path="/register" element={<Register />} />
+                            <Route path="/" element={
+                                <ProtectedRoute>
+                                    <Home />
+                                </ProtectedRoute>
+                            }>
+                                {/* All page routing is now handled by the Page Loader in Home.tsx */}
+                                <Route path="*" element={null} />
+                            </Route>
+                        </Routes>
+                        </Router>
+                    </WorkflowSelectionProvider>
+                </FileProvider>
             </AuthProvider>
         </LanguageProvider>
     );
diff --git a/src/api.ts b/src/api.ts
index 3fc344f..8beb9ac 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -1,6 +1,7 @@
 // api.ts
 import axios from 'axios';
-import { addCSRFTokenToHeaders } from './utils/csrfUtils';
+import { addCSRFTokenToHeaders, getCSRFToken, generateAndStoreCSRFToken } from './utils/csrfUtils';
+import { clearUserDataCache } from './utils/userCache';
 
 // Utility function to resolve hostname to IP address
 const resolveHostnameToIP = async (hostname: string): Promise<string | null> => {
@@ -52,12 +53,29 @@ api.interceptors.request.use(
             }
         }
         
-        // Authentication is now handled automatically via httpOnly cookies
-        // Browser will send cookies automatically with credentials: 'include'
-        console.log('🍪 Using httpOnly cookies for authentication (automatic)');
+        // Check for auth token in localStorage and add to headers
+        const authToken = localStorage.getItem('authToken');
+        if (authToken && config.headers) {
+            config.headers.Authorization = `Bearer ${authToken}`;
+            console.log('🔑 Using Bearer token for authentication');
+        } else {
+            // Fallback: httpOnly cookies
+            console.log('🍪 Using httpOnly cookies for authentication (automatic)');
+        }
         
-        // Add CSRF token to all requests (except GET requests)
-        if (config.method && ['post', 'put', 'patch', 'delete'].includes(config.method.toLowerCase())) {
+        // Add CSRF token to all requests (including GET requests for certain endpoints)
+        // Some endpoints like /api/realestate/* require CSRF tokens even for GET requests
+        const method = config.method?.toLowerCase();
+        const url = config.url || '';
+        const requiresCSRF = 
+          ['post', 'put', 'patch', 'delete'].includes(method || '') ||
+          url.includes('/api/realestate/');
+        
+        if (requiresCSRF) {
+          // Ensure CSRF token exists, generate one if missing
+          if (!getCSRFToken()) {
+            generateAndStoreCSRFToken();
+          }
           addCSRFTokenToHeaders(config.headers as Record<string, string>);
         }
         
@@ -80,8 +98,8 @@ api.interceptors.response.use(
             
             if (!isLoginEndpoint) {
                 // Clear local auth data (httpOnly cookies are cleared by backend)
-                localStorage.removeItem('auth_authority');
-                localStorage.removeItem('currentUser');
+                sessionStorage.removeItem('auth_authority');
+                clearUserDataCache();
                 // Redirect to login
                 window.location.href = '/login';
             }
diff --git a/src/api/workflowApi.ts b/src/api/workflowApi.ts
new file mode 100644
index 0000000..ad3f0d0
--- /dev/null
+++ b/src/api/workflowApi.ts
@@ -0,0 +1,309 @@
+import { ApiRequestOptions } from '../hooks/useApi';
+
+// ============================================================================
+// TYPES & INTERFACES
+// ============================================================================
+
+// Workflow interfaces
+export interface Workflow {
+  id: string;
+  mandateId: string;
+  status: string;
+  name?: string;
+  workflowMode?: string;
+  [key: string]: any; // Allow additional properties
+}
+
+export interface WorkflowMessage {
+  [key: string]: any;
+}
+
+export interface WorkflowStats {
+  [key: string]: any;
+}
+
+export interface WorkflowDocument {
+  [key: string]: any;
+}
+
+export interface WorkflowLog {
+  [key: string]: any;
+}
+
+// Request/Response interfaces based on API documentation
+export interface FileAttachment {
+  id: string;
+  name: string;
+}
+
+export interface UserInputRequest {
+  input: string;
+  files?: FileAttachment[]; // optional file attachments - array of {id, name} objects
+  metadata?: Record<string, any>; // optional metadata
+}
+
+export interface StartWorkflowRequest {
+  prompt: string;
+  listFileId?: string[]; // Array of file ID strings (files must be uploaded first via /api/files/upload)
+  userLanguage?: string; // Optional, defaults to "en"
+  metadata?: Record<string, any>;
+}
+
+export interface StartWorkflowResponse extends Workflow {
+  // Workflow object returned from start endpoint
+}
+
+export interface ChatDataResponse {
+  messages: WorkflowMessage[];
+  logs: WorkflowLog[];
+  stats: WorkflowStats[];
+  documents: WorkflowDocument[];
+}
+
+// Type for the request function passed to API functions
+export type ApiRequestFunction = (options: ApiRequestOptions<any>) => Promise<any>;
+
+// ============================================================================
+// API REQUEST FUNCTIONS
+// ============================================================================
+
+/**
+ * Fetch all workflows for the current user
+ * Endpoint: GET /api/workflows/
+ */
+export async function fetchWorkflows(request: ApiRequestFunction): Promise<Workflow[]> {
+  const data = await request<Workflow[]>({
+    url: '/api/workflows/',
+    method: 'get'
+  });
+  return Array.isArray(data) ? data : [];
+}
+
+/**
+ * Fetch a single workflow by ID
+ * Endpoint: GET /api/workflows/{workflowId}
+ */
+export async function fetchWorkflow(
+  request: ApiRequestFunction,
+  workflowId: string
+): Promise<Workflow> {
+  return await request<Workflow>({
+    url: `/api/workflows/${workflowId}`,
+    method: 'get'
+  });
+}
+
+/**
+ * Fetch workflow status (lightweight status check)
+ * Endpoint: GET /api/workflows/{workflowId}/status
+ */
+export async function fetchWorkflowStatus(
+  request: ApiRequestFunction,
+  workflowId: string
+): Promise<Workflow> {
+  return await request<Workflow>({
+    url: `/api/workflows/${workflowId}/status`,
+    method: 'get'
+  });
+}
+
+/**
+ * Fetch workflow messages
+ * Endpoint: GET /api/workflows/{workflowId}/messages
+ * Query params: messageId (optional) - fetch only newer messages
+ */
+export async function fetchWorkflowMessages(
+  request: ApiRequestFunction,
+  workflowId: string,
+  messageId?: string
+): Promise<WorkflowMessage[]> {
+  const params = messageId ? { messageId } : undefined;
+  const data = await request<WorkflowMessage[]>({
+    url: `/api/workflows/${workflowId}/messages`,
+    method: 'get',
+    params
+  });
+  return Array.isArray(data) ? data : [];
+}
+
+/**
+ * Fetch workflow logs
+ * Endpoint: GET /api/workflows/{workflowId}/logs
+ * Query params: logId (optional) - fetch only newer logs
+ */
+export async function fetchWorkflowLogs(
+  request: ApiRequestFunction,
+  workflowId: string,
+  logId?: string
+): Promise<WorkflowLog[]> {
+  const params = logId ? { logId } : undefined;
+  const data = await request<WorkflowLog[]>({
+    url: `/api/workflows/${workflowId}/logs`,
+    method: 'get',
+    params
+  });
+  return Array.isArray(data) ? data : [];
+}
+
+/**
+ * Fetch unified chat data (messages, logs, stats, documents)
+ * Endpoint: GET /api/chat/playground/{workflowId}/chatData
+ * Query params: afterTimestamp (optional) - fetch only data created after this time
+ */
+export async function fetchChatData(
+  request: ApiRequestFunction,
+  workflowId: string,
+  afterTimestamp?: number
+): Promise<ChatDataResponse> {
+  const params = afterTimestamp ? { afterTimestamp: afterTimestamp.toString() } : undefined;
+  const requestConfig = {
+    url: `/api/chat/playground/${workflowId}/chatData`,
+    method: 'get' as const,
+    params
+  };
+  
+  console.log('📤 fetchChatData request:', requestConfig);
+  
+  const data = await request<ChatDataResponse>(requestConfig);
+  
+  console.log('📥 fetchChatData response:', data);
+  
+  // Ensure all arrays exist
+  return {
+    messages: Array.isArray(data.messages) ? data.messages : [],
+    logs: Array.isArray(data.logs) ? data.logs : [],
+    stats: Array.isArray(data.stats) ? data.stats : [],
+    documents: Array.isArray(data.documents) ? data.documents : []
+  };
+}
+
+/**
+ * Start a new workflow or continue an existing one
+ * Endpoint: POST /api/chat/playground/start
+ * Query params: workflowId (optional), workflowMode (default: "Actionplan")
+ */
+export async function startWorkflowApi(
+  request: ApiRequestFunction,
+  workflowData: StartWorkflowRequest,
+  options?: { workflowId?: string; workflowMode?: 'Actionplan' | 'React' }
+): Promise<StartWorkflowResponse> {
+  const params: Record<string, string> = {};
+  if (options?.workflowId) {
+    params.workflowId = options.workflowId;
+  }
+  if (options?.workflowMode) {
+    params.workflowMode = options.workflowMode;
+  }
+  
+  const requestConfig = {
+    url: '/api/chat/playground/start',
+    method: 'post' as const,
+    data: workflowData,
+    params: Object.keys(params).length > 0 ? params : undefined
+  };
+  
+  console.log('📤 startWorkflow request:', requestConfig);
+  
+  const response = await request<StartWorkflowResponse>(requestConfig);
+  
+  console.log('📥 startWorkflow response:', response);
+  
+  return response;
+}
+
+/**
+ * Stop a running workflow
+ * Endpoint: POST /api/chat/playground/{workflowId}/stop
+ */
+export async function stopWorkflowApi(
+  request: ApiRequestFunction,
+  workflowId: string
+): Promise<void> {
+  await request({
+    url: `/api/chat/playground/${workflowId}/stop`,
+    method: 'post'
+  });
+}
+
+/**
+ * Update workflow properties
+ * Endpoint: PUT /api/workflows/{workflowId}
+ */
+export async function updateWorkflowApi(
+  request: ApiRequestFunction,
+  workflowId: string,
+  updateData: Partial<{ name: string; description?: string; tags?: string[] }>
+): Promise<Workflow> {
+  return await request<Workflow>({
+    url: `/api/workflows/${workflowId}`,
+    method: 'put',
+    data: updateData
+  });
+}
+
+/**
+ * Delete a workflow and all associated data
+ * Endpoint: DELETE /api/workflows/{workflowId}
+ */
+export async function deleteWorkflowApi(
+  request: ApiRequestFunction,
+  workflowId: string
+): Promise<void> {
+  await request({
+    url: `/api/workflows/${workflowId}`,
+    method: 'delete'
+  });
+}
+
+/**
+ * Delete multiple workflows
+ */
+export async function deleteWorkflowsApi(
+  request: ApiRequestFunction,
+  workflowIds: string[]
+): Promise<void> {
+  // Delete workflows one by one since there's no bulk delete endpoint
+  const deletePromises = workflowIds.map(workflowId =>
+    request({
+      url: `/api/workflows/${workflowId}`,
+      method: 'delete'
+    }).catch(error => {
+      console.error(`Failed to delete workflow ${workflowId}:`, error);
+      throw error;
+    })
+  );
+  
+  await Promise.all(deletePromises);
+}
+
+/**
+ * Delete a message from a workflow
+ * Endpoint: DELETE /api/workflows/{workflowId}/messages/{messageId}
+ */
+export async function deleteMessageApi(
+  request: ApiRequestFunction,
+  workflowId: string,
+  messageId: string
+): Promise<void> {
+  await request({
+    url: `/api/workflows/${workflowId}/messages/${messageId}`,
+    method: 'delete'
+  });
+}
+
+/**
+ * Delete a file reference from a message
+ * Endpoint: DELETE /api/workflows/{workflowId}/messages/{messageId}/files/{fileId}
+ */
+export async function deleteFileFromMessageApi(
+  request: ApiRequestFunction,
+  workflowId: string,
+  messageId: string,
+  fileId: string
+): Promise<void> {
+  await request({
+    url: `/api/workflows/${workflowId}/messages/${messageId}/files/${fileId}`,
+    method: 'delete'
+  });
+}
+
diff --git a/src/components/Connections/ConnectionEditModal.module.css b/src/components/Connections/ConnectionEditModal.module.css
deleted file mode 100644
index bef2cd8..0000000
--- a/src/components/Connections/ConnectionEditModal.module.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.editModal {
-  /* Custom styling for the edit modal */
-}
-
-.editForm {
-  /* Form-specific styling within the modal */
-  min-width: 400px;
-}
-
-/* Ensure proper spacing for form elements */
-.editForm :global(.fieldGroup) {
-  margin-bottom: 18px;
-}
-
-.editForm :global(.floatingLabelInput) {
-  margin-bottom: 18px;
-}
-
-/* Style the readonly fields to blend better with the modal */
-.editForm :global(.readonlyField) {
-  background-color: var(--color-bg);
-  opacity: 0.8;
-  font-style: italic;
-}
-
-/* Enhance button styling within the modal */
-.editForm :global(.buttonGroup) {
-  margin-top: 32px;
-  padding-top: 20px;
-  border-top: 1px solid var(--color-primary);
-}
-
-.editForm :global(.saveButton) {
-  background-color: var(--color-secondary);
-  min-width: 120px;
-}
-
-.editForm :global(.saveButton:hover) {
-  background-color: var(--color-secondary-hover);
-}
-
-.editForm :global(.cancelButton) {
-  min-width: 100px;
-}
-
-/* Responsive design */
-@media (max-width: 640px) {
-  .editForm {
-    min-width: 300px;
-  }
-  
-  .editForm :global(.buttonGroup) {
-    gap: 8px;
-  }
-  
-  .editForm :global(.saveButton),
-  .editForm :global(.cancelButton) {
-    flex: 1;
-    min-width: unset;
-  }
-} 
\ No newline at end of file
diff --git a/src/components/Connections/ConnectionEditModal.tsx b/src/components/Connections/ConnectionEditModal.tsx
deleted file mode 100644
index 3d4581d..0000000
--- a/src/components/Connections/ConnectionEditModal.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-import { Popup, EditForm } from '../ui/Popup';
-import styles from './ConnectionEditModal.module.css';
-import { ConnectionEditModalProps } from './connectionsInterfaces';
-import { useLanguage } from '../../contexts/LanguageContext';
-
-export function ConnectionEditModal({
-  isOpen,
-  connection,
-  fields,
-  onSave,
-  onCancel
-}: ConnectionEditModalProps) {
-  const { t } = useLanguage();
-  
-  if (!connection) {
-    return null;
-  }
-
-  const authorityName = connection.authority?.charAt(0).toUpperCase() + connection.authority?.slice(1);
-  
-  // Simplified approach for the title
-  const baseTitle = t('connections.edit_connection_title', `Edit {authority} Connection`);
-  const modalTitle = baseTitle.includes('{authority}') 
-    ? baseTitle.replace('{authority}', authorityName || '') 
-    : `Edit ${authorityName} Connection`;
-
-  return (
-    <Popup
-      isOpen={isOpen}
-      title={modalTitle}
-      onClose={onCancel}
-      size="medium"
-      className={styles.editModal}
-    >
-      <EditForm
-        data={connection}
-        fields={fields}
-        onSave={onSave}
-        onCancel={onCancel}
-        saveButtonText={t('connections.update_connection', 'Update Connection')}
-        cancelButtonText={t('common.cancel', 'Cancel')}
-        showButtons={true}
-        className={styles.editForm}
-      />
-    </Popup>
-  );
-}
-
-export default ConnectionEditModal; 
\ No newline at end of file
diff --git a/src/components/Connections/ConnectionsErrorDisplay.module.css b/src/components/Connections/ConnectionsErrorDisplay.module.css
deleted file mode 100644
index 0c0a15e..0000000
--- a/src/components/Connections/ConnectionsErrorDisplay.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.errorContainer {
-  margin-bottom: 20px;
-}
-
-.errorMessage {
-  color: var(--color-red, #ef4444);
-  padding: 12px 16px;
-  background-color: var(--color-red-hover, rgba(239, 68, 68, 0.1));
-  border: 1px solid var(--color-red, #ef4444);
-  border-radius: 25px;
-  margin-bottom: 12px;
-  font-size: 14px;
-  line-height: 1.4;
-}
-
-.errorMessage:last-child {
-  margin-bottom: 0;
-}
-
-.errorMessage strong {
-  font-weight: 600;
-  margin-right: 4px;
-}
-
-/* Animation for error appearance */
-.errorMessage {
-  animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Responsive design */
-@media (max-width: 480px) {
-  .errorMessage {
-    padding: 10px 14px;
-    font-size: 13px;
-  }
-} 
\ No newline at end of file
diff --git a/src/components/Connections/ConnectionsErrorDisplay.tsx b/src/components/Connections/ConnectionsErrorDisplay.tsx
deleted file mode 100644
index a4a006b..0000000
--- a/src/components/Connections/ConnectionsErrorDisplay.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-
-import styles from './ConnectionsErrorDisplay.module.css';
-import { ConnectionsErrorDisplayProps } from './connectionsInterfaces';
-import { useLanguage } from '../../contexts/LanguageContext';
-
-export function ConnectionsErrorDisplay({
-  error,
-  connectError,
-  disconnectError
-}: ConnectionsErrorDisplayProps) {
-  const { t } = useLanguage();
-  
-  // Don't render anything if no errors
-  if (!error && !connectError && !disconnectError) {
-    return null;
-  }
-
-  return (
-    <div className={styles.errorContainer}>
-      {error && (
-        <div className={styles.errorMessage}>
-          <strong>{t('connections.error', 'Error')}:</strong> {error}
-        </div>
-      )}
-
-      {connectError && (
-        <div className={styles.errorMessage}>
-          <strong>{t('connections.connection_error', 'Connection Error')}:</strong> {connectError}
-        </div>
-      )}
-
-      {disconnectError && (
-        <div className={styles.errorMessage}>
-          <strong>{t('connections.disconnect_error', 'Disconnect Error')}:</strong> {disconnectError}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default ConnectionsErrorDisplay; 
\ No newline at end of file
diff --git a/src/components/Connections/ConnectionsTable.module.css b/src/components/Connections/ConnectionsTable.module.css
deleted file mode 100644
index 22bd13b..0000000
--- a/src/components/Connections/ConnectionsTable.module.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.tableContainer {
-  width: 100%;
-  background: var(--color-bg);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.connectionsTable {
-  width: 100%;
-  border-radius: 8px;
-}
-
-/* Override FormGenerator styles for connections-specific styling */
-.connectionsTable :global(.table) {
-  background-color: var(--color-bg);
-  color: var(--color-text);
-}
-
-.connectionsTable :global(.th) {
-  background-color: var(--color-bg);
-  color: var(--color-text);
-  border-bottom: 2px solid var(--color-primary);
-}
-
-.connectionsTable :global(.td) {
-  background-color: var(--color-bg);
-  color: var(--color-text);
-  border-bottom: 1px solid var(--color-primary);
-}
-
-.connectionsTable :global(.tr:hover) {
-  background-color: var(--color-primary-hover);
-}
-
-/* Expired connection highlighting */
-.connectionsTable :global(.expired-connection) {
-  background-color: rgba(255, 193, 7, 0.1) !important;
-  color: #ff6b35 !important;
-  font-weight: 600;
-}
-
-.connectionsTable :global(.tr:hover .expired-connection) {
-  background-color: rgba(255, 193, 7, 0.2) !important;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .tableContainer {
-    border-radius: 4px;
-    margin: 0 -8px;
-  }
-}
-
-@media (max-width: 480px) {
-  .tableContainer {
-    margin: 0 -16px;
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
-  }
-} 
\ No newline at end of file
diff --git a/src/components/Connections/ConnectionsTable.tsx b/src/components/Connections/ConnectionsTable.tsx
deleted file mode 100644
index bec3dc3..0000000
--- a/src/components/Connections/ConnectionsTable.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// import React from 'react';
-import { FormGenerator } from '../FormGenerator';
-import styles from './ConnectionsTable.module.css';
-import { ConnectionsTableProps } from './connectionsInterfaces';
-import { useLanguage } from '../../contexts/LanguageContext';
-
-export function ConnectionsTable({
-  connections,
-  columns,
-  actions,
-  isLoading = false,
-  isConnecting = false,
-  isDisconnecting = false,
-  onRowSelect,
-  onDelete,
-  onDeleteMultiple
-}: ConnectionsTableProps) {
-  const { t } = useLanguage();
-  
-  const loading = isLoading || isConnecting || isDisconnecting;
-
-  return (
-    <div className={styles.tableContainer}>
-      <FormGenerator
-        data={connections}
-        columns={columns}
-        title={t('connections.service_connections', 'Service Connections')}
-        loading={loading}
-        searchable={true}
-        filterable={true}
-        sortable={true}
-        resizable={true}
-        pagination={true}
-        pageSize={10}
-        selectable={true}
-        onRowSelect={onRowSelect}
-        onDelete={onDelete}
-        onDeleteMultiple={onDeleteMultiple}
-        actionButtons={actions}
-        className={styles.connectionsTable}
-      />
-    </div>
-  );
-}
-
-export default ConnectionsTable; 
\ No newline at end of file
diff --git a/src/components/Connections/connectionsInterfaces.ts b/src/components/Connections/connectionsInterfaces.ts
deleted file mode 100644
index 131ea7c..0000000
--- a/src/components/Connections/connectionsInterfaces.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { ColumnConfig } from '../FormGenerator';
-import { EditFieldConfig } from '../ui/Popup';
-
-// Re-export connection-related interfaces from hooks
-export type { Connection, CreateConnectionData } from '../../hooks/useConnections';
-import type { Connection } from '../../hooks/useConnections';
-
-// Component Props Interfaces
-export interface ConnectionsTableProps {
-  connections: Connection[];
-  columns: ColumnConfig[];
-  actions: TableAction[];
-  isLoading?: boolean;
-  isConnecting?: boolean;
-  isDisconnecting?: boolean;
-  onRowSelect?: (selectedRows: Connection[]) => void;
-  onDelete?: (connection: Connection) => Promise<void>;
-  onDeleteMultiple?: (connections: Connection[]) => Promise<void>;
-}
-
-export interface ConnectionEditModalProps {
-  isOpen: boolean;
-  connection: Connection | null;
-  fields: EditFieldConfig[];
-  onSave: (updatedConnection: Connection) => Promise<void>;
-  onCancel: () => void;
-}
-
-export interface ConnectionsErrorDisplayProps {
-  error?: string | null;
-  connectError?: string | null;
-  disconnectError?: string | null;
-}
-
-// Table Action Interface
-export interface TableAction {
-  type: 'edit' | 'delete' | 'download' | 'view' | 'copy';
-  title?: string | ((connection: Connection) => string);
-  onAction?: (connection: Connection) => Promise<void> | void;
-  disabled?: (connection: Connection) => boolean | { disabled: boolean; message?: string };
-  loading?: (connection: Connection) => boolean;
-}
-
-// Connection Status Types
-export type ConnectionStatus = 'active' | 'pending' | 'expired' | 'revoked';
-export type ConnectionAuthority = 'local' | 'google' | 'msft';
-
-// Handler Function Types
-export interface ConnectionHandlers {
-  handleCreateConnection: (type: 'msft' | 'google') => Promise<void>;
-  handleConnect: (connection: Connection) => Promise<void>;
-  handleDisconnect: (connection: Connection) => Promise<void>;
-  handleDelete: (connection: Connection) => Promise<void>;
-  handleDeleteMultiple: (connections: Connection[]) => Promise<void>;
-  handleUpdateConnection: (connection: Connection) => Promise<void>;
-  handleEditConnection: (connection: Connection) => Promise<void>;
-  handleSaveConnection: (updatedConnection: Connection) => Promise<void>;
-  handleCancelEdit: () => void;
-}
-
-// Hook Return Types
-export interface ConnectionsLogicReturn extends ConnectionHandlers {
-  connections: Connection[];
-  isLoading: boolean;
-  isConnecting: boolean;
-  isDisconnecting: boolean;
-  error: string | null;
-  connectError: string | null;
-  disconnectError: string | null;
-  editPopupOpen: boolean;
-  editingConnection: Connection | null;
-  connectionColumns: ColumnConfig[];
-  connectionEditFields: EditFieldConfig[];
-  tableActions: TableAction[];
-} 
\ No newline at end of file
diff --git a/src/components/Connections/connectionsLogic.tsx b/src/components/Connections/connectionsLogic.tsx
deleted file mode 100644
index c170b98..0000000
--- a/src/components/Connections/connectionsLogic.tsx
+++ /dev/null
@@ -1,479 +0,0 @@
-import { useEffect, useState } from 'react';
-
-
-
-import { useConnections, useOAuthConnect, useDisconnect } from '../../hooks/useConnections';
-import { useLanguage } from '../../contexts/LanguageContext';
-import { ColumnConfig } from '../FormGenerator';
-import { EditFieldConfig } from '../ui/Popup';
-import { 
-  Connection, 
-  CreateConnectionData, 
-  ConnectionsLogicReturn,
-  TableAction 
-} from './connectionsInterfaces';
-
-export function useConnectionsLogic(): ConnectionsLogicReturn {
-  const { t } = useLanguage();
-  
-  // Hooks
-  const { 
-    connections, 
-    fetchConnections, 
-    createConnection, 
-    updateConnection,
-    deleteConnection,
-    refreshMicrosoftToken,
-    refreshGoogleToken,
-    isLoading, 
-    error 
-  } = useConnections();
-
-  const { 
-    connectWithPopup, 
-    isConnecting, 
-    error: connectError 
-  } = useOAuthConnect();
-
-  const { 
-    disconnect, 
-    isDisconnecting, 
-    error: disconnectError 
-  } = useDisconnect();
-
-  // Local state
-  const [editPopupOpen, setEditPopupOpen] = useState(false);
-  const [editingConnection, setEditingConnection] = useState<Connection | null>(null);
-
-  // Define field configuration for editing connections
-  const connectionEditFields: EditFieldConfig[] = [
-    {
-      key: 'authority',
-      label: t('connections.field.service', 'Service'),
-      type: 'readonly',
-      editable: false,
-      formatter: (value: string) => {
-        if (!value) return t('connections.unknown', 'Unknown');
-        const labels = {
-          'google': t('connections.service.google', 'Google'),
-          'msft': t('connections.service.microsoft', 'Microsoft'),
-          'local': t('connections.service.local', 'Local')
-        };
-        return labels[value as keyof typeof labels] || value;
-      }
-    },
-    {
-      key: 'status',
-      label: t('connections.field.status', 'Status'),
-      type: 'readonly',
-      editable: false,
-      formatter: (value: string) => value ? value.charAt(0).toUpperCase() + value.slice(1) : t('connections.unknown', 'Unknown')
-    },
-    {
-      key: 'externalUsername',
-      label: t('connections.field.external_username', 'External Username'),
-      type: 'string',
-      editable: true,
-      required: false,
-      placeholder: t('connections.placeholder.external_username', 'Enter external username')
-    },
-    {
-      key: 'externalEmail',
-      label: t('connections.field.external_email', 'External Email'),
-      type: 'email',
-      editable: true,
-      required: false,
-      placeholder: t('connections.placeholder.external_email', 'Enter external email address')
-    },
-    {
-      key: 'connectedAt',
-      label: t('connections.field.connected_at', 'Connected At'),
-      type: 'readonly',
-      editable: false,
-      formatter: (value: number) => {
-        if (!value) return t('connections.not_available', 'N/A');
-        try {
-          // Convert from seconds to milliseconds for Date constructor
-          const date = new Date(value * 1000);
-          const year = date.getFullYear();
-          const month = String(date.getMonth() + 1).padStart(2, '0');
-          const day = String(date.getDate()).padStart(2, '0');
-          const hours = String(date.getHours()).padStart(2, '0');
-          const minutes = String(date.getMinutes()).padStart(2, '0');
-          const seconds = String(date.getSeconds()).padStart(2, '0');
-          const timezoneOffset = date.getTimezoneOffset();
-          const offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
-          const offsetMinutes = Math.abs(timezoneOffset) % 60;
-          const offsetSign = timezoneOffset <= 0 ? '+' : '-';
-          const timezone = `GMT${offsetSign}${offsetHours}${offsetMinutes > 0 ? ':' + offsetMinutes.toString().padStart(2, '0') : ''}`;
-          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timezone}`;
-        } catch {
-          return t('connections.invalid_date', 'Invalid Date');
-        }
-      }
-    },
-    {
-      key: 'lastChecked',
-      label: t('connections.field.last_checked', 'Last Checked'),
-      type: 'readonly',
-      editable: false,
-      formatter: (value: number) => {
-        if (!value) return t('connections.not_available', 'N/A');
-        try {
-          // Convert from seconds to milliseconds for Date constructor
-          const date = new Date(value * 1000);
-          const year = date.getFullYear();
-          const month = String(date.getMonth() + 1).padStart(2, '0');
-          const day = String(date.getDate()).padStart(2, '0');
-          const hours = String(date.getHours()).padStart(2, '0');
-          const minutes = String(date.getMinutes()).padStart(2, '0');
-          const seconds = String(date.getSeconds()).padStart(2, '0');
-          const timezoneOffset = date.getTimezoneOffset();
-          const offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
-          const offsetMinutes = Math.abs(timezoneOffset) % 60;
-          const offsetSign = timezoneOffset <= 0 ? '+' : '-';
-          const timezone = `GMT${offsetSign}${offsetHours}${offsetMinutes > 0 ? ':' + offsetMinutes.toString().padStart(2, '0') : ''}`;
-          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timezone}`;
-        } catch {
-          return t('connections.invalid_date', 'Invalid Date');
-        }
-      }
-    }
-  ];
-
-  // Define custom columns for the connections table
-  const connectionColumns: ColumnConfig[] = [
-    {
-      key: 'authority',
-      label: t('connections.field.service', 'Service'),
-      type: 'enum',
-      filterOptions: ['google', 'msft', 'local'],
-      formatter: (value: string) => {
-        if (!value) return t('connections.unknown', 'Unknown');
-        const labels = {
-          'google': t('connections.service.google', 'Google'),
-          'msft': t('connections.service.microsoft', 'Microsoft'),
-          'local': t('connections.service.local', 'Local')
-        };
-        return labels[value as keyof typeof labels] || value;
-      },
-      width: 150,
-      sortable: true,
-      filterable: true
-    },
-    {
-      key: 'status',
-      label: t('connections.field.status', 'Status'),
-      type: 'enum',
-      filterOptions: ['active', 'pending', 'expired', 'revoked'],
-      formatter: (value: string) => {
-        const status = value?.charAt(0).toUpperCase() + value?.slice(1) || t('connections.unknown', 'Unknown');
-        return status;
-      },
-      width: 120,
-      sortable: true,
-      filterable: true,
-      cellClassName: (value: string) => {
-        return value === 'expired' ? 'expired-connection' : '';
-      }
-    },
-    {
-      key: 'externalUsername',
-      label: t('connections.field.external_username', 'External Username'),
-      type: 'string',
-      width: 200,
-      sortable: true,
-      filterable: false,
-      searchable: true
-    },
-    {
-      key: 'externalEmail',
-      label: t('connections.field.external_email', 'External Email'),
-      type: 'string',
-      width: 250,
-      sortable: true,
-      filterable: false,
-      searchable: true
-    },
-    {
-      key: 'connectedAt',
-      label: t('connections.field.connected_at', 'Connected At'),
-      type: 'date',
-      width: 150,
-      sortable: true,
-      filterable: false,
-      searchable: true,
-      formatter: (value: number) => {
-        if (!value) return t('connections.not_available', 'N/A');
-        try {
-          // Convert from seconds to milliseconds for Date constructor
-          const date = new Date(value * 1000);
-          const year = date.getFullYear();
-          const month = String(date.getMonth() + 1).padStart(2, '0');
-          const day = String(date.getDate()).padStart(2, '0');
-          const hours = String(date.getHours()).padStart(2, '0');
-          const minutes = String(date.getMinutes()).padStart(2, '0');
-          const seconds = String(date.getSeconds()).padStart(2, '0');
-          const timezoneOffset = date.getTimezoneOffset();
-          const offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
-          const offsetMinutes = Math.abs(timezoneOffset) % 60;
-          const offsetSign = timezoneOffset <= 0 ? '+' : '-';
-          const timezone = `GMT${offsetSign}${offsetHours}${offsetMinutes > 0 ? ':' + offsetMinutes.toString().padStart(2, '0') : ''}`;
-          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timezone}`;
-        } catch {
-          return t('connections.invalid_date', 'Invalid Date');
-        }
-      }
-    },
-    {
-      key: 'lastChecked',
-      label: t('connections.field.last_checked', 'Last Checked'),
-      type: 'date',
-      width: 150,
-      sortable: true,
-      filterable: true,
-      searchable: true,
-      formatter: (value: number) => {
-        if (!value) return t('connections.not_available', 'N/A');
-        try {
-          // Convert from seconds to milliseconds for Date constructor
-          const date = new Date(value * 1000);
-          const year = date.getFullYear();
-          const month = String(date.getMonth() + 1).padStart(2, '0');
-          const day = String(date.getDate()).padStart(2, '0');
-          const hours = String(date.getHours()).padStart(2, '0');
-          const minutes = String(date.getMinutes()).padStart(2, '0');
-          const seconds = String(date.getSeconds()).padStart(2, '0');
-          const timezoneOffset = date.getTimezoneOffset();
-          const offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
-          const offsetMinutes = Math.abs(timezoneOffset) % 60;
-          const offsetSign = timezoneOffset <= 0 ? '+' : '-';
-          const timezone = `GMT${offsetSign}${offsetHours}${offsetMinutes > 0 ? ':' + offsetMinutes.toString().padStart(2, '0') : ''}`;
-          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timezone}`;
-        } catch {
-          return t('connections.invalid_date', 'Invalid Date');
-        }
-      }
-    },
-    {
-      key: 'expiresAt',
-      label: t('connections.field.expires_at', 'Expires At'),
-      type: 'date',
-      width: 150,
-      sortable: true,
-      filterable: true,
-      formatter: (value: number) => {
-        if (!value) return t('connections.not_available', 'N/A');
-        try {
-          // Convert from seconds to milliseconds for Date constructor
-          const date = new Date(value * 1000);
-          const year = date.getFullYear();
-          const month = String(date.getMonth() + 1).padStart(2, '0');
-          const day = String(date.getDate()).padStart(2, '0');
-          const hours = String(date.getHours()).padStart(2, '0');
-          const minutes = String(date.getMinutes()).padStart(2, '0');
-          const seconds = String(date.getSeconds()).padStart(2, '0');
-          const timezoneOffset = date.getTimezoneOffset();
-          const offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
-          const offsetMinutes = Math.abs(timezoneOffset) % 60;
-          const offsetSign = timezoneOffset <= 0 ? '+' : '-';
-          const timezone = `GMT${offsetSign}${offsetHours}${offsetMinutes > 0 ? ':' + offsetMinutes.toString().padStart(2, '0') : ''}`;
-          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timezone}`;
-        } catch {
-          return t('connections.invalid_date', 'Invalid Date');
-        }
-      }
-    }
-  ];
-
-  // Fetch connections on mount and auto-connect them
-  useEffect(() => {
-    const initializeConnections = async () => {
-      try {
-        await fetchConnections();
-        // Auto-connect all connections that are not active
-        const connectionsToConnect = connections.filter(conn => 
-          conn.status !== 'active' && conn.authority !== 'local'
-        );
-        
-        for (const connection of connectionsToConnect) {
-          try {
-            await connectWithPopup(connection.id);
-          } catch (error) {
-            console.warn(`Failed to auto-connect ${connection.authority} connection:`, error);
-          }
-        }
-      } catch (error) {
-        console.error('Error initializing connections:', error);
-      }
-    };
-    
-    initializeConnections();
-  }, []);
-
-  // Handler functions
-
-  const handleConnect = async (connection: Connection) => {
-    console.log('Connecting to service:', connection);
-    try {
-      await connectWithPopup(connection.id);
-      await fetchConnections();
-    } catch (error) {
-      console.error('Error connecting to service:', error);
-    }
-  };
-
-  const handleCreateConnection = async (type: 'msft' | 'google') => {
-    console.log('Creating connection for type:', type);
-    try {
-      // Get current UTC timestamp in seconds (float) to match backend
-      const currentTimestamp = Math.floor(Date.now() / 1000);
-      
-      const connectionData: CreateConnectionData = {
-        type: type,
-        status: 'pending',
-        connectedAt: currentTimestamp,
-        lastChecked: currentTimestamp
-      };
-      
-      console.log('Sending connection data to backend:', connectionData);
-      const newConnection = await createConnection(connectionData);
-      console.log('Connection created successfully:', newConnection);
-      handleConnect(newConnection);
-      await fetchConnections();
-    } catch (error) {
-      console.error('Error creating connection:', error);
-    }
-  };
-
-
-
-  const handleDisconnect = async (connection: Connection) => {
-    console.log('Disconnecting from service:', connection);
-    try {
-      await disconnect(connection.id);
-      await fetchConnections();
-    } catch (error) {
-      console.error('Error disconnecting from service:', error);
-    }
-  };
-
-  const handleDelete = async (connection: Connection) => {
-    const serviceName = connection.authority?.charAt(0).toUpperCase() + connection.authority?.slice(1) || t('connections.unknown', 'Unknown');
-    const confirmMessage = t('connections.confirm_delete', 'Are you sure you want to delete the {service} connection?').replace('{service}', serviceName);
-    
-    if (window.confirm(confirmMessage)) {
-      try {
-        await deleteConnection(connection.id);
-        await fetchConnections();
-      } catch (error) {
-        console.error('Error deleting connection:', error);
-      }
-    }
-  };
-
-  const handleDeleteMultiple = async (connections: Connection[]) => {
-    const confirmMessage = t('connections.confirm_delete_multiple', 'Are you sure you want to delete {count} connections?').replace('{count}', connections.length.toString());
-    
-    if (window.confirm(confirmMessage)) {
-      try {
-        // Delete all connections in parallel
-        await Promise.all(connections.map(connection => deleteConnection(connection.id)));
-        await fetchConnections();
-      } catch (error) {
-        console.error('Error deleting multiple connections:', error);
-      }
-    }
-  };
-
-  const handleUpdateConnection = async (connection: Connection) => {
-    console.log('Updating connection:', connection);
-    try {
-      if (connection.status === 'expired') {
-        // Refresh token based on connection type
-        if (connection.authority === 'msft') {
-          await refreshMicrosoftToken(connection.id);
-        } else if (connection.authority === 'google') {
-          await refreshGoogleToken(connection.id);
-        }
-      } else if (connection.status !== 'active') {
-        // If not active and not expired, try to connect
-        await handleConnect(connection);
-      }
-      await fetchConnections();
-    } catch (error) {
-      console.error('Error updating connection:', error);
-    }
-  };
-
-  const handleEditConnection = async (connection: Connection) => {
-    console.log('Editing connection:', connection);
-    setEditingConnection(connection);
-    setEditPopupOpen(true);
-  };
-
-  const handleSaveConnection = async (updatedConnection: Connection) => {
-    if (!editingConnection) return;
-    
-    try {
-      const updateData = {
-        externalUsername: updatedConnection.externalUsername,
-        externalEmail: updatedConnection.externalEmail
-      };
-      
-      await updateConnection(editingConnection.id, updateData);
-      console.log('Connection updated successfully');
-      await fetchConnections();
-      setEditPopupOpen(false);
-      setEditingConnection(null);
-    } catch (error) {
-      console.error('Error updating connection:', error);
-    }
-  };
-
-  const handleCancelEdit = () => {
-    setEditPopupOpen(false);
-    setEditingConnection(null);
-  };
-
-  // Table actions 
-  const tableActions: TableAction[] = [
-    {
-      type: 'edit',
-      title: t('connections.action.edit', 'Edit'),
-      onAction: handleEditConnection
-    },
-    {
-      type: 'delete',
-      title: t('connections.action.delete', 'Delete')
-      // onAction is handled by FormGenerator for delete confirmation
-    }
-  ] as any;
-
-  return {
-    // Data
-    connections,
-    isLoading,
-    isConnecting,
-    isDisconnecting,
-    error,
-    connectError,
-    disconnectError,
-    editPopupOpen,
-    editingConnection,
-    connectionColumns,
-    connectionEditFields,
-    tableActions,
-    
-    // Handlers
-    handleCreateConnection,
-    handleConnect,
-    handleDisconnect,
-    handleDelete,
-    handleDeleteMultiple,
-    handleUpdateConnection,
-    handleEditConnection,
-    handleSaveConnection,
-    handleCancelEdit
-  };
-} 
\ No newline at end of file
diff --git a/src/components/Connections/index.ts b/src/components/Connections/index.ts
deleted file mode 100644
index 50ef52a..0000000
--- a/src/components/Connections/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Export all components
-export { ConnectionsTable } from './ConnectionsTable';
-export { ConnectionEditModal } from './ConnectionEditModal';
-export { ConnectionsErrorDisplay } from './ConnectionsErrorDisplay';
-
-// Export logic hook
-export { useConnectionsLogic } from './connectionsLogic';
-
-// Export all interfaces and types
-export * from './connectionsInterfaces'; 
\ No newline at end of file
diff --git a/src/components/Dashboard/DashboardChat/DashboardChat.tsx b/src/components/Dashboard/DashboardChat/DashboardChat.tsx
deleted file mode 100644
index 8f698f0..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChat.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import { DashboardChatProps } from "./dashboardChatAreaTypes";
-import DashboardChatArea from './DashboardChatArea.tsx';
-
-import styles from './DashboardChatAreaStyles/DashboardChat.module.css';
-
-const DashboardChat: React.FC<DashboardChatProps> = ({ 
-    workflowState,
-    workflowActions
-}) => {
-    return (
-        <div className={styles.dashboard_chat}>
-            <DashboardChatArea 
-                workflowState={workflowState}
-                workflowActions={workflowActions}
-            />
-        </div>
-    );
-};
-
-export default DashboardChat;
\ No newline at end of file
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatArea.tsx b/src/components/Dashboard/DashboardChat/DashboardChatArea.tsx
deleted file mode 100644
index 8be897c..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatArea.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState } from "react";
-import MessageList from "./DashboardChatAreaMessageList";
-
-import InputArea from "./DashboardChatAreaInput";
-import ConnectedFiles from "./DashboardChatAreaConnectedFiles";
-import { DashboardChatAreaProps } from "./dashboardChatAreaTypes";
-import styles from './DashboardChatAreaStyles/DashboardChat.module.css';
-
-const DashboardChatArea: React.FC<DashboardChatAreaProps> = ({ 
-  workflowState,
-  workflowActions
-}) => {
-  const [selectedFile, setSelectedFile] = useState<any>(null);
-  const [attachedFiles, setAttachedFiles] = useState<any[]>([]);
-
-  return (
-    <div className={styles.chat_grid}>
-      {/* Top Left: Message List */}
-      <div className={`${styles.quadrant} ${styles.messages_quadrant}`}>
-                <MessageList 
-          workflowState={workflowState}
-        />
-      </div>
-
-      {/*Top Right: File Preview (disabled for now)
-      <div className={`${styles.quadrant} ${styles.file_preview_quadrant}`}>
-        <FilePreview selectedFile={selectedFile} />
-      </div>
-      */}
-
-      {/* Bottom Left: Input Area */}
-      <div className={`${styles.quadrant} ${styles.input_quadrant}`}>
-        <InputArea
-          workflowState={workflowState}
-          workflowActions={workflowActions}
-          attachedFiles={attachedFiles}
-          onAttachedFilesChange={setAttachedFiles}
-        />
-      </div>
-
-      {/* Bottom Right: Connected Files */}
-      <div className={`${styles.quadrant} ${styles.connected_files_quadrant}`}>
-        <ConnectedFiles 
-          onFileSelect={setSelectedFile}
-          selectedFile={selectedFile}
-          attachedFiles={attachedFiles}
-          onRemoveFile={(fileId) => {
-            // If the removed file is currently selected, clear the selection
-            if (selectedFile?.id === fileId) {
-              setSelectedFile(null);
-            }
-            // Remove the file from attached files
-            setAttachedFiles(files => files.filter(f => f.id !== fileId));
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DashboardChatArea;
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaConnectedFiles.tsx b/src/components/Dashboard/DashboardChat/DashboardChatAreaConnectedFiles.tsx
deleted file mode 100644
index 48bbc65..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaConnectedFiles.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-
-import { ConnectedFilesProps } from './dashboardChatAreaTypes';
-import styles from './DashboardChatAreaStyles/DashboardChatConnectedFiles.module.css';
-import { IoIosAttach } from 'react-icons/io';
-
-const ConnectedFiles: React.FC<ConnectedFilesProps> = ({ 
-    onFileSelect, 
-    selectedFile,
-    attachedFiles = [],
-    onRemoveFile
-}) => {
-    const convertedFiles = attachedFiles.map(file => ({
-        id: file.id,
-        name: file.name,
-        mimeType: file.type,
-        size: file.size,
-        creationDate: new Date().toISOString(),
-        fileData: file.fileData,
-        objectUrl: file.objectUrl
-    }));
-
-
-    const formatFileSize = (bytes: number) => {
-        if (bytes < 1024) return bytes + ' B';
-        if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB';
-        return Math.round(bytes / (1024 * 1024)) + ' MB';
-    };
-
-    return (
-        <div className={styles.container}>
-            {attachedFiles.length > 0 && (
-                <div className={styles.attachedInfo}>
-                    <IoIosAttach className={styles.attachedInfoIcon}/> {attachedFiles.length} file{attachedFiles.length !== 1 ? 's' : ''} attached for workflow
-                </div>
-            )}
-            
-            {convertedFiles.length === 0 ? (
-                <p className={styles.emptyState}>
-                    No files connected to this workflow
-                </p>
-            ) : (
-                <div className={styles.filesList}>
-                    {convertedFiles.map((file) => (
-                        <div
-                            key={file.id}
-                            onClick={() => onFileSelect?.(file)}
-                            className={`${styles.fileItem} ${selectedFile?.id === file.id ? styles.selected : ''} ${styles.attached}`}
-                        >
-                            
-                            <div className={styles.fileInfo}>
-                                <div className={styles.fileName}>
-                                    {file.name}
-                                </div>
-                                <div className={styles.fileSize}>
-                                    {file.size ? formatFileSize(file.size) : 'Unknown size'}
-                                </div>
-                            </div>
-                            
-                            <div className={styles.fileActions}>
-                                {onRemoveFile && (
-                                    <button
-                                        onClick={(e) => {
-                                            e.stopPropagation();
-                                            onRemoveFile(file.id);
-                                        }}
-                                        className={styles.removeButton}
-                                        title="Remove from attachment"
-                                    >
-                                        ✕
-                                    </button>
-                                )}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default ConnectedFiles;
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaFilePreview.tsx b/src/components/Dashboard/DashboardChat/DashboardChatAreaFilePreview.tsx
deleted file mode 100644
index fd9bbb1..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaFilePreview.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import React from 'react';
-import { useFilePreview } from '../../../hooks/useWorkflows';
-import { FileInfo } from './dashboardChatAreaTypes';
-
-interface AttachedFileWithData extends FileInfo {
-    fileData?: File;
-    objectUrl?: string;
-}
-
-interface FilePreviewProps {
-    selectedFile?: AttachedFileWithData | null;
-}
-
-const FilePreview: React.FC<FilePreviewProps> = ({ selectedFile }) => {
-    const { previewContent, fileMetadata, isLoading, error, fetchPreview } = useFilePreview();
-    const [imageUrl, setImageUrl] = React.useState<string | null>(null);
-
-    // Handle base64 image data from backend
-    React.useEffect(() => {
-        if (fileMetadata && fileMetadata.base64Encoded && fileMetadata.preview) {
-            const isImage = fileMetadata.mimeType?.startsWith('image/') || 
-                           selectedFile?.name?.toLowerCase().match(/\.(png|jpg|jpeg|gif|bmp|webp)$/);
-            
-            if (isImage) {
-                
-                const dataUrl = `data:${fileMetadata.mimeType || 'image/png'};base64,${fileMetadata.preview}`;
-                setImageUrl(dataUrl);
-               
-            }
-        }
-    }, [fileMetadata, selectedFile]);
-
-    React.useEffect(() => {
-        // Clean up previous object URL
-        const currentImageUrl = imageUrl;
-        if (currentImageUrl && currentImageUrl.startsWith('blob:')) {
-            URL.revokeObjectURL(currentImageUrl);
-        }
-        setImageUrl(null);
-
-        if (selectedFile?.id) {
-            
-            // Check if it's an image file (either from mimeType or file extension)
-            const isImage = selectedFile.mimeType?.startsWith('image/') || 
-                           selectedFile.name?.toLowerCase().match(/\.(png|jpg|jpeg|gif|bmp|webp)$/);
-            
-            if (isImage) {
-                // If it's an attached file with file data, create object URL for preview
-                if (selectedFile.fileData) {
-                    const url = URL.createObjectURL(selectedFile.fileData);
-                    setImageUrl(url);
-                } else if (selectedFile.objectUrl) {
-                    setImageUrl(selectedFile.objectUrl);
-                } else if (selectedFile.downloadUrl) {
-                    setImageUrl(selectedFile.downloadUrl);
-                } else {
-                    // For existing uploaded files, fetch the image data
-                    fetchPreview(selectedFile.id);
-                }
-            } else {
-                // For non-image files, try to fetch preview
-                fetchPreview(selectedFile.id);
-            }
-        }
-
-        // Cleanup function
-        return () => {
-            if (currentImageUrl && currentImageUrl.startsWith('blob:')) {
-                URL.revokeObjectURL(currentImageUrl);
-            }
-        };
-    }, [selectedFile?.id, selectedFile?.fileData, selectedFile?.objectUrl]);
-
-    // Cleanup on unmount
-    React.useEffect(() => {
-        return () => {
-            if (imageUrl) {
-                URL.revokeObjectURL(imageUrl);
-            }
-        };
-    }, []);
-
-    const getFileType = (mimeType?: string) => {
-        if (!mimeType) return 'Unknown';
-        if (mimeType.startsWith('image/')) return 'Image';
-        if (mimeType.startsWith('text/')) return 'Text';
-        if (mimeType.includes('pdf')) return 'PDF';
-        if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return 'Spreadsheet';
-        return 'Document';
-    };
-
-    return (
-        <div style={{ padding: '16px', height: '100%', overflow: 'auto' }}>
-
-            
-            {!selectedFile && (
-                <p style={{ color: 'var(--color-gray)', textAlign: 'center' }}>
-                    Select a file to preview
-                </p>
-            )}
-
-            {selectedFile && (
-                <div>
-                    <div style={{ 
-                        padding: '12px', 
-                        backgroundColor: 'var(--color-surface)', 
-                        borderRadius: '8px',
-                        marginBottom: '16px'
-                    }}>
-                        <h4 style={{ margin: '0 0 8px 0' }}>{selectedFile.name}</h4>
-                        <div style={{ fontSize: '12px', color: 'var(--color-gray)' }}>
-                            Type: {getFileType(selectedFile.mimeType)} • 
-                            Size: {selectedFile.size ? Math.round(selectedFile.size / 1024) + ' KB' : 'Unknown'}
-                        </div>
-                    </div>
-
-                    {/* Image Preview - Show first for images */}
-                    {(selectedFile.mimeType?.startsWith('image/') || selectedFile.name?.toLowerCase().match(/\.(png|jpg|jpeg|gif|bmp|webp)$/)) && imageUrl ? (
-                        <div style={{ marginBottom: '16px' }}>
-                            <img 
-                                src={imageUrl} 
-                                alt={selectedFile.name}
-                                style={{ 
-                                    maxWidth: '100%', 
-                                    maxHeight: '500px', 
-                                    objectFit: 'contain',
-                                    borderRadius: '8px',
-                                    border: '1px solid var(--color-gray-disabled)',
-                                    display: 'block',
-                                    margin: '0 auto'
-                                }}
-                                onLoad={() => console.log('Image loaded successfully')}
-                                onError={(e) => {
-                                    console.error('Image failed to load:', e);
-                                    console.log('Image URL:', imageUrl);
-                                }}
-                            />
-                        </div>
-                    ) : (selectedFile.mimeType?.startsWith('image/') || selectedFile.name?.toLowerCase().match(/\.(png|jpg|jpeg|gif|bmp|webp)$/)) ? (
-                        <div style={{ 
-                            padding: '20px', 
-                            textAlign: 'center', 
-                            backgroundColor: 'var(--color-surface)',
-                            borderRadius: '8px',
-                            marginBottom: '16px'
-                        }}>
-                            <p>🖼️ Image preview loading...</p>
-                                                         <small style={{ color: 'var(--color-gray)' }}>
-                                 Debug: imageUrl={imageUrl ? 'yes' : 'no'}, downloadUrl={selectedFile.downloadUrl ? 'yes' : 'no'}, 
-                                 fileData={selectedFile.fileData ? 'yes' : 'no'}, objectUrl={selectedFile.objectUrl ? 'yes' : 'no'}
-                                 <br />
-                                 MimeType: {selectedFile.mimeType}
-                             </small>
-                        </div>
-                    ) : null}
-
-                    {/* Text/Code Preview - Only for non-images and when we don't have an image URL */}
-                    {!(selectedFile.mimeType?.startsWith('image/') || selectedFile.name?.toLowerCase().match(/\.(png|jpg|jpeg|gif|bmp|webp)$/)) && !imageUrl && (
-                        <>
-                            {isLoading && <p>Loading preview...</p>}
-                            {error && <p style={{ color: 'red' }}>Error: {error}</p>}
-                            
-                            {previewContent && (
-                                <div style={{ 
-                                    backgroundColor: 'var(--color-surface)',
-                                    padding: '16px',
-                                    borderRadius: '8px',
-                                    fontFamily: 'monospace',
-                                    fontSize: '12px',
-                                    lineHeight: '1.4',
-                                    whiteSpace: 'pre-wrap',
-                                    overflow: 'auto',
-                                    maxHeight: '400px'
-                                }}>
-                                    {previewContent}
-                                </div>
-                            )}
-
-                            {!previewContent && !isLoading && !error && (
-                                <p style={{ color: 'var(--color-gray)' }}>
-                                    Preview not available for this file type
-                                </p>
-                            )}
-                        </>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default FilePreview;
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaInput.tsx b/src/components/Dashboard/DashboardChat/DashboardChatAreaInput.tsx
deleted file mode 100644
index 70c6c1a..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaInput.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import FileAttachmentPopup from './FileAttachmentPopup';
-import { InputAreaProps, AttachedFile } from './dashboardChatAreaTypes';
-import { useLanguage } from '../../../contexts/LanguageContext';
-import { usePrompts } from '../../../hooks/usePrompts';
-
-import styles from './DashboardChatAreaStyles/DashboardChatAreaInput.module.css';
-import sharedStyles from './DashboardChatAreaStyles/DashboardChat.module.css';
-
-
-
-const InputArea: React.FC<InputAreaProps> = ({ 
-  workflowState,
-  workflowActions,
-  attachedFiles: externalAttachedFiles = [],
-  onAttachedFilesChange
-}) => {
-  const { t } = useLanguage();
-  const { prompts, loading: promptsLoading } = usePrompts();
-  const [inputValue, setInputValue] = useState('');
-  const [showFilePopup, setShowFilePopup] = useState(false);
-  const [isSending, setIsSending] = useState(false);
-  const [sendError, setSendError] = useState<string | null>(null);
-  const [isFocused, setIsFocused] = useState(false);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const dropZoneRef = useRef<HTMLDivElement>(null);
-
-  // Always use external attached files from parent component
-  const currentAttachedFiles = externalAttachedFiles;
-
-  // Auto-resize textarea function
-  const adjustTextareaHeight = () => {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-
-    // Reset height to auto to get the actual scroll height
-    textarea.style.height = 'auto';
-    
-    // Calculate the height based on content
-    const scrollHeight = textarea.scrollHeight;
-    const lineHeight = 1.5 * 14; // 1.5em * 14px font size
-    const padding = 32; // 16px top + 16px bottom padding
-    const minHeight = lineHeight * 4 + padding; // 4 rows
-    const maxHeight = lineHeight * 8 + padding; // 8 rows
-    
-    // Set height within constraints
-    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
-    textarea.style.height = `${newHeight}px`;
-  };
-
-  // Get the current selected prompt from workflow state
-  const currentSelectedPrompt = workflowState.selectedPrompt;
-
-  // Auto-fill input when prompt is selected
-  useEffect(() => {
-    if (currentSelectedPrompt) {
-      setInputValue(currentSelectedPrompt.content);
-    }
-  }, [currentSelectedPrompt]);
-
-  // Adjust height when input value changes
-  useEffect(() => {
-    adjustTextareaHeight();
-  }, [inputValue]);
-
-  // Initial resize on mount
-  useEffect(() => {
-    adjustTextareaHeight();
-  }, []);
-
-  const handleSend = async () => {
-    if (!inputValue.trim() || isSending) return;
-
-    setIsSending(true);
-    setSendError(null);
-
-    try {
-      const fileIds = currentAttachedFiles.map(f => f.id);
-      let success = false;
-
-      if (workflowState.currentWorkflowId) {
-        success = await workflowActions.continueWorkflow(inputValue, fileIds);
-      } else {
-        const newWorkflowId = await workflowActions.startNewWorkflow(inputValue, fileIds);
-        success = !!newWorkflowId;
-      }
-
-      if (success) {
-        setInputValue('');
-        if (onAttachedFilesChange) {
-          onAttachedFilesChange([]);
-        }
-        // Prompt was used
-      } else {
-        setSendError('Failed to send message. Please try again.');
-      }
-    } catch (error: any) {
-      console.error('Failed to send message:', error);
-      setSendError(error.message || 'Failed to send message. Please try again.');
-    } finally {
-      setIsSending(false);
-    }
-  };
-
-  const handleStop = async () => {
-    // Stop the workflow but keep it selected
-    await workflowActions.stopWorkflow();
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  const handleFilesAttached = (files: AttachedFile[]) => {
-    setShowFilePopup(false);
-    if (onAttachedFilesChange) {
-      onAttachedFilesChange(files);
-    }
-  };
-
-  const handlePromptSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const promptId = e.target.value;
-    if (promptId === '') {
-      workflowActions.clearPrompt();
-      setInputValue('');
-    } else {
-      const prompt = prompts.find(p => p.id === promptId);
-      if (prompt) {
-        workflowActions.selectPrompt(prompt);
-      }
-    }
-  };
-
-  const handleClearPrompt = () => {
-    workflowActions.clearPrompt();
-    setInputValue('');
-  };
-
-  // Drag and drop handlers
-  const handleDragEnter = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (e.dataTransfer.types.includes('Files')) {
-      setIsDragOver(true);
-    }
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // Only hide drag over if we're leaving the drop zone entirely
-    if (dropZoneRef.current && !dropZoneRef.current.contains(e.relatedTarget as Node)) {
-      setIsDragOver(false);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // Set the drop effect to copy
-    e.dataTransfer.dropEffect = 'copy';
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragOver(false);
-
-    if (shouldShowStopButton) {
-      // Don't allow file drops when workflow is active
-      return;
-    }
-
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length > 0) {
-      // Convert File objects to AttachedFile format
-      const attachedFiles: AttachedFile[] = files.map((file, index) => ({
-        id: (Date.now() + index).toString(), // Simple ID generation
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        fileData: file,
-        objectUrl: URL.createObjectURL(file)
-      }));
-
-      // Add to existing attached files
-      const updatedFiles = [...currentAttachedFiles, ...attachedFiles];
-      if (onAttachedFilesChange) {
-        onAttachedFilesChange(updatedFiles);
-      }
-    }
-  };
-
-
-
-  // Check if workflow is in an active state where we should show stop button
-  const isWorkflowActive = workflowState.workflow && 
-    ['running', 'processing', 'started'].includes(workflowState.workflow.status);
-  
-  const shouldShowStopButton = !!isWorkflowActive;
-
-
-
-  // Determine if label should be in focused/moved state
-  const shouldLabelBeFocused = isFocused || inputValue.trim().length > 0;
-
-  // Get placeholder text
-  const placeholderText = workflowState.currentWorkflowId 
-    ? t('chat.input.continue_workflow')
-    : t('chat.input.enter_message');
-
-  return (
-    <div 
-      ref={dropZoneRef}
-      className={`${styles.input_area_container} ${isDragOver ? styles.drag_over : ''}`}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
-    >
-      
-      {/* Error messages */}
-      {(sendError || workflowState.error) && (
-        <div className={styles.error_message}>
-          {t('chat.input.error_prefix')} {sendError || workflowState.error}
-        </div>
-      )}
-
-      {/* Drag and drop overlay */}
-      {isDragOver && (
-        <div className={`${styles.drag_overlay} ${shouldShowStopButton ? styles.disabled : ''}`}>
-          <div className={styles.drag_overlay_content}>
-            <div className={styles.drag_icon}>
-              {shouldShowStopButton ? '🚫' : '📁'}
-            </div>
-            <div className={styles.drag_text}>
-              {shouldShowStopButton 
-                ? t('chat.input.drop_disabled') 
-                : t('chat.input.drop_files_here')
-              }
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Prompt selection dropdown */}
-      <div className={styles.prompt_selection_container}>
-        <div className={styles.prompt_dropdown_wrapper}>
-          <select
-            value={currentSelectedPrompt?.id || ''}
-            onChange={handlePromptSelect}
-            disabled={isSending || shouldShowStopButton || promptsLoading}
-            className={styles.prompt_dropdown}
-          >
-            <option value="">{promptsLoading ? t('chat.input.loading_prompts') : t('chat.input.select_prompt')}</option>
-            {prompts && Array.isArray(prompts) && prompts.map(prompt => (
-              <option key={prompt.id} value={prompt.id}>
-                {prompt.name}
-              </option>
-            ))}
-          </select>
-          {currentSelectedPrompt && (
-            <button
-              onClick={handleClearPrompt}
-              disabled={isSending || shouldShowStopButton}
-              className={styles.clear_prompt_button}
-              title={t('chat.input.clear_prompt')}
-            >
-              ✕
-            </button>
-          )}
-        </div>
-      </div>
-
-      <div className={styles.input_form_container}>
-        <div className={styles.floating_label_textarea}>
-          <label 
-            className={shouldLabelBeFocused ? styles.textarea_label_focused : styles.textarea_label}
-          >
-            {placeholderText}
-          </label>
-          <textarea
-            ref={textareaRef}
-            value={inputValue}
-            onChange={(e) => {
-              setInputValue(e.target.value);
-              setTimeout(adjustTextareaHeight, 0);
-            }}
-            onKeyPress={handleKeyPress}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            placeholder=""
-            disabled={isSending || shouldShowStopButton}
-            className={`${styles.message_textarea} ${
-              !isFocused && inputValue.trim().length > 0 ? styles.message_textarea_with_content : ''
-            }`}
-            rows={4}
-          />
-        </div>
-        
-        <div className={styles.input_actions_row}>
-          <button
-            onClick={() => setShowFilePopup(true)}
-            disabled={isSending || shouldShowStopButton}
-            className={`${sharedStyles.button_secondary} ${
-              (isSending || shouldShowStopButton) ? styles.disabled : ''
-            }`}
-          >
-            {t('chat.input.attach_files')}
-          </button>
-          
-          {shouldShowStopButton ? (
-            <button
-              onClick={handleStop}
-              disabled={isSending}
-              className={`${sharedStyles.button_primary} ${
-                isSending ? styles.disabled : styles.enabled
-              }`}
-            >
-              {isSending ? t('chat.input.stopping') : t('chat.input.stop')}
-            </button>
-          ) : (
-            <button
-              onClick={handleSend}
-              disabled={!inputValue.trim() || isSending}
-              className={`${sharedStyles.button_primary} ${
-                (!inputValue.trim() || isSending) 
-                  ? styles.disabled 
-                  : styles.enabled
-              }`}
-            >
-              {isSending ? t('chat.input.sending') : 
-               workflowState.currentWorkflowId ? t('chat.input.continue') : t('chat.input.send')}
-            </button>
-          )}
-          
-          {workflowState.currentWorkflowId && !shouldShowStopButton && (
-            <button
-              onClick={() => workflowActions.clearWorkflow()}
-              className={sharedStyles.button_primary}
-            >
-              {t('chat.input.new_chat')}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* File Attachment Popup */}
-      {showFilePopup && (
-        <FileAttachmentPopup
-          onClose={() => setShowFilePopup(false)}
-          onFilesSelected={handleFilesAttached}
-          currentAttachedFiles={currentAttachedFiles}
-        />
-      )}
-    </div>
-  );
-};
-
-export default InputArea;
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaLogItem.tsx b/src/components/Dashboard/DashboardChat/DashboardChatAreaLogItem.tsx
deleted file mode 100644
index 4a4213c..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaLogItem.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from "react";
-import { WorkflowLog } from "./dashboardChatAreaTypes";
-import messageStyles from './DashboardChatAreaStyles/DashboardChatMessages.module.css';
-
-interface LogItemProps {
-    log: WorkflowLog;
-    index: number;
-}
-
-const LogItem: React.FC<LogItemProps> = ({ log }) => {
-
-
-    // Format timestamp with robust parsing (same logic as MessageList)
-    const formatTimestamp = (timestamp: any) => {
-
-        
-        if (!timestamp) {
-
-            return 'No timestamp';
-        }
-        
-        // Handle different timestamp formats (same as safeParseDate)
-        let dateToTry = timestamp;
-        
-        // If it's a number, check if it's in seconds or milliseconds
-        if (typeof timestamp === 'number') {
-            // If it's a 10-digit number, it's likely seconds since epoch
-            if (timestamp < 10000000000) {
-                dateToTry = timestamp * 1000; // Convert seconds to milliseconds
-            } else {
-                dateToTry = timestamp; // Already in milliseconds
-            }
-        }
-        // If it's a string that looks like a number, parse it and handle seconds/milliseconds
-        else if (typeof timestamp === 'string' && /^\d+$/.test(timestamp)) {
-            const numericTimestamp = parseInt(timestamp);
-            // If it's a 10-digit number, it's likely seconds since epoch
-            if (numericTimestamp < 10000000000) {
-                dateToTry = numericTimestamp * 1000; // Convert seconds to milliseconds
-            } else {
-                dateToTry = numericTimestamp; // Already in milliseconds
-            }
-        }
-        // If it's already a Date object
-        else if (timestamp instanceof Date) {
-            dateToTry = timestamp;
-        }
-        
-        const date = new Date(dateToTry);
-        
-        // Check if the date is valid
-        if (isNaN(date.getTime())) {
-            console.warn(`⚠️ LogItem: Invalid timestamp detected:`, { 
-                originalTimestamp: timestamp, 
-                type: typeof timestamp, 
-                processedTimestamp: dateToTry 
-            });
-            return `Invalid: ${timestamp}`;
-        }
-        
-
-        
-        const now = new Date();
-        const isToday = date.toDateString() === now.toDateString();
-        
-        let formatted = '';
-        if (isToday) {
-            formatted = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-        } else {
-            formatted = date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + 
-                       date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-        }
-        
-        return formatted;
-    };
-
-    // Determine log level for styling
-    const logLevel = log.level || (log.type?.toLowerCase() as 'info' | 'warning' | 'error' | 'debug') || 'info';
-
-    // Debug: Log what the LogItem is receiving
-
-
-    return (
-        <div className={`${messageStyles.log_container} ${messageStyles[logLevel]}`}>
-            <div className={messageStyles.log_header}>
-                <span className={`${messageStyles.log_level} ${messageStyles[logLevel]}`}>
-                    {logLevel.toUpperCase()}
-                </span>
-                <span className={messageStyles.log_timestamp}>
-                    {formatTimestamp(log.timestamp)}
-                </span>
-            </div>
-            
-            <div className={messageStyles.log_message}>
-                {log.message}
-            </div>
-            
-            {log.source && (
-                <div className={messageStyles.log_source}>
-                    Source: {log.source}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default LogItem;
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaMessageItem.tsx b/src/components/Dashboard/DashboardChat/DashboardChatAreaMessageItem.tsx
deleted file mode 100644
index d1c1118..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaMessageItem.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { useState } from "react";
-import { Message, Document } from "./dashboardChatAreaTypes";
-import messageStyles from './DashboardChatAreaStyles/DashboardChatMessages.module.css';
-import { FilePreview } from '../../FilePreview';
-
-
-
-interface MessageItemProps {
-    message: Message;
-    index: number;
-}
-
-const formatFileSize = (bytes?: number) => {
-    if (!bytes) return '';
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
-};
-
-
-const MessageItem: React.FC<MessageItemProps> = ({ message }) => {
-    const [previewModalOpen, setPreviewModalOpen] = useState<boolean>(false);
-    const [previewingFile, setPreviewingFile] = useState<Document | null>(null);
-
-    const handlePreview = (doc: Document) => {
-        console.log('👁️ Opening preview for document:', doc);
-        
-        // Extract the UUID file ID from the downloadUrl (same as files page)
-        let actualFileId: string | null = null;
-        
-        if (doc.downloadUrl) {
-            // Extract UUID from the downloadUrl: /api/workflows/files/{UUID}/download
-            const match = doc.downloadUrl.match(/\/api\/workflows\/files\/([^\/]+)\/download/);
-            if (match) {
-                actualFileId = match[1];
-                console.log(`🔗 Extracted UUID from downloadUrl: ${actualFileId}`);
-            } else {
-                console.error('Could not extract file ID from downloadUrl:', doc.downloadUrl);
-                alert('Could not extract file ID from download URL');
-                return;
-            }
-        } else if (doc.id) {
-            // Fallback to using the document id directly
-            actualFileId = doc.id;
-            console.log(`🔗 Using document id as fileId: ${actualFileId}`);
-        } else {
-            console.error('No downloadUrl or id available in document');
-            alert('No file ID available for preview');
-            return;
-        }
-
-        if (!actualFileId) {
-            console.error('Could not determine actual file ID');
-            alert('Could not determine file ID for preview');
-            return;
-        }
-
-        // Create a modified document with the correct file ID
-        const documentWithFileId = {
-            ...doc,
-            id: actualFileId
-        };
-        
-        setPreviewingFile(documentWithFileId);
-        setPreviewModalOpen(true);
-    };
-
-    const handleClosePreview = () => {
-        console.log('❌ Closing preview');
-        setPreviewModalOpen(false);
-        setPreviewingFile(null);
-    };
-
-    const handleDocumentClick = (doc: Document) => {
-        console.log('📋 Document clicked, opening preview:', doc);
-        handlePreview(doc);
-    };
-
-
-
-    const hasDocuments = message.documents && message.documents.length > 0;
-
-    const formatTimestamp = (ts?: string) => {
-        if (!ts) return '';
-        const date = new Date(ts);
-        if (isNaN(date.getTime())) return '';
-        
-        const now = new Date();
-        const isToday = date.toDateString() === now.toDateString();
-        
-        return isToday 
-            ? date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-            : date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + 
-              date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    };
-
-    const isUser = message.role === 'user';
-    
-    return (
-        <>
-            <div className={`${messageStyles.message_item} ${isUser ? messageStyles.user : messageStyles.assistant}`}>
-                <div className={messageStyles.message_header}>
-                    {isUser ? 'You' : message.agentName}
-                    {message.timestamp && (
-                        <span className={messageStyles.message_timestamp_inline}>
-                            • {formatTimestamp(message.timestamp)}
-                        </span>
-                    )}
-                </div>
-                
-                <div className={`${messageStyles.message_bubble} ${isUser ? messageStyles.user : messageStyles.assistant}`}>
-                    <div className={messageStyles.message_content}>
-                        {message.content || <span className={messageStyles.message_no_content}>[No message content]</span>}
-                    </div>
-                    
-                    {hasDocuments && (
-                        <div className={`${messageStyles.message_documents} ${isUser ? messageStyles.user : messageStyles.assistant}`}>
-                            <div className={`${messageStyles.message_documents_header} ${isUser ? messageStyles.user : messageStyles.assistant}`}>
-                                {isUser ? 'Uploaded' : 'Attached'} Files ({message.documents?.length || 0})
-                            </div>
-                            <div>
-                            {message.documents!.map((doc, i) => {
-                                return (
-                                <div
-                                    key={doc.id || i}
-                                    className={messageStyles.message_document_item}
-                                    onClick={() => handleDocumentClick(doc)}
-                                    title={`Click to preview ${doc.name}`}
-                                    style={{ 
-                                        cursor: 'pointer'
-                                    }}
-                                >
-                                        <div className={messageStyles.message_document_info}>
-                                            <div className={messageStyles.message_document_name}>
-                                                {doc.ext ? `${doc.name}.${doc.ext}` : doc.name}
-                                            </div>
-                                            {doc.size && (
-                                                <div className={messageStyles.message_document_size}>
-                                                    {formatFileSize(doc.size)}
-                                                </div>
-                                            )}
-                                        </div>
-                                        <div className={messageStyles.message_document_actions}>
-                                            {/* Preview and Download buttons disabled for now
-                                            <button
-                                                onClick={(e) => handlePreview(doc, e)}
-                                                className={messageStyles.message_document_action_button}
-                                                title="Preview file"
-                                            >
-                                                <div className={messageStyles.message_document_action_icon}>
-                                                    <FaEye size={16} />
-                                                </div>
-                                            </button>
-                                            <button
-                                                onClick={(e) => handleDownload(doc, e)}
-                                                disabled={isDownloading}
-                                                className={messageStyles.message_document_action_button}
-                                                title="Download file"
-                                            >
-                                                <div className={messageStyles.message_document_action_icon}>
-                                                    <FaDownload size={16} />
-                                                </div>
-                                            </button>
-                                            */}
-                                        </div>
-                                    </div>
-                                    );
-                                })}
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </div>
-
-            {/* File Preview Modal */}
-            {previewingFile && (
-                <FilePreview
-                    isOpen={previewModalOpen}
-                    onClose={handleClosePreview}
-                    fileId={previewingFile.id || ''}
-                    fileName={previewingFile.ext ? `${previewingFile.name}.${previewingFile.ext}` : previewingFile.name}
-                    mimeType={previewingFile.type}
-                />
-            )}
-        </>
-    );
-};
-
-export default MessageItem; 
\ No newline at end of file
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaMessageList.tsx b/src/components/Dashboard/DashboardChat/DashboardChatAreaMessageList.tsx
deleted file mode 100644
index cf1261e..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaMessageList.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import React from 'react';
-import { MessageListProps } from './dashboardChatAreaTypes';
-import { useApiRequest } from '../../../hooks/useApi';
-import MessageItem from './DashboardChatAreaMessageItem';
-import LogItem from './DashboardChatAreaLogItem';
-import { mergeMessagesAndLogs, transformWorkflowMessage } from './dashboardChatAreaProgressBar';
-import messageStyles from './DashboardChatAreaStyles/DashboardChatMessages.module.css';
-import { IoIosArrowDown, IoIosChatbubbles } from 'react-icons/io';
-import { useLanguage } from '../../../contexts/LanguageContext';
-
-const MessageList: React.FC<MessageListProps> = ({ workflowState }) => {
-  const { t } = useLanguage();
-  const { request } = useApiRequest();
-  const [messages, setMessages] = React.useState<any[]>([]);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const scrollRef = React.useRef<HTMLDivElement>(null);
-  const [isScrolledUp, setIsScrolledUp] = React.useState(false);
-  const lastCountRef = React.useRef(0);
-  const [showProgress, setShowProgress] = React.useState(false);
-  const [progressText, setProgressText] = React.useState('');
-  const [progressPercent, setProgressPercent] = React.useState(0);
-  const [maxTasks, setMaxTasks] = React.useState(0);
-
-  React.useEffect(() => {
-    const pending = workflowState.pendingMessages || [];
-    const logs = workflowState.logs || [];
-    
-    if ((pending.length > 0 || logs.length > 0) && !showProgress) {
-      setShowProgress(true);
-      setProgressPercent(0);
-      setMaxTasks(0);
-    }
-    
-    if (logs.length === 0 && pending.length > 0) {
-      setProgressText(t('chat.messages.loading_progress'));
-      return;
-    }
-    
-    if (logs.length > 0) {
-      let total = 0;
-      let completed = 0;
-      
-      logs.forEach(log => {
-        const msg = log.message || '';
-        const startMatch = msg.match(/Executing task (\d+)\/(\d+)/i);
-        if (startMatch) total = Math.max(total, parseInt(startMatch[2]));
-        
-        const completeMatch = msg.match(/✅.*Task (\d+).*completed/i);
-        if (completeMatch) completed = Math.max(completed, parseInt(completeMatch[1]));
-      });
-      
-      if (total > 0) {
-        const percent = Math.round((completed / total) * 100);
-        setProgressText(`${completed}/${total} ${t('chat.messages.tasks')} (${percent}%)`);
-        
-        if (completed > maxTasks) {
-          setMaxTasks(completed);
-          setProgressPercent(percent);
-        }
-      } else {
-        setProgressText(`${t('chat.messages.analyzing_workflow')} (${logs.length} ${t('chat.messages.logs')})`);
-      }
-    }
-  }, [workflowState.pendingMessages, workflowState.logs, showProgress, maxTasks, t]);
-
-  React.useEffect(() => {
-    if (!workflowState.currentWorkflowId) {
-      setShowProgress(false);
-      setProgressText('');
-      setProgressPercent(0);
-      setMaxTasks(0);
-    }
-  }, [workflowState.currentWorkflowId]);
-
-  const timeline = React.useMemo(() => {
-    return mergeMessagesAndLogs(messages, workflowState.logs || []);
-  }, [messages, workflowState.logs]);
-
-  React.useEffect(() => {
-    const transform = async () => {
-      const pending = workflowState.pendingMessages || [];
-      const backend = workflowState.messages || [];
-      const all = [...pending, ...backend];
-      
-      if (all.length === 0) {
-        setMessages([]);
-        return;
-      }
-
-      setIsLoading(true);
-      try {
-        const transformed = await Promise.all(all.map(msg => transformWorkflowMessage(msg, request)));
-        setMessages(transformed);
-      } catch (error) {
-        console.error('❌ Message transformation failed:', error);
-        setMessages([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    transform();
-  }, [workflowState.messages, workflowState.pendingMessages, request]);
-
-  const checkScroll = React.useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const { scrollTop, scrollHeight, clientHeight } = el;
-    setIsScrolledUp(scrollHeight - scrollTop - clientHeight > 100);
-  }, []);
-
-  const scrollToBottom = React.useCallback(() => {
-    const el = scrollRef.current;
-    if (el) el.scrollTop = el.scrollHeight;
-  }, []);
-
-  React.useEffect(() => {
-    const count = timeline.length;
-    if (count > lastCountRef.current && !isScrolledUp) {
-      setTimeout(scrollToBottom, 100);
-    }
-    lastCountRef.current = count;
-  }, [timeline.length, isScrolledUp, scrollToBottom]);
-
-  const { currentWorkflowId, isLoading: workflowLoading, error } = workflowState;
-  const isEmpty = timeline.length === 0 && !workflowLoading && !isLoading && !currentWorkflowId;
-
-  return (
-    <div className={messageStyles.message_list_container}>
-      <div 
-        ref={scrollRef}
-        className={isEmpty ? messageStyles.chat_messages_empty : messageStyles.chat_messages}
-        onScroll={checkScroll}
-      >
-        {error && <div className={messageStyles.message_error}>Error: {error}</div>}
-
-        <div className={messageStyles.messages_container}>
-          {timeline.map((item, index) => {
-            if (item.type === 'message') {
-              return (
-                <MessageItem 
-                  key={`message-${item.item.id}`}
-                  message={item.item}
-                  index={index}
-                />
-              );
-            } else if (item.type === 'log') {
-              return (
-                <LogItem 
-                  key={`log-${item.item.id}`}
-                  log={item.item}
-                  index={index}
-                />
-              );
-            }
-            return null;
-          })}
-        </div>
-
-        {isEmpty && (
-          <div className={messageStyles.message_empty_state}>
-            <div className={messageStyles.message_empty_state_icon}>
-              <IoIosChatbubbles />
-            </div>
-            <h3>{t('chat.messages.no_workflow_selected')}</h3>
-            <p>{t('chat.messages.no_workflow_selected_description')}</p>
-          </div>
-        )}
-      </div>
-      
-      {showProgress && (
-        <div className={messageStyles.workflow_progress_container}>
-          <div className={messageStyles.workflow_progress_label}>
-            <span>{t('chat.messages.workflow_progress')}</span>
-            <span>{progressText}</span>
-          </div>
-          <div className={messageStyles.workflow_progress_bar}>
-            <div 
-              className={messageStyles.workflow_progress_fill}
-              style={{ width: `${progressPercent}%` }}
-            />
-          </div>
-        </div>
-      )}
-      
-      <button
-        className={`${messageStyles.scroll_to_bottom_btn} ${
-          (isScrolledUp && timeline.length > 0) ? messageStyles.visible : messageStyles.hidden
-        }`}
-        onClick={scrollToBottom}
-        title={t('chat.messages.scroll_to_bottom_btn')}
-      >
-        <IoIosArrowDown className={messageStyles.scroll_to_bottom_btn_icon} />
-      </button>
-    </div>
-  );
-};
-
-export default MessageList;
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChat.module.css b/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChat.module.css
deleted file mode 100644
index 9308f2b..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChat.module.css
+++ /dev/null
@@ -1,233 +0,0 @@
-.dashboard_chat {
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-    background: var(--color-bg);
-    position: relative;
-    height: 100%;
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-    font-family: var(--font-family);
-}
-
-/* Grid Layout */
-.chat_grid {
-    display: grid;
-    width: 100%;
-    height: 100%;
-    grid-template-rows: 1fr auto;
-    grid-template-columns: 2fr 1fr;
-    gap: 0px;
-    overflow: hidden;
-    box-sizing: border-box;
-    position: relative;
-}
-
-.quadrant {
-    overflow: hidden;
-    background-color: var(--color-bg);
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    min-width: 0;
-    box-sizing: border-box;
-}
-
-
-/* Quadrant specific styles */
-.messages_quadrant {
-    grid-row: 1;
-    grid-column: 1;
-}
-
-.file_preview_quadrant {
-    grid-row: 1;
-    grid-column: 2;
-}
-
-.input_quadrant {
-    grid-row: 2;
-    grid-column: 1;
-}
-
-.connected_files_quadrant {
-    grid-row: 2;
-    grid-column: 2;
-    max-height: 200px; /* Fixed height for the connected files area */
-    overflow: hidden; /* Ensure no overflow at quadrant level */
-}
-
-/* Chat Messages styles moved to DashboardChatMessages.module.css */
-
-/* Chat Input */
-.chat_input {
-    width: 100%;
-    height: 40px;
-    padding: 6px 10px;
-    border: 1px solid var(--color-primary);
-    border-radius: 25px;
-    font-size: 14px;
-    font-family: var(--font-family);
-    background: var(--color-bg);
-    color: var(--color-text);
-    opacity: 0.6;
-    min-width: 120px;
-    transition: all 0.2s ease;
-    box-sizing: border-box;
-}
-
-.chat_input.drag_over {
-    background-color: var(--color-secondary-disabled);
-    border: 2px dashed var(--color-secondary);
-    border-radius: 12px;
-    padding: 8px;
-}
-
-.input_row {
-    display: flex;
-    gap: 10px;
-    align-items: flex-end;
-    width: 100%;
-}
-
-.message_input {
-    flex: 1;
-    padding: 12px 16px;
-    border: 1px solid var(--color-gray-disabled);
-    border-radius: 12px;
-    outline: none;
-    font-size: 14px;
-    font-family: var(--font-family);
-    background-color: var(--color-bg);
-    color: var(--color-text);
-}
-
-.message_input:focus {
-    border-color: var(--color-secondary);
-}
-
-.message_input:disabled {
-    background-color: var(--color-surface);
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.button_secondary {
-    border: 2px dashed var(--color-secondary);
-    border-radius: 30px;
-    padding: 10px 20px;
-    background: var(--color-bg);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    min-width: 100px;
-    text-align: center;
-    font-family: var(--font-family);
-    color: var(--color-secondary);
-}
-
-.button_secondary:hover {
-    background-color: var(--color-secondary);
-    color: var(--color-bg);
-}
-
-.button_secondary:disabled {
-    background-color: var(--color-bg);
-    cursor: not-allowed;
-    opacity: 0.6;
-    color: var(--color-secondary);
-}
-
-.button_primary {
-    border-radius: 30px;
-    border: 1px solid var(--color-secondary);
-    background: var(--color-secondary);
-    color: var(--color-bg);
-    border: none;
-    outline: none;
-    padding: 10px 20px;
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-shrink: 0;
-    transition: background-color 0.2s ease;
-    font-family: var(--font-family);
-    cursor: pointer;
-    min-width: 100px;
-    align-items: center;
-    justify-content: center;
-}
-
-.button_primary:hover {
-    background-color: var(--color-secondary-hover);
-}
-
-.button_primary:disabled {
-    background-color: var(--color-secondary-disabled);
-    border: 1px solid var(--color-secondary-disabled);
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-
-/* Attached Files */
-.attached_files {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    width: 100%;
-    margin-bottom: 5px;
-}
-
-.attached_file {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 8px;
-    background-color: var(--color-secondary-disabled);
-    border: 1px solid var(--color-secondary);
-    border-radius: 8px;
-    font-size: 12px;
-    color: var(--color-secondary);
-    font-family: var(--font-family);
-}
-
-.attached_file_icon {
-    font-size: 16px;
-}
-
-.attached_file_name {
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.attached_file_remove {
-    background: none;
-    border: none;
-    color: var(--color-gray);
-    cursor: pointer;
-    padding: 0;
-    margin-left: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-.attached_file_remove:hover {
-    background-color: var(--color-gray-disabled);
-    color: var(--color-text);
-}
-
-/* Input Area styles moved to DashboardChatAreaInput.module.css */
-
-
-
-
-
-
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatAreaInput.module.css b/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatAreaInput.module.css
deleted file mode 100644
index 80ad33b..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatAreaInput.module.css
+++ /dev/null
@@ -1,259 +0,0 @@
-/* Input Area Specific Styles */
-.input_area_container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    box-sizing: border-box;
-    padding: 16px 16px 16px 0;
-    min-height: fit-content;
-}
-
-.workflow_status {
-    margin-bottom: 12px;
-    padding: 8px;
-    background-color: var(--color-surface);
-    border-radius: 4px;
-    font-size: 12px;
-    color: var(--color-gray);
-}
-
-.error_message {
-    padding: 8px;
-    background-color: var(--color-error, #ffe6e6);
-    color: var(--color-error-text, #d00);
-    border-radius: 4px;
-    margin-bottom: 12px;
-}
-
-/* Prompt Selection Styles */
-.prompt_selection_container {
-    margin-bottom: 12px;
-}
-
-.prompt_dropdown_wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.prompt_dropdown {
-    flex: 1;
-    padding: 10px 16px;
-    padding-right: 40px; /* Space for the dropdown arrow */
-    border: 1px solid var(--color-primary);
-    border-radius: 25px;
-    font-size: 14px;
-    font-family: var(--font-family);
-    background: var(--color-bg);
-    color: var(--color-text);
-    opacity: 0.8;
-    transition: border-color 0.2s ease, opacity 0.2s ease;
-    cursor: pointer;
-    appearance: none; /* Remove default dropdown arrow */
-    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 7l3 3 3-3'/></svg>");    background-repeat: no-repeat;
-    background-position: right 16px center; /* Position the custom arrow */
-    background-size: 12px;
-}
-
-.prompt_dropdown:focus {
-    outline: none;
-    border-color: var(--color-secondary);
-    opacity: 1;
-}
-
-.prompt_dropdown:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.clear_prompt_button {
-    width: 32px;
-    height: 32px;
-    border: 1px solid var(--color-primary);
-    border-radius: 50%;
-    background: var(--color-bg);
-    color: var(--color-text);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    transition: all 0.2s ease;
-}
-
-.clear_prompt_button:hover {
-    background: var(--color-bg);
-    color: var(--color-secondary);
-    border: 1px solid var(--color-secondary);
-}
-
-.clear_prompt_button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.attached_files_count {
-    margin-bottom: 8px;
-    padding: 6px 10px;
-    background-color: var(--color-secondary-disabled);
-    border-radius: 25px;
-    font-size: 12px;
-    color: var(--color-bg);
-    text-align: center;
-}
-
-.input_form_container {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.floating_label_textarea {
-    position: relative;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.textarea_label {
-    position: absolute;
-    left: 16px;
-    top: 16px;
-    color: var(--color-text);
-    opacity: 0.6;
-    font-size: 14px;
-    pointer-events: none;
-    transition: all 0.3s ease;
-    background-color: transparent;
-    font-family: var(--font-family);
-    z-index: 1;
-}
-
-.textarea_label_focused {
-    position: absolute;
-    left: 12px;
-    top: -8px;
-    transform: translateY(0);
-    color: var(--color-secondary);
-    font-size: 12px;
-    pointer-events: none;
-    transition: all 0.3s ease;
-    background-color: var(--color-bg);
-    padding: 0 4px;
-    font-family: var(--font-family);
-    font-weight: 500;
-    z-index: 2;
-}
-
-.message_textarea {
-    resize: none;
-    width: 100%;
-    min-height: calc(1.5em * 4 + 32px); /* 4 rows + padding */
-    max-height: calc(1.5em * 8 + 32px); /* 8 rows + padding */
-    height: calc(1.5em * 4 + 32px); /* Start with 4 rows */
-
-    padding:16px;
-    border: 1px solid var(--color-primary);
-    border-radius: 25px;
-    font-size: 14px;
-    font-family: var(--font-family);
-    background: var(--color-bg);
-    color: var(--color-text);
-    opacity: 0.6;
-    transition: border-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
-    box-sizing: border-box;
-    line-height: 1.5;
-    overflow-y: auto;
-}
-
-.message_textarea:focus {
-    outline: none;
-    border-color: var(--color-secondary);
-    opacity: 1;
-    box-shadow: 0 0 0 2px rgba(var(--color-secondary), 0.1);
-}
-
-.message_textarea::placeholder {
-    color: transparent;
-}
-
-.message_textarea:disabled {
-    opacity: 0.6;
-}
-
-.message_textarea_with_content {
-    opacity: 0.9;
-    border-color: var(--color-secondary);
-    background: var(--color-bg);
-}
-
-.input_actions_row {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-
-.new_chat_button {
-    padding: 8px 12px;
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-gray-disabled);
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 12px;
-    color: var(--color-gray);
-}
-
-
-/* Drag and Drop Styles */
-.input_area_container {
-    position: relative;
-}
-
-.drag_over {
-    border: 2px dashed var(--color-primary);
-    background-color: rgba(var(--color-primary-rgb), 0.05);
-    border-radius: 8px;
-}
-
-.drag_overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(var(--color-primary-rgb), 0.1);
-    backdrop-filter: blur(2px);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    border: 2px dashed var(--color-primary);
-}
-
-.drag_overlay_content {
-    text-align: center;
-    color: var(--color-primary);
-    font-weight: 500;
-}
-
-.drag_icon {
-    font-size: 48px;
-    margin-bottom: 12px;
-}
-
-.drag_text {
-    font-size: 16px;
-    font-weight: 500;
-}
-
-.drag_overlay.disabled {
-    background-color: rgba(255, 0, 0, 0.1);
-    border-color: #ff6b6b;
-}
-
-.drag_overlay.disabled .drag_overlay_content {
-    color: #ff6b6b;
-}
\ No newline at end of file
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatConnectedFiles.module.css b/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatConnectedFiles.module.css
deleted file mode 100644
index 99273e3..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatConnectedFiles.module.css
+++ /dev/null
@@ -1,119 +0,0 @@
-.container {
-  padding: 16px;
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-}
-
-.attachedInfo {
-  margin-bottom: 12px;
-  padding: 8px 15px;
-  background-color: var(--color-secondary);
-  border-radius: 25px;
-  font-size: 14px;
-  color: var(--color-bg);
-  font-weight: 500;
-  flex-shrink: 0;
-  font-family: var(--font-family);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.attachedInfoIcon {
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-.emptyState {
-  color: var(--color-gray);
-  text-align: center;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.filesList {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-}
-
-.fileItem {
-  font-family: var(--font-family);
-  font-weight: 500;
-  padding: 10px 15px;
-  border: 1px solid var(--color-primary);
-  border-radius: 25px;
-  cursor: pointer;
-  background-color: var(--color-bg);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: var(--color-text);
-}
-
-.fileInfo {
-  flex: 1;
-  min-width: 0;
-  color: var(--color-text);
-}
-
-.fileName {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--font-family);
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.fileSize {
-  font-size: 12px;
-  color: var(--color-text);
-}
-
-.fileActions {
-  display: flex;
-  gap: 4px;
-}
-
-.removeButton {
-  padding: 4px 8px;
-  font-size: 12px;
-  background-color: transparent;
-  border: 1px solid var(--color-secondary);
-  border-radius: 15px;
-  cursor: pointer;
-  color: var(--color-secondary);
-  transition: all 0.3s ease;
-}
-
-.removeButton:hover {
-  padding: 4px 8px;
-  font-size: 12px;
-  background-color: var(--color-secondary);
-  border: 1px solid var(--color-secondary);
-  border-radius: 15px;
-  cursor: pointer;
-  color: white;
-}
-
-.downloadButton {
-  padding: 4px 8px;
-  font-size: 12px;
-  background-color: transparent;
-  border: 1px solid var(--color-gray-disabled);
-  border-radius: 4px;
-  cursor: pointer;
-}
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatMessages.module.css b/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatMessages.module.css
deleted file mode 100644
index 36c2eb3..0000000
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaStyles/DashboardChatMessages.module.css
+++ /dev/null
@@ -1,550 +0,0 @@
-/* Message-specific styles for DashboardChat components */
-
-/* Message List Container - wraps the entire message list and positions scroll button */
-.message_list_container {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-/* Chat Messages Scrollable Area */
-.chat_messages {
-    flex: 1;
-    padding: 15px;
-    border-radius: 15px;
-    margin-bottom: 15px;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scroll-behavior: smooth;
-}
-
-.chat_messages_empty {
-    flex: 1;
-    padding: 15px;
-    border-radius: 15px;
-    margin-bottom: 15px;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scroll-behavior: smooth;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.message_empty_state_icon {
-    font-size: 90px;
-    color: var(--color-primary);
-}
-
-.message_empty_state h3 {
-    font-family: var(--font-family);
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: var(--color-text);
-}
-
-.message_empty_state p {
-    font-family: var(--font-family);
-    font-size: 1rem;
-    font-weight: 400;
-    color: var(--color-text);
-}
-
-.chat_messages::-webkit-scrollbar {
-    width: 6px;
-}
-
-.chat_messages::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.chat_messages::-webkit-scrollbar-thumb {
-    background: var(--color-gray-disabled);
-    border-radius: 3px;
-}
-
-.chat_messages::-webkit-scrollbar-thumb:hover {
-    background: var(--color-gray);
-}
-
-/* Messages Container */
-.messages_container {
-    min-height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    padding: 8px;
-    gap: 16px;
-}
-
-.messages_spacer {
-    flex: 1;
-    min-height: 20px;
-}
-
-/* Message Item Styles - Modern Chat Layout */
-.message_item {
-    display: flex;
-    flex-direction: column;
-    max-width: 80%;
-    min-width: 0%;
-    margin-bottom: 4px;
-    position: relative;
-}
-
-/* Responsive design for smaller screens */
-@media (max-width: 768px) {
-    .message_item {
-        max-width: 85%;
-        min-width: 150px;
-    }
-}
-
-@media (max-width: 480px) {
-    .message_item {
-        max-width: 95%;
-        min-width: 120px;
-    }
-}
-
-/* User messages - right aligned */
-.message_item.user {
-    align-self: flex-end;
-    align-items: flex-end;
-}
-
-/* Assistant messages - left aligned */
-.message_item.assistant {
-    align-self: flex-start;
-    align-items: flex-start;
-}
-
-.message_header {
-    font-size: 11px;
-    color: var(--color-gray);
-    margin-bottom: 4px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.message_bubble {
-    padding: 12px 16px;
-    border-radius: 25px;
-    position: relative;
-    word-wrap: break-word;
-    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
-    width: 100%;
-}
-
-/* User message bubble */
-.message_bubble.user {
-    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
-    color: white;
-    border-bottom-right-radius: 4px;
-}
-
-/* Assistant message bubble */
-.message_bubble.assistant {
-    background-color: var(--color-highlight-gray);
-    color: #181818;
-    border-bottom-left-radius: 4px;
-}
-
-.message_content {
-    line-height: 1.4;
-    white-space: pre-wrap;
-    font-size: 14px;
-}
-
-.message_timestamp {
-    font-size: 10px;
-    color: var(--color-gray);
-    margin-top: 4px;
-    opacity: 0.7;
-}
-
-.message_timestamp_inline {
-    font-size: 10px;
-    color: var(--color-gray);
-    opacity: 0.8;
-    font-weight: 400;
-    text-transform: none;
-    letter-spacing: normal;
-}
-
-.message_no_content {
-    color: var(--color-gray);
-    font-style: italic;
-}
-
-/* Document/File Attachments in Messages */
-.message_documents {
-    margin-top: 8px;
-    padding: 8px;
-    background-color: color-mix(in srgb, var(--color-primary), transparent 80%);
-    border-radius: 15px;
-    border: 1px solid var(--color-primary);
-    width: 100%;
-    box-sizing: border-box;
-}
-
-
-
-
-
-.message_documents_header {
-    font-size: 12px;
-    color: var(--color-gray);
-    margin-bottom: 8px;
-    font-weight: 500;
-}
-
-/* Document header styling for user messages */
-.message_documents_header.user {
-    color: rgba(255, 255, 255, 0.8);
-}
-
-/* Document header styling for assistant messages */
-.message_documents_header.assistant {
-    color: var(--color-gray);
-}
-
-.message_document_item {
-    display: flex;
-    align-items: center;
-    gap: 9px;
-    padding: 6px;
-    border-radius: 4px;
-    background-color: var(--color-highlight-gray);
-    margin-bottom: 4px;
-    cursor: pointer;
-    color: var(--color-text);
-}
-
-
-
-.message_document_info {
-    flex: 1;
-    min-width: 0;
-}
-
-.message_document_name {
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--color-gray);
-}
-
-.message_document_size {
-    font-size: 12px;
-    color: var(--color-gray);
-}
-
-.message_document_actions {
-    display: flex;
-    gap: 9px;
-}
-
-
-
-.message_document_action_button {
-
-    width: 33px;
-    height: 32px;
-    font-size: 12px;
-    background-color: var(--color-secondary);
-    border: 1px solid var(--color-secondary);
-    border-radius: 25px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.message_document_action_icon {
-    font-size: 16px;
-    color: white;
-}
-
-.message_document_action:hover {
-    background-color: var(--color-gray-disabled);
-}
-
-.message_document_action:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-/* Scroll to Bottom Button */
-.scroll_to_bottom_btn {
-    position: absolute;
-    bottom: 80px;
-    right: 20px;
-    background-color: var(--color-secondary);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 48px;
-    height: 48px;
-    font-size: 20px;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-    z-index: 100;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.2s ease-in-out;
-}
-
-.scroll_to_bottom_btn:hover {
-    transform: scale(1.1);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-
-.scroll_to_bottom_btn:active {
-    transform: scale(0.95);
-}
-
-.scroll_to_bottom_btn.hidden {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-}
-
-.scroll_to_bottom_btn.visible {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-}
-
-/* Loading and Error States */
-.message_loading {
-    text-align: center;
-    padding: 16px;
-    color: var(--color-gray);
-}
-
-.message_error {
-    padding: 8px;
-    background-color: var(--color-error);
-    color: white;
-    border-radius: 4px;
-    margin-bottom: 16px;
-}
-
-.message_empty_state {
-    color: var(--color-gray);
-    text-align: center;
-    justify-content: center;
-    padding: 16px;
-}
-
-/* Workflow Status Display */
-.workflow_status {
-    padding: 8px;
-    background-color: var(--color-surface);
-    border-radius: 4px;
-    margin-bottom: 16px;
-}
-
-.workflow_status_title {
-    font-weight: bold;
-}
-
-.workflow_status_polling {
-    margin-left: 8px;
-    font-size: 12px;
-    color: var(--color-secondary);
-    opacity: 0.7;
-}
-
-/* Animation for polling indicator */
-@keyframes pulse {
-    0%, 100% { opacity: 0.7; }
-    50% { opacity: 1; }
-}
-
-.polling_indicator {
-    animation: pulse 2s infinite;
-}
-
-
-
-@keyframes shimmer {
-    0% { left: -100%; }
-    100% { left: 100%; }
-}
-
-@keyframes loadingSlide {
-    0% { transform: translateX(-100%); }
-    50% { transform: translateX(0%); }
-    100% { transform: translateX(100%); }
-}
-
-.workflow_progress_container {
-    flex-shrink: 0;
-    padding: 12px 16px;
-    border-top: 1px solid var(--color-primary);
-    border-bottom: 1px solid var(--color-primary);
-    margin-top: auto;
-    margin-right: 15px;
-}
-
-.workflow_progress_label {
-    font-family: var(--font-family);
-    font-size: 12px;
-    color: var(--color-text);
-    margin-bottom: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 600;
-}
-
-.workflow_progress_breakdown {
-    font-size: 10px;
-    color: var(--color-gray);
-    margin-bottom: 6px;
-    text-align: center;
-    opacity: 0.8;
-}
-
-.workflow_progress_bar {
-    width: 100%;
-    height: 8px;
-    background-color: var(--color-gray-disabled);
-    border-radius: 4px;
-    overflow: hidden;
-    position: relative;
-}
-
-.workflow_progress_fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
-    border-radius: 4px;
-    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-}
-
-.workflow_progress_fill.loading {
-    width: 100% !important;
-    background: linear-gradient(90deg, transparent, var(--color-gray-disabled), transparent);
-    animation: loadingSlide 2s infinite;
-}
-
-/* Enhanced shimmer animation for workflow progress */
-.workflow_progress_fill::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-    animation: shimmer 3s infinite;
-}
-
-/* Hide shimmer during loading state */
-.workflow_progress_fill.loading::after {
-    display: none;
-}
-
-/* Workflow Log Messages */
-.log_container {
-    margin-top: 8px;
-    padding: 20px;
-    border-radius: 25px;
-    font-size: 12px;
-    font-family: 'Courier New', monospace;
-    border-left: 3px solid;
-    border: 1px solid var(--color-gray-disabled);
-    background-color: var(--color-bg);
-}
-
-.log_header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 4px;
-    font-weight: 600;
-}
-
-.log_level {
-    text-transform: uppercase;
-    font-size: 10px;
-    padding: 2px 6px;
-    border-radius: 3px;
-    color: white;
-}
-
-.log_level.info {
-    background-color: var(--color-gray);
-}
-
-.log_level.success {
-    background-color: var(--color-secondary);
-}
-
-.log_level.warning {
-    background-color: var(--color-primary);
-}
-
-.log_level.error {
-    background-color: var(--color-red);
-}
-
-.log_level.debug {
-    background-color: var(--color-gray);
-}
-
-.log_timestamp {
-    font-size: 10px;
-    color: var(--color-gray);
-    opacity: 0.8;
-}
-
-.log_message {
-    line-height: 1.4;
-    color: var(--color-text);
-    white-space: pre-wrap;
-}
-
-.log_source {
-    font-size: 10px;
-    color: var(--color-gray);
-    margin-top: 4px;
-    opacity: 0.7;
-}
-
-.log_progress {
-    margin-top: 4px;
-    font-size: 10px;
-    color: var(--color-secondary);
-    font-weight: 500;
-}
-
-/* Log details (expandable) */
-.log_details {
-    margin-top: 6px;
-    padding: 6px;
-    background-color: rgba(0, 0, 0, 0.03);
-    border-radius: 4px;
-    font-size: 11px;
-    color: var(--color-gray);
-    overflow-x: auto;
-}
-
-.log_details pre {
-    margin: 0;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
diff --git a/src/components/Dashboard/DashboardChat/FileAttachmentPopup.tsx b/src/components/Dashboard/DashboardChat/FileAttachmentPopup.tsx
deleted file mode 100644
index 0e7cf24..0000000
--- a/src/components/Dashboard/DashboardChat/FileAttachmentPopup.tsx
+++ /dev/null
@@ -1,501 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { useUserFiles, UserFile } from '../../../hooks/useFiles';
-
-interface AttachedFile {
-    id: string;
-    name: string;
-    size: number;
-    type: string;
-    fileData?: File;
-    objectUrl?: string;
-}
-
-interface FileAttachmentPopupProps {
-    onClose: () => void;
-    onFilesSelected: (files: AttachedFile[]) => void;
-    currentAttachedFiles: AttachedFile[];
-}
-
-const FileAttachmentPopup: React.FC<FileAttachmentPopupProps> = ({
-    onClose,
-    onFilesSelected,
-    currentAttachedFiles
-}) => {
-    const [selectedFiles, setSelectedFiles] = useState<AttachedFile[]>(currentAttachedFiles);
-    const [dragOver, setDragOver] = useState(false);
-    const [uploading, setUploading] = useState(false);
-    const [activeTab, setActiveTab] = useState<'upload' | 'existing'>('upload');
-    const [fileSubTab, setFileSubTab] = useState<'all' | 'uploads' | 'created' | 'shared'>('all');
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    
-    const { data: existingFiles, loading: filesLoading } = useUserFiles();
-
-    const handleDragEnter = (e: React.DragEvent) => {
-        e.preventDefault();
-        setDragOver(true);
-    };
-
-    const handleDragLeave = (e: React.DragEvent) => {
-        e.preventDefault();
-        setDragOver(false);
-    };
-
-    const handleDragOver = (e: React.DragEvent) => {
-        e.preventDefault();
-    };
-
-    const handleDrop = (e: React.DragEvent) => {
-        e.preventDefault();
-        setDragOver(false);
-        
-        const files = Array.from(e.dataTransfer.files);
-        handleFileUpload(files);
-    };
-
-    const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const files = e.target.files ? Array.from(e.target.files) : [];
-        handleFileUpload(files);
-    };
-
-    const handleFileUpload = async (files: File[]) => {
-        setUploading(true);
-        
-        // Create file objects with data for preview
-        const uploadedFiles: AttachedFile[] = files.map((file, index) => {
-            const fileObj: AttachedFile = {
-                id: (Date.now() + index).toString(),
-                name: file.name,
-                size: file.size,
-                type: file.type,
-                fileData: file
-            };
-
-            // Create object URL for images
-            if (file.type.startsWith('image/')) {
-                fileObj.objectUrl = URL.createObjectURL(file);
-                console.log('FileAttachmentPopup: Created object URL for', file.name, ':', fileObj.objectUrl);
-            }
-
-            console.log('FileAttachmentPopup: Created file object:', fileObj.name, 'Has fileData:', !!fileObj.fileData, 'Has objectUrl:', !!fileObj.objectUrl);
-            return fileObj;
-        });
-
-        // Add to selected files
-        setSelectedFiles(prev => [...prev, ...uploadedFiles]);
-        setUploading(false);
-    };
-
-    const toggleFileSelection = (file: UserFile) => {
-        const attachedFile: AttachedFile = {
-            id: file.id,
-            name: file.file_name,
-            size: file.size || 0,
-            type: 'application/octet-stream'
-        };
-
-        setSelectedFiles(prev => {
-            const isSelected = prev.some(f => f.id === file.id);
-            if (isSelected) {
-                return prev.filter(f => f.id !== file.id);
-            } else {
-                return [...prev, attachedFile];
-            }
-        });
-    };
-
-
-
-    const handleConfirm = () => {
-        onFilesSelected(selectedFiles);
-    };
-
-    // Cleanup object URLs when component unmounts
-    React.useEffect(() => {
-        return () => {
-            selectedFiles.forEach(file => {
-                if (file.objectUrl) {
-                    URL.revokeObjectURL(file.objectUrl);
-                }
-            });
-        };
-    }, []);
-
-    const formatFileSize = (bytes: number): string => {
-        if (bytes < 1024) return bytes + ' B';
-        if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB';
-        return Math.round(bytes / (1024 * 1024)) + ' MB';
-    };
-
-    // Simplified selectable files list
-    const SelectableFilesList: React.FC<{
-        files: UserFile[];
-        selectedFiles: AttachedFile[];
-        onFileSelect: (file: UserFile) => void;
-        activeTab: string;
-    }> = ({ files, selectedFiles, onFileSelect, activeTab }) => {
-        // Filter files based on active tab
-        const filteredFiles = files.filter(file => {
-            switch (activeTab) {
-                case 'uploads':
-                    return file.source === 'user_uploaded';
-                case 'created':
-                    return file.source === 'agent_created';
-                case 'shared':
-                    return file.source === 'shared_with_me';
-                default:
-                    return true;
-            }
-        });
-
-        const isFileSelected = (fileId: string) => {
-            return selectedFiles.some(f => f.id === fileId);
-        };
-
-        const getFileIcon = (fileName: string) => {
-            const extension = fileName.split('.').pop()?.toLowerCase();
-            switch (extension) {
-                case 'pdf': return '📄';
-                case 'doc': case 'docx': return '📝';
-                case 'xls': case 'xlsx': return '📊';
-                case 'jpg': case 'jpeg': case 'png': case 'gif': return '🖼️';
-                case 'mp4': case 'avi': return '🎥';
-                case 'txt': return '📄';
-                default: return '📎';
-            }
-        };
-
-        if (filteredFiles.length === 0) {
-            return (
-                <div style={{ textAlign: 'center', padding: '40px', color: '#666' }}>
-                    No files found in this category
-                </div>
-            );
-        }
-
-        return (
-            <div>
-                {/* Header */}
-                <div style={{
-                    display: 'grid',
-                    gridTemplateColumns: '40px 1fr 80px 100px 80px',
-                    padding: '12px',
-                    fontWeight: '500',
-                    borderBottom: '1px solid #eee',
-                    backgroundColor: '#f8f9fa',
-                    fontSize: '12px'
-                }}>
-                    <div></div>
-                    <div>Name</div>
-                    <div>Type</div>
-                    <div>Size</div>
-                    <div>Date</div>
-                </div>
-
-                {/* File List */}
-                <div>
-                    {filteredFiles.map(file => (
-                        <div
-                            key={file.id}
-                            onClick={() => onFileSelect(file)}
-                            style={{
-                                display: 'grid',
-                                gridTemplateColumns: '40px 1fr 80px 100px 80px',
-                                padding: '12px',
-                                borderBottom: '1px solid #f0f0f0',
-                                cursor: 'pointer',
-                                backgroundColor: isFileSelected(file.id) ? '#e3f2fd' : 'white',
-                                border: isFileSelected(file.id) ? '1px solid var(--color-secondary)' : '1px solid transparent',
-                                transition: 'all 0.2s ease'
-                            }}
-                            onMouseEnter={(e) => {
-                                if (!isFileSelected(file.id)) {
-                                    e.currentTarget.style.backgroundColor = '#f8f9fa';
-                                }
-                            }}
-                            onMouseLeave={(e) => {
-                                if (!isFileSelected(file.id)) {
-                                    e.currentTarget.style.backgroundColor = 'white';
-                                }
-                            }}
-                        >
-                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                                <input
-                                    type="checkbox"
-                                    checked={isFileSelected(file.id)}
-                                    onChange={() => {}}
-                                    style={{ margin: 0 }}
-                                />
-                            </div>
-                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                                <span style={{ fontSize: '16px' }}>{getFileIcon(file.file_name)}</span>
-                                <span style={{ fontSize: '14px', fontWeight: '500' }}>{file.file_name}</span>
-                            </div>
-                            <div style={{ fontSize: '12px', color: '#666' }}>{file.action}</div>
-                            <div style={{ fontSize: '12px', color: '#666' }}>
-                                {file.size ? formatFileSize(file.size) : 'Unknown'}
-                            </div>
-                            <div style={{ fontSize: '12px', color: '#666' }}>
-                                {new Date(file.created_at).toLocaleDateString()}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        );
-    };
-
-    return (
-        <div style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: 1000
-        }}>
-            <div style={{
-                backgroundColor: 'white',
-                borderRadius: '12px',
-                width: '600px',
-                maxHeight: '80vh',
-                overflow: 'hidden',
-                boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)'
-            }}>
-                {/* Header */}
-                <div style={{
-                    padding: '20px',
-                    borderBottom: '1px solid #eee',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center'
-                }}>
-                    <h3 style={{ margin: 0 }}>Attach Files</h3>
-                    <button 
-                        onClick={onClose}
-                        style={{
-                            background: 'none',
-                            border: 'none',
-                            fontSize: '18px',
-                            cursor: 'pointer'
-                        }}
-                    >
-                        ✕
-                    </button>
-                </div>
-
-                {/* Tabs */}
-                <div style={{
-                    display: 'flex',
-                    borderBottom: '1px solid #eee'
-                }}>
-                    <button
-                        onClick={() => setActiveTab('upload')}
-                        style={{
-                            flex: 1,
-                            padding: '12px',
-                            border: 'none',
-                            backgroundColor: activeTab === 'upload' ? '#f0f0f0' : 'white',
-                            cursor: 'pointer',
-                            borderBottom: activeTab === 'upload' ? '2px solid var(--color-secondary)' : 'none'
-                        }}
-                    >
-                        Upload New Files
-                    </button>
-                    <button
-                        onClick={() => setActiveTab('existing')}
-                        style={{
-                            flex: 1,
-                            padding: '12px',
-                            border: 'none',
-                            backgroundColor: activeTab === 'existing' ? '#f0f0f0' : 'white',
-                            cursor: 'pointer',
-                            borderBottom: activeTab === 'existing' ? '2px solid var(--color-secondary)' : 'none'
-                        }}
-                    >
-                        Select Existing Files
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div style={{ padding: '20px', maxHeight: '400px', overflowY: 'auto' }}>
-                    {activeTab === 'upload' && (
-                        <div>
-                            {/* Drag and Drop Area */}
-                            <div
-                                onDragEnter={handleDragEnter}
-                                onDragLeave={handleDragLeave}
-                                onDragOver={handleDragOver}
-                                onDrop={handleDrop}
-                                style={{
-                                    border: `2px dashed ${dragOver ? 'var(--color-secondary)' : '#ccc'}`,
-                                    borderRadius: '8px',
-                                    padding: '40px',
-                                    textAlign: 'center',
-                                    backgroundColor: dragOver ? '#f0f8ff' : '#fafafa',
-                                    marginBottom: '20px',
-                                    cursor: 'pointer'
-                                }}
-                                onClick={() => fileInputRef.current?.click()}
-                            >
-                                <div style={{ fontSize: '48px', marginBottom: '16px' }}>📁</div>
-                                <div style={{ fontSize: '16px', marginBottom: '8px' }}>
-                                    Drag and drop files here or click to browse
-                                </div>
-                                <div style={{ fontSize: '12px', color: '#666' }}>
-                                    Supports all file types
-                                </div>
-                            </div>
-
-                            <input
-                                ref={fileInputRef}
-                                type="file"
-                                multiple
-                                onChange={handleFileSelect}
-                                style={{ display: 'none' }}
-                            />
-
-                            {uploading && (
-                                <div style={{ textAlign: 'center', padding: '20px' }}>
-                                    Uploading files...
-                                </div>
-                            )}
-                        </div>
-                    )}
-
-                    {activeTab === 'existing' && (
-                        <div>
-                            {/* File Category Sub-tabs */}
-                            <div style={{
-                                display: 'flex',
-                                marginBottom: '16px',
-                                borderBottom: '1px solid #eee'
-                            }}>
-                                {[
-                                    { key: 'all', label: 'All Files' },
-                                    { key: 'uploads', label: 'Uploads' },
-                                    { key: 'created', label: 'AI Created' },
-                                    { key: 'shared', label: 'Shared' }
-                                ].map(tab => (
-                                    <button
-                                        key={tab.key}
-                                        onClick={() => setFileSubTab(tab.key as any)}
-                                        style={{
-                                            flex: 1,
-                                            padding: '8px 12px',
-                                            border: 'none',
-                                            backgroundColor: fileSubTab === tab.key ? '#f0f0f0' : 'transparent',
-                                            cursor: 'pointer',
-                                            fontSize: '12px',
-                                            borderBottom: fileSubTab === tab.key ? '2px solid var(--color-secondary)' : '2px solid transparent'
-                                        }}
-                                    >
-                                        {tab.label}
-                                    </button>
-                                ))}
-                            </div>
-
-                            {filesLoading ? (
-                                <div style={{ textAlign: 'center', padding: '20px' }}>
-                                    Loading files...
-                                </div>
-                            ) : (
-                                <div style={{ 
-                                    maxHeight: '300px', 
-                                    overflow: 'auto',
-                                    border: '1px solid #eee',
-                                    borderRadius: '6px',
-                                    position: 'relative'
-                                }}>
-                                    <SelectableFilesList 
-                                        files={existingFiles}
-                                        selectedFiles={selectedFiles}
-                                        onFileSelect={toggleFileSelection}
-                                        activeTab={fileSubTab}
-                                    />
-                                </div>
-                            )}
-                            
-                            {/* Selection Instructions */}
-                            <div style={{ 
-                                marginTop: '12px', 
-                                padding: '8px',
-                                backgroundColor: '#f8f9fa',
-                                borderRadius: '4px',
-                                fontSize: '12px',
-                                color: '#666'
-                            }}>
-                                💡 Click on files to select them for attachment
-                            </div>
-                        </div>
-                    )}
-                </div>
-
-                {/* Selected Files Summary */}
-                {selectedFiles.length > 0 && (
-                    <div style={{
-                        padding: '16px 20px',
-                        backgroundColor: '#f8f9fa',
-                        borderTop: '1px solid #eee'
-                    }}>
-                        <div style={{ fontSize: '14px', fontWeight: '500', marginBottom: '8px' }}>
-                            Selected Files ({selectedFiles.length}):
-                        </div>
-                        <div style={{ maxHeight: '100px', overflowY: 'auto' }}>
-                            {selectedFiles.map(file => (
-                                <div key={file.id} style={{ 
-                                    fontSize: '12px', 
-                                    color: '#666',
-                                    marginBottom: '2px'
-                                }}>
-                                    📎 {file.name} ({formatFileSize(file.size)})
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                {/* Footer */}
-                <div style={{
-                    padding: '20px',
-                    borderTop: '1px solid #eee',
-                    display: 'flex',
-                    gap: '12px',
-                    justifyContent: 'flex-end'
-                }}>
-                    <button
-                        onClick={onClose}
-                        style={{
-                            padding: '8px 16px',
-                            border: '1px solid #ddd',
-                            backgroundColor: 'white',
-                            borderRadius: '6px',
-                            cursor: 'pointer'
-                        }}
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        onClick={handleConfirm}
-                        disabled={selectedFiles.length === 0}
-                        style={{
-                            padding: '8px 16px',
-                            backgroundColor: selectedFiles.length === 0 ? '#ccc' : 'var(--color-secondary)',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '6px',
-                            cursor: selectedFiles.length === 0 ? 'not-allowed' : 'pointer'
-                        }}
-                    >
-                        Attach {selectedFiles.length} File{selectedFiles.length !== 1 ? 's' : ''}
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default FileAttachmentPopup; 
\ No newline at end of file
diff --git a/src/components/Dashboard/DashboardChat/dashboardChatAreaProgressBar.ts b/src/components/Dashboard/DashboardChat/dashboardChatAreaProgressBar.ts
deleted file mode 100644
index 62d56e2..0000000
--- a/src/components/Dashboard/DashboardChat/dashboardChatAreaProgressBar.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import { WorkflowLog, WorkflowProgress, TimelineItem } from './dashboardChatAreaTypes';
-
-const parseLogProgress = (msg: string) => {
-    const m = msg.trim();
-    
-    const taskStart = m.match(/^Executing task (\d+)\/(\d+)$/i);
-    if (taskStart) return { taskNumber: parseInt(taskStart[1]), totalTasks: parseInt(taskStart[2]), type: 'task_start' as const };
-    
-    const actionStart = m.match(/^Task (\d+) - Starting action (\d+)\/(\d+)$/i);
-    if (actionStart) return { taskNumber: parseInt(actionStart[1]), actionNumber: parseInt(actionStart[2]), totalActions: parseInt(actionStart[3]), type: 'action_start' as const };
-    
-    const actionComplete = m.match(/^(?:✅\s+)?Task (\d+) - Action (\d+)\/(\d+) completed$/i);
-    if (actionComplete) return { taskNumber: parseInt(actionComplete[1]), actionNumber: parseInt(actionComplete[2]), totalActions: parseInt(actionComplete[3]), isCompleted: true, type: 'action_complete' as const };
-    
-    const taskComplete = m.match(/^(?:🎯\s+)?Task (\d+)\/(\d+) completed$/i);
-    if (taskComplete) return { taskNumber: parseInt(taskComplete[1]), totalTasks: parseInt(taskComplete[2]), isCompleted: true, type: 'task_complete' as const };
-    
-    return { type: 'unknown' as const };
-};
-
-export const calculateWorkflowProgress = (messages: any[], logs: WorkflowLog[] = []): WorkflowProgress | null => {
-    if (messages.length === 0 && logs.length === 0) return null;
-    
-    const lastMessage = messages[messages.length - 1];
-    if (lastMessage?.role === 'user') return { current: 0, total: 0, percentage: 0, isLoading: true };
-    
-    let totalTasks = 0;
-    const taskCounts: { [key: number]: { total: number; completed: Set<number> } } = {};
-    
-    logs.forEach(log => {
-        if (!log.message) return;
-        const p = parseLogProgress(log.message);
-        
-        if (p.type === 'task_start' && p.totalTasks) totalTasks = Math.max(totalTasks, p.totalTasks);
-        
-        if (p.type === 'action_start' && p.taskNumber && p.totalActions) {
-            if (!taskCounts[p.taskNumber]) taskCounts[p.taskNumber] = { total: 0, completed: new Set() };
-            taskCounts[p.taskNumber].total = Math.max(taskCounts[p.taskNumber].total, p.totalActions);
-        }
-        
-        if (p.type === 'action_complete' && p.taskNumber && p.actionNumber && p.totalActions) {
-            if (!taskCounts[p.taskNumber]) taskCounts[p.taskNumber] = { total: p.totalActions, completed: new Set() };
-            taskCounts[p.taskNumber].completed.add(p.actionNumber);
-            taskCounts[p.taskNumber].total = Math.max(taskCounts[p.taskNumber].total, p.totalActions);
-        }
-        
-        if (p.type === 'task_complete' && p.taskNumber && p.totalTasks) {
-            totalTasks = Math.max(totalTasks, p.totalTasks);
-            if (taskCounts[p.taskNumber]) {
-                const task = taskCounts[p.taskNumber];
-                for (let i = 1; i <= task.total; i++) task.completed.add(i);
-            }
-        }
-    });
-    
-    messages.forEach(msg => {
-        if (msg.role !== 'assistant' || !msg.content) return;
-        const match = msg.content.match(/✅\s+Task (\d+) - Action\s+(?:(\d+)\/(\d+)|.*completed)/i);
-        if (match) {
-            const taskNum = parseInt(match[1]);
-            if (match[2] && match[3]) {
-                const actionNum = parseInt(match[2]);
-                const totalActions = parseInt(match[3]);
-                if (!taskCounts[taskNum]) taskCounts[taskNum] = { total: totalActions, completed: new Set() };
-                taskCounts[taskNum].completed.add(actionNum);
-                taskCounts[taskNum].total = Math.max(taskCounts[taskNum].total, totalActions);
-            } else {
-                if (!taskCounts[taskNum]) taskCounts[taskNum] = { total: 1, completed: new Set() };
-                taskCounts[taskNum].completed.add(1);
-                if (taskCounts[taskNum].total === 0) taskCounts[taskNum].total = 1;
-            }
-        }
-    });
-    
-    let completed = 0;
-    for (let i = 1; i <= totalTasks; i++) {
-        const task = taskCounts[i];
-        if (task && task.total > 0 && task.completed.size === task.total) completed++;
-    }
-    
-    return totalTasks > 0 ? { current: completed, total: totalTasks, percentage: Math.round((completed / totalTasks) * 100), isLoading: false } : null;
-};
-
-export const safeParseDate = (ts: any, fallback = Date.now()): Date => {
-    if (!ts) return new Date(fallback);
-    
-    let d = ts;
-    if (typeof ts === 'number') d = ts < 10000000000 ? ts * 1000 : ts;
-    else if (typeof ts === 'string' && /^\d+$/.test(ts)) {
-        const n = parseInt(ts);
-        d = n < 10000000000 ? n * 1000 : n;
-    }
-    
-    const date = new Date(d);
-    return isNaN(date.getTime()) ? new Date(fallback) : date;
-};
-
-export const mergeMessagesAndLogs = (messages: any[], logs: WorkflowLog[]): TimelineItem[] => {
-    const items: TimelineItem[] = [];
-    
-    messages.forEach((msg, i) => {
-        const ts = safeParseDate(msg.timestamp || msg.publishedAt, Date.now() - ((messages.length + logs.length) - i) * 1000);
-        items.push({ type: 'message', item: msg, timestamp: ts });
-    });
-    
-    logs.forEach((log, i) => {
-        const ts = safeParseDate(log.timestamp, Date.now() - (logs.length - i) * 1000);
-        items.push({ type: 'log', item: log, timestamp: ts });
-    });
-    
-    return items.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-};
-
-export const transformWorkflowMessage = async (msg: any, request: any): Promise<any> => {
-    let docs: any[] = [];
-
-    if (msg.documents?.length > 0) {
-        // Try to get filenames from the documents, but if missing, fetch from API
-        const needsApiCall = msg.documents.some((d: any) => !d.filename && !d.fileName && !d.name);
-        
-        if (needsApiCall) {
-            // If any document is missing filename, fetch details from API for all
-            const promises = msg.documents.map(async (d: any) => {
-                try {
-                    const fileId = d.fileId || d.id;
-                    const res = await request({ url: `/api/workflows/files/${fileId}/preview`, method: 'get' });
-                    const fullName = res.name || res.fileName || d.filename || d.fileName || d.name || `File_${fileId}`;
-                    const lastDotIndex = fullName.lastIndexOf('.');
-                    const hasExtension = lastDotIndex > 0 && lastDotIndex < fullName.length - 1;
-                    
-                    return {
-                        id: d.id || d.fileId,
-                        fileId: typeof d.fileId === 'string' ? parseInt(d.fileId) : d.fileId,
-                        name: hasExtension ? fullName.substring(0, lastDotIndex) : fullName,
-                        ext: res.extension || res.ext || (hasExtension ? fullName.substring(lastDotIndex + 1) : ''),
-                        type: d.mimeType || res.mimeType || res.type || 'application/octet-stream',
-                        size: d.fileSize || res.size || 0,
-                        downloadUrl: `/api/workflows/files/${d.fileId}/download`
-                    };
-                } catch {
-                    // Fallback if API call fails
-                    const fullFilename = d.filename || d.fileName || d.name || `File_${d.id || d.fileId || 'unknown'}`;
-                    const lastDotIndex = fullFilename.lastIndexOf('.');
-                    const hasExtension = lastDotIndex > 0 && lastDotIndex < fullFilename.length - 1;
-                    
-                    return {
-                        id: d.id || d.fileId,
-                        fileId: typeof d.fileId === 'string' ? parseInt(d.fileId) : d.fileId,
-                        name: hasExtension ? fullFilename.substring(0, lastDotIndex) : fullFilename,
-                        ext: hasExtension ? fullFilename.substring(lastDotIndex + 1) : '',
-                        type: d.mimeType || 'application/octet-stream',
-                        size: d.fileSize || 0,
-                        downloadUrl: `/api/workflows/files/${d.fileId}/download`
-                    };
-                }
-            });
-            docs = await Promise.all(promises);
-        } else {
-            // All documents have filenames, process them directly
-            docs = msg.documents.map((d: any) => {
-                const fullFilename = d.filename || d.fileName || d.name || `File_${d.id || d.fileId || 'unknown'}`;
-                const lastDotIndex = fullFilename.lastIndexOf('.');
-                const hasExtension = lastDotIndex > 0 && lastDotIndex < fullFilename.length - 1;
-                
-                return {
-                    id: d.id || d.fileId,
-                    fileId: typeof d.fileId === 'string' ? parseInt(d.fileId) : d.fileId,
-                    name: hasExtension ? fullFilename.substring(0, lastDotIndex) : fullFilename,
-                    ext: hasExtension ? fullFilename.substring(lastDotIndex + 1) : '',
-                    type: d.mimeType,
-                    size: d.fileSize,
-                    downloadUrl: `/api/workflows/files/${d.fileId}/download`
-                };
-            });
-        }
-    } else if (msg.fileIds?.length > 0) {
-        const promises = msg.fileIds.map(async (id: number) => {
-            try {
-                const res = await request({ url: `/api/workflows/files/${id}/preview`, method: 'get' });
-                const fullName = res.name || res.fileName || `File_${id}`;
-                const lastDotIndex = fullName.lastIndexOf('.');
-                const hasExtension = lastDotIndex > 0 && lastDotIndex < fullName.length - 1;
-                
-                return {
-                    id: id.toString(),
-                    fileId: id,
-                    name: hasExtension ? fullName.substring(0, lastDotIndex) : fullName,
-                    ext: res.extension || res.ext || (hasExtension ? fullName.substring(lastDotIndex + 1) : ''),
-                    type: res.mimeType || res.type || 'application/octet-stream',
-                    size: res.size || 0,
-                    downloadUrl: res.downloadUrl || res.url
-                };
-            } catch {
-                return { id: id.toString(), fileId: id, name: `File_${id}`, ext: '', type: 'application/octet-stream', size: 0 };
-            }
-        });
-        docs = await Promise.all(promises);
-    }
-
-    return {
-        id: msg.id,
-        role: msg.role,
-        agentName: msg.role === 'user' ? 'You' : 'Assistant',
-        content: msg.message || msg.content || msg.text || msg.body || '',
-        timestamp: msg.publishedAt 
-            ? (typeof msg.publishedAt === 'number' ? new Date(msg.publishedAt * 1000).toISOString() : msg.publishedAt)
-            : msg.timestamp,
-        documents: docs
-    };
-};
diff --git a/src/components/Dashboard/DashboardChat/dashboardChatAreaTypes.ts b/src/components/Dashboard/DashboardChat/dashboardChatAreaTypes.ts
deleted file mode 100644
index cdcb8dc..0000000
--- a/src/components/Dashboard/DashboardChat/dashboardChatAreaTypes.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-// Simplified types - everything in one place
-export interface Prompt {
-    id: string;
-    mandateId: string;
-    name: string;
-    content: string;
-    createdAt?: string;
-    isShared?: boolean;
-}
-
-export interface DashboardChatProps {
-    workflowState: WorkflowState;
-    workflowActions: WorkflowActions;
-}
-
-export interface DashboardChatAreaProps {
-    workflowState: WorkflowState;
-    workflowActions: WorkflowActions;
-}
-
-// Workflow interfaces - Updated to match full API response
-export interface WorkflowStats {
-    id: string;
-    processingTime: number;
-    tokenCount: number;
-    bytesSent: number;
-    bytesReceived: number;
-    successRate: number;
-    errorCount: number;
-}
-
-export interface WorkflowDocument {
-    id: string;
-    fileId: string;
-    filename: string;
-    fileSize: number;
-    mimeType: string;
-}
-
-export interface WorkflowMessageStats extends WorkflowStats {}
-
-export interface WorkflowMessage {
-    id: string;
-    workflowId: string;
-    parentMessageId?: string;
-    documents?: WorkflowDocument[];
-    documentsLabel?: string;
-    message: string;
-    content?: string; // For backward compatibility
-    role: 'user' | 'assistant' | 'system';
-    status: string;
-    sequenceNr: number;
-    publishedAt: number; // UTC timestamp in seconds (float from backend)
-    timestamp?: string; // For backward compatibility
-    fileIds?: string[]; // For backward compatibility
-    stats?: WorkflowMessageStats;
-    success: boolean;
-    actionId?: string;
-    actionMethod?: string;
-    actionName?: string;
-}
-
-export interface WorkflowLog {
-    id: string;
-    workflowId: string;
-    message: string;
-    type: string;
-    timestamp: string;
-    status: string;
-    progress: number;
-    performance: any;
-    level?: 'info' | 'warning' | 'error' | 'debug';
-    source?: string;
-    details?: any;
-}
-
-export interface WorkflowAction {
-    id: string;
-    execMethod: string;
-    execAction: string;
-    execParameters: any;
-    execResultLabel: string;
-    expectedDocumentFormats?: any[];
-    status: 'pending' | 'running' | 'completed' | 'failed';
-    error?: string;
-    retryCount: number;
-    retryMax: number;
-    processingTime: number;
-    timestamp: string;
-    result?: string;
-    resultDocuments?: WorkflowDocument[];
-}
-
-export interface WorkflowTask {
-    id: string;
-    workflowId: string;
-    userInput: string;
-    status: 'pending' | 'running' | 'completed' | 'failed';
-    error?: string;
-    startedAt: string;
-    finishedAt?: string;
-    actionList: WorkflowAction[];
-    retryCount: number;
-    retryMax: number;
-    rollbackOnFailure: boolean;
-    dependencies: string[];
-    feedback?: string;
-    processingTime: number;
-    resultLabels: any;
-}
-
-export interface Workflow {
-    id: string;
-    mandateId: string;
-    status: string;
-    name?: string;
-    currentRound: number;
-    lastActivity: number; // UTC timestamp in seconds (float from backend)
-    startedAt: number; // UTC timestamp in seconds (float from backend)
-    logs?: WorkflowLog[];
-    messages?: WorkflowMessage[];
-    stats?: WorkflowStats;
-    tasks?: WorkflowTask[];
-}
-
-export interface WorkflowState {
-    currentWorkflowId: string | null;
-    workflow: Workflow | null;
-    messages: WorkflowMessage[];
-    pendingMessages: WorkflowMessage[];  // Messages sent but not yet confirmed by backend
-    logs: WorkflowLog[];
-    isLoading: boolean;
-    error: string | null;
-    selectedPrompt: Prompt | null;
-}
-
-export interface WorkflowActions {
-    loadWorkflow: (workflowId: string) => void;
-    startNewWorkflow: (prompt: string, fileIds?: string[]) => Promise<string | null>;
-    continueWorkflow: (prompt: string, fileIds?: string[]) => Promise<boolean>;
-    stopWorkflow: () => Promise<boolean>;
-    clearWorkflow: () => void;
-    selectPrompt: (prompt: Prompt | null) => void;
-    clearPrompt: () => void;
-}
-
-export interface FileInfo {
-    id: string;
-    name: string;
-    mimeType: string;
-    size?: number;
-    creationDate?: string;
-    downloadUrl?: string;
-    fileData?: File;
-    objectUrl?: string;
-}
-
-// Add old interfaces for compatibility
-export interface Document {
-    id?: string;
-    fileId?: number;
-    name: string;
-    url?: string;
-    type?: string;
-    size?: number;
-    downloadUrl?: string;
-    ext?: string;
-}
-
-export interface Message {
-    id?: string;
-    role: 'user' | 'assistant' | 'system';
-    agentName: string;
-    content: string;
-    timestamp?: string;
-    documents?: Document[];
-} 
-
-export interface InputAreaProps {
-    workflowState: WorkflowState;
-    workflowActions: WorkflowActions;
-    attachedFiles?: AttachedFile[];
-    onAttachedFilesChange?: (files: AttachedFile[]) => void;
-  }
-  
-export interface AttachedFile {
-  id: string;
-  name: string;
-  size: number;
-  type: string;
-  fileData?: File;
-  objectUrl?: string;
-}
-
-export interface ConnectedFilesProps {
-  onFileSelect?: (file: FileInfo) => void;
-  selectedFile?: FileInfo | null;
-  attachedFiles?: AttachedFile[];
-  onRemoveFile?: (fileId: string) => void;
-}
-
-  export interface MessageListProps {
-    workflowState: WorkflowState;
-  }
-
-  // Progress bar interfaces
-  export interface WorkflowProgress {
-    current: number;
-    total: number;
-    percentage: number;
-    isLoading: boolean;
-    taskBreakdown?: string;
-  }
-
-  // Timeline item for merged messages and logs
-  export interface TimelineItem {
-    type: 'message' | 'log';
-    item: any;
-    timestamp: Date;
-  }
\ No newline at end of file
diff --git a/src/components/Dashboard/DashboardChat/index.ts b/src/components/Dashboard/DashboardChat/index.ts
deleted file mode 100644
index 79a448b..0000000
--- a/src/components/Dashboard/DashboardChat/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './DashboardChatArea';
-export type { DashboardChatAreaProps } from './dashboardChatAreaTypes'; 
\ No newline at end of file
diff --git a/src/components/Dashboard/DashboardChat/useWorkflowManager.ts b/src/components/Dashboard/DashboardChat/useWorkflowManager.ts
deleted file mode 100644
index 59f929d..0000000
--- a/src/components/Dashboard/DashboardChat/useWorkflowManager.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { useWorkflow, useWorkflowStatus, useWorkflowMessages, useWorkflowLogs, useWorkflowOperations, StartWorkflowRequest } from '../../../hooks/useWorkflows';
-import { WorkflowState, WorkflowActions } from './dashboardChatAreaTypes';
-
-export function useWorkflowManager(initialWorkflowId?: string | null): [WorkflowState, WorkflowActions] {
-  // Core state
-  const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(initialWorkflowId || null);
-  const [isPolling, setIsPolling] = useState(false);
-  const [pendingMessages, setPendingMessages] = useState<any[]>([]);
-  const [sentUserMessages, setSentUserMessages] = useState<Set<string>>(new Set()); // Track sent user messages
-  const [selectedPrompt, setSelectedPrompt] = useState<any | null>(null); // Selected prompt state
-  const pollingIntervalRef = useRef<number | null>(null);
-
-  // Hook-based data fetching
-  const { workflow, loading: workflowLoading, error: workflowError } = useWorkflow(currentWorkflowId);
-  const { status: workflowStatus, loading: statusLoading, error: statusError, refetch: refetchStatus } = useWorkflowStatus(currentWorkflowId);
-  const { messages, loading: messagesLoading, error: messagesError, refetch: refetchMessages } = useWorkflowMessages(currentWorkflowId);
-  const { logs, loading: logsLoading, error: logsError, refetch: refetchLogs } = useWorkflowLogs(currentWorkflowId);
-  const { startWorkflow, stopWorkflow: stopWorkflowRequest } = useWorkflowOperations();
-
-  // Use status for real-time updates, fallback to workflow for initial data
-  const currentWorkflow = workflowStatus || workflow;
-
-  // Helper to create optimistic user message
-  const createOptimisticMessage = useCallback((prompt: string, fileIds: string[] = []) => {
-    // Use UTC timestamp in seconds (float) to match backend expectation
-    const timestamp = Math.floor(Date.now() / 1000);
-    return {
-      id: `temp-${Date.now()}`,
-      workflowId: currentWorkflowId || 'pending',
-      message: prompt,
-      role: 'user' as const,
-      status: 'pending',
-      sequenceNr: 0,
-      publishedAt: timestamp,
-      success: true,
-      fileIds: fileIds.length > 0 ? fileIds : undefined
-    };
-  }, [currentWorkflowId]);
-
-  // Combined loading and error states
-  const isLoading = workflowLoading || statusLoading || messagesLoading || logsLoading;
-  const error = workflowError || statusError || messagesError || logsError;
-
-  // Filter messages based on workflow state and pending messages
-  const filteredMessages = useMemo(() => {
-    if (!messages) return [];
-    
-    // For completed/stopped workflows, always show all messages (including user messages from backend)
-    const isWorkflowComplete = currentWorkflow && ['completed', 'stopped', 'failed', 'error'].includes(currentWorkflow.status);
-    
-    // If workflow is complete OR we have no pending messages and no tracked sent messages,
-    // show all messages (this covers historical workflows and completed workflows)
-    if (isWorkflowComplete || (pendingMessages.length === 0 && sentUserMessages.size === 0)) {
-      return messages;
-    }
-    
-    // For active workflows with pending messages, filter out user messages from backend
-    // to prevent duplicates with optimistic messages
-    if (pendingMessages.length > 0 || sentUserMessages.size > 0) {
-      return messages.filter(msg => msg.role !== 'user');
-    }
-    
-    // Default: show all messages
-    return messages;
-  }, [messages, sentUserMessages, pendingMessages, currentWorkflow]);
-
-  // Auto-polling for active workflows and message updates
-  useEffect(() => {
-    if (isPolling && currentWorkflowId) {
-      pollingIntervalRef.current = window.setInterval(() => {
-        refetchStatus();
-        if (currentWorkflow) {
-          const isActive = ['running', 'processing', 'started'].includes(currentWorkflow.status);
-          if (isActive) {
-            refetchMessages();
-            refetchLogs();
-          }
-        }
-      }, 2000);
-    }
-
-    return () => {
-      if (pollingIntervalRef.current) {
-        clearInterval(pollingIntervalRef.current);
-        pollingIntervalRef.current = null;
-      }
-    };
-  }, [isPolling, currentWorkflowId, currentWorkflow?.status, refetchStatus, refetchMessages, refetchLogs]);
-
-  // Actions
-  const loadWorkflow = useCallback(async (workflowId: string) => {
-    // Immediately clear pending state when loading a different workflow
-    if (currentWorkflowId !== workflowId) {
-      setPendingMessages([]);
-      setSentUserMessages(new Set());
-    }
-    
-    setCurrentWorkflowId(workflowId);
-  }, [currentWorkflowId]);
-
-  const startNewWorkflow = useCallback(async (prompt: string, fileIds: string[] = []): Promise<string | null> => {
-    // Add optimistic message immediately
-    const optimisticMessage = createOptimisticMessage(prompt, fileIds);
-    setPendingMessages(prev => [...prev, optimisticMessage]);
-    
-    // Track this message as sent
-    setSentUserMessages(prev => new Set(prev).add(prompt.trim()));
-
-    const workflowData: StartWorkflowRequest = {
-      prompt,
-      listFileId: fileIds
-    };
-
-    const result = await startWorkflow(workflowData);
-    
-    if (result.success && result.data) {
-      const newWorkflowId = result.data.id;
-      setCurrentWorkflowId(newWorkflowId);
-      setIsPolling(true);
-      setTimeout(() => {
-        refetchMessages();
-        refetchLogs();
-      }, 500);
-      return newWorkflowId;
-    } else {
-      // Remove optimistic message and sent tracking on failure
-      setPendingMessages(prev => prev.filter(msg => msg.id !== optimisticMessage.id));
-      setSentUserMessages(prev => {
-        const newSet = new Set(prev);
-        newSet.delete(prompt.trim());
-        return newSet;
-      });
-    }
-    return null;
-  }, [startWorkflow, refetchMessages, createOptimisticMessage]);
-
-  const continueWorkflow = useCallback(async (prompt: string, fileIds: string[] = []): Promise<boolean> => {
-    if (!currentWorkflowId) return false;
-
-    // Add optimistic message immediately
-    const optimisticMessage = createOptimisticMessage(prompt, fileIds);
-    setPendingMessages(prev => [...prev, optimisticMessage]);
-    
-    // Track this message as sent
-    setSentUserMessages(prev => new Set(prev).add(prompt.trim()));
-
-    const workflowData: StartWorkflowRequest = {
-      prompt,
-      listFileId: fileIds
-    };
-
-    const result = await startWorkflow(workflowData, currentWorkflowId);
-    
-    if (result.success) {
-      setIsPolling(true);
-      setTimeout(() => {
-        refetchMessages();
-        refetchLogs();
-      }, 500);
-      return true;
-    } else {
-      // Remove optimistic message and sent tracking on failure
-      setPendingMessages(prev => prev.filter(msg => msg.id !== optimisticMessage.id));
-      setSentUserMessages(prev => {
-        const newSet = new Set(prev);
-        newSet.delete(prompt.trim());
-        return newSet;
-      });
-    }
-    return false;
-  }, [currentWorkflowId, startWorkflow, refetchMessages, refetchLogs, createOptimisticMessage]);
-
-  const stopWorkflow = useCallback(async (): Promise<boolean> => {
-    if (!currentWorkflowId) return false;
-
-    const result = await stopWorkflowRequest(currentWorkflowId);
-    if (result) {
-      // Immediately refresh status to reflect the stopped state
-      setTimeout(() => {
-        refetchStatus();
-        refetchMessages();
-        refetchLogs();
-      }, 500);
-      return true;
-    }
-    return false;
-  }, [currentWorkflowId, stopWorkflowRequest, refetchStatus, refetchMessages, refetchLogs]);
-
-  const clearWorkflow = useCallback(() => {
-    setCurrentWorkflowId(null);
-    setIsPolling(false);
-    setPendingMessages([]);
-    setSentUserMessages(new Set());
-  }, []);
-
-  const selectPrompt = useCallback((prompt: any | null) => {
-    setSelectedPrompt(prompt);
-  }, []);
-
-  const clearPrompt = useCallback(() => {
-    setSelectedPrompt(null);
-  }, []);
-
-  // Only clear pending messages when workflow changes to a different ID
-  // (not when creating a new workflow)
-  const previousWorkflowId = useRef(currentWorkflowId);
-  useEffect(() => {
-    const prev = previousWorkflowId.current;
-    const current = currentWorkflowId;
-    
-    // If we're switching between different existing workflows, clear state
-    if (prev && current && prev !== current) {
-      setPendingMessages([]);
-      setSentUserMessages(new Set());
-    }
-    // If we're going from a workflow to no workflow, clear state
-    else if (prev && !current) {
-      setPendingMessages([]);
-      setSentUserMessages(new Set());
-    }
-    // If we're going from no workflow to a workflow (new workflow creation), keep pending messages
-    
-    previousWorkflowId.current = current;
-  }, [currentWorkflowId]);
-
-  // Sync with external workflow ID changes
-  useEffect(() => {
-    if (initialWorkflowId !== currentWorkflowId) {
-      if (initialWorkflowId) {
-        loadWorkflow(initialWorkflowId);
-      } else {
-        setCurrentWorkflowId(null);
-        setIsPolling(false);
-      }
-    }
-  }, [initialWorkflowId]);
-
-  // Auto-enable polling only for active workflows
-  useEffect(() => {
-    if (currentWorkflowId && currentWorkflow) {
-      const isActive = ['running', 'processing', 'started'].includes(currentWorkflow.status);
-      setIsPolling(isActive);
-      
-      // Clear pending messages and sent user tracking when workflow completes
-      // This allows all backend messages to show for completed workflows
-      if (!isActive && (pendingMessages.length > 0 || sentUserMessages.size > 0)) {
-        console.log('🏁 Workflow completed, clearing pending messages and sent user tracking');
-        setPendingMessages([]);
-        setSentUserMessages(new Set());
-      }
-    } else {
-      setIsPolling(false);
-    }
-  }, [currentWorkflowId, currentWorkflow?.status, pendingMessages.length, sentUserMessages.size]);
-
-  const state: WorkflowState = {
-    currentWorkflowId,
-    workflow: currentWorkflow,
-    messages: filteredMessages,
-    pendingMessages,
-    logs: logs || [],
-    isLoading,
-    error,
-    selectedPrompt
-  };
-
-  const actions: WorkflowActions = useMemo(() => ({
-    loadWorkflow,
-    startNewWorkflow,
-    continueWorkflow,
-    stopWorkflow,
-    clearWorkflow,
-    selectPrompt,
-    clearPrompt
-  }), [loadWorkflow, startNewWorkflow, continueWorkflow, stopWorkflow, clearWorkflow, selectPrompt, clearPrompt]);
-
-  return [state, actions];
-}
diff --git a/src/components/FilePreview/FilePreview.tsx b/src/components/FilePreview/FilePreview.tsx
index c49c6c8..76e8c57 100644
--- a/src/components/FilePreview/FilePreview.tsx
+++ b/src/components/FilePreview/FilePreview.tsx
@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 
 import { IoIosDownload, IoIosCopy } from 'react-icons/io';
 
-import { Popup, PopupAction } from '../ui/Popup/Popup';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { Popup, PopupAction } from '../UiComponents/Popup/Popup';
+import { useLanguage } from '../../providers/language/LanguageContext';
 import { useFileOperations } from '../../hooks/useFiles';
 import { 
   JsonRenderer, 
diff --git a/src/components/FilePreview/renderers/ErrorRenderer.tsx b/src/components/FilePreview/renderers/ErrorRenderer.tsx
index 1e20cdf..4f7be3c 100644
--- a/src/components/FilePreview/renderers/ErrorRenderer.tsx
+++ b/src/components/FilePreview/renderers/ErrorRenderer.tsx
@@ -1,4 +1,4 @@
-import { useLanguage } from '../../../contexts/LanguageContext';
+import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from '../FilePreview.module.css';
 
 interface ErrorRendererProps {
diff --git a/src/components/FilePreview/renderers/JsonRenderer.tsx b/src/components/FilePreview/renderers/JsonRenderer.tsx
index 0d6f209..893ec55 100644
--- a/src/components/FilePreview/renderers/JsonRenderer.tsx
+++ b/src/components/FilePreview/renderers/JsonRenderer.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useLanguage } from '../../../contexts/LanguageContext';
+import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from '../FilePreview.module.css';
 
 interface JsonRendererProps {
diff --git a/src/components/FilePreview/renderers/LoadingRenderer.tsx b/src/components/FilePreview/renderers/LoadingRenderer.tsx
index e86f747..2cf4f7c 100644
--- a/src/components/FilePreview/renderers/LoadingRenderer.tsx
+++ b/src/components/FilePreview/renderers/LoadingRenderer.tsx
@@ -1,4 +1,4 @@
-import { useLanguage } from '../../../contexts/LanguageContext';
+import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from '../FilePreview.module.css';
 
 export function LoadingRenderer() {
diff --git a/src/components/FilePreview/renderers/PdfRenderer.tsx b/src/components/FilePreview/renderers/PdfRenderer.tsx
index ba15ca3..edd8655 100644
--- a/src/components/FilePreview/renderers/PdfRenderer.tsx
+++ b/src/components/FilePreview/renderers/PdfRenderer.tsx
@@ -1,5 +1,5 @@
 import { IoIosWarning } from 'react-icons/io';
-import { useLanguage } from '../../../contexts/LanguageContext';
+import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from '../FilePreview.module.css';
 
 interface PdfRendererProps {
diff --git a/src/components/FilePreview/renderers/UnsupportedRenderer.tsx b/src/components/FilePreview/renderers/UnsupportedRenderer.tsx
index 5878351..fdb668d 100644
--- a/src/components/FilePreview/renderers/UnsupportedRenderer.tsx
+++ b/src/components/FilePreview/renderers/UnsupportedRenderer.tsx
@@ -1,4 +1,4 @@
-import { useLanguage } from '../../../contexts/LanguageContext';
+import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from '../FilePreview.module.css';
 
 interface UnsupportedRendererProps {
diff --git a/src/components/FormGenerator/ActionButtons/ActionButton.module.css b/src/components/FormGenerator/ActionButtons/ActionButton.module.css
index 3c382b9..ea56b60 100644
--- a/src/components/FormGenerator/ActionButtons/ActionButton.module.css
+++ b/src/components/FormGenerator/ActionButtons/ActionButton.module.css
@@ -170,6 +170,33 @@
   background: var(--color-secondary-hover);
 }
 
+.actionButton.connect {
+  background: var(--color-secondary);
+  color: white;
+}
+
+.actionButton.connect:hover {
+  background: var(--color-secondary-hover);
+}
+
+.actionButton.refresh {
+  background: var(--color-secondary);
+  color: white;
+}
+
+.actionButton.refresh:hover {
+  background: var(--color-secondary-hover);
+}
+
+.actionButton.remove {
+  background: var(--color-secondary);
+  color: white;
+}
+
+.actionButton.remove:hover {
+  background: var(--color-secondary-hover);
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .actionButtons {
@@ -232,4 +259,20 @@
   .actionButton.copy:hover {
     background: var(--color-secondary-hover);
   }
+
+  .actionButton.connect {
+    background: var(--color-secondary);
+  }
+
+  .actionButton.connect:hover {
+    background: var(--color-secondary-hover);
+  }
+
+  .actionButton.refresh {
+    background: var(--color-secondary);
+  }
+
+  .actionButton.refresh:hover {
+    background: var(--color-secondary-hover);
+  }
 }
diff --git a/src/components/FormGenerator/ActionButtons/ConnectActionButton/ConnectActionButton.tsx b/src/components/FormGenerator/ActionButtons/ConnectActionButton/ConnectActionButton.tsx
new file mode 100644
index 0000000..b2d6f0d
--- /dev/null
+++ b/src/components/FormGenerator/ActionButtons/ConnectActionButton/ConnectActionButton.tsx
@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { IoIosLink } from 'react-icons/io';
+import { IoIosRefresh } from 'react-icons/io';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
+import styles from '../ActionButton.module.css';
+
+export interface ConnectActionButtonProps<T = any> {
+  row: T;
+  disabled?: boolean | { disabled: boolean; message?: string };
+  loading?: boolean;
+  className?: string;
+  title?: string;
+  connectTitle?: string;
+  refreshTitle?: string;
+  hookData: any; // REQUIRED: Contains all hook data including operations
+  // Field mappings
+  idField?: string; // Field name for the unique identifier
+  statusField?: string; // Field name for the status field
+  operationName?: string; // Name of the connect operation in hookData
+  loadingStateName?: string; // Name of the loading state in hookData
+}
+
+export function ConnectActionButton<T = any>({
+  row,
+  disabled = false,
+  loading = false,
+  className = '',
+  title,
+  connectTitle,
+  refreshTitle,
+  hookData,
+  idField = 'id',
+  statusField = 'status',
+  operationName = 'connectWithPopup',
+  loadingStateName = 'isConnecting'
+}: ConnectActionButtonProps<T>) {
+  const { t } = useLanguage();
+  const [isProcessing, setIsProcessing] = useState(false);
+  
+  // Extract disabled state and tooltip message
+  const isDisabled = typeof disabled === 'boolean' ? disabled : disabled?.disabled || false;
+  const disabledMessage = typeof disabled === 'object' ? disabled?.message : undefined;
+  
+  // Validate that hookData is provided with required operations
+  if (!hookData) {
+    throw new Error('ConnectActionButton requires hookData to be provided');
+  }
+  
+  // Get the connection data from the row
+  const connectionStatus = (row as any)[statusField];
+  const connectionId = (row as any)[idField];
+  const isActive = connectionStatus === 'active';
+  
+  // Extract operations from hookData
+  const handleConnect = hookData[operationName];
+  const refetch = hookData.refetch;
+  const loadingState = hookData[loadingStateName];
+  
+  // Validate required operations exist
+  if (!handleConnect) {
+    throw new Error(`ConnectActionButton requires hookData.${operationName} to be defined`);
+  }
+  if (!refetch) {
+    throw new Error('ConnectActionButton requires hookData.refetch to be defined');
+  }
+
+  const handleClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!isDisabled && !loading && !isProcessing) {
+      setIsProcessing(true);
+      try {
+        // Always use the connect operation for both active and inactive connections
+        // The backend will handle refreshing tokens for active connections
+        if (handleConnect) {
+          await handleConnect(connectionId);
+        }
+        
+        // Refetch to update the connection status
+        if (refetch) {
+          await refetch();
+        }
+      } catch (error: any) {
+        console.error('Connection operation failed:', error);
+      } finally {
+        setIsProcessing(false);
+      }
+    }
+  };
+
+  // Determine button title and icon based on connection status
+  const defaultTitle = isActive 
+    ? (refreshTitle || t('connections.action.refresh', 'Refresh'))
+    : (connectTitle || t('connections.action.connect', 'Connect'));
+  
+  const buttonTitle = title || defaultTitle;
+  const buttonIcon = isActive ? <IoIosRefresh /> : <IoIosLink />;
+  
+  // Check if this specific connection is being processed
+  const isLoadingState = loadingState === true || isProcessing;
+
+  // Determine the final button title (tooltip)
+  const finalTitle = isDisabled && disabledMessage ? disabledMessage : buttonTitle;
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`${styles.actionButton} ${isActive ? styles.refresh : styles.connect} ${isLoadingState ? styles.loading : ''} ${isDisabled ? styles.disabled : ''} ${className}`}
+      title={finalTitle}
+      disabled={isDisabled || loading || isLoadingState}
+    >
+      <span className={styles.actionIcon}>
+        {isLoadingState ? <IoIosRefresh /> : buttonIcon}
+      </span>
+    </button>
+  );
+}
+
+export default ConnectActionButton;
+
diff --git a/src/components/FormGenerator/ActionButtons/ConnectActionButton/index.ts b/src/components/FormGenerator/ActionButtons/ConnectActionButton/index.ts
new file mode 100644
index 0000000..d1991fc
--- /dev/null
+++ b/src/components/FormGenerator/ActionButtons/ConnectActionButton/index.ts
@@ -0,0 +1,3 @@
+export { default as ConnectActionButton } from './ConnectActionButton';
+export type { ConnectActionButtonProps } from './ConnectActionButton';
+
diff --git a/src/components/FormGenerator/ActionButtons/CopyActionButton/CopyActionButton.tsx b/src/components/FormGenerator/ActionButtons/CopyActionButton/CopyActionButton.tsx
index 6c269c9..7d2dabf 100644
--- a/src/components/FormGenerator/ActionButtons/CopyActionButton/CopyActionButton.tsx
+++ b/src/components/FormGenerator/ActionButtons/CopyActionButton/CopyActionButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { IoCopy } from 'react-icons/io5';
-import { useLanguage } from '../../../../contexts/LanguageContext';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
 import styles from '../ActionButton.module.css';
 
 export interface CopyActionButtonProps<T = any> {
@@ -11,13 +11,8 @@ export interface CopyActionButtonProps<T = any> {
   className?: string;
   title?: string;
   isCopying?: boolean;
-  hookData?: any; // Contains all hook data including operations
-  // Field mappings
-  idField?: string; // Field name for the unique identifier
-  nameField?: string; // Field name for display name
-  contentField?: string; // Field name for content
-  loadingStateName?: string; // Name of the loading state in hookData
-  operationName?: string; // Name of the operation function in hookData
+  // Field mappings for clipboard copy
+  contentField?: string; // Field name for content to copy to clipboard (default: 'content')
 }
 
 export function CopyActionButton<T = any>({
@@ -28,11 +23,7 @@ export function CopyActionButton<T = any>({
   className = '',
   title,
   isCopying = false,
-  hookData,
-  nameField = 'name',
-  contentField = 'content',
-  loadingStateName = 'creatingPrompt',
-  operationName = 'handlePromptCreate'
+  contentField = 'content'
 }: CopyActionButtonProps<T>) {
   const { t } = useLanguage();
   const [internalLoading, setInternalLoading] = useState(false);
@@ -47,48 +38,33 @@ export function CopyActionButton<T = any>({
     if (!isDisabled && !loading && !isCopying && !internalLoading) {
       setInternalLoading(true);
       try {
-        // If operationName is provided and hookData is available, use the hook function
-        if (operationName && hookData && hookData[operationName]) {
-          // Extract data from row for creating a copy
-          const copyData = {
-            name: `${(row as any)[nameField]} (Copy)`,
-            content: (row as any)[contentField],
-            mandateId: (row as any).mandateId
-          };
-          
-          const result = await hookData[operationName](copyData);
-          
-          if (result.success) {
-            // Show copied feedback
-            setShowCopiedFeedback(true);
-            setTimeout(() => setShowCopiedFeedback(false), 2000);
-            
-            // Refetch to update the list
-            if (hookData.refetch) {
-              await hookData.refetch();
-            }
-          }
-        } else if (onCopy) {
-          // Fallback to the provided onCopy function
+        if (onCopy) {
+          // Use custom copy function if provided
           await onCopy(row);
-          setShowCopiedFeedback(true);
-          setTimeout(() => setShowCopiedFeedback(false), 2000);
         } else {
-          console.error('No copy function available');
+          // Default behavior: copy the specified field content to clipboard
+          const contentToCopy = (row as any)[contentField];
+          
+          if (contentToCopy !== undefined && contentToCopy !== null) {
+            await navigator.clipboard.writeText(String(contentToCopy));
+          } else {
+            console.warn(`Field "${contentField}" not found or is empty in row:`, row);
+          }
         }
+        
+        // Show copied feedback
+        setShowCopiedFeedback(true);
+        setTimeout(() => setShowCopiedFeedback(false), 2000);
       } catch (error) {
-        console.error('Copy failed:', error);
+        console.error('Copy to clipboard failed:', error);
       } finally {
         setInternalLoading(false);
       }
     }
   };
 
-  const buttonTitle = title || t('prompts.action.copy', 'Copy');
-  // Use hookData copying state if available, otherwise use passed isCopying
-  const loadingState = hookData?.[loadingStateName];
-  const actualIsCopying = (typeof loadingState === 'boolean' && loadingState) || isCopying;
-  const isLoading = loading || actualIsCopying || internalLoading;
+  const buttonTitle = title || t('prompts.action.copy', 'Copy to Clipboard');
+  const isLoading = loading || isCopying || internalLoading;
 
   // Determine the final button title (tooltip)
   const finalTitle = isDisabled && disabledMessage ? disabledMessage : buttonTitle;
diff --git a/src/components/FormGenerator/ActionButtons/DeleteActionButton/DeleteActionButton.tsx b/src/components/FormGenerator/ActionButtons/DeleteActionButton/DeleteActionButton.tsx
index c6fbd8f..4b814f1 100644
--- a/src/components/FormGenerator/ActionButtons/DeleteActionButton/DeleteActionButton.tsx
+++ b/src/components/FormGenerator/ActionButtons/DeleteActionButton/DeleteActionButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { IoIosTrash, IoIosCheckmark, IoIosClose } from 'react-icons/io';
-import { useLanguage } from '../../../../contexts/LanguageContext';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
 import styles from '../ActionButton.module.css';
 
 export interface DeleteActionButtonProps<T = any> {
@@ -56,6 +56,7 @@ export function DeleteActionButton<T = any>({
   const refetch = hookData.refetch;
   const loadingState = hookData[loadingStateName];
   
+  
   // Validate required operations exist
   if (!handleDelete) {
     throw new Error(`DeleteActionButton requires hookData.${operationName} to be defined`);
@@ -107,7 +108,7 @@ export function DeleteActionButton<T = any>({
       // Immediately remove from UI for instant feedback and reset state
       if (removeOptimistically) {
         removeOptimistically(itemId);
-      }
+      } 
       
       // Reset confirmation state immediately so it doesn't carry over to next row
       setIsConfirming(false);
@@ -117,12 +118,11 @@ export function DeleteActionButton<T = any>({
       const success = await handleDelete(itemId);
       
       if (success) {
-        // If we used optimistic removal, delay refetch to ensure server has synced
+        // If we used optimistic removal, don't refetch immediately
+        // The item is already removed from UI, and refetch might bring it back
         if (removeOptimistically) {
-          // Delay refetch by 500ms to give server time to fully process deletion
-          setTimeout(() => {
-            refetch();
-          }, 500);
+          // Only refetch if there was an error or if we need to sync other changes
+          // For now, we trust the optimistic removal worked
         } else {
           // No optimistic removal, refetch immediately
           refetch();
diff --git a/src/components/FormGenerator/ActionButtons/DownloadActionButton/DownloadActionButton.tsx b/src/components/FormGenerator/ActionButtons/DownloadActionButton/DownloadActionButton.tsx
index fd67065..7ad9687 100644
--- a/src/components/FormGenerator/ActionButtons/DownloadActionButton/DownloadActionButton.tsx
+++ b/src/components/FormGenerator/ActionButtons/DownloadActionButton/DownloadActionButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { IoIosDownload } from 'react-icons/io';
-import { useLanguage } from '../../../../contexts/LanguageContext';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
 import styles from '../ActionButton.module.css';
 
 export interface DownloadActionButtonProps<T = any> {
diff --git a/src/components/FormGenerator/ActionButtons/EditActionButton/EditActionButton.tsx b/src/components/FormGenerator/ActionButtons/EditActionButton/EditActionButton.tsx
index ca15b0c..c6f9fb7 100644
--- a/src/components/FormGenerator/ActionButtons/EditActionButton/EditActionButton.tsx
+++ b/src/components/FormGenerator/ActionButtons/EditActionButton/EditActionButton.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { MdModeEdit } from 'react-icons/md';
-import { useLanguage } from '../../../../contexts/LanguageContext';
-import { Popup, EditForm } from '../../../ui/Popup';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
+import { Popup, EditForm } from '../../../UiComponents/Popup';
 import styles from '../ActionButton.module.css';
 
 export interface EditActionButtonProps<T = any> {
@@ -121,32 +121,50 @@ export function EditActionButton<T = any>({
         }
       });
 
-
+      // Check if optimistic update is available
+      const updateOptimistically = hookData.updateOptimistically || hookData.updateFileOptimistically;
 
       // Validate required operation exists
       if (!hookData[operationName]) {
         throw new Error(`EditActionButton requires hookData.${operationName} to be defined`);
       }
-      if (!hookData.refetch) {
-        throw new Error('EditActionButton requires hookData.refetch to be defined');
+
+      // Optimistically update the UI immediately
+      if (updateOptimistically) {
+        updateOptimistically(itemId, updateData);
       }
 
-      // Use hookData operation to update
+      // Close popup and reset state immediately for better UX
+      setIsPopupOpen(false);
+      setEditData(null);
+
+      // Use hookData operation to update in the background
       const result = await hookData[operationName](itemId, updateData, editData);
       const success = result?.success || result === true;
 
       if (success) {
-        // Close popup and reset state
-        setIsPopupOpen(false);
-        setEditData(null);
-        
-        // Trigger refetch to sync with backend
-        await hookData.refetch();
+        // If we used optimistic update, don't refetch to avoid overwriting our changes
+        if (updateOptimistically) {
+          // Trust the optimistic update worked
+        } else {
+          // No optimistic update, refetch to sync with backend
+          if (hookData.refetch) {
+            await hookData.refetch();
+          }
+        }
       } else {
+        // If update failed, refetch to restore original state
+        if (hookData.refetch) {
+          await hookData.refetch();
+        }
         console.error('Failed to update item:', itemId);
         // TODO: Show error message to user
       }
     } catch (error) {
+      // If update failed, refetch to restore original state
+      if (hookData.refetch) {
+        await hookData.refetch();
+      }
       console.error('Failed to update item:', error);
       // TODO: Show error message to user
     } finally {
diff --git a/src/components/FormGenerator/ActionButtons/PlayActionButton/PlayActionButton.tsx b/src/components/FormGenerator/ActionButtons/PlayActionButton/PlayActionButton.tsx
new file mode 100644
index 0000000..a1514fa
--- /dev/null
+++ b/src/components/FormGenerator/ActionButtons/PlayActionButton/PlayActionButton.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { IoIosPlay } from 'react-icons/io';
+import { useNavigate } from 'react-router-dom';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
+import { useWorkflowSelection } from '../../../../contexts/WorkflowSelectionContext';
+import styles from '../ActionButton.module.css';
+
+export interface PlayActionButtonProps<T = any> {
+  row: T;
+  onPlay?: (row: T) => Promise<void> | void;
+  disabled?: boolean | { disabled: boolean; message?: string };
+  loading?: boolean;
+  className?: string;
+  title?: string;
+  hookData?: any; // Contains all hook data including operations
+  // Field mappings
+  idField?: string; // Field name for the unique identifier
+  nameField?: string; // Field name for display name
+  // Navigation
+  navigateTo?: string; // Path to navigate to after selection (default: 'start/dashboard')
+}
+
+export function PlayActionButton<T = any>({
+  row,
+  onPlay,
+  disabled = false,
+  loading = false,
+  className = '',
+  title,
+  hookData,
+  idField = 'id',
+  nameField = 'name',
+  navigateTo = 'start/dashboard'
+}: PlayActionButtonProps<T>) {
+  const { t } = useLanguage();
+  const navigate = useNavigate();
+  const { selectWorkflow } = useWorkflowSelection();
+  
+  // Extract disabled state and tooltip message
+  const isDisabled = typeof disabled === 'boolean' ? disabled : disabled?.disabled || false;
+  const disabledMessage = typeof disabled === 'object' ? disabled?.message : undefined;
+
+  const handleClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!isDisabled && !loading) {
+      try {
+        // Get workflow ID from row
+        const workflowId = (row as any)[idField];
+        if (!workflowId) {
+          console.error('Workflow ID not found in row');
+          return;
+        }
+
+        // Call the onPlay callback if provided
+        if (onPlay) {
+          await onPlay(row);
+        }
+
+        // Select the workflow in context
+        selectWorkflow(workflowId);
+
+        // Navigate to dashboard (or specified path)
+        navigate(`/${navigateTo}`);
+      } catch (error: any) {
+        console.error('Error playing workflow:', error);
+      }
+    }
+  };
+
+  const buttonTitle = title || t('workflows.action.play', 'Play');
+  const isLoading = loading;
+  const finalTitle = isDisabled && disabledMessage ? disabledMessage : buttonTitle;
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`${styles.actionButton} ${styles.play} ${isLoading ? styles.loading : ''} ${isDisabled ? styles.disabled : ''} ${className}`}
+      title={finalTitle}
+      disabled={isDisabled || isLoading}
+    >
+      <span className={styles.actionIcon}>
+        {isLoading ? '⏳' : <IoIosPlay />}
+      </span>
+    </button>
+  );
+}
+
+export default PlayActionButton;
diff --git a/src/components/FormGenerator/ActionButtons/PlayActionButton/index.ts b/src/components/FormGenerator/ActionButtons/PlayActionButton/index.ts
new file mode 100644
index 0000000..6b4a2a9
--- /dev/null
+++ b/src/components/FormGenerator/ActionButtons/PlayActionButton/index.ts
@@ -0,0 +1,2 @@
+export { PlayActionButton } from './PlayActionButton';
+export type { PlayActionButtonProps } from './PlayActionButton';
diff --git a/src/components/FormGenerator/ActionButtons/RemoveActionButton/RemoveActionButton.tsx b/src/components/FormGenerator/ActionButtons/RemoveActionButton/RemoveActionButton.tsx
new file mode 100644
index 0000000..bd7c748
--- /dev/null
+++ b/src/components/FormGenerator/ActionButtons/RemoveActionButton/RemoveActionButton.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { IoIosCloseCircle } from 'react-icons/io';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
+import styles from '../ActionButton.module.css';
+
+export interface RemoveActionButtonProps<T = any> {
+  row: T;
+  onRemove: (row: T) => Promise<void> | void;
+  disabled?: boolean | { disabled: boolean; message?: string };
+  loading?: boolean;
+  className?: string;
+  title?: string;
+  idField?: string; // Field name for the unique identifier
+  loadingStateName?: string; // Name of the loading state in hookData
+  hookData?: any; // Optional hook data for loading state
+}
+
+export function RemoveActionButton<T = any>({
+  row,
+  onRemove,
+  disabled = false,
+  loading = false,
+  className = '',
+  title,
+  idField = 'id',
+  loadingStateName = 'removingItems',
+  hookData
+}: RemoveActionButtonProps<T>) {
+  const { t } = useLanguage();
+  const [internalLoading, setInternalLoading] = useState(false);
+  
+  // Extract disabled state and tooltip message
+  const isDisabled = typeof disabled === 'boolean' ? disabled : disabled?.disabled || false;
+  const disabledMessage = typeof disabled === 'object' ? disabled?.message : undefined;
+
+  const handleClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!isDisabled && !loading && !internalLoading) {
+      setInternalLoading(true);
+      try {
+        await onRemove(row);
+      } finally {
+        setInternalLoading(false);
+      }
+    }
+  };
+
+  const buttonTitle = title || t('files.action.remove', 'Remove from workflow');
+  
+  // Use hookData removing state if available, otherwise use passed loading
+  const loadingState = hookData?.[loadingStateName];
+  const itemId = (row as any)[idField];
+  const actualIsRemoving = loadingState?.has?.(itemId) || false;
+  const isLoading = loading || actualIsRemoving || internalLoading;
+
+  // Determine the final button title (tooltip)
+  const finalTitle = isDisabled && disabledMessage ? disabledMessage : buttonTitle;
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`${styles.actionButton} ${styles.remove} ${isLoading ? styles.loading : ''} ${isDisabled ? styles.disabled : ''} ${className}`}
+      title={finalTitle}
+      disabled={isDisabled || isLoading}
+    >
+      <span className={styles.actionIcon}>
+        {isLoading ? '⏳' : <IoIosCloseCircle />}
+      </span>
+    </button>
+  );
+}
+
+export default RemoveActionButton;
+
+
+
+
diff --git a/src/components/FormGenerator/ActionButtons/RemoveActionButton/index.ts b/src/components/FormGenerator/ActionButtons/RemoveActionButton/index.ts
new file mode 100644
index 0000000..56c8519
--- /dev/null
+++ b/src/components/FormGenerator/ActionButtons/RemoveActionButton/index.ts
@@ -0,0 +1,6 @@
+export { default as RemoveActionButton } from './RemoveActionButton';
+export type { RemoveActionButtonProps } from './RemoveActionButton';
+
+
+
+
diff --git a/src/components/FormGenerator/ActionButtons/ViewActionButton/ViewActionButton.tsx b/src/components/FormGenerator/ActionButtons/ViewActionButton/ViewActionButton.tsx
index db38439..039d6b0 100644
--- a/src/components/FormGenerator/ActionButtons/ViewActionButton/ViewActionButton.tsx
+++ b/src/components/FormGenerator/ActionButtons/ViewActionButton/ViewActionButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { IoIosEye } from 'react-icons/io';
-import { useLanguage } from '../../../../contexts/LanguageContext';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
 import { FilePreview } from '../../../FilePreview/FilePreview';
 import styles from '../ActionButton.module.css';
 
diff --git a/src/components/FormGenerator/ActionButtons/index.ts b/src/components/FormGenerator/ActionButtons/index.ts
index e25af69..d496506 100644
--- a/src/components/FormGenerator/ActionButtons/index.ts
+++ b/src/components/FormGenerator/ActionButtons/index.ts
@@ -4,6 +4,9 @@ export { DeleteActionButton } from './DeleteActionButton';
 export { DownloadActionButton } from './DownloadActionButton';
 export { ViewActionButton } from './ViewActionButton';
 export { CopyActionButton } from './CopyActionButton';
+export { ConnectActionButton } from './ConnectActionButton';
+export { PlayActionButton } from './PlayActionButton';
+export { RemoveActionButton } from './RemoveActionButton';
 
 // Action Button Types
 export type { EditActionButtonProps } from './EditActionButton';
@@ -11,3 +14,6 @@ export type { DeleteActionButtonProps } from './DeleteActionButton';
 export type { DownloadActionButtonProps } from './DownloadActionButton';
 export type { ViewActionButtonProps } from './ViewActionButton';
 export type { CopyActionButtonProps } from './CopyActionButton';
+export type { ConnectActionButtonProps } from './ConnectActionButton';
+export type { PlayActionButtonProps } from './PlayActionButton';
+export type { RemoveActionButtonProps } from './RemoveActionButton';
diff --git a/src/components/FormGenerator/FormGenerator.tsx b/src/components/FormGenerator/FormGenerator.tsx
index 658fc3a..5f31b2d 100644
--- a/src/components/FormGenerator/FormGenerator.tsx
+++ b/src/components/FormGenerator/FormGenerator.tsx
@@ -1,14 +1,16 @@
 import React, { useState, useMemo, useRef, useEffect } from 'react';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { useLanguage } from '../../providers/language/LanguageContext';
 import styles from './FormGenerator.module.css';
 import { 
   EditActionButton, 
   DeleteActionButton, 
   DownloadActionButton, 
   ViewActionButton,
-  CopyActionButton
+  CopyActionButton,
+  ConnectActionButton,
+  PlayActionButton
 } from './ActionButtons';
-import { Button } from '../ui/Button';
+import { Button } from '../UiComponents/Button';
 
 import { IoIosRefresh } from "react-icons/io";
 import { FaTrash } from "react-icons/fa";
@@ -47,7 +49,7 @@ export interface FormGeneratorProps<T = any> {
   isRowSelectable?: (row: T) => boolean;
   loading?: boolean;
   actionButtons?: {
-    type: 'edit' | 'delete' | 'download' | 'view' | 'copy';
+    type: 'edit' | 'delete' | 'download' | 'view' | 'copy' | 'connect' | 'play';
     onAction?: (row: T) => Promise<void> | void; // Optional for delete buttons since they handle their own logic
     disabled?: (row: T) => boolean | { disabled: boolean; message?: string };
     loading?: (row: T) => boolean;
@@ -60,8 +62,11 @@ export interface FormGeneratorProps<T = any> {
     nameField?: string; // Field name for display name
     typeField?: string; // Field name for type/mime type
     contentField?: string; // Field name for content (used by copy button)
+    statusField?: string; // Field name for status (used by connect button)
+    authorityField?: string; // Field name for authority (msft/google) (used by connect button)
     // Operation and loading state names
     operationName?: string; // Name of the operation function in hookData
+    refreshOperationName?: string; // Name of the refresh operation function in hookData (for connect button)
     loadingStateName?: string; // Name of the loading state in hookData
     // Edit configuration (for edit buttons)
     editFields?: Array<{
@@ -201,8 +206,36 @@ export function FormGenerator<T extends Record<string, any>>({
           } else if (column?.type === 'number') {
             return Number(value) === Number(filterValue);
           } else if (column?.type === 'date') {
-            // Convert row value to DD.MM.YYYY format for comparison
-            const rowDate = new Date(value);
+            // Handle Unix timestamps in seconds (backend format) by converting to milliseconds
+            let rowDate: Date;
+            if (typeof value === 'number') {
+              // If it's a number, check if it's in seconds (typical Unix timestamp range)
+              if (value < 10000000000) { // Less than year 2286 in seconds
+                rowDate = new Date(value * 1000); // Convert seconds to milliseconds
+              } else {
+                rowDate = new Date(value); // Already in milliseconds
+              }
+            } else if (typeof value === 'string') {
+              // Check if it's an ISO date string or date string (contains 'T', '-', or ':')
+              if (value.includes('T') || value.includes('-') || value.includes(':')) {
+                rowDate = new Date(value); // Parse as date string (ISO or other formats)
+              } else {
+                // Try to parse as number (Unix timestamp as string)
+                const numValue = parseFloat(value);
+                if (!isNaN(numValue)) {
+                  if (numValue < 10000000000) { // Less than year 2286 in seconds
+                    rowDate = new Date(numValue * 1000); // Convert seconds to milliseconds
+                  } else {
+                    rowDate = new Date(numValue); // Already in milliseconds
+                  }
+                } else {
+                  rowDate = new Date(value); // Fallback: try parsing as date string
+                }
+              }
+            } else {
+              rowDate = new Date(value);
+            }
+            
             const rowFormatted = `${rowDate.getDate().toString().padStart(2, '0')}.${(rowDate.getMonth() + 1).toString().padStart(2, '0')}.${rowDate.getFullYear()}`;
             
             // Check if filter value is complete (DD.MM.YYYY)
@@ -416,7 +449,37 @@ export function FormGenerator<T extends Record<string, any>>({
     switch (column.type) {
       case 'date':
         try {
-          const date = new Date(value);
+          // Handle Unix timestamps in seconds (backend format) by converting to milliseconds
+          let date: Date;
+          if (typeof value === 'number') {
+            // If it's a number, check if it's in seconds (typical Unix timestamp range)
+            // Unix timestamps in seconds are typically much smaller than milliseconds
+            if (value < 10000000000) { // Less than year 2286 in seconds
+              date = new Date(value * 1000); // Convert seconds to milliseconds
+            } else {
+              date = new Date(value); // Already in milliseconds
+            }
+          } else if (typeof value === 'string') {
+            // Check if it's an ISO date string or date string (contains 'T', '-', or ':')
+            if (value.includes('T') || value.includes('-') || value.includes(':')) {
+              date = new Date(value); // Parse as date string (ISO or other formats)
+            } else {
+              // Try to parse as number (Unix timestamp as string)
+              const numValue = parseFloat(value);
+              if (!isNaN(numValue)) {
+                if (numValue < 10000000000) { // Less than year 2286 in seconds
+                  date = new Date(numValue * 1000); // Convert seconds to milliseconds
+                } else {
+                  date = new Date(numValue); // Already in milliseconds
+                }
+              } else {
+                date = new Date(value); // Fallback: try parsing as date string
+              }
+            }
+          } else {
+            date = new Date(value);
+          }
+          
           if (isNaN(date.getTime())) return '-';
           const year = date.getFullYear();
           const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -787,7 +850,10 @@ export function FormGenerator<T extends Record<string, any>>({
                             nameField: actionButton.nameField ?? 'name',
                             typeField: actionButton.typeField ?? 'type',
                             contentField: actionButton.contentField ?? 'content',
+                            statusField: actionButton.statusField ?? 'status',
+                            authorityField: actionButton.authorityField ?? 'authority',
                             operationName: actionButton.operationName,
+                            refreshOperationName: actionButton.refreshOperationName,
                             loadingStateName: actionButton.loadingStateName
                           };
 
@@ -807,7 +873,11 @@ export function FormGenerator<T extends Record<string, any>>({
                             case 'view':
                               return <ViewActionButton key={actionIndex} {...baseProps} onView={actionButton.onAction || (() => {})} isViewing={isProcessing} hookData={hookData} />;
                             case 'copy':
-                              return <CopyActionButton key={actionIndex} {...baseProps} onCopy={actionButton.onAction} isCopying={isProcessing} hookData={hookData} operationName={actionButton.operationName} contentField={actionButton.contentField} />;
+                              return <CopyActionButton key={actionIndex} {...baseProps} onCopy={actionButton.onAction} isCopying={isProcessing} contentField={actionButton.contentField} />;
+                            case 'connect':
+                              return <ConnectActionButton key={actionIndex} {...baseProps} hookData={hookData} />;
+                            case 'play':
+                              return <PlayActionButton key={actionIndex} {...baseProps} onPlay={actionButton.onAction} hookData={hookData} navigateTo={actionButton.navigateTo} />;
                             default:
                               return null;
                           }
diff --git a/src/components/Mitglieder/MitgliederTable.tsx b/src/components/Mitglieder/MitgliederTable.tsx
index 44599e9..d907595 100644
--- a/src/components/Mitglieder/MitgliederTable.tsx
+++ b/src/components/Mitglieder/MitgliederTable.tsx
@@ -1,9 +1,9 @@
 import { FormGenerator } from '../FormGenerator/FormGenerator';
-import { Popup } from '../ui/Popup/Popup';
-import { EditForm, EditFieldConfig } from '../ui/Popup/EditForm';
+import { Popup } from '../UiComponents/Popup/Popup';
+import { EditForm, EditFieldConfig } from '../UiComponents/Popup/EditForm';
 import { useMitgliederLogic } from './mitgliederLogic';
 import { MitgliederTableProps } from './mitgliederTypes';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { useLanguage } from '../../providers/language/LanguageContext';
 import styles from './MitgliederTable.module.css';
 
 function MitgliederTable({ className = '', showAddUser = false, onAddUserClose }: MitgliederTableProps) {
diff --git a/src/components/Mitglieder/mitgliederLogic.tsx b/src/components/Mitglieder/mitgliederLogic.tsx
index 5365ed0..2809e80 100644
--- a/src/components/Mitglieder/mitgliederLogic.tsx
+++ b/src/components/Mitglieder/mitgliederLogic.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import { useOrgUsers } from '../../hooks/useUsers';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { useLanguage } from '../../providers/language/LanguageContext';
 
 import type { 
   MitgliederLogicReturn, 
diff --git a/src/components/Prompts/PromptsTable.module.css b/src/components/Prompts/PromptsTable.module.css
deleted file mode 100644
index 196eb21..0000000
--- a/src/components/Prompts/PromptsTable.module.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.promptsTable {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.promptsFormGenerator {
-  flex: 1;
-  height: 100%;
-}
-
-/* Error state styling */
-.errorState {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  text-align: center;
-  color: var(--color-error, #dc3545);
-  background-color: var(--color-error-bg, #f8d7da);
-  border: 1px solid var(--color-error-border, #f5c6cb);
-  border-radius: 8px;
-  margin: 1rem;
-}
-
-.retryButton {
-  padding: 0.5rem 1rem;
-  background-color: var(--color-primary, #007bff);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-top: 1rem;
-  transition: background-color 0.2s ease;
-}
-
-.retryButton:hover {
-  background-color: var(--color-primary-dark, #0056b3);
-}
-
-/* Prompt-specific styling */
-.promptName {
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.promptContent {
-  color: var(--color-text);
-  line-height: 1.4;
-  max-width: 100%;
-  word-wrap: break-word;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .promptName {
-    font-size: 0.9em;
-  }
-  
-  .promptContent {
-    font-size: 0.85em;
-  }
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .promptName {
-    color: var(--color-text);
-  }
-  
-  .promptContent {
-    color: var(--color-text);
-  }
-}
diff --git a/src/components/Prompts/PromptsTable.tsx b/src/components/Prompts/PromptsTable.tsx
deleted file mode 100644
index 2ca080a..0000000
--- a/src/components/Prompts/PromptsTable.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-
-
-import { FormGenerator } from '../FormGenerator/FormGenerator';
-import { Popup } from '../ui/Popup/Popup';
-import { EditForm } from '../ui/Popup/EditForm';
-import { usePromptsLogic } from './promptsLogic';
-import { PromptsTableProps, Prompt } from './promptsTypes';
-import { useLanguage } from '../../contexts/LanguageContext';
-import styles from './PromptsTable.module.css';
-
-// Helper function to determine if a prompt can be selected/deleted
-const isPromptSelectable = (prompt: Prompt): boolean => {
-  // Primary check: If backend explicitly sets _hideDelete, respect that
-  if (prompt._hideDelete === true) {
-    return false;
-  }
-  
-  // Hardcoded list of the six default system prompt IDs that cannot be selected/deleted
-  const systemPromptIds = [
-    "097d34f0-9fcc-4233-bf1e-e64e13818464",
-    "17546dc6-b792-40e1-9aa1-0fcc4860d0c1", 
-    "17c42519-2bf6-49b4-83f9-3cde7498310c",
-    "2bb85d1e-4e02-4de8-98ae-0e815267d864",
-    "93343a5b-49f0-4dbf-9513-2ab5f6938fd8",
-    "cfb51260-486f-4b42-96fe-ef03f406dcf1"
-  ];
-  
-  // Check if this prompt is one of the system default prompts
-  return !systemPromptIds.includes(prompt.id);
-};
-
-function PromptsTable({ className = '' }: PromptsTableProps) {
-  const { t } = useLanguage();
-  const {
-    prompts,
-    loading,
-    error,
-    columns,
-    actions,
-    handleDeleteSingle,
-    handleDeleteMultiple,
-    editModalOpen,
-    editingPrompt,
-    editPromptFields,
-    handleSavePrompt,
-    handleCancelEdit,
-    refetch
-  } = usePromptsLogic();
-
-  if (error) {
-    return (
-      <div className={styles.errorState}>
-        <p>{t('prompts.error.loading', 'Error loading prompts:')} {error}</p>
-        <button onClick={refetch} className={styles.retryButton}>
-          {t('common.retry', 'Retry')}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`${styles.promptsTable} ${className}`}>
-      <FormGenerator
-        data={prompts}
-        columns={columns}
-        title={t('prompts.title', 'Prompts')}
-        searchable={true}
-        filterable={true}
-        sortable={true}
-        resizable={true}
-        pagination={true}
-        pageSize={10}
-        selectable={true}
-        isRowSelectable={isPromptSelectable}
-        loading={loading}
-        actionButtons={actions}
-        onDelete={handleDeleteSingle}
-        onDeleteMultiple={handleDeleteMultiple}
-        onRefresh={refetch}
-        className={styles.promptsFormGenerator}
-      />
-
-      {/* Edit Modal */}
-      <Popup
-        isOpen={editModalOpen}
-        title={t('prompts.modal.edit.title', 'Edit Prompt')}
-        onClose={handleCancelEdit}
-        size="large"
-      >
-        {editingPrompt && (
-          <EditForm
-            data={editingPrompt}
-            fields={editPromptFields}
-            onSave={handleSavePrompt}
-            onCancel={handleCancelEdit}
-            saveButtonText={t('prompts.modal.edit.save', 'Save Changes')}
-            cancelButtonText={t('common.cancel', 'Cancel')}
-          />
-        )}
-      </Popup>
-    </div>
-  );
-}
-
-export default PromptsTable;
diff --git a/src/components/Prompts/index.ts b/src/components/Prompts/index.ts
deleted file mode 100644
index d3c02fa..0000000
--- a/src/components/Prompts/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as PromptsTable } from './PromptsTable';
-export { usePromptsLogic } from './promptsLogic';
-export type * from './promptsTypes';
diff --git a/src/components/Prompts/promptsLogic.tsx b/src/components/Prompts/promptsLogic.tsx
deleted file mode 100644
index c72416c..0000000
--- a/src/components/Prompts/promptsLogic.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import { useState, useMemo } from 'react';
-
-import { usePrompts, usePromptOperations, Prompt } from '../../hooks/usePrompts';
-import { useLanguage } from '../../contexts/LanguageContext';
-import type { EditFieldConfig } from '../ui/Popup/EditForm';
-
-// Helper function to determine if a prompt can be deleted
-const isPromptDeletable = (prompt: Prompt): boolean => {
-  // Primary check: If backend explicitly sets _hideDelete, respect that
-  if (prompt._hideDelete === true) {
-    return false;
-  }
-  
-  // Hardcoded list of the six default system prompt IDs that cannot be deleted
-  const systemPromptIds = [
-    "097d34f0-9fcc-4233-bf1e-e64e13818464",
-    "17546dc6-b792-40e1-9aa1-0fcc4860d0c1", 
-    "17c42519-2bf6-49b4-83f9-3cde7498310c",
-    "2bb85d1e-4e02-4de8-98ae-0e815267d864",
-    "93343a5b-49f0-4dbf-9513-2ab5f6938fd8",
-    "cfb51260-486f-4b42-96fe-ef03f406dcf1"
-  ];
-  
-  // Check if this prompt is one of the system default prompts
-  return !systemPromptIds.includes(prompt.id);
-};
-
-import type { 
-  PromptsLogicReturn, 
-  PromptActionConfig,
-  PromptColumnConfig 
-} from './promptsTypes';
-
-export function usePromptsLogic(): PromptsLogicReturn {
-  const { prompts, loading, error, refetch } = usePrompts();
-  const { t } = useLanguage();
-  const { 
-    handlePromptDelete,
-    handlePromptUpdate,
-    deletingPrompts
-  } = usePromptOperations();
-
-  // Edit modal state
-  const [editModalOpen, setEditModalOpen] = useState(false);
-  const [editingPrompt, setEditingPrompt] = useState<Prompt | null>(null);
-
-  // Configure edit fields for prompt editing
-  const editPromptFields: EditFieldConfig[] = useMemo(() => [
-    {
-      key: 'name',
-      label: t('prompts.field.name', 'Prompt Name'),
-      type: 'string',
-      editable: true,
-      required: true,
-      validator: (value: string) => {
-        if (!value || value.trim() === '') {
-          return t('prompts.validation.nameRequired', 'Prompt name cannot be empty');
-        }
-        if (value.length > 100) {
-          return t('prompts.validation.nameTooLong', 'Prompt name cannot exceed 100 characters');
-        }
-        return null;
-      }
-    },
-    {
-      key: 'content',
-      label: t('prompts.field.content', 'Prompt Content'),
-      type: 'textarea',
-      editable: true,
-      required: true,
-      minRows: 4,
-      maxRows: 8,
-      validator: (value: string) => {
-        if (!value || value.trim() === '') {
-          return t('prompts.validation.contentRequired', 'Prompt content cannot be empty');
-        }
-        if (value.length > 10000) {
-          return t('prompts.validation.contentTooLong', 'Prompt content cannot exceed 10,000 characters');
-        }
-        return null;
-      }
-    }
-  ], [t]);
-
-  // Configure columns for the prompts table
-  const columns: PromptColumnConfig[] = useMemo(() => [
-    {
-      key: 'name',
-      label: t('prompts.column.name', 'Name'),
-      type: 'string',
-      width: 200,
-      minWidth: 150,
-      maxWidth: 300,
-      sortable: true,
-      filterable: true,
-      searchable: true,
-      formatter: (value: string | undefined) => (
-        <span className="promptName">
-          {value || t('prompts.unnamed', 'Unnamed')}
-        </span>
-      )
-    },
-    {
-      key: 'content',
-      label: t('prompts.column.content', 'Content'),
-      type: 'string',
-      width: 400,
-      minWidth: 200,
-      maxWidth: 600,
-      sortable: true,
-      filterable: true,
-      searchable: true,
-      formatter: (value: string | undefined) => (
-        <span className="promptContent" title={value}>
-          {value && value.length > 100 ? `${value.substring(0, 100)}...` : value || '-'}
-        </span>
-      )
-    }
-  ], [t]);
-
-  // Handle prompt actions
-  const handleDeletePrompt = async (prompt: Prompt) => {
-    const promptName = prompt.name || prompt.id;
-    if (window.confirm(t('prompts.delete.confirm', 'Are you sure you want to delete "{name}"?').replace('{name}', promptName))) {
-      const success = await handlePromptDelete(prompt.id);
-      if (success) {
-        refetch(); // Refresh the prompts list
-      }
-    }
-  };
-
-  // Handle single prompt deletion for bulk delete
-  const handleDeleteSingle = async (prompt: Prompt) => {
-    const promptName = prompt.name || prompt.id;
-    if (window.confirm(t('prompts.delete.confirm', 'Are you sure you want to delete "{name}"?').replace('{name}', promptName))) {
-      const success = await handlePromptDelete(prompt.id);
-      if (success) {
-        refetch(); // Refresh the prompts list
-      } else {
-        console.error('Delete failed for prompt:', prompt.id);
-      }
-    }
-  };
-
-  // Handle multiple prompt deletion
-  const handleDeleteMultiple = async (promptsToDelete: Prompt[]) => {
-    const promptCount = promptsToDelete.length;
-    if (window.confirm(t('prompts.delete.confirmMultiple', 'Are you sure you want to delete {count} prompts?').replace('{count}', promptCount.toString()))) {
-      // Start all delete operations simultaneously
-      const deletePromises = promptsToDelete.map(async (prompt) => {
-        try {
-          const success = await handlePromptDelete(prompt.id);
-          return { promptId: prompt.id, success };
-        } catch (error) {
-          console.error('Failed to delete prompt:', prompt.id, error);
-          return { promptId: prompt.id, success: false };
-        }
-      });
-
-      // Wait for all deletions to complete
-      const results = await Promise.all(deletePromises);
-      
-      // Check if any deletions failed
-      const failedDeletions = results.filter(result => !result.success);
-      if (failedDeletions.length > 0) {
-        console.error('Some prompt deletions failed:', failedDeletions);
-      }
-      
-      // Refresh the prompt list regardless of individual failures
-      refetch();
-    }
-  };
-
-  // Handle edit prompt
-  const handleEditPrompt = (prompt: Prompt) => {
-    setEditingPrompt(prompt);
-    setEditModalOpen(true);
-  };
-
-  // Handle save prompt
-  const handleSavePrompt = async (updatedPrompt: Prompt) => {
-    if (!editingPrompt) return;
-
-    try {
-      // Call API to update prompt - backend requires full Prompt object
-      const updateData = {
-        id: editingPrompt.id,
-        name: updatedPrompt.name,
-        content: updatedPrompt.content,
-        mandateId: editingPrompt.mandateId
-      };
-      
-      const result = await handlePromptUpdate(editingPrompt.id, updateData);
-      
-      if (result.success) {
-        // Close modal
-        setEditModalOpen(false);
-        setEditingPrompt(null);
-        
-        // Refresh prompt list
-        await refetch();
-        
-        // Notify other components that prompts have been updated
-        window.dispatchEvent(new CustomEvent('promptUpdated', { 
-          detail: { promptId: editingPrompt.id, newName: updatedPrompt.name }
-        }));
-      } else {
-        console.error('Failed to update prompt:', result.error);
-        // TODO: Show error message to user
-      }
-    } catch (error) {
-      console.error('Failed to update prompt:', error);
-      // TODO: Show error message to user
-    }
-  };
-
-  // Handle cancel edit
-  const handleCancelEdit = () => {
-    setEditModalOpen(false);
-    setEditingPrompt(null);
-  };
-
-  // Handle copy prompt
-  const handleCopyPrompt = async (prompt: Prompt) => {
-    try {
-      // Use the modern Clipboard API if available
-      if (navigator.clipboard && window.isSecureContext) {
-        await navigator.clipboard.writeText(prompt.content);
-      } else {
-        // Fallback for older browsers or non-secure contexts
-        const textArea = document.createElement('textarea');
-        textArea.value = prompt.content;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        document.execCommand('copy');
-        document.body.removeChild(textArea);
-      }
-      
-      // Show success feedback
-      const promptName = prompt.name || t('prompts.unnamed', 'Unnamed');
-      console.log(`Copied content of "${promptName}" to clipboard`);
-      
-      // Optional: You could add a toast notification here in the future
-      // showToast(t('prompts.copy.success', 'Prompt content copied to clipboard'), 'success');
-      
-    } catch (error) {
-      console.error('Failed to copy prompt content:', error);
-      
-      // Optional: You could add a toast notification here in the future
-      // showToast(t('prompts.copy.error', 'Failed to copy prompt content'), 'error');
-    }
-  };
-
-  // Configure action buttons
-  const actions: PromptActionConfig[] = useMemo(() => [
-    {
-      type: 'edit',
-      title: t('prompts.action.edit', 'Edit'),
-      onAction: (row: Prompt) => {
-        handleEditPrompt(row);
-      }
-    },
-    {
-      type: 'copy',
-      title: t('prompts.action.copy', 'Copy'),
-      onAction: (row: Prompt) => {
-        handleCopyPrompt(row);
-      }
-    },
-    {
-      type: 'delete',
-      title: (row: Prompt) => {
-        const isDeletable = isPromptDeletable(row);
-        return isDeletable 
-          ? t('prompts.action.delete', 'Delete')
-          : t('prompts.action.delete.disabled', 'No permission to delete prompt');
-      },
-      disabled: (row: Prompt) => !isPromptDeletable(row)
-      // onAction is handled by FormGenerator for delete confirmation
-    },
-  ] as any, [t, deletingPrompts, handleDeletePrompt, handleEditPrompt, handleCopyPrompt]);
-
-  return {
-    // Data
-    prompts,
-    loading,
-    error,
-    
-    // Actions
-    handleDeleteSingle,
-    handleDeleteMultiple,
-    handleEditPrompt,
-    handleCopyPrompt,
-    
-    // Refetch function
-    refetch,
-    
-    // Additional data for rendering
-    columns,
-    actions,
-    
-    // Edit modal state
-    editModalOpen,
-    editingPrompt,
-    editPromptFields,
-    
-    // Edit modal actions
-    handleSavePrompt,
-    handleCancelEdit
-  };
-}
diff --git a/src/components/Prompts/promptsTypes.ts b/src/components/Prompts/promptsTypes.ts
deleted file mode 100644
index e7b19f2..0000000
--- a/src/components/Prompts/promptsTypes.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-
-// Prompt interface based on the API response
-export interface Prompt {
-  id: string;
-  mandateId: string;
-  content: string;
-  name: string;
-  _createdBy?: string; // Optional field to track who created the prompt
-  _hideDelete?: boolean; // Backend access control flag
-}
-
-// Props for the PromptsTable component
-export interface PromptsTableProps {
-  className?: string;
-}
-
-// Action configuration for prompt actions
-export interface PromptActionConfig {
-  type: 'edit' | 'delete' | 'download' | 'view' | 'copy';
-  title?: string | ((row: Prompt) => string);
-  onAction?: (row: Prompt) => Promise<void> | void;
-  disabled?: (row: Prompt) => boolean | { disabled: boolean; message?: string };
-  loading?: (row: Prompt) => boolean;
-}
-
-// Column configuration for the prompts table
-export interface PromptColumnConfig {
-  key: string;
-  label: string;
-  type: 'string' | 'number' | 'date' | 'boolean' | 'enum';
-  width: number;
-  minWidth: number;
-  maxWidth: number;
-  sortable: boolean;
-  filterable: boolean;
-  searchable?: boolean;
-  filterOptions?: string[];
-  formatter: (value: any, row?: any) => React.ReactElement | string;
-}
-
-// Return type for the prompts logic hook
-export interface PromptsLogicReturn {
-  // Data
-  prompts: Prompt[];
-  loading: boolean;
-  error: string | null;
-  
-  // Actions
-  handleDeleteSingle: (prompt: Prompt) => Promise<void>;
-  handleDeleteMultiple: (prompts: Prompt[]) => Promise<void>;
-  handleEditPrompt: (prompt: Prompt) => void;
-  handleCopyPrompt: (prompt: Prompt) => void;
-  
-  // Refetch function
-  refetch: () => Promise<void>;
-  
-  // Additional data for rendering
-  columns: PromptColumnConfig[];
-  actions: PromptActionConfig[];
-  
-  // Edit modal state
-  editModalOpen: boolean;
-  editingPrompt: Prompt | null;
-  editPromptFields: any[];
-  
-  // Edit modal actions
-  handleSavePrompt: (updatedPrompt: Prompt) => Promise<void>;
-  handleCancelEdit: () => void;
-}
diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index 592c0cf..757d2b3 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -7,7 +7,7 @@ import styles from './SidebarStyles/SidebarItem.module.css';
 import SidebarSubmenu from "./SidebarSubmenu";
 import { SidebarItemProps } from "./sidebarTypes";
 
-const SidebarItem: React.FC<SidebarItemProps> = ({ 
+const SidebarItem: React.FC<SidebarItemProps> = React.memo(({ 
   item, 
   isOpen, 
   onToggle, 
@@ -84,6 +84,8 @@ const SidebarItem: React.FC<SidebarItemProps> = ({
             {hasSubItems && !isMinimized && !isDisabled && <SidebarSubmenu item={item} isOpen={isOpen} />}
         </div>
     );
-};
+});
+
+SidebarItem.displayName = 'SidebarItem';
 
 export default SidebarItem;
\ No newline at end of file
diff --git a/src/components/Sidebar/SidebarUser.tsx b/src/components/Sidebar/SidebarUser.tsx
index a671cc9..1a5e2e8 100644
--- a/src/components/Sidebar/SidebarUser.tsx
+++ b/src/components/Sidebar/SidebarUser.tsx
@@ -2,16 +2,19 @@ import React, { useState, useEffect, useRef } from 'react'
 import { useMsal } from '@azure/msal-react'
 import { FaSignOutAlt } from 'react-icons/fa'
 import styles from './SidebarStyles/SidebarUser.module.css'
-import { useCurrentUser, User } from '../../hooks/useUsers'
+import { User } from '../../hooks/useUsers'
 import { SidebarUserProps } from './sidebarTypes';
+import { getUserDataCache, CachedUserData } from '../../utils/userCache';
+import { useCurrentUser } from '../../hooks/useUsers';
 
 const SidebarUser: React.FC<SidebarUserProps> = ({ isMinimized = false }) => {
     const { instance } = useMsal();
-    const { user: currentUser, isLoading: currentUserLoading, logout } = useCurrentUser();
+    const { logout } = useCurrentUser(); // Only use logout function from hook
     
-    // Local state for user data created from currentUser
+    // Local state for user data created from cached data
     const [user, setUser] = useState<User | null>(null);
     const [userError, setUserError] = useState<string | null>(null);
+    const [cachedUserData, setCachedUserData] = useState<CachedUserData | null>(null);
     
     const [showLogoutMenu, setShowLogoutMenu] = useState(false);
     const [isLoggingOut, setIsLoggingOut] = useState(false);
@@ -50,40 +53,58 @@ const SidebarUser: React.FC<SidebarUserProps> = ({ isMinimized = false }) => {
         }
     };
 
-    // Use currentUser data directly instead of making API calls
+    // Load cached user data on mount and when user updates
     useEffect(() => {
-        console.log('🔍 SidebarUser useEffect: currentUser:', currentUser);
+        const loadCachedUserData = () => {
+            const cached = getUserDataCache();
+            setCachedUserData(cached);
+            
+            if (cached?.id) {
+                // Create a User object from cached data with fallback values
+                const userData: User = {
+                    id: cached.id,
+                    username: cached.username,
+                    email: cached.email || cached.username, // Use email or username as fallback
+                    fullName: cached.fullName || cached.username.split('@')[0] || cached.username,
+                    language: cached.language || 'de', // Default language
+                    enabled: cached.enabled ?? true, // Assume enabled if logged in
+                    privilege: cached.privilege || 'user',
+                    authenticationAuthority: cached.authenticationAuthority || 'local',
+                    mandateId: cached.mandateId || ''
+                };
+                setUser(userData);
+                setUserError(null);
+            } else {
+                setUser(null);
+            }
+        };
         
-        if (currentUser?.id) {
-            console.log('✅ SidebarUser: Using currentUser data directly (avoiding CORS issues)');
-            // Create a User object from currentUser data with fallback values
-            const userData: User = {
-                id: currentUser.id,
-                username: currentUser.username,
-                email: currentUser.username, // Use username as email fallback
-                fullName: currentUser.username.split('@')[0] || currentUser.username, // Extract name from email
-                language: 'de', // Default language
-                enabled: true, // Assume enabled if logged in
-                privilege: currentUser.privilege || 'user',
-                authenticationAuthority: currentUser.authenticationAuthority || 'local',
-                mandateId: currentUser.mandateId || ''
-            };
-            setUser(userData);
-            setUserError(null);
-            console.log('✅ SidebarUser: User data set from currentUser:', userData);
-        } else {
-            console.log('⚠️ SidebarUser: No currentUser available');
-            setUser(null);
-        }
-    }, [currentUser]);
+        loadCachedUserData();
+    }, []); // Empty dependency array - only run on mount
 
     // Listen for user updates from settings page
     useEffect(() => {
         const handleUserUpdate = () => {
-            // Trigger re-evaluation of currentUser data
-            if (currentUser?.id) {
-                // User data will be updated automatically through currentUser dependency
-                console.log('🔄 SidebarUser: User info updated event received');
+            // Refresh cached user data when user info is updated
+            const cached = getUserDataCache();
+            setCachedUserData(cached);
+            
+            if (cached?.id) {
+                const userData: User = {
+                    id: cached.id,
+                    username: cached.username,
+                    email: cached.email || cached.username,
+                    fullName: cached.fullName || cached.username.split('@')[0] || cached.username,
+                    language: cached.language || 'de',
+                    enabled: cached.enabled ?? true,
+                    privilege: cached.privilege || 'user',
+                    authenticationAuthority: cached.authenticationAuthority || 'local',
+                    mandateId: cached.mandateId || ''
+                };
+                setUser(userData);
+                setUserError(null);
+            } else {
+                setUser(null);
             }
         };
 
@@ -91,7 +112,7 @@ const SidebarUser: React.FC<SidebarUserProps> = ({ isMinimized = false }) => {
         return () => {
             window.removeEventListener('userInfoUpdated', handleUserUpdate);
         };
-    }, [currentUser?.id]);
+    }, []); // Empty dependency array - only set up listener once
 
     // Close popup when clicking outside
     useEffect(() => {
@@ -110,7 +131,7 @@ const SidebarUser: React.FC<SidebarUserProps> = ({ isMinimized = false }) => {
         };
     }, [showLogoutMenu]);
 
-    if (currentUserLoading) {
+    if (!cachedUserData) {
         return (
             <div className={`${styles.user_section} ${isMinimized ? styles.minimized : ''}`}>
                 <div className={styles.userContainer}>Lädt...</div>
diff --git a/src/components/Speech/SpeechConfirmation.tsx b/src/components/Speech/SpeechConfirmation.tsx
index 96085f8..b245fdd 100644
--- a/src/components/Speech/SpeechConfirmation.tsx
+++ b/src/components/Speech/SpeechConfirmation.tsx
@@ -2,7 +2,7 @@ import { IoIosCheckmarkCircle, IoIosMail, IoIosCall, IoIosTime, IoIosRefresh } f
 import { useNavigate } from 'react-router-dom';
 import sharedStyles from '../../core/PageManager/pages.module.css';
 import styles from './SpeechConfirmation.module.css';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { useLanguage } from '../../providers/language/LanguageContext';
 
 interface MandateData {
   id: string;
diff --git a/src/components/Speech/SpeechInfo.tsx b/src/components/Speech/SpeechInfo.tsx
index 41ff633..b690dfe 100644
--- a/src/components/Speech/SpeechInfo.tsx
+++ b/src/components/Speech/SpeechInfo.tsx
@@ -1,6 +1,6 @@
 import { IoIosLink, IoIosCall, IoIosAnalytics, IoIosFingerPrint, IoIosBook, IoIosChatbubbles, IoIosDesktop } from 'react-icons/io';
 import styles from './SpeechInfo.module.css';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { useLanguage } from '../../providers/language/LanguageContext';
 
 function SpeechInfo() {
   const { t } = useLanguage();
diff --git a/src/components/Speech/SpeechSettings.tsx b/src/components/Speech/SpeechSettings.tsx
index 4276c89..013243b 100644
--- a/src/components/Speech/SpeechSettings.tsx
+++ b/src/components/Speech/SpeechSettings.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { IoIosBusiness, IoIosContact, IoIosTime, IoIosRefresh } from 'react-icons/io';
 import sharedStyles from '../../core/PageManager/pages.module.css';
 import styles from './SpeechSettings.module.css';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { useLanguage } from '../../providers/language/LanguageContext';
 
 interface MandateData {
   id: string;
diff --git a/src/components/Speech/SpeechSignUp.tsx b/src/components/Speech/SpeechSignUp.tsx
index ca65ce9..0c98f34 100644
--- a/src/components/Speech/SpeechSignUp.tsx
+++ b/src/components/Speech/SpeechSignUp.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { IoIosArrowBack, IoIosBusiness, IoIosPeople } from 'react-icons/io';
 import sharedStyles from '../../core/PageManager/pages.module.css';
 import styles from './SpeechSignUp.module.css';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { useLanguage } from '../../providers/language/LanguageContext';
 
 interface SpeechSignUpProps {
   onBack: () => void;
diff --git a/src/components/TestSharepoint/TestSharepointTable.module.css b/src/components/TestSharepoint/TestSharepointTable.module.css
deleted file mode 100644
index 8b8b048..0000000
--- a/src/components/TestSharepoint/TestSharepointTable.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.testSharepointTable {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.errorState {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 20px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-error, #dc3545);
-  border-radius: 8px;
-  color: var(--color-error, #dc3545);
-  text-align: center;
-  gap: 15px;
-}
-
-.retryButton {
-  padding: 8px 16px;
-  background: var(--color-error, #dc3545);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: var(--font-family);
-  font-size: 14px;
-  transition: background-color 0.2s ease;
-}
-
-.retryButton:hover {
-  background: var(--color-error-hover, #c82333);
-}
-
-.sharepointFormGenerator {
-  width: 100%;
-}
diff --git a/src/components/TestSharepoint/TestSharepointTable.tsx b/src/components/TestSharepoint/TestSharepointTable.tsx
deleted file mode 100644
index 36e9b02..0000000
--- a/src/components/TestSharepoint/TestSharepointTable.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { FormGenerator } from '../FormGenerator';
-import { useLanguage } from '../../contexts/LanguageContext';
-import styles from './TestSharepointTable.module.css';
-import { useTestSharepointLogic } from './testSharepointLogic';
-import type { TestSharepointTableProps } from './testSharepointInterfaces';
-
-export function TestSharepointTable({ 
-  className = '', 
-  documents, 
-  documentsLoading, 
-  documentsError, 
-  columns, 
-  actions,
-  onRowClick
-}: TestSharepointTableProps) {
-  const { t } = useLanguage();
-  
-  // Get fallback data from hook if props not provided (for backwards compatibility)
-  const hookData = useTestSharepointLogic();
-  
-  // Use props data if provided, otherwise fall back to hook data
-  const actualDocuments = documents ?? hookData.documents;
-  const actualLoading = documentsLoading ?? hookData.documentsLoading;
-  const actualError = documentsError ?? hookData.documentsError;
-  const actualColumns = columns ?? hookData.columns;
-  const actualActions = actions ?? hookData.actions;
-
-  // Debug the data being passed to FormGenerator
-  console.log('TestSharepointTable - actualDocuments:', actualDocuments);
-  console.log('TestSharepointTable - actualLoading:', actualLoading);
-  console.log('TestSharepointTable - actualError:', actualError);
-  console.log('TestSharepointTable - actualColumns:', actualColumns);
-
-  // Show error state
-  if (actualError) {
-    return (
-      <div className={`${styles.testSharepointTable} ${className}`}>
-        <div className={styles.errorState}>
-          <p>{t('sharepoint.error.loading', 'Error loading SharePoint documents:')} {actualError}</p>
-          <button onClick={() => window.location.reload()} className={styles.retryButton}>
-            {t('sharepoint.button.retry', 'Retry')}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`${styles.testSharepointTable} ${className}`}>
-      <FormGenerator
-        data={actualDocuments}
-        columns={actualColumns}
-        title={t('sharepoint.table.title', 'SharePoint Documents')}
-        loading={actualLoading}
-        searchable={true}
-        filterable={true}
-        sortable={true}
-        resizable={true}
-        pagination={true}
-        pageSize={10}
-        pageSizeOptions={[10, 25, 50, 100]}
-        showPageSizeSelector={true}
-        selectable={false}
-        onRowClick={onRowClick}
-        actionButtons={actualActions}
-        className={styles.sharepointFormGenerator}
-      />
-    </div>
-  );
-}
-
-export default TestSharepointTable;
diff --git a/src/components/TestSharepoint/index.ts b/src/components/TestSharepoint/index.ts
deleted file mode 100644
index ea7a8e3..0000000
--- a/src/components/TestSharepoint/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export { TestSharepointTable } from './TestSharepointTable';
-export { useTestSharepointLogic } from './testSharepointLogic';
-export type { 
-  TestSharepointTableProps,
-  TableAction,
-  SharePointHandlers,
-  SharePointOperationsReturn,
-  SharePointConnectionsReturn,
-  SharePointTableConfig,
-  TestSharepointLogicReturn
-} from './testSharepointInterfaces';
diff --git a/src/components/TestSharepoint/testSharepointInterfaces.ts b/src/components/TestSharepoint/testSharepointInterfaces.ts
deleted file mode 100644
index 515dff0..0000000
--- a/src/components/TestSharepoint/testSharepointInterfaces.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { ColumnConfig } from '../FormGenerator';
-import React from 'react';
-
-// Re-export SharePoint-related interfaces from hooks
-export type { 
-  SharePointConnection, 
-  SharePointDocument, 
-  SharePointResponse,
-  SharePointListRequest,
-  SharePointFindRequest,
-  SharePointReadRequest,
-  SharePointUploadRequest
-} from '../../hooks/useSharePointTest';
-
-// Import for local use
-import type { SharePointConnection, SharePointDocument } from '../../hooks/useSharePointTest';
-
-// Component Props Interfaces
-export interface TestSharepointTableProps {
-  className?: string;
-  documents?: SharePointDocument[];
-  documentsLoading?: boolean;
-  documentsError?: string | null;
-  columns?: any[];
-  actions?: any[];
-  onRowClick?: (row: any) => void;
-}
-
-// Table Action Interface
-export interface TableAction {
-  label: string;
-  onClick?: (document: SharePointDocument) => Promise<void> | void;
-  icon: React.ReactNode | ((document: SharePointDocument) => React.ReactNode);
-}
-
-// SharePoint Operation Handler Types
-export interface SharePointHandlers {
-  handleConnectionTest: (connectionId: string) => Promise<boolean>;
-  handleListDocuments: (connectionId: string, siteUrl: string, folderPaths: string[]) => Promise<SharePointDocument[]>;
-  handleFindDocuments: (connectionId: string, siteUrl: string, query: string) => Promise<SharePointDocument[]>;
-  handleReadDocument: (connectionId: string, siteUrl: string, documentPath: string) => Promise<{ success: boolean; data?: any; error?: string }>;
-}
-
-// Hook Return Types for SharePoint Operations
-export interface SharePointOperationsReturn extends SharePointHandlers {
-  testingConnections: Set<string>;
-  loadingDocuments: boolean;
-  connectionError: string | null;
-  documentsError: string | null;
-  isLoading: boolean;
-}
-
-// Hook Return Types for SharePoint Connections
-export interface SharePointConnectionsReturn {
-  connections: SharePointConnection[];
-  loading: boolean;
-  error: string | null;
-  refetch: () => Promise<void>;
-  testConnection: (connectionId: string) => Promise<any>;
-}
-
-// SharePoint Table Configuration
-export interface SharePointTableConfig {
-  columns: ColumnConfig[];
-  actions: TableAction[];
-  pageSize: number;
-  searchable: boolean;
-  filterable: boolean;
-  sortable: boolean;
-  resizable: boolean;
-  pagination: boolean;
-}
-
-// Hook Return Type for TestSharepoint Logic
-export interface TestSharepointLogicReturn {
-  // Connection data
-  connections: SharePointConnection[];
-  selectedConnection: SharePointConnection | null;
-  connectionLoading: boolean;
-  connectionError: string | null;
-  
-  // Document data
-  documents: SharePointDocument[];
-  documentsLoading: boolean;
-  documentsError: string | null;
-  
-  // Table configuration
-  columns: ColumnConfig[];
-  actions: TableAction[];
-  
-  // Connection testing
-  testingConnections: Set<string>;
-  connectionTestResults: Record<string, any>;
-  
-  // Site discovery
-  discoveredSites: any[];
-  sitesDiscovered: boolean;
-  
-  // Token debug
-  tokenDebugInfo: any;
-  
-  // Handlers
-  handleSelectConnection: (connectionId: string) => void;
-  handleTestConnection: (connectionId: string) => Promise<void>;
-  handleListDocuments: (siteUrl?: string, folderPaths?: string[]) => Promise<void>;
-  handleDiscoverSites: () => Promise<void>;
-  handleSelectSite: (siteUrl: string) => void;
-  handleDebugTokens: () => Promise<void>;
-  handleCleanupTokens: () => Promise<void>;
-  handleFolderNavigation: (document: SharePointDocument, currentPath: string) => string;
-  refetchConnections: () => Promise<void>;
-}
diff --git a/src/components/TestSharepoint/testSharepointLogic.tsx b/src/components/TestSharepoint/testSharepointLogic.tsx
deleted file mode 100644
index addec42..0000000
--- a/src/components/TestSharepoint/testSharepointLogic.tsx
+++ /dev/null
@@ -1,395 +0,0 @@
-import { useMemo, useState, useEffect } from 'react';
-import { IoIosLink, IoIosCloudDownload } from 'react-icons/io';
-
-import { ColumnConfig } from '../FormGenerator';
-import { useSharePointTest } from '../../hooks/useSharePointTest';
-import { useLanguage } from '../../contexts/LanguageContext';
-import type { 
-  TableAction, 
-  SharePointConnection,
-  SharePointDocument,
-  TestSharepointLogicReturn
-} from './testSharepointInterfaces';
-
-export function useTestSharepointLogic(): TestSharepointLogicReturn {
-  const { 
-    getConnections, 
-    testConnection, 
-    listDocuments,
-    discoverSites,
-    debugTokenDetails,
-    cleanupTokens,
-    isLoading
-  } = useSharePointTest();
-  const { t } = useLanguage();
-
-  // State management
-  const [connections, setConnections] = useState<SharePointConnection[]>([]);
-  const [selectedConnection, setSelectedConnection] = useState<SharePointConnection | null>(null);
-  const [connectionLoading, setConnectionLoading] = useState(false);
-  const [connectionError, setConnectionError] = useState<string | null>(null);
-
-  const [documents, setDocuments] = useState<SharePointDocument[]>([]);
-  const [documentsLoading, setDocumentsLoading] = useState(false);
-  const [documentsError, setDocumentsError] = useState<string | null>(null);
-
-  const [testingConnections, setTestingConnections] = useState<Set<string>>(new Set());
-  const [connectionTestResults, setConnectionTestResults] = useState<Record<string, any>>({});
-
-  const [discoveredSites, setDiscoveredSites] = useState<any[]>([]);
-  const [sitesDiscovered, setSitesDiscovered] = useState(false);
-  const [tokenDebugInfo, setTokenDebugInfo] = useState<any>(null);
-
-  // Load connections on mount
-  useEffect(() => {
-    loadConnections();
-  }, []);
-
-  const loadConnections = async () => {
-    setConnectionLoading(true);
-    setConnectionError(null);
-    try {
-      const conns = await getConnections();
-      setConnections(conns);
-      if (conns.length > 0 && !selectedConnection) {
-        setSelectedConnection(conns[0]);
-      }
-    } catch (error) {
-      console.error('Failed to load connections:', error);
-      setConnectionError(error instanceof Error ? error.message : 'Failed to load connections');
-    } finally {
-      setConnectionLoading(false);
-    }
-  };
-
-  // Configure columns for the SharePoint documents table
-  const columns: ColumnConfig[] = useMemo(() => [
-    {
-      key: 'documentName',
-      label: t('sharepoint.column.documentName', 'Document Name'),
-      type: 'string',
-      width: 300,
-      minWidth: 200,
-      maxWidth: 400,
-      sortable: true,
-      filterable: true,
-      searchable: true,
-      formatter: (value: string, row: any) => (
-        <span 
-          style={{ 
-            color: 'var(--color-text)', 
-            fontWeight: 500,
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            cursor: row?.type === 'folder' ? 'pointer' : 'default'
-          }} 
-          title={value}
-        >
-          {row?.type === 'folder' ? '📁' : '📄'} {value}
-        </span>
-      )
-    },
-    {
-      key: 'mimeType',
-      label: t('sharepoint.column.mimeType', 'MIME Type'),
-      type: 'string',
-      width: 200,
-      minWidth: 150,
-      maxWidth: 300,
-      sortable: true,
-      filterable: true,
-      searchable: true,
-    },
-    {
-      key: 'size',
-      label: t('sharepoint.column.size', 'Size'),
-      type: 'number',
-      width: 140,
-      minWidth: 120,
-      maxWidth: 180,
-      sortable: true,
-      filterable: false,
-      formatter: (value: number | string | undefined) => {
-        if (!value || value === 0) return '-';
-        
-        const sizeInBytes = typeof value === 'string' ? parseInt(value, 10) : value;
-        const units = ['Bytes', 'KB', 'MB', 'GB'];
-        let size = sizeInBytes;
-        let unitIndex = 0;
-        
-        while (size >= 1024 && unitIndex < units.length - 1) {
-          size /= 1024;
-          unitIndex++;
-        }
-        
-        return (
-          <span style={{ fontWeight: 500, color: 'var(--color-text)' }}>
-            {`${size.toFixed(1)} ${units[unitIndex]}`}
-          </span>
-        );
-      }
-    },
-    {
-      key: 'path',
-      label: t('sharepoint.column.path', 'Path'),
-      type: 'string',
-      width: 250,
-      minWidth: 200,
-      maxWidth: 400,
-      sortable: true,
-      filterable: true,
-      searchable: true,
-    },
-  ], [t]);
-
-  // Handle connection selection
-  const handleSelectConnection = (connectionId: string) => {
-    const connection = connections.find(conn => conn.id === connectionId);
-    if (connection) {
-      setSelectedConnection(connection);
-      // Clear documents when changing connection
-      setDocuments([]);
-      setDocumentsError(null);
-    }
-  };
-
-  // Handle connection testing
-  const handleTestConnection = async (connectionId: string) => {
-    setTestingConnections(prev => new Set(prev).add(connectionId));
-    try {
-      const result = await testConnection(connectionId);
-      setConnectionTestResults(prev => ({ ...prev, [connectionId]: result }));
-    } catch (error) {
-      console.error('Connection test failed:', error);
-      setConnectionTestResults(prev => ({ 
-        ...prev, 
-        [connectionId]: { 
-          success: false, 
-          error: error instanceof Error ? error.message : 'Connection test failed' 
-        } 
-      }));
-    } finally {
-      setTestingConnections(prev => {
-        const newSet = new Set(prev);
-        newSet.delete(connectionId);
-        return newSet;
-      });
-    }
-  };
-
-  // Handle listing documents
-  const handleListDocuments = async (siteUrl?: string, folderPaths?: string[]) => {
-    if (!selectedConnection) {
-      setDocumentsError('No connection selected');
-      return;
-    }
-
-    setDocumentsLoading(true);
-    setDocumentsError(null);
-    
-    try {
-      const connectionReference = `connection:${selectedConnection.authority}:${selectedConnection.externalUsername}:${selectedConnection.id}`;
-      
-      const response = await listDocuments({
-        connectionReference,
-        siteUrl: siteUrl || 'https://your-tenant.sharepoint.com/sites/your-site',
-        folderPaths: folderPaths || ['/'],
-        includeSubfolders: false,
-        expectedDocumentFormats: [{ extension: '.json', mimeType: 'application/json' }]
-      });
-
-      console.log('SharePoint response:', response);
-      
-      if (response.success && response.data?.documents) {
-        // Extract the actual files from the nested structure
-        const documents = response.data.documents;
-        if (documents.length > 0 && documents[0].documentData?.listResults) {
-          // Flatten all files from all folder results
-          const allFiles: SharePointDocument[] = [];
-          documents[0].documentData.listResults.forEach((folderResult: any) => {
-            if (folderResult.items && Array.isArray(folderResult.items)) {
-              folderResult.items.forEach((item: any) => {
-                // Convert SharePoint item to our document format
-                allFiles.push({
-                  documentName: item.name || 'Unknown',
-                  mimeType: item.file?.mimeType || (item.type === 'folder' ? 'folder' : 'unknown'),
-                  size: item.size || 0,
-                  path: folderResult.folderPath || '/',
-                  type: item.type || (item.folder ? 'folder' : 'file'),
-                  id: item.id,
-                  documentData: item // Store the full item data
-                });
-              });
-            }
-          });
-          console.log('Extracted files:', allFiles);
-          console.log('Sample file structure:', allFiles[0]);
-          setDocuments(allFiles);
-        } else {
-          console.log('No listResults found in response');
-          setDocuments([]);
-        }
-      } else {
-        console.log('Response error or no documents:', response);
-        setDocumentsError(response.error || 'Failed to list documents');
-        setDocuments([]);
-      }
-    } catch (error) {
-      console.error('Failed to list documents:', error);
-      setDocumentsError(error instanceof Error ? error.message : 'Failed to list documents');
-      setDocuments([]);
-    } finally {
-      setDocumentsLoading(false);
-    }
-  };
-
-  // Handle site discovery
-  const handleDiscoverSites = async () => {
-    if (!selectedConnection) {
-      return;
-    }
-
-    try {
-      const result = await discoverSites();
-      if (result.success && result.data && result.data.sites) {
-        setDiscoveredSites(result.data.sites);
-        setSitesDiscovered(true);
-        setDocumentsError(null); // Clear any previous errors
-      } else {
-        console.error('Site discovery failed:', result);
-        setDiscoveredSites([]);
-        setSitesDiscovered(true); // Set to true so we show the "no sites" message
-        // Set error message to help user understand what went wrong
-        const errorMsg = result.error || result.message || 'Unknown error occurred';
-        setDocumentsError(`Site discovery failed: ${errorMsg}`);
-      }
-    } catch (error) {
-      console.error('Site discovery failed:', error);
-      setDiscoveredSites([]);
-      setSitesDiscovered(true);
-      setDocumentsError(`Site discovery error: ${error instanceof Error ? error.message : 'Network or authentication error'}`);
-    }
-  };
-
-  // Handle site selection
-  const handleSelectSite = (siteUrl: string) => {
-    // This will be used by the parent component
-    console.log('Site selected:', siteUrl);
-  };
-
-  // Handle token debug
-  const handleDebugTokens = async () => {
-    try {
-      const result = await debugTokenDetails();
-      setTokenDebugInfo(result);
-      console.log('Token debug info:', result);
-    } catch (error) {
-      console.error('Token debug failed:', error);
-      setTokenDebugInfo({ error: error instanceof Error ? error.message : 'Failed to get token info' });
-    }
-  };
-
-  // Handle token cleanup
-  const handleCleanupTokens = async () => {
-    try {
-      const result = await cleanupTokens();
-      console.log('Token cleanup result:', result);
-      // Clear the debug info to force refresh
-      setTokenDebugInfo(null);
-      // Show success message
-      setDocumentsError(null);
-      alert(`Success! Deleted ${result.data?.tokensDeleted || 0} tokens. Please reconnect your Microsoft account now.`);
-    } catch (error) {
-      console.error('Token cleanup failed:', error);
-      alert(`Token cleanup failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  };
-
-  // Handle folder navigation
-  const handleFolderNavigation = (document: SharePointDocument, currentPath: string) => {
-    if (document.type === 'folder') {
-      // Build the new path by combining current path with folder name
-      const newPath = currentPath === '/' ? `/${document.documentName}` : `${currentPath}/${document.documentName}`;
-      console.log('Navigating to folder:', newPath);
-      return newPath;
-    }
-    return currentPath;
-  };
-
-  // Handle document actions
-  const handleViewDocument = async (document: SharePointDocument) => {
-    console.log('View document:', document);
-    // TODO: Implement document viewing
-  };
-
-  const handleDownloadDocument = async (document: SharePointDocument) => {
-    console.log('Download document:', document);
-    // TODO: Implement document download
-  };
-
-  // Configure action buttons
-  const actions: TableAction[] = useMemo(() => [
-    {
-      label: t('sharepoint.action.view', 'View'),
-      icon: <IoIosLink />,
-      onClick: (document: SharePointDocument) => {
-        handleViewDocument(document);
-      }
-    },
-    {
-      label: t('sharepoint.action.download', 'Download'),
-      icon: <IoIosCloudDownload />,
-      onClick: (document: SharePointDocument) => {
-        handleDownloadDocument(document);
-      }
-    }
-  ], [t]);
-
-  // Refetch connections
-  const refetchConnections = async () => {
-    await loadConnections();
-  };
-
-  return {
-    // Connection data
-    connections,
-    selectedConnection,
-    connectionLoading,
-    connectionError,
-    
-    // Document data
-    documents,
-    documentsLoading: documentsLoading || isLoading,
-    documentsError,
-    
-    // Table configuration
-    columns,
-    actions,
-    
-    // Connection testing
-    testingConnections,
-    connectionTestResults,
-    
-    // Site discovery
-    discoveredSites,
-    sitesDiscovered,
-    
-    // Token debug
-    tokenDebugInfo,
-    
-    // Handlers
-    handleSelectConnection,
-    handleTestConnection,
-    handleListDocuments,
-    handleDiscoverSites,
-    handleSelectSite,
-    handleDebugTokens,
-    handleCleanupTokens,
-    handleFolderNavigation,
-    refetchConnections
-  };
-}
diff --git a/src/components/ui/Button/Button.tsx b/src/components/UiComponents/Button/Button.tsx
similarity index 100%
rename from src/components/ui/Button/Button.tsx
rename to src/components/UiComponents/Button/Button.tsx
diff --git a/src/components/ui/Button/ButtonTypes.ts b/src/components/UiComponents/Button/ButtonTypes.ts
similarity index 100%
rename from src/components/ui/Button/ButtonTypes.ts
rename to src/components/UiComponents/Button/ButtonTypes.ts
diff --git a/src/components/ui/Button/CreateButton/CreateButton.tsx b/src/components/UiComponents/Button/CreateButton/CreateButton.tsx
similarity index 97%
rename from src/components/ui/Button/CreateButton/CreateButton.tsx
rename to src/components/UiComponents/Button/CreateButton/CreateButton.tsx
index c82d0d2..541854a 100644
--- a/src/components/ui/Button/CreateButton/CreateButton.tsx
+++ b/src/components/UiComponents/Button/CreateButton/CreateButton.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { CreateButtonProps } from '../ButtonTypes';
 import Button from '../Button';
 import { Popup, EditForm } from '../../Popup';
-import { useLanguage } from '../../../../contexts/LanguageContext';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
 
 const CreateButton: React.FC<CreateButtonProps> = ({
   onCreate,
diff --git a/src/components/ui/Button/CreateButton/index.ts b/src/components/UiComponents/Button/CreateButton/index.ts
similarity index 100%
rename from src/components/ui/Button/CreateButton/index.ts
rename to src/components/UiComponents/Button/CreateButton/index.ts
diff --git a/src/components/ui/Button/UploadButton/UploadButton.tsx b/src/components/UiComponents/Button/UploadButton/UploadButton.tsx
similarity index 100%
rename from src/components/ui/Button/UploadButton/UploadButton.tsx
rename to src/components/UiComponents/Button/UploadButton/UploadButton.tsx
diff --git a/src/components/ui/Button/UploadButton/index.ts b/src/components/UiComponents/Button/UploadButton/index.ts
similarity index 100%
rename from src/components/ui/Button/UploadButton/index.ts
rename to src/components/UiComponents/Button/UploadButton/index.ts
diff --git a/src/components/ui/Button/index.ts b/src/components/UiComponents/Button/index.ts
similarity index 100%
rename from src/components/ui/Button/index.ts
rename to src/components/UiComponents/Button/index.ts
diff --git a/src/components/UiComponents/ConnectedFilesList/ConnectedFilesList.module.css b/src/components/UiComponents/ConnectedFilesList/ConnectedFilesList.module.css
new file mode 100644
index 0000000..20323a7
--- /dev/null
+++ b/src/components/UiComponents/ConnectedFilesList/ConnectedFilesList.module.css
@@ -0,0 +1,133 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--background-secondary, #f5f5f5);
+  border-radius: 8px;
+  padding: 1rem;
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary, #333);
+}
+
+.count {
+  font-size: 0.875rem;
+  color: var(--text-secondary, #666);
+}
+
+.fileList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.fileItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background: var(--background-primary, #fff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.fileItem:hover {
+  border-color: var(--border-hover, #ccc);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.fileInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.fileName {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #333);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fileMeta {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #666);
+}
+
+.fileSize {
+  font-weight: 400;
+}
+
+.fileSource {
+  padding: 0.125rem 0.5rem;
+  background: var(--background-tertiary, #f0f0f0);
+  border-radius: 4px;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.fileActions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  margin-left: 0.75rem;
+}
+
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: var(--text-secondary, #666);
+  font-size: 0.875rem;
+  text-align: center;
+  flex: 1;
+}
+
+/* Scrollbar styling */
+.fileList::-webkit-scrollbar {
+  width: 6px;
+}
+
+.fileList::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.fileList::-webkit-scrollbar-thumb {
+  background: var(--border-color, #ccc);
+  border-radius: 3px;
+}
+
+.fileList::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover, #999);
+}
+
+
+
+
diff --git a/src/components/UiComponents/ConnectedFilesList/ConnectedFilesList.tsx b/src/components/UiComponents/ConnectedFilesList/ConnectedFilesList.tsx
new file mode 100644
index 0000000..139b7cb
--- /dev/null
+++ b/src/components/UiComponents/ConnectedFilesList/ConnectedFilesList.tsx
@@ -0,0 +1,218 @@
+import React, { useMemo } from 'react';
+import { ViewActionButton, DeleteActionButton, RemoveActionButton } from '../../FormGenerator/ActionButtons';
+import { WorkflowFile } from '../../../hooks/usePlayground';
+import styles from './ConnectedFilesList.module.css';
+
+export interface ConnectedFilesListProps {
+  files: WorkflowFile[];
+  pendingFiles?: WorkflowFile[];
+  onDelete: (file: WorkflowFile) => Promise<void>;
+  onRemove?: (file: WorkflowFile) => Promise<void>;
+  onAttach?: (fileId: string) => Promise<void>; // New: attach file for next message
+  deletingFiles?: Set<string>;
+  previewingFiles?: Set<string>;
+  removingFiles?: Set<string>;
+  workflowId?: string;
+  emptyMessage?: string;
+}
+
+export function ConnectedFilesList({
+  files,
+  pendingFiles = [],
+  onDelete,
+  onRemove,
+  onAttach,
+  deletingFiles = new Set(),
+  previewingFiles = new Set(),
+  removingFiles = new Set(),
+  workflowId,
+  emptyMessage = 'No files connected to this workflow'
+}: ConnectedFilesListProps) {
+  // Combine workflow files and pending files, deduplicating by fileId
+  const allFiles = useMemo(() => {
+    const fileMap = new Map<string, WorkflowFile>();
+    
+    // Add workflow files first (filter out files without fileId)
+    files.forEach(file => {
+      if (file.fileId && file.fileId.trim() !== '') {
+        fileMap.set(file.fileId, file);
+      }
+    });
+    
+    // Add pending files (may override workflow files if same fileId)
+    pendingFiles.forEach(file => {
+      if (file.fileId && file.fileId.trim() !== '') {
+        fileMap.set(file.fileId, file);
+      }
+    });
+    
+    return Array.from(fileMap.values());
+  }, [files, pendingFiles]);
+
+  // Create hookData object for action buttons
+  const hookData = useMemo(() => ({
+    handleDelete: async (fileId: string) => {
+      const file = allFiles.find(f => f.fileId === fileId);
+      if (file) {
+        await onDelete(file);
+        return true;
+      }
+      return false;
+    },
+    removeOptimistically: (fileId: string) => {
+      // This will be handled by the parent component's state
+    },
+    refetch: async () => {
+      // Refetch handled by parent
+    },
+    deletingItems: deletingFiles,
+    previewingFiles: previewingFiles
+  }), [allFiles, onDelete, deletingFiles, previewingFiles]);
+
+  const handleView = async (file: WorkflowFile) => {
+    // View is handled by ViewActionButton's FilePreview component
+    return Promise.resolve();
+  };
+
+  const handleRemove = async (file: WorkflowFile) => {
+    // Remove file from workflow (not delete from backend)
+    if (onRemove) {
+      await onRemove(file);
+    }
+  };
+
+  if (allFiles.length === 0) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.emptyState}>
+          {emptyMessage}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h3 className={styles.title}>Connected Files</h3>
+        <span className={styles.count}>({allFiles.length})</span>
+      </div>
+      <div className={styles.fileList}>
+        {allFiles
+          .filter(file => file.fileId && file.fileId.trim() !== '') // Ensure fileId exists
+          .map((file, index) => {
+            const isDeleting = deletingFiles.has(file.fileId!);
+            const isPreviewing = previewingFiles.has(file.fileId!);
+            const isRemoving = removingFiles.has(file.fileId!);
+            // Use fileId as key since we've filtered out files without it
+            const uniqueKey = file.fileId!;
+            
+            // Check if file is in pending files (can be removed) or in messages (already sent)
+            const isPendingFile = pendingFiles.some(f => f.fileId === file.fileId);
+            
+            // Handle clicking on file item to attach/detach for next message
+            const handleFileItemClick = async (e: React.MouseEvent) => {
+              // Don't trigger if clicking on action buttons - they handle their own clicks
+              const target = e.target as HTMLElement;
+              const fileActionsElement = target.closest(`.${styles.fileActions}`);
+              const buttonElement = target.closest('button');
+              
+              if (fileActionsElement || buttonElement) {
+                e.stopPropagation();
+                return;
+              }
+              
+              // Prevent default and stop propagation to ensure click handler fires
+              e.preventDefault();
+              e.stopPropagation();
+              
+              if (onAttach && file.fileId) {
+                console.log('🖱️ ConnectedFilesList: Clicking file to attach/detach:', file.fileId);
+                await onAttach(file.fileId);
+              }
+            };
+            
+            return (
+              <div 
+                key={uniqueKey} 
+                className={styles.fileItem}
+                onClick={handleFileItemClick}
+                style={{ 
+                  cursor: onAttach ? 'pointer' : 'default',
+                  userSelect: 'none' // Prevent text selection on click
+                }}
+                title={onAttach ? (isPendingFile ? 'Click to detach from next message' : 'Click to attach for next message') : undefined}
+              >
+                <div className={styles.fileInfo}>
+                  <div className={styles.fileName} title={file.fileName}>
+                    {file.fileName}
+                    {onAttach && (
+                      <span style={{ marginLeft: '0.5rem', fontSize: '0.75rem', color: '#666' }}>
+                        {isPendingFile ? '(click to detach)' : '(click to attach)'}
+                      </span>
+                    )}
+                  </div>
+                  <div className={styles.fileMeta}>
+                    <span className={styles.fileSize}>
+                      {formatFileSize(file.fileSize)}
+                    </span>
+                    {file.source && (
+                      <span className={styles.fileSource}>
+                        {file.source === 'user_uploaded' ? 'Uploaded' : 'AI Created'}
+                      </span>
+                    )}
+                    {isPendingFile && (
+                      <span style={{ fontSize: '0.75rem', color: '#4CAF50', fontWeight: 500 }}>
+                        • Attached
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className={styles.fileActions} onClick={(e) => e.stopPropagation()}>
+                  <ViewActionButton
+                    row={file}
+                    onView={handleView}
+                    disabled={isDeleting || isRemoving}
+                    loading={isPreviewing}
+                    hookData={hookData}
+                    idField="fileId"
+                    nameField="fileName"
+                    typeField="mimeType"
+                  />
+                  {isPendingFile && onRemove && (
+                    <RemoveActionButton
+                      row={file}
+                      onRemove={handleRemove}
+                      disabled={isDeleting}
+                      loading={isRemoving}
+                      hookData={hookData}
+                      idField="fileId"
+                      loadingStateName="removingItems"
+                    />
+                  )}
+                  <DeleteActionButton
+                    row={file}
+                    hookData={hookData}
+                    idField="fileId"
+                    operationName="handleDelete"
+                    loadingStateName="deletingItems"
+                  />
+                </div>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+export default ConnectedFilesList;
+
diff --git a/src/components/UiComponents/ConnectedFilesList/index.ts b/src/components/UiComponents/ConnectedFilesList/index.ts
new file mode 100644
index 0000000..90bd23f
--- /dev/null
+++ b/src/components/UiComponents/ConnectedFilesList/index.ts
@@ -0,0 +1,6 @@
+export { default as ConnectedFilesList } from './ConnectedFilesList';
+export type { ConnectedFilesListProps } from './ConnectedFilesList';
+
+
+
+
diff --git a/src/components/ui/DragDropOverlay/DragDropOverlay.module.css b/src/components/UiComponents/DragDropOverlay/DragDropOverlay.module.css
similarity index 100%
rename from src/components/ui/DragDropOverlay/DragDropOverlay.module.css
rename to src/components/UiComponents/DragDropOverlay/DragDropOverlay.module.css
diff --git a/src/components/ui/DragDropOverlay/DragDropOverlay.tsx b/src/components/UiComponents/DragDropOverlay/DragDropOverlay.tsx
similarity index 98%
rename from src/components/ui/DragDropOverlay/DragDropOverlay.tsx
rename to src/components/UiComponents/DragDropOverlay/DragDropOverlay.tsx
index b6a1161..e4e8339 100644
--- a/src/components/ui/DragDropOverlay/DragDropOverlay.tsx
+++ b/src/components/UiComponents/DragDropOverlay/DragDropOverlay.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { useLanguage } from '../../../contexts/LanguageContext';
+import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from './DragDropOverlay.module.css';
 import { IoFolderOpen } from 'react-icons/io5';
 
diff --git a/src/components/ui/DragDropOverlay/index.ts b/src/components/UiComponents/DragDropOverlay/index.ts
similarity index 100%
rename from src/components/ui/DragDropOverlay/index.ts
rename to src/components/UiComponents/DragDropOverlay/index.ts
diff --git a/src/components/UiComponents/DropdownSelect/DropdownSelect.module.css b/src/components/UiComponents/DropdownSelect/DropdownSelect.module.css
new file mode 100644
index 0000000..6fd5806
--- /dev/null
+++ b/src/components/UiComponents/DropdownSelect/DropdownSelect.module.css
@@ -0,0 +1,270 @@
+.dropdownContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdownButton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid var(--color-primary);
+  border-radius: 25px;
+  font-size: 14px;
+  font-family: var(--font-family);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+.dropdownButton:hover:not(.disabled):not(:disabled) {
+  border-color: var(--color-secondary);
+  background-color: var(--color-secondary);
+  color: white;
+}
+
+.dropdownButton:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 123, 255), 0.1);
+}
+
+.dropdownButton.disabled,
+.dropdownButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--color-bg-disabled, #f5f5f5);
+}
+
+.dropdownButton.loading {
+  cursor: wait;
+}
+
+/* Button variants */
+.buttonPrimary {
+  border-color: var(--color-primary);
+  color: var(--color-text);
+}
+
+.buttonPrimary:hover:not(.disabled):not(:disabled) {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.buttonSecondary {
+  border-color: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.buttonSecondary:hover:not(.disabled):not(:disabled) {
+  background-color: var(--color-secondary);
+  color: white;
+}
+
+.buttonDanger {
+  border-color: #ef4444;
+  color: var(--color-text);
+}
+
+.buttonDanger:hover:not(.disabled):not(:disabled) {
+  background-color: #ef4444;
+  color: white;
+}
+
+.buttonSuccess {
+  border-color: #10b981;
+  color: var(--color-text);
+}
+
+.buttonSuccess:hover:not(.disabled):not(:disabled) {
+  background-color: #10b981;
+  color: white;
+}
+
+.buttonWarning {
+  border-color: #f59e0b;
+  color: var(--color-text);
+}
+
+.buttonWarning:hover:not(.disabled):not(:disabled) {
+  background-color: #f59e0b;
+  color: white;
+}
+
+/* Button sizes */
+.buttonSm {
+  padding: 8px 12px;
+  font-size: 13px;
+}
+
+.buttonMd {
+  padding: 12px 16px;
+  font-size: 14px;
+}
+
+.buttonLg {
+  padding: 16px 20px;
+  font-size: 16px;
+}
+
+.buttonIcon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.buttonText {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevronIcon {
+  font-size: 16px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.clearIcon {
+  font-size: 18px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.clearIcon:hover {
+  transform: scale(1.1);
+}
+
+.buttonSpinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-primary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.dropdownMenu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-primary);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  overflow: hidden;
+  min-width: 100%;
+}
+
+.dropdownHeader {
+  padding: 12px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  border-bottom: 1px solid var(--color-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.dropdownItems {
+  max-height: inherit;
+  overflow-y: auto;
+}
+
+.dropdownEmpty {
+  padding: 12px 16px;
+  font-size: 14px;
+  color: var(--color-text);
+  font-style: italic;
+  text-align: center;
+}
+
+.dropdownItem {
+  width: 100%;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: var(--font-family);
+  transition: all 0.2s ease;
+  border-bottom: 1px solid var(--color-primary);
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.dropdownItem:last-child {
+  border-bottom: none;
+}
+
+.dropdownItem:hover {
+  background-color: var(--color-secondary);
+  color: white;
+}
+
+.dropdownItemSelected {
+  background-color: var(--color-primary);
+  color: white;
+  font-weight: 500;
+}
+
+.dropdownItemSelected:hover {
+  background-color: var(--color-primary);
+  opacity: 0.9;
+}
+
+.itemLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selectedIndicator {
+  font-size: 16px;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+/* Dark theme support */
+[data-theme="dark"] .dropdownButton {
+  border-color: var(--color-primary);
+  background-color: var(--color-bg);
+}
+
+[data-theme="dark"] .dropdownMenu {
+  background-color: var(--color-bg);
+  border-color: var(--color-primary);
+}
+
+[data-theme="dark"] .dropdownItem {
+  color: var(--color-text);
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .dropdownButton {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+}
+
diff --git a/src/components/UiComponents/DropdownSelect/DropdownSelect.tsx b/src/components/UiComponents/DropdownSelect/DropdownSelect.tsx
new file mode 100644
index 0000000..bef6a04
--- /dev/null
+++ b/src/components/UiComponents/DropdownSelect/DropdownSelect.tsx
@@ -0,0 +1,240 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { IconType } from 'react-icons';
+import { IoChevronDown, IoClose } from 'react-icons/io5';
+import styles from './DropdownSelect.module.css';
+import { ButtonVariant, ButtonSize } from '../Button/ButtonTypes';
+
+export interface DropdownSelectItem<T = any> {
+  id: string | number;
+  label: string;
+  value: T;
+  metadata?: Record<string, any>; // Additional data for custom rendering
+}
+
+export interface DropdownSelectProps<T = any> {
+  items: DropdownSelectItem<T>[];
+  selectedItemId?: string | number | null;
+  onSelect: (item: DropdownSelectItem<T> | null) => void;
+  placeholder?: string;
+  emptyMessage?: string;
+  headerText?: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: IconType;
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+  renderItem?: (item: DropdownSelectItem<T>, isSelected: boolean) => React.ReactNode;
+  renderButton?: (selectedItem: DropdownSelectItem<T> | null, isOpen: boolean) => React.ReactNode;
+  renderClearButton?: (selectedItem: DropdownSelectItem<T>, onClear: () => void) => React.ReactNode;
+  minWidth?: string;
+  maxHeight?: string;
+  showClearButton?: boolean; // Enable/disable clear button feature
+  clearButtonLabel?: string; // Label for clear button (defaults to showing selected item name)
+}
+
+function DropdownSelect<T = any>({
+  items = [],
+  selectedItemId,
+  onSelect,
+  placeholder = 'Select an item',
+  emptyMessage = 'No items available',
+  headerText,
+  variant = 'primary',
+  size = 'md',
+  icon: Icon,
+  disabled = false,
+  loading = false,
+  className = '',
+  renderItem,
+  renderButton,
+  renderClearButton,
+  minWidth = '180px',
+  maxHeight = '300px',
+  showClearButton = true,
+  clearButtonLabel
+}: DropdownSelectProps<T>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Find selected item
+  const selectedItem = selectedItemId !== null && selectedItemId !== undefined
+    ? items.find(item => item.id === selectedItemId) || null
+    : null;
+
+  // Handle item selection
+  const handleItemClick = (item: DropdownSelectItem<T>) => {
+    onSelect(item);
+    setIsOpen(false);
+  };
+
+  // Handle clear selection
+  const handleClear = () => {
+    if (!disabled && !loading) {
+      onSelect(null);
+      setIsOpen(false);
+    }
+  };
+
+  // Toggle dropdown
+  const toggleDropdown = () => {
+    if (!disabled && !loading) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  // Build button classes
+  const buttonClasses = [
+    styles.dropdownButton,
+    styles[`button${variant.charAt(0).toUpperCase() + variant.slice(1)}`],
+    styles[`button${size.charAt(0).toUpperCase() + size.slice(1)}`],
+    loading ? styles.loading : '',
+    disabled ? styles.disabled : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  // Render default button content
+  const renderDefaultButton = () => {
+    if (loading) {
+      return (
+        <>
+          <div className={styles.buttonSpinner} />
+          <span>{placeholder}</span>
+        </>
+      );
+    }
+
+    if (selectedItem) {
+      return (
+        <>
+          {Icon && <Icon className={styles.buttonIcon} />}
+          <span className={styles.buttonText}>{selectedItem.label}</span>
+          <IoChevronDown className={`${styles.chevronIcon} ${isOpen ? styles.chevronOpen : ''}`} />
+        </>
+      );
+    }
+
+    return (
+      <>
+        {Icon && <Icon className={styles.buttonIcon} />}
+        <span className={styles.buttonText}>{placeholder}</span>
+        <IoChevronDown className={`${styles.chevronIcon} ${isOpen ? styles.chevronOpen : ''}`} />
+      </>
+    );
+  };
+
+  // Render clear button when item is selected and showClearButton is true
+  const renderClearButtonContent = () => {
+    if (renderClearButton && selectedItem) {
+      return renderClearButton(selectedItem, handleClear);
+    }
+
+    if (selectedItem && showClearButton) {
+      return (
+        <button
+          type="button"
+          className={buttonClasses}
+          onClick={handleClear}
+          disabled={disabled || loading}
+          title={clearButtonLabel || `Clear selection: ${selectedItem.label}`}
+        >
+          {Icon && <Icon className={styles.buttonIcon} />}
+          <span className={styles.buttonText}>
+            {clearButtonLabel || selectedItem.label}
+          </span>
+          <IoClose className={styles.clearIcon} />
+        </button>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div ref={dropdownRef} className={styles.dropdownContainer} style={{ minWidth }}>
+      {/* Show clear button if item is selected and showClearButton is enabled */}
+      {selectedItem && showClearButton ? (
+        renderClearButtonContent()
+      ) : renderButton ? (
+        <div className={buttonClasses} onClick={toggleDropdown}>
+          {renderButton(selectedItem, isOpen)}
+        </div>
+      ) : (
+        <button
+          type="button"
+          className={buttonClasses}
+          onClick={toggleDropdown}
+          disabled={disabled || loading}
+        >
+          {renderDefaultButton()}
+        </button>
+      )}
+
+      {isOpen && (
+        <div className={styles.dropdownMenu} style={{ maxHeight }}>
+          {headerText && (
+            <div className={styles.dropdownHeader}>
+              {headerText}
+            </div>
+          )}
+          
+          {items.length === 0 ? (
+            <div className={styles.dropdownEmpty}>
+              {emptyMessage}
+            </div>
+          ) : (
+            <div className={styles.dropdownItems}>
+              {items.map((item) => {
+                const isSelected = selectedItemId === item.id;
+                
+                if (renderItem) {
+                  return (
+                    <div
+                      key={item.id}
+                      className={`${styles.dropdownItem} ${isSelected ? styles.dropdownItemSelected : ''}`}
+                      onClick={() => handleItemClick(item)}
+                    >
+                      {renderItem(item, isSelected)}
+                    </div>
+                  );
+                }
+
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    className={`${styles.dropdownItem} ${isSelected ? styles.dropdownItemSelected : ''}`}
+                    onClick={() => handleItemClick(item)}
+                  >
+                    <span className={styles.itemLabel}>{item.label}</span>
+                    {isSelected && <span className={styles.selectedIndicator}>✓</span>}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DropdownSelect;
+
diff --git a/src/components/UiComponents/DropdownSelect/index.ts b/src/components/UiComponents/DropdownSelect/index.ts
new file mode 100644
index 0000000..691cb06
--- /dev/null
+++ b/src/components/UiComponents/DropdownSelect/index.ts
@@ -0,0 +1,3 @@
+export { default as DropdownSelect } from './DropdownSelect';
+export type { DropdownSelectItem, DropdownSelectProps } from './DropdownSelect';
+
diff --git a/src/components/UiComponents/EditFields/SelectField/SelectField.tsx b/src/components/UiComponents/EditFields/SelectField/SelectField.tsx
new file mode 100644
index 0000000..1241f16
--- /dev/null
+++ b/src/components/UiComponents/EditFields/SelectField/SelectField.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { DropdownSelect, DropdownSelectItem } from '../../DropdownSelect';
+import { ButtonSize } from '../../Button/ButtonTypes';
+
+export interface SelectFieldOption {
+  id: string | number;
+  label: string;
+  value: any;
+}
+
+export interface SelectFieldProps {
+  value?: string | number | null;
+  onChange?: (value: any) => void;
+  label?: string;
+  options: SelectFieldOption[];
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  description?: string;
+  className?: string;
+  size?: ButtonSize;
+}
+
+const SelectField: React.FC<SelectFieldProps> = ({
+  value,
+  onChange,
+  label,
+  options,
+  placeholder = 'Select an option',
+  required = false,
+  disabled = false,
+  description,
+  className = '',
+  size = 'md'
+}) => {
+  // Convert options to DropdownSelectItem format
+  const items: DropdownSelectItem[] = options.map(opt => ({
+    id: opt.id,
+    label: opt.label,
+    value: opt.value
+  }));
+
+  // Find selected item ID from value
+  const selectedItemId = value !== null && value !== undefined
+    ? options.find(opt => opt.value === value || opt.id === value)?.id ?? null
+    : null;
+
+  const handleSelect = (item: DropdownSelectItem | null) => {
+    if (onChange) {
+      onChange(item ? item.value : null);
+    }
+  };
+
+  return (
+    <div className={className}>
+      {label && (
+        <div style={{ marginBottom: '8px' }}>
+          <label style={{ 
+            fontSize: '0.875rem', 
+            fontWeight: 500, 
+            color: 'var(--color-text)',
+            fontFamily: 'var(--font-family)'
+          }}>
+            {label}
+            {required && <span style={{ color: 'var(--color-error)', marginLeft: '4px' }}>*</span>}
+          </label>
+          {description && (
+            <div style={{ 
+              fontSize: '0.75rem', 
+              color: 'var(--color-primary)', 
+              marginTop: '4px',
+              fontStyle: 'italic'
+            }}>
+              {description}
+            </div>
+          )}
+        </div>
+      )}
+      <DropdownSelect
+        items={items}
+        selectedItemId={selectedItemId}
+        onSelect={handleSelect}
+        placeholder={placeholder}
+        disabled={disabled}
+        size={size}
+        variant="primary"
+        showClearButton={false}
+        minWidth="100%"
+      />
+    </div>
+  );
+};
+
+export default SelectField;
+
diff --git a/src/components/UiComponents/EditFields/SelectField/index.ts b/src/components/UiComponents/EditFields/SelectField/index.ts
new file mode 100644
index 0000000..207392e
--- /dev/null
+++ b/src/components/UiComponents/EditFields/SelectField/index.ts
@@ -0,0 +1,3 @@
+export { default } from './SelectField';
+export type { SelectFieldProps, SelectFieldOption } from './SelectField';
+
diff --git a/src/components/UiComponents/EditFields/TextInputField/TextInputField.tsx b/src/components/UiComponents/EditFields/TextInputField/TextInputField.tsx
new file mode 100644
index 0000000..3c8e1c9
--- /dev/null
+++ b/src/components/UiComponents/EditFields/TextInputField/TextInputField.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import TextField from '../../TextField';
+import { TextFieldSize } from '../../TextField/TextFieldTypes';
+
+export interface TextInputFieldProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  type?: 'text' | 'email' | 'tel';
+  description?: string;
+  error?: string;
+  className?: string;
+  size?: TextFieldSize;
+}
+
+const TextInputField: React.FC<TextInputFieldProps> = ({
+  value = '',
+  onChange,
+  label,
+  placeholder,
+  required = false,
+  disabled = false,
+  readonly = false,
+  type = 'text',
+  description,
+  error,
+  className = '',
+  size = 'md'
+}) => {
+  return (
+    <div className={className}>
+      {label && (
+        <div style={{ marginBottom: '8px' }}>
+          <label style={{ 
+            fontSize: '0.875rem', 
+            fontWeight: 500, 
+            color: 'var(--color-text)',
+            fontFamily: 'var(--font-family)'
+          }}>
+            {label}
+            {required && <span style={{ color: 'var(--color-error)', marginLeft: '4px' }}>*</span>}
+          </label>
+          {description && (
+            <div style={{ 
+              fontSize: '0.75rem', 
+              color: 'var(--color-primary)', 
+              marginTop: '4px',
+              fontStyle: 'italic'
+            }}>
+              {description}
+            </div>
+          )}
+        </div>
+      )}
+      <TextField
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        required={required}
+        disabled={disabled}
+        readonly={readonly}
+        type={type}
+        error={error}
+        label={undefined} // Don't use TextField's label since we render it above
+        size={size}
+      />
+    </div>
+  );
+};
+
+export default TextInputField;
+
diff --git a/src/components/UiComponents/EditFields/TextInputField/index.ts b/src/components/UiComponents/EditFields/TextInputField/index.ts
new file mode 100644
index 0000000..d1a3517
--- /dev/null
+++ b/src/components/UiComponents/EditFields/TextInputField/index.ts
@@ -0,0 +1,3 @@
+export { default } from './TextInputField';
+export type { TextInputFieldProps } from './TextInputField';
+
diff --git a/src/components/UiComponents/EditFields/ToggleField/ToggleField.tsx b/src/components/UiComponents/EditFields/ToggleField/ToggleField.tsx
new file mode 100644
index 0000000..7cf4878
--- /dev/null
+++ b/src/components/UiComponents/EditFields/ToggleField/ToggleField.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+
+export interface ToggleFieldProps {
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const ToggleField: React.FC<ToggleFieldProps> = ({
+  value = false,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  className = ''
+}) => {
+  const handleToggle = () => {
+    if (!disabled && onChange) {
+      onChange(!value);
+    }
+  };
+
+  return (
+    <div className={className}>
+      {label && (
+        <div style={{ marginBottom: '8px' }}>
+          <label style={{ 
+            fontSize: '0.875rem', 
+            fontWeight: 500, 
+            color: 'var(--color-text)',
+            fontFamily: 'var(--font-family)'
+          }}>
+            {label}
+          </label>
+          {description && (
+            <div style={{ 
+              fontSize: '0.75rem', 
+              color: 'var(--color-primary)', 
+              marginTop: '4px',
+              fontStyle: 'italic'
+            }}>
+              {description}
+            </div>
+          )}
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={handleToggle}
+        disabled={disabled}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+          padding: '12px 16px',
+          borderRadius: '25px',
+          border: `1px solid ${value ? 'var(--color-secondary)' : 'var(--color-primary)'}`,
+          background: value ? 'var(--color-secondary)' : 'var(--color-bg)',
+          color: value ? 'white' : 'var(--color-text)',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          transition: 'all 0.3s ease',
+          fontFamily: 'var(--font-family)',
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          opacity: disabled ? 0.6 : 1,
+          outline: 'none'
+        }}
+        onMouseEnter={(e) => {
+          if (!disabled) {
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(63, 81, 181, 0.2)';
+          }
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.boxShadow = 'none';
+        }}
+      >
+        <div
+          style={{
+            width: '44px',
+            height: '24px',
+            borderRadius: '12px',
+            background: value ? 'rgba(255, 255, 255, 0.3)' : 'var(--color-gray-light)',
+            position: 'relative',
+            transition: 'all 0.3s ease'
+          }}
+        >
+          <div
+            style={{
+              width: '20px',
+              height: '20px',
+              borderRadius: '50%',
+              background: 'white',
+              position: 'absolute',
+              top: '2px',
+              left: value ? '22px' : '2px',
+              transition: 'left 0.3s ease',
+              boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
+            }}
+          />
+        </div>
+        <span>{value ? 'Enabled' : 'Disabled'}</span>
+      </button>
+    </div>
+  );
+};
+
+export default ToggleField;
+
diff --git a/src/components/UiComponents/EditFields/ToggleField/index.ts b/src/components/UiComponents/EditFields/ToggleField/index.ts
new file mode 100644
index 0000000..2b63eb1
--- /dev/null
+++ b/src/components/UiComponents/EditFields/ToggleField/index.ts
@@ -0,0 +1,3 @@
+export { default } from './ToggleField';
+export type { ToggleFieldProps } from './ToggleField';
+
diff --git a/src/components/UiComponents/EditFields/index.ts b/src/components/UiComponents/EditFields/index.ts
new file mode 100644
index 0000000..1c86b79
--- /dev/null
+++ b/src/components/UiComponents/EditFields/index.ts
@@ -0,0 +1,7 @@
+export { default as TextInputField } from './TextInputField';
+export { default as SelectField } from './SelectField';
+export { default as ToggleField } from './ToggleField';
+export type { TextInputFieldProps } from './TextInputField';
+export type { SelectFieldProps, SelectFieldOption } from './SelectField';
+export type { ToggleFieldProps } from './ToggleField';
+
diff --git a/src/components/ui/MessageOverlay/MessageOverlay.module.css b/src/components/UiComponents/InfoMessageOverlay/MessageOverlay.module.css
similarity index 100%
rename from src/components/ui/MessageOverlay/MessageOverlay.module.css
rename to src/components/UiComponents/InfoMessageOverlay/MessageOverlay.module.css
diff --git a/src/components/ui/MessageOverlay/MessageOverlay.tsx b/src/components/UiComponents/InfoMessageOverlay/MessageOverlay.tsx
similarity index 100%
rename from src/components/ui/MessageOverlay/MessageOverlay.tsx
rename to src/components/UiComponents/InfoMessageOverlay/MessageOverlay.tsx
diff --git a/src/components/ui/MessageOverlay/index.ts b/src/components/UiComponents/InfoMessageOverlay/index.ts
similarity index 100%
rename from src/components/ui/MessageOverlay/index.ts
rename to src/components/UiComponents/InfoMessageOverlay/index.ts
diff --git a/src/components/UiComponents/LocationInput/LocationInput.module.css b/src/components/UiComponents/LocationInput/LocationInput.module.css
new file mode 100644
index 0000000..f591a54
--- /dev/null
+++ b/src/components/UiComponents/LocationInput/LocationInput.module.css
@@ -0,0 +1,30 @@
+.locationInputContainer {
+  width: 100%;
+}
+
+.inputRow {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.inputWrapper {
+  flex: 1;
+}
+
+.locationButton {
+  white-space: nowrap;
+  margin-top: 1.5rem; /* Align with input field */
+}
+
+@media (max-width: 768px) {
+  .inputRow {
+    flex-direction: column;
+  }
+
+  .locationButton {
+    margin-top: 0;
+    width: 100%;
+  }
+}
+
diff --git a/src/components/UiComponents/LocationInput/LocationInput.tsx b/src/components/UiComponents/LocationInput/LocationInput.tsx
new file mode 100644
index 0000000..7c31198
--- /dev/null
+++ b/src/components/UiComponents/LocationInput/LocationInput.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Button, TextField } from '../index';
+import { FaLocationArrow } from 'react-icons/fa';
+import styles from './LocationInput.module.css';
+
+export interface LocationInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onUseCurrentLocation: () => void;
+  isGettingLocation?: boolean;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+  helperText?: string;
+  disabled?: boolean;
+}
+
+const LocationInput: React.FC<LocationInputProps> = ({
+  value,
+  onChange,
+  onUseCurrentLocation,
+  isGettingLocation = false,
+  placeholder = 'Kanton, Gemeinde, Adresse oder Parzelle',
+  label = 'Standort',
+  error,
+  helperText,
+  disabled = false
+}) => {
+  const [isRequestingLocation, setIsRequestingLocation] = useState(false);
+
+  const handleUseCurrentLocation = async () => {
+    setIsRequestingLocation(true);
+    try {
+      await onUseCurrentLocation();
+    } finally {
+      setIsRequestingLocation(false);
+    }
+  };
+
+  return (
+    <div className={styles.locationInputContainer}>
+      <div className={styles.inputRow}>
+        <div className={styles.inputWrapper}>
+          <TextField
+            value={value}
+            onChange={onChange}
+            placeholder={placeholder}
+            label={label}
+            error={error}
+            helperText={helperText}
+            disabled={disabled}
+            size="md"
+            type="text"
+          />
+        </div>
+        <Button
+          variant="secondary"
+          size="md"
+          icon={FaLocationArrow}
+          onClick={handleUseCurrentLocation}
+          disabled={disabled || isGettingLocation || isRequestingLocation}
+          loading={isGettingLocation || isRequestingLocation}
+          className={styles.locationButton}
+        >
+          Meine Position verwenden
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default LocationInput;
+
diff --git a/src/components/UiComponents/LocationInput/index.ts b/src/components/UiComponents/LocationInput/index.ts
new file mode 100644
index 0000000..80f8a43
--- /dev/null
+++ b/src/components/UiComponents/LocationInput/index.ts
@@ -0,0 +1,3 @@
+export { default as LocationInput } from './LocationInput';
+export type { LocationInputProps } from './LocationInput';
+
diff --git a/src/components/UiComponents/MapView/LV95Converter.ts b/src/components/UiComponents/MapView/LV95Converter.ts
new file mode 100644
index 0000000..19a8b8b
--- /dev/null
+++ b/src/components/UiComponents/MapView/LV95Converter.ts
@@ -0,0 +1,25 @@
+import proj4 from 'proj4';
+
+// Define LV95 projection (EPSG:2056) and WGS84 (EPSG:4326)
+// LV95 / Swiss TM 35
+const LV95_PROJ = '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs';
+const WGS84_PROJ = 'EPSG:4326';
+
+/**
+ * Convert LV95 coordinates to WGS84 (lat/lon)
+ * Uses proj4 for accurate coordinate transformation
+ */
+export function lv95ToWGS84(x: number, y: number): { lat: number; lon: number } {
+  const [lon, lat] = proj4(LV95_PROJ, WGS84_PROJ, [x, y]);
+  return { lat, lon };
+}
+
+/**
+ * Convert WGS84 (lat/lon) to LV95 coordinates
+ * Uses proj4 for accurate coordinate transformation
+ */
+export function wgs84ToLV95(lat: number, lon: number): { x: number; y: number } {
+  const [x, y] = proj4(WGS84_PROJ, LV95_PROJ, [lon, lat]);
+  return { x, y };
+}
+
diff --git a/src/components/UiComponents/MapView/MapView.module.css b/src/components/UiComponents/MapView/MapView.module.css
new file mode 100644
index 0000000..fc4eb44
--- /dev/null
+++ b/src/components/UiComponents/MapView/MapView.module.css
@@ -0,0 +1,49 @@
+.mapViewContainer {
+  width: 100%;
+  position: relative;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  min-height: 400px;
+}
+
+.mapCanvas {
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+  display: block;
+}
+
+.mapCanvas:active {
+  cursor: grabbing;
+}
+
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6b7280;
+  font-size: 1rem;
+  text-align: center;
+  padding: 2rem;
+}
+
+.emptyStateOverlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(255, 255, 255, 0.95);
+  padding: 1.5rem 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  color: #6b7280;
+  font-size: 1rem;
+  text-align: center;
+  pointer-events: none;
+  z-index: 10;
+  max-width: 80%;
+}
+
diff --git a/src/components/UiComponents/MapView/MapView.tsx b/src/components/UiComponents/MapView/MapView.tsx
new file mode 100644
index 0000000..b76c662
--- /dev/null
+++ b/src/components/UiComponents/MapView/MapView.tsx
@@ -0,0 +1,33 @@
+// Export types
+export interface MapPoint {
+  x: number; // LV95 X coordinate
+  y: number; // LV95 Y coordinate
+}
+
+export interface ParcelGeometry {
+  id: string;
+  egrid?: string;
+  number?: string;
+  coordinates: MapPoint[];
+  isSelected?: boolean;
+  isAdjacent?: boolean;
+}
+
+export interface MapViewProps {
+  parcels?: ParcelGeometry[];
+  center?: MapPoint;
+  zoomBounds?: {
+    min_x: number;
+    min_y: number;
+    max_x: number;
+    max_y: number;
+  };
+  onMapClick?: (point: MapPoint) => void;
+  onParcelClick?: (parcelId: string) => void;
+  height?: string;
+  className?: string;
+  emptyMessage?: string;
+}
+
+// Re-export the Leaflet implementation
+export { default } from './MapViewLeaflet';
diff --git a/src/components/UiComponents/MapView/MapViewLeaflet.tsx b/src/components/UiComponents/MapView/MapViewLeaflet.tsx
new file mode 100644
index 0000000..c7d75aa
--- /dev/null
+++ b/src/components/UiComponents/MapView/MapViewLeaflet.tsx
@@ -0,0 +1,218 @@
+import React, { useEffect, useRef } from 'react';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { lv95ToWGS84, wgs84ToLV95 } from './LV95Converter';
+import type { MapPoint, ParcelGeometry, MapViewProps } from './MapView';
+import styles from './MapView.module.css';
+
+// Fix for default marker icons in Leaflet
+import icon from 'leaflet/dist/images/marker-icon.png';
+import iconShadow from 'leaflet/dist/images/marker-shadow.png';
+
+const DefaultIcon = L.icon({
+  iconUrl: icon,
+  shadowUrl: iconShadow,
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+
+L.Marker.prototype.options.icon = DefaultIcon;
+
+const MapViewLeaflet: React.FC<MapViewProps> = ({
+  parcels = [],
+  center,
+  zoomBounds,
+  onMapClick,
+  onParcelClick,
+  height = '600px',
+  className = '',
+  emptyMessage = 'Klicken Sie auf die Karte, um einen Standort auszuwählen'
+}) => {
+  const mapRef = useRef<L.Map | null>(null);
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const layersRef = useRef<L.LayerGroup[]>([]);
+  const centerMarkerRef = useRef<L.Marker | null>(null);
+
+  // Initialize map
+  useEffect(() => {
+    if (!mapContainerRef.current || mapRef.current) return;
+
+    // Default center: Switzerland (converted from LV95)
+    const defaultCenterLV95 = center || { x: 2600000, y: 1200000 };
+    const defaultCenter = lv95ToWGS84(defaultCenterLV95.x, defaultCenterLV95.y);
+
+    // Create map
+    const map = L.map(mapContainerRef.current, {
+      center: [defaultCenter.lat, defaultCenter.lon],
+      zoom: zoomBounds ? 15 : 8, // Zoom level based on whether we have bounds
+      zoomControl: true,
+      attributionControl: true
+    });
+
+    // Add OpenStreetMap tiles
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '© OpenStreetMap contributors',
+      maxZoom: 19
+    }).addTo(map);
+
+    mapRef.current = map;
+
+    // Cleanup
+    return () => {
+      map.remove();
+      mapRef.current = null;
+    };
+  }, []); // Only run once on mount
+
+  // Update map center and zoom when center or zoomBounds change
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    const map = mapRef.current;
+
+    // Remove existing center marker
+    if (centerMarkerRef.current) {
+      map.removeLayer(centerMarkerRef.current);
+      centerMarkerRef.current = null;
+    }
+
+    if (zoomBounds && parcels.length > 0) {
+      // Convert zoom bounds to WGS84
+      const sw = lv95ToWGS84(zoomBounds.min_x, zoomBounds.min_y);
+      const ne = lv95ToWGS84(zoomBounds.max_x, zoomBounds.max_y);
+      
+      // Fit map to bounds
+      map.fitBounds([[sw.lat, sw.lon], [ne.lat, ne.lon]], {
+        padding: [20, 20],
+        maxZoom: 18
+      });
+    } else if (center) {
+      // Center on point and add marker
+      const centerWGS84 = lv95ToWGS84(center.x, center.y);
+      map.setView([centerWGS84.lat, centerWGS84.lon], map.getZoom() || 15);
+      
+      // Add center marker
+      const marker = L.marker([centerWGS84.lat, centerWGS84.lon], {
+        icon: L.icon({
+          iconUrl: 'data:image/svg+xml;base64,' + btoa(`
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="8" fill="#ef4444" stroke="#fff" stroke-width="2"/>
+            </svg>
+          `),
+          iconSize: [24, 24],
+          iconAnchor: [12, 12]
+        })
+      }).addTo(map);
+      centerMarkerRef.current = marker;
+    } else {
+      // Default center: Switzerland
+      const defaultCenter = lv95ToWGS84(2600000, 1200000);
+      map.setView([defaultCenter.lat, defaultCenter.lon], 8);
+    }
+  }, [center, zoomBounds, parcels.length]);
+
+  // Draw parcels
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    const map = mapRef.current;
+
+    // Debug logging
+    if (import.meta.env.DEV) {
+      console.log('🗺️ MapView: Drawing parcels', {
+        parcelCount: parcels.length,
+        parcels: parcels.map(p => ({
+          id: p.id,
+          coordCount: p.coordinates.length,
+          isSelected: p.isSelected,
+          isAdjacent: p.isAdjacent
+        }))
+      });
+    }
+
+    // Remove existing parcel layers
+    layersRef.current.forEach((layer) => {
+      map.removeLayer(layer);
+    });
+    layersRef.current = [];
+
+    // Add parcels
+    parcels.forEach((parcel) => {
+      if (parcel.coordinates.length < 3) {
+        if (import.meta.env.DEV) {
+          console.warn(`⚠️ Parcel ${parcel.id} has insufficient coordinates: ${parcel.coordinates.length}`);
+        }
+        return; // Need at least 3 points for a polygon
+      }
+
+      // Convert LV95 coordinates to WGS84
+      const latLngs = parcel.coordinates.map((coord) => {
+        const wgs84 = lv95ToWGS84(coord.x, coord.y);
+        return [wgs84.lat, wgs84.lon] as [number, number];
+      });
+
+      // Create polygon
+      const polygon = L.polygon(latLngs, {
+        color: parcel.isSelected ? '#3b82f6' : parcel.isAdjacent ? '#9ca3af' : '#22c55e',
+        weight: parcel.isSelected ? 3 : parcel.isAdjacent ? 2 : 1,
+        fillColor: parcel.isSelected ? '#3b82f6' : parcel.isAdjacent ? '#9ca3af' : '#22c55e',
+        fillOpacity: parcel.isSelected ? 0.3 : parcel.isAdjacent ? 0.2 : 0.2
+      });
+
+      // Add popup with parcel info
+      const popupContent = `
+        <div>
+          <strong>Parzelle ${parcel.number || parcel.id}</strong><br/>
+          ${parcel.egrid ? `EGRID: ${parcel.egrid}<br/>` : ''}
+          ${parcel.isSelected ? '<em>Ausgewählt</em>' : parcel.isAdjacent ? '<em>Angrenzend</em>' : ''}
+        </div>
+      `;
+      polygon.bindPopup(popupContent);
+
+      // Add click handler
+      if (onParcelClick) {
+        polygon.on('click', () => {
+          onParcelClick(parcel.id);
+        });
+      }
+
+      polygon.addTo(map);
+      layersRef.current.push(polygon);
+    });
+  }, [parcels, onParcelClick]);
+
+  // Handle map clicks
+  useEffect(() => {
+    if (!mapRef.current || !onMapClick) return;
+
+    const map = mapRef.current;
+
+    const handleMapClick = (e: L.LeafletMouseEvent) => {
+      // Convert WGS84 to LV95
+      const lv95 = wgs84ToLV95(e.latlng.lat, e.latlng.lng);
+      onMapClick({ x: lv95.x, y: lv95.y });
+    };
+
+    map.on('click', handleMapClick);
+
+    return () => {
+      map.off('click', handleMapClick);
+    };
+  }, [onMapClick]);
+
+  return (
+    <div className={`${styles.mapViewContainer} ${className}`} style={{ height, position: 'relative' }}>
+      <div ref={mapContainerRef} style={{ width: '100%', height: '100%' }} />
+      {parcels.length === 0 && !center && (
+        <div className={styles.emptyStateOverlay}>
+          <p>{emptyMessage}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MapViewLeaflet;
+
diff --git a/src/components/UiComponents/MapView/index.ts b/src/components/UiComponents/MapView/index.ts
new file mode 100644
index 0000000..b08e17e
--- /dev/null
+++ b/src/components/UiComponents/MapView/index.ts
@@ -0,0 +1,3 @@
+export { default as MapView } from './MapView';
+export type { MapViewProps, MapPoint, ParcelGeometry } from './MapView';
+
diff --git a/src/components/UiComponents/Messages/ChatMessages/ChatMessage.tsx b/src/components/UiComponents/Messages/ChatMessages/ChatMessage.tsx
new file mode 100644
index 0000000..333d0f3
--- /dev/null
+++ b/src/components/UiComponents/Messages/ChatMessages/ChatMessage.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { Message } from '../MessagesTypes';
+import { formatTimestamp } from '../MessageUtils';
+import { DocumentItem, ActionInfo } from '../MessageParts';
+import { WorkflowFile } from '../../../../hooks/usePlayground';
+import styles from '../Messages.module.css';
+
+export interface ChatMessageProps {
+  message: Message;
+  showDocuments?: boolean;
+  renderDocument?: (document: any, message: Message) => React.ReactNode;
+  onFileDelete?: (file: WorkflowFile) => Promise<void>;
+  onFileRemove?: (file: WorkflowFile) => Promise<void>;
+  onFileView?: (file: WorkflowFile) => Promise<void>;
+  deletingFiles?: Set<string>;
+  previewingFiles?: Set<string>;
+  removingFiles?: Set<string>;
+  workflowId?: string;
+}
+
+/**
+ * Renders a single message in chat style (bubble UI)
+ */
+export const ChatMessage: React.FC<ChatMessageProps> = ({
+  message,
+  showDocuments = true,
+  renderDocument,
+  onFileDelete,
+  onFileRemove,
+  onFileView,
+  deletingFiles,
+  previewingFiles,
+  removingFiles,
+  workflowId
+}) => {
+  const isUser = message.role?.toLowerCase() === 'user';
+  const messageClass = isUser ? styles.messageUser : styles.messageAssistant;
+
+  // Debug: Log documents if in dev mode
+  if (import.meta.env.DEV && message.documents) {
+    console.log('ChatMessage documents:', message.id, message.documents);
+  }
+
+  return (
+    <div className={`${styles.message} ${messageClass}`}>
+      <div className={styles.messageBubble}>
+        {/* Message content */}
+        {message.message && (
+          <div className={styles.messageContent}>
+            {message.message}
+          </div>
+        )}
+        
+        {/* Summary if different from message */}
+        {message.summary && message.summary !== message.message && (
+          <div className={styles.messageSummary}>
+            <strong>Summary:</strong> {message.summary}
+          </div>
+        )}
+        
+        {/* Documents */}
+        {showDocuments && message.documents && Array.isArray(message.documents) && message.documents.length > 0 && (
+          <div className={styles.documentsContainer}>
+            {message.documentsLabel && (
+              <div className={styles.documentsLabel}>{message.documentsLabel}</div>
+            )}
+            <div className={styles.documentsList}>
+              {message.documents.map((doc) => (
+                <div key={doc.id}>
+                  {renderDocument ? renderDocument(doc, message) : (
+                    <DocumentItem 
+                      document={doc} 
+                      message={message}
+                      onFileDelete={onFileDelete}
+                      onFileRemove={onFileRemove}
+                      onFileView={onFileView}
+                      deletingFiles={deletingFiles}
+                      previewingFiles={previewingFiles}
+                      removingFiles={removingFiles}
+                      workflowId={workflowId}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        
+        {/* Action information (shown only for assistant messages) */}
+        {!isUser && <ActionInfo message={message} />}
+        
+        {/* Timestamp */}
+        {message.publishedAt && (
+          <div className={styles.messageTimestamp}>
+            {formatTimestamp(message.publishedAt)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
diff --git a/src/components/UiComponents/Messages/LogMessages/LogMessage.module.css b/src/components/UiComponents/Messages/LogMessages/LogMessage.module.css
new file mode 100644
index 0000000..9f2d6b2
--- /dev/null
+++ b/src/components/UiComponents/Messages/LogMessages/LogMessage.module.css
@@ -0,0 +1,92 @@
+/* Log message styles - list/table layout */
+.logMessage {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-primary);
+  background-color: var(--color-surface);
+  transition: background-color 0.2s ease;
+}
+
+.logMessage:hover {
+  background-color: var(--color-highlight-gray);
+}
+
+.logMetadata {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.logContent {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.logText {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-text);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.logSummary {
+  padding: 8px 12px;
+  border-radius: var(--object-radius-small);
+  font-size: 12px;
+  line-height: 1.5;
+  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--color-text);
+}
+
+.logSummary strong {
+  color: var(--color-secondary);
+  font-weight: 600;
+}
+
+.logDocuments {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Dark theme support */
+[data-theme="dark"] .logMessage {
+  border-bottom-color: var(--color-primary);
+}
+
+[data-theme="dark"] .logMessage:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="dark"] .logMetadata {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .logSummary {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="dark"] .logDocuments {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .logMessage {
+    padding: 10px 12px;
+  }
+  
+  .logText {
+    font-size: 13px;
+  }
+}
+
diff --git a/src/components/UiComponents/Messages/LogMessages/LogMessage.tsx b/src/components/UiComponents/Messages/LogMessages/LogMessage.tsx
new file mode 100644
index 0000000..f68d34d
--- /dev/null
+++ b/src/components/UiComponents/Messages/LogMessages/LogMessage.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Message } from '../MessagesTypes';
+import { DocumentItem, MessageMetadata, ActionInfo } from '../MessageParts';
+import { WorkflowFile } from '../../../../hooks/usePlayground';
+import styles from '../Messages.module.css';
+import logStyles from './LogMessage.module.css';
+
+export interface LogMessageProps {
+  message: Message;
+  showDocuments?: boolean;
+  showMetadata?: boolean;
+  showProgress?: boolean;
+  renderDocument?: (document: any, message: Message) => React.ReactNode;
+  onFileDelete?: (file: WorkflowFile) => Promise<void>;
+  onFileRemove?: (file: WorkflowFile) => Promise<void>;
+  onFileView?: (file: WorkflowFile) => Promise<void>;
+  deletingFiles?: Set<string>;
+  previewingFiles?: Set<string>;
+  removingFiles?: Set<string>;
+  workflowId?: string;
+}
+
+/**
+ * Renders a single message in log style (list/table UI)
+ */
+export const LogMessage: React.FC<LogMessageProps> = ({
+  message,
+  showDocuments = true,
+  showMetadata = true,
+  showProgress = true,
+  renderDocument,
+  onFileDelete,
+  onFileRemove,
+  onFileView,
+  deletingFiles,
+  previewingFiles,
+  removingFiles,
+  workflowId
+}) => {
+  return (
+    <div className={`${logStyles.logMessage} ${styles.messageWrapper}`}>
+      {/* Metadata row */}
+      {showMetadata && (
+        <div className={logStyles.logMetadata}>
+          <MessageMetadata message={message} showProgress={showProgress} />
+        </div>
+      )}
+      
+      {/* Content row */}
+      <div className={logStyles.logContent}>
+        {message.message && (
+          <div className={logStyles.logText}>{message.message}</div>
+        )}
+        
+        {message.summary && message.summary !== message.message && (
+          <div className={logStyles.logSummary}>
+            <strong>Summary:</strong> {message.summary}
+          </div>
+        )}
+        
+        {/* Action information */}
+        <ActionInfo message={message} />
+      </div>
+      
+      {/* Documents row */}
+      {showDocuments && message.documents && Array.isArray(message.documents) && message.documents.length > 0 && (
+        <div className={logStyles.logDocuments}>
+          {message.documentsLabel && (
+            <div className={styles.documentsLabel}>{message.documentsLabel}</div>
+          )}
+          <div className={styles.documentsList}>
+            {message.documents.map((doc) => (
+              <div key={doc.id}>
+                {renderDocument ? renderDocument(doc, message) : (
+                  <DocumentItem 
+                    document={doc} 
+                    message={message}
+                    onFileDelete={onFileDelete}
+                    onFileRemove={onFileRemove}
+                    onFileView={onFileView}
+                    deletingFiles={deletingFiles}
+                    previewingFiles={previewingFiles}
+                    removingFiles={removingFiles}
+                    workflowId={workflowId}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
diff --git a/src/components/UiComponents/Messages/MessageParts/ActionInfo.tsx b/src/components/UiComponents/Messages/MessageParts/ActionInfo.tsx
new file mode 100644
index 0000000..1bff6d4
--- /dev/null
+++ b/src/components/UiComponents/Messages/MessageParts/ActionInfo.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Message } from '../MessagesTypes';
+import styles from '../Messages.module.css';
+
+export interface ActionInfoProps {
+  message: Message;
+  className?: string;
+}
+
+/**
+ * Renders action information if present
+ */
+export const ActionInfo: React.FC<ActionInfoProps> = ({ message, className }) => {
+  if (!message.actionName && !message.actionMethod) return null;
+  
+  return (
+    <div className={`${styles.actionInfo} ${className || ''}`}>
+      {message.actionName && (
+        <span className={styles.actionName}>{message.actionName}</span>
+      )}
+      {message.actionMethod && (
+        <span className={styles.actionMethod}>{message.actionMethod}</span>
+      )}
+      {(message.roundNumber !== undefined || message.taskNumber !== undefined || message.actionNumber !== undefined) && (
+        <span className={styles.actionNumbers}>
+          {message.roundNumber !== undefined && `Round ${message.roundNumber}`}
+          {message.taskNumber !== undefined && ` • Task ${message.taskNumber}`}
+          {message.actionNumber !== undefined && ` • Action ${message.actionNumber}`}
+        </span>
+      )}
+    </div>
+  );
+};
+
diff --git a/src/components/UiComponents/Messages/MessageParts/DocumentItem.tsx b/src/components/UiComponents/Messages/MessageParts/DocumentItem.tsx
new file mode 100644
index 0000000..3209f8d
--- /dev/null
+++ b/src/components/UiComponents/Messages/MessageParts/DocumentItem.tsx
@@ -0,0 +1,131 @@
+import React, { useMemo } from 'react';
+import { MessageDocument, Message } from '../MessagesTypes';
+import { formatFileSize } from '../MessageUtils';
+import { ViewActionButton, DeleteActionButton, RemoveActionButton } from '../../../FormGenerator/ActionButtons';
+import { WorkflowFile } from '../../../../hooks/usePlayground';
+import styles from '../Messages.module.css';
+
+export interface DocumentItemProps {
+  document: MessageDocument;
+  message: Message;
+  className?: string;
+  onFileDelete?: (file: WorkflowFile) => Promise<void>;
+  onFileRemove?: (file: WorkflowFile) => Promise<void>;
+  onFileView?: (file: WorkflowFile) => Promise<void>;
+  deletingFiles?: Set<string>;
+  previewingFiles?: Set<string>;
+  removingFiles?: Set<string>;
+  workflowId?: string;
+}
+
+/**
+ * Renders a single document attachment with action buttons
+ */
+export const DocumentItem: React.FC<DocumentItemProps> = ({ 
+  document, 
+  message,
+  className,
+  onFileDelete,
+  onFileRemove,
+  onFileView,
+  deletingFiles = new Set(),
+  previewingFiles = new Set(),
+  removingFiles = new Set(),
+  workflowId
+}) => {
+  // Convert MessageDocument to WorkflowFile format for compatibility with action buttons
+  const workflowFile: WorkflowFile = useMemo(() => ({
+    id: document.id,
+    fileId: document.fileId,
+    fileName: document.fileName,
+    fileSize: document.fileSize,
+    mimeType: document.mimeType,
+    messageId: document.messageId,
+    source: 'user_uploaded' // Default to user_uploaded, can be enhanced later
+  }), [document]);
+
+  const isDeleting = deletingFiles.has(document.fileId);
+  const isPreviewing = previewingFiles.has(document.fileId);
+  const isRemoving = removingFiles.has(document.fileId);
+
+  // Create hookData object for action buttons
+  const hookData = useMemo(() => ({
+    handleDelete: async (fileId: string) => {
+      if (onFileDelete) {
+        await onFileDelete(workflowFile);
+        return true;
+      }
+      return false;
+    },
+    removeOptimistically: () => {
+      // Handled by parent component
+    },
+    refetch: async () => {
+      // Refetch handled by parent
+    },
+    deletingItems: deletingFiles,
+    previewingFiles: previewingFiles,
+    removingItems: removingFiles
+  }), [onFileDelete, workflowFile, deletingFiles, previewingFiles, removingFiles]);
+
+  const handleView = async () => {
+    if (onFileView) {
+      await onFileView(workflowFile);
+    }
+  };
+
+  const handleRemove = async () => {
+    if (onFileRemove) {
+      await onFileRemove(workflowFile);
+    }
+  };
+
+  return (
+    <div className={`${styles.documentItem} ${className || ''}`}>
+      <div className={styles.documentIcon}>📎</div>
+      <div className={styles.documentInfo}>
+        <div className={styles.documentName}>{document.fileName}</div>
+        <div className={styles.documentMeta}>
+          {formatFileSize(document.fileSize)} • {document.mimeType}
+        </div>
+      </div>
+      {(onFileView || onFileDelete || onFileRemove) && (
+        <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
+          {onFileView && (
+            <ViewActionButton
+              row={workflowFile}
+              onView={handleView}
+              disabled={isDeleting || isRemoving}
+              loading={isPreviewing}
+              hookData={hookData}
+              idField="fileId"
+              nameField="fileName"
+              typeField="mimeType"
+            />
+          )}
+          {onFileRemove && (
+            <RemoveActionButton
+              row={workflowFile}
+              onRemove={handleRemove}
+              disabled={isDeleting}
+              loading={isRemoving}
+              hookData={hookData}
+              idField="fileId"
+              loadingStateName="removingItems"
+            />
+          )}
+          {onFileDelete && (
+            <DeleteActionButton
+              row={workflowFile}
+              hookData={hookData}
+              idField="fileId"
+              operationName="handleDelete"
+              loadingStateName="deletingItems"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
diff --git a/src/components/UiComponents/Messages/MessageParts/MessageMetadata.tsx b/src/components/UiComponents/Messages/MessageParts/MessageMetadata.tsx
new file mode 100644
index 0000000..64e8f00
--- /dev/null
+++ b/src/components/UiComponents/Messages/MessageParts/MessageMetadata.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Message } from '../MessagesTypes';
+import { formatTimestamp, getStatusClass } from '../MessageUtils';
+import styles from '../Messages.module.css';
+
+export interface MessageMetadataProps {
+  message: Message;
+  showProgress?: boolean;
+  className?: string;
+}
+
+/**
+ * Renders message metadata (role, status, timestamp)
+ */
+export const MessageMetadata: React.FC<MessageMetadataProps> = ({ 
+  message, 
+  showProgress = true,
+  className 
+}) => {
+  return (
+    <div className={`${styles.messageMetadata} ${className || ''}`}>
+      {message.role && (
+        <span className={styles.roleBadge} data-role={message.role.toLowerCase()}>
+          {message.role}
+        </span>
+      )}
+      {message.status && (
+        <span className={`${styles.statusBadge} ${getStatusClass(styles, message.status, message.success)}`}>
+          {message.status}
+        </span>
+      )}
+      {message.publishedAt && (
+        <span className={styles.timestamp}>{formatTimestamp(message.publishedAt)}</span>
+      )}
+      {showProgress && message.actionProgress && (
+        <span className={styles.progress}>{message.actionProgress}</span>
+      )}
+      {showProgress && message.taskProgress && (
+        <span className={styles.progress}>{message.taskProgress}</span>
+      )}
+    </div>
+  );
+};
+
diff --git a/src/components/UiComponents/Messages/MessageParts/index.ts b/src/components/UiComponents/Messages/MessageParts/index.ts
new file mode 100644
index 0000000..ba43658
--- /dev/null
+++ b/src/components/UiComponents/Messages/MessageParts/index.ts
@@ -0,0 +1,7 @@
+export { DocumentItem } from './DocumentItem';
+export { MessageMetadata } from './MessageMetadata';
+export { ActionInfo } from './ActionInfo';
+export type { DocumentItemProps } from './DocumentItem';
+export type { MessageMetadataProps } from './MessageMetadata';
+export type { ActionInfoProps } from './ActionInfo';
+
diff --git a/src/components/UiComponents/Messages/MessageUtils.ts b/src/components/UiComponents/Messages/MessageUtils.ts
new file mode 100644
index 0000000..3d40945
--- /dev/null
+++ b/src/components/UiComponents/Messages/MessageUtils.ts
@@ -0,0 +1,85 @@
+/**
+ * Utility functions for message formatting and styling
+ */
+
+/**
+ * Formats a timestamp to a readable date/time string
+ * Handles both Unix timestamps in seconds and milliseconds
+ * Formats exactly like FormGenerator component
+ */
+export const formatTimestamp = (timestamp?: number): string => {
+  if (!timestamp) return '';
+  
+  try {
+    // Backend sends UTC timestamp in seconds (Unix timestamp)
+    // JavaScript Date constructor expects milliseconds
+    // Check if timestamp is in seconds (typical Unix timestamp range)
+    // Timestamps less than 10000000000 (year 2286) are likely in seconds
+    let date: Date;
+    if (timestamp < 10000000000) {
+      // Convert seconds to milliseconds
+      date = new Date(timestamp * 1000);
+    } else {
+      // Already in milliseconds
+      date = new Date(timestamp);
+    }
+    
+    // Validate date
+    if (isNaN(date.getTime())) {
+      console.warn('Invalid timestamp:', timestamp);
+      return '';
+    }
+    
+    // Format exactly like FormGenerator: YYYY-MM-DD HH:MM:SS GMT±HHMM
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    const timezoneOffset = date.getTimezoneOffset();
+    const offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
+    const offsetMinutes = Math.abs(timezoneOffset) % 60;
+    const offsetSign = timezoneOffset <= 0 ? '+' : '-';
+    const timezone = `GMT${offsetSign}${String(offsetHours).padStart(2, '0')}${offsetMinutes > 0 ? ':' + String(offsetMinutes).padStart(2, '0') : ''}`;
+    
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timezone}`;
+  } catch (error) {
+    console.warn('Error formatting timestamp:', timestamp, error);
+    return '';
+  }
+};
+
+/**
+ * Formats file size to human-readable format
+ */
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+};
+
+/**
+ * Gets status badge color class based on status
+ */
+export const getStatusClass = (baseStyles: any, status?: string, success?: boolean): string => {
+  if (success === false) return baseStyles.statusError;
+  if (success === true) return baseStyles.statusSuccess;
+  
+  switch (status?.toLowerCase()) {
+    case 'completed':
+    case 'success':
+      return baseStyles.statusSuccess;
+    case 'failed':
+    case 'error':
+      return baseStyles.statusError;
+    case 'running':
+    case 'pending':
+      return baseStyles.statusPending;
+    default:
+      return baseStyles.statusDefault;
+  }
+};
+
diff --git a/src/components/UiComponents/Messages/Messages.module.css b/src/components/UiComponents/Messages/Messages.module.css
new file mode 100644
index 0000000..9692e02
--- /dev/null
+++ b/src/components/UiComponents/Messages/Messages.module.css
@@ -0,0 +1,326 @@
+.messagesContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  font-family: var(--font-family);
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding: 16px 20px;
+  background-color: var(--color-surface);
+}
+
+.emptyState {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--color-gray);
+  font-size: 14px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.messageWrapper {
+  width: 100%;
+}
+
+.message {
+  display: flex;
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.messageUser {
+  justify-content: flex-end;
+}
+
+.messageAssistant {
+  justify-content: flex-start;
+}
+
+.messageBubble {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 75%;
+  padding: 12px 16px;
+  border-radius: 18px;
+  word-wrap: break-word;
+}
+
+.messageUser .messageBubble {
+  background-color: var(--color-secondary);
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.messageAssistant .messageBubble {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border-bottom-left-radius: 4px;
+  border: 1px solid var(--color-primary);
+}
+
+/* Message Metadata */
+.messageMetadata {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.roleBadge {
+  padding: 4px 8px;
+  border-radius: var(--object-radius-small);
+  font-weight: 500;
+  background-color: var(--color-primary);
+  color: var(--color-text);
+  text-transform: capitalize;
+}
+
+.roleBadge[data-role="user"] {
+  background-color: var(--color-secondary);
+  color: white;
+}
+
+.roleBadge[data-role="assistant"] {
+  background-color: var(--color-primary);
+}
+
+.statusBadge {
+  padding: 4px 8px;
+  border-radius: var(--object-radius-small);
+  font-weight: 500;
+  font-size: 11px;
+  text-transform: capitalize;
+}
+
+.statusSuccess {
+  background-color: #28a745;
+  color: white;
+}
+
+.statusError {
+  background-color: #dc3545;
+  color: white;
+}
+
+.statusPending {
+  background-color: #ffc107;
+  color: #212529;
+}
+
+.statusDefault {
+  background-color: var(--color-gray-disabled);
+  color: var(--color-text);
+}
+
+.timestamp {
+  color: var(--color-gray);
+  font-size: 11px;
+}
+
+.progress {
+  color: var(--color-secondary);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+/* Action Info */
+.actionInfo {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: var(--object-radius-small);
+  font-size: 11px;
+  margin-top: 4px;
+}
+
+.actionName {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.actionMethod {
+  color: var(--color-gray);
+  font-family: monospace;
+}
+
+.actionNumbers {
+  color: var(--color-gray);
+  font-size: 11px;
+}
+
+/* Message Content */
+.messageContent {
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.messageUser .messageContent {
+  color: white;
+}
+
+.messageAssistant .messageContent {
+  color: var(--color-text);
+}
+
+.messageTimestamp {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+  align-self: flex-end;
+}
+
+.messageUser .messageTimestamp {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.messageAssistant .messageTimestamp {
+  color: var(--color-gray);
+}
+
+.messageSummary {
+  padding: 8px 12px;
+  border-radius: var(--object-radius-small);
+  font-size: 12px;
+  line-height: 1.5;
+  margin-top: 4px;
+}
+
+.messageUser .messageSummary {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.messageUser .messageSummary strong {
+  color: white;
+  font-weight: 600;
+}
+
+.messageAssistant .messageSummary {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--color-text);
+}
+
+.messageAssistant .messageSummary strong {
+  color: var(--color-secondary);
+  font-weight: 600;
+}
+
+/* Documents */
+.documentsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.documentsLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.documentsList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.documentItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background-color: var(--color-surface);
+  border-radius: var(--object-radius-small);
+  transition: all 0.2s ease;
+}
+
+.documentItem:hover {
+  background-color: var(--color-highlight-gray);
+}
+
+.documentIcon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.documentInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.documentName {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.documentMeta {
+  font-size: 11px;
+  color: var(--color-gray);
+}
+
+/* Dark theme support */
+[data-theme="dark"] .message {
+  background-color: var(--color-surface);
+  border-color: var(--color-primary);
+}
+
+[data-theme="dark"] .message:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .actionInfo {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="dark"] .messageSummary {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="dark"] .documentItem {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="dark"] .documentItem:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .message {
+    padding: 12px;
+  }
+  
+  .messageMetadata {
+    font-size: 11px;
+  }
+  
+  .messageContent {
+    font-size: 13px;
+  }
+  
+  .documentItem {
+    padding: 8px 10px;
+  }
+}
+
diff --git a/src/components/UiComponents/Messages/Messages.tsx b/src/components/UiComponents/Messages/Messages.tsx
new file mode 100644
index 0000000..53a8725
--- /dev/null
+++ b/src/components/UiComponents/Messages/Messages.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { MessagesProps } from './MessagesTypes';
+import { ChatMessage } from './ChatMessages/ChatMessage';
+import { LogMessage } from './LogMessages/LogMessage';
+import styles from './Messages.module.css';
+
+/**
+ * Generic Messages component for displaying workflow messages
+ * Supports two variants: 'chat' (bubble UI) and 'log' (list/table UI)
+ * 
+ * @example
+ * ```tsx
+ * // Chat style (default)
+ * <Messages 
+ *   messages={workflowMessages} 
+ *   variant="chat"
+ *   showDocuments={true}
+ *   showMetadata={true}
+ * />
+ * 
+ * // Log style
+ * <Messages 
+ *   messages={workflowMessages} 
+ *   variant="log"
+ *   showDocuments={true}
+ *   showMetadata={true}
+ * />
+ * ```
+ */
+const Messages: React.FC<MessagesProps> = ({
+  messages,
+  className = '',
+  variant = 'chat',
+  showDocuments = true,
+  showMetadata = true,
+  showProgress = true,
+  renderMessage,
+  renderDocument,
+  emptyMessage = 'No messages yet',
+  onFileDelete,
+  onFileRemove,
+  onFileView,
+  deletingFiles,
+  previewingFiles,
+  removingFiles,
+  workflowId
+}) => {
+  // Handle empty state
+  if (!messages || messages.length === 0) {
+    return (
+      <div className={`${styles.messagesContainer} ${className}`}>
+        <div className={styles.emptyState}>{emptyMessage}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${styles.messagesContainer} ${className}`}>
+      {messages.map((message, index) => {
+        // Use custom render function if provided
+        if (renderMessage) {
+          return (
+            <div key={message.id || index} className={styles.messageWrapper}>
+              {renderMessage(message, index)}
+            </div>
+          );
+        }
+
+        // Render based on variant
+        if (variant === 'log') {
+          return (
+            <LogMessage
+              key={message.id || index}
+              message={message}
+              showDocuments={showDocuments}
+              showMetadata={showMetadata}
+              showProgress={showProgress}
+              renderDocument={renderDocument}
+              onFileDelete={onFileDelete}
+              onFileRemove={onFileRemove}
+              onFileView={onFileView}
+              deletingFiles={deletingFiles}
+              previewingFiles={previewingFiles}
+              removingFiles={removingFiles}
+              workflowId={workflowId}
+            />
+          );
+        }
+
+        // Default to chat variant
+        return (
+          <ChatMessage
+            key={message.id || index}
+            message={message}
+            showDocuments={showDocuments}
+            renderDocument={renderDocument}
+            onFileDelete={onFileDelete}
+            onFileRemove={onFileRemove}
+            onFileView={onFileView}
+            deletingFiles={deletingFiles}
+            previewingFiles={previewingFiles}
+            removingFiles={removingFiles}
+            workflowId={workflowId}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Messages;
+
diff --git a/src/components/UiComponents/Messages/MessagesTypes.ts b/src/components/UiComponents/Messages/MessagesTypes.ts
new file mode 100644
index 0000000..f577741
--- /dev/null
+++ b/src/components/UiComponents/Messages/MessagesTypes.ts
@@ -0,0 +1,118 @@
+import type React from 'react';
+import { WorkflowFile } from '../../../hooks/usePlayground';
+
+/**
+ * Document interface representing file attachments in messages
+ */
+export interface MessageDocument {
+  id: string;
+  messageId: string;
+  fileId: string;
+  fileName: string;
+  fileSize: number;
+  mimeType: string;
+  roundNumber: number;
+  taskNumber: number;
+  actionNumber: number;
+  actionId: string;
+}
+
+/**
+ * Message interface matching the API response structure
+ */
+export interface Message {
+  id: string;
+  workflowId: string;
+  parentMessageId?: string;
+  documents?: MessageDocument[];
+  documentsLabel?: string;
+  message?: string;
+  summary?: string;
+  role?: string;
+  status?: string;
+  sequenceNr?: number;
+  publishedAt?: number;
+  success?: boolean;
+  actionId?: string;
+  actionMethod?: string;
+  actionName?: string;
+  roundNumber?: number;
+  taskNumber?: number;
+  actionNumber?: number;
+  taskProgress?: string;
+  actionProgress?: string;
+}
+
+/**
+ * Message display variant
+ */
+export type MessageVariant = 'chat' | 'log';
+
+/**
+ * Props for the Messages component
+ */
+export interface MessagesProps {
+  /**
+   * Array of messages to display
+   */
+  messages: Message[];
+  
+  /**
+   * Display variant: 'chat' for bubble UI, 'log' for list/table UI
+   * @default 'chat'
+   */
+  variant?: MessageVariant;
+  
+  /**
+   * Optional className for custom styling
+   */
+  className?: string;
+  
+  /**
+   * Whether to show document attachments
+   * @default true
+   */
+  showDocuments?: boolean;
+  
+  /**
+   * Whether to show metadata (role, status, timestamps)
+   * @default true
+   */
+  showMetadata?: boolean;
+  
+  /**
+   * Whether to show progress indicators
+   * @default true
+   */
+  showProgress?: boolean;
+  
+  /**
+   * Custom render function for message content
+   * If provided, this will be used instead of the default rendering
+   */
+  renderMessage?: (message: Message, index: number) => React.ReactNode;
+  
+  /**
+   * Custom render function for documents
+   * If provided, this will be used instead of the default document rendering
+   */
+  renderDocument?: (document: MessageDocument, message: Message) => React.ReactNode;
+  
+  /**
+   * Empty state message when no messages are present
+   * @default "No messages yet"
+   */
+  emptyMessage?: string;
+  
+  /**
+   * File operation handlers for documents in messages
+   */
+  onFileDelete?: (file: WorkflowFile) => Promise<void>;
+  onFileRemove?: (file: WorkflowFile) => Promise<void>;
+  onFileView?: (file: WorkflowFile) => Promise<void>;
+  deletingFiles?: Set<string>;
+  previewingFiles?: Set<string>;
+  removingFiles?: Set<string>;
+  workflowId?: string;
+}
+
diff --git a/src/components/UiComponents/Messages/index.ts b/src/components/UiComponents/Messages/index.ts
new file mode 100644
index 0000000..042ba9f
--- /dev/null
+++ b/src/components/UiComponents/Messages/index.ts
@@ -0,0 +1,9 @@
+export { default as Messages } from './Messages';
+export { ChatMessage } from './ChatMessages/ChatMessage';
+export { LogMessage } from './LogMessages/LogMessage';
+export { DocumentItem, MessageMetadata, ActionInfo } from './MessageParts';
+export * from './MessageUtils';
+export type { MessagesProps, Message, MessageDocument, MessageVariant } from './MessagesTypes';
+export type { ChatMessageProps } from './ChatMessages/ChatMessage';
+export type { LogMessageProps } from './LogMessages/LogMessage';
+
diff --git a/src/components/UiComponents/ParcelInfoPanel/ParcelInfoPanel.module.css b/src/components/UiComponents/ParcelInfoPanel/ParcelInfoPanel.module.css
new file mode 100644
index 0000000..496cd69
--- /dev/null
+++ b/src/components/UiComponents/ParcelInfoPanel/ParcelInfoPanel.module.css
@@ -0,0 +1,170 @@
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+  backdrop-filter: blur(2px);
+}
+
+.panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 400px;
+  max-width: 90vw;
+  height: 100vh;
+  background-color: var(--color-bg, #ffffff);
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--color-border, #e5e7eb);
+  background-color: var(--color-bg-secondary, #f9fafb);
+}
+
+.title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text, #111827);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary, #6b7280);
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.closeButton:hover {
+  background-color: var(--color-hover, #f3f4f6);
+  color: var(--color-text, #111827);
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+.section {
+  margin-bottom: 2rem;
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.sectionTitle {
+  margin: 0 0 1rem 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--color-text, #111827);
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--color-primary, #3b82f6);
+}
+
+.infoGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.infoItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.value {
+  font-size: 1rem;
+  color: var(--color-text, #111827);
+  word-break: break-word;
+}
+
+.subValue {
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+}
+
+.link {
+  color: var(--color-primary, #3b82f6);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.link:hover {
+  color: var(--color-primary-dark, #2563eb);
+  text-decoration: underline;
+}
+
+.adjacentList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.adjacentItem {
+  padding: 0.75rem;
+  background-color: var(--color-bg-secondary, #f9fafb);
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 6px;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.adjacentItem:hover {
+  background-color: var(--color-hover, #f3f4f6);
+  border-color: var(--color-primary, #3b82f6);
+}
+
+.adjacentHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.adjacentNumber {
+  font-weight: 600;
+  color: var(--color-text, #111827);
+  font-size: 1rem;
+}
+
+.adjacentEgrid {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary, #6b7280);
+  font-family: monospace;
+}
+
+@media (max-width: 768px) {
+  .panel {
+    width: 100vw;
+    max-width: 100vw;
+  }
+}
+
diff --git a/src/components/UiComponents/ParcelInfoPanel/ParcelInfoPanel.tsx b/src/components/UiComponents/ParcelInfoPanel/ParcelInfoPanel.tsx
new file mode 100644
index 0000000..8c813ab
--- /dev/null
+++ b/src/components/UiComponents/ParcelInfoPanel/ParcelInfoPanel.tsx
@@ -0,0 +1,216 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FaTimes } from 'react-icons/fa';
+import styles from './ParcelInfoPanel.module.css';
+
+export interface ParcelInfoPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  parcelData: any;
+  adjacentParcels?: any[];
+}
+
+const ParcelInfoPanel: React.FC<ParcelInfoPanelProps> = ({
+  isOpen,
+  onClose,
+  parcelData,
+  adjacentParcels = []
+}) => {
+  if (!parcelData) return null;
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className={styles.backdrop}
+            onClick={onClose}
+          />
+          
+          {/* Panel */}
+          <motion.div
+            initial={{ x: '100%' }}
+            animate={{ x: 0 }}
+            exit={{ x: '100%' }}
+            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+            className={styles.panel}
+          >
+            <div className={styles.header}>
+              <h2 className={styles.title}>Parzellen-Informationen</h2>
+              <button className={styles.closeButton} onClick={onClose}>
+                <FaTimes />
+              </button>
+            </div>
+
+            <div className={styles.content}>
+              {/* Main Parcel */}
+              <section className={styles.section}>
+                <h3 className={styles.sectionTitle}>Ausgewählte Parzelle</h3>
+                <div className={styles.infoGrid}>
+                  {parcelData.parcel.id && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>ID:</span>
+                      <span className={styles.value}>{parcelData.parcel.id}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.number && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Nummer:</span>
+                      <span className={styles.value}>{parcelData.parcel.number}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.name && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Name:</span>
+                      <span className={styles.value}>{parcelData.parcel.name}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.egrid && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>EGRID:</span>
+                      <span className={styles.value}>{parcelData.parcel.egrid}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.identnd && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>IdentND:</span>
+                      <span className={styles.value}>{parcelData.parcel.identnd}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.address && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Adresse:</span>
+                      <span className={styles.value}>{parcelData.parcel.address}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.canton && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Kanton:</span>
+                      <span className={styles.value}>{parcelData.parcel.canton}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.municipality_name && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Gemeinde:</span>
+                      <span className={styles.value}>{parcelData.parcel.municipality_name}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.municipality_code && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Gemeinde-Code:</span>
+                      <span className={styles.value}>{parcelData.parcel.municipality_code}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.area_m2 !== undefined && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Fläche:</span>
+                      <span className={styles.value}>
+                        {parcelData.parcel.area_m2.toFixed(2)} m²
+                        {parcelData.parcel.area_m2 >= 10000 && (
+                          <span className={styles.subValue}>
+                            {' '}({(parcelData.parcel.area_m2 / 10000).toFixed(2)} ha)
+                          </span>
+                        )}
+                      </span>
+                    </div>
+                  )}
+                  {parcelData.parcel.realestate_type && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Grundstückstyp:</span>
+                      <span className={styles.value}>{parcelData.parcel.realestate_type}</span>
+                    </div>
+                  )}
+                  {parcelData.parcel.centroid && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Zentrum (LV95):</span>
+                      <span className={styles.value}>
+                        {parcelData.parcel.centroid.x.toFixed(2)}, {parcelData.parcel.centroid.y.toFixed(2)}
+                      </span>
+                    </div>
+                  )}
+                  {parcelData.parcel.geoportal_url && (
+                    <div className={styles.infoItem}>
+                      <span className={styles.label}>Geoportal:</span>
+                      <a
+                        href={parcelData.parcel.geoportal_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={styles.link}
+                      >
+                        Link öffnen
+                      </a>
+                    </div>
+                  )}
+                </div>
+              </section>
+
+              {/* Map View Info */}
+              {parcelData.map_view && (
+                <section className={styles.section}>
+                  <h3 className={styles.sectionTitle}>Kartenansicht</h3>
+                  <div className={styles.infoGrid}>
+                    {parcelData.map_view.center && (
+                      <div className={styles.infoItem}>
+                        <span className={styles.label}>Zentrum:</span>
+                        <span className={styles.value}>
+                          {parcelData.map_view.center.x.toFixed(2)}, {parcelData.map_view.center.y.toFixed(2)}
+                        </span>
+                      </div>
+                    )}
+                    {parcelData.map_view.zoom_bounds && (
+                      <>
+                        <div className={styles.infoItem}>
+                          <span className={styles.label}>Bounds Min:</span>
+                          <span className={styles.value}>
+                            {parcelData.map_view.zoom_bounds.min_x.toFixed(2)}, {parcelData.map_view.zoom_bounds.min_y.toFixed(2)}
+                          </span>
+                        </div>
+                        <div className={styles.infoItem}>
+                          <span className={styles.label}>Bounds Max:</span>
+                          <span className={styles.value}>
+                            {parcelData.map_view.zoom_bounds.max_x.toFixed(2)}, {parcelData.map_view.zoom_bounds.max_y.toFixed(2)}
+                          </span>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </section>
+              )}
+
+              {/* Adjacent Parcels */}
+              {adjacentParcels.length > 0 && (
+                <section className={styles.section}>
+                  <h3 className={styles.sectionTitle}>
+                    Angrenzende Parzellen ({adjacentParcels.length})
+                  </h3>
+                  <div className={styles.adjacentList}>
+                    {adjacentParcels.map((adjacent, index) => (
+                      <div key={adjacent.id || index} className={styles.adjacentItem}>
+                        <div className={styles.adjacentHeader}>
+                          <span className={styles.adjacentNumber}>
+                            {adjacent.number || adjacent.id}
+                          </span>
+                          {adjacent.egrid && (
+                            <span className={styles.adjacentEgrid}>{adjacent.egrid}</span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </section>
+              )}
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default ParcelInfoPanel;
+
diff --git a/src/components/UiComponents/ParcelInfoPanel/index.ts b/src/components/UiComponents/ParcelInfoPanel/index.ts
new file mode 100644
index 0000000..74bce7f
--- /dev/null
+++ b/src/components/UiComponents/ParcelInfoPanel/index.ts
@@ -0,0 +1,3 @@
+export { default as ParcelInfoPanel } from './ParcelInfoPanel';
+export type { ParcelInfoPanelProps } from './ParcelInfoPanel';
+
diff --git a/src/components/ui/Popup/EditForm.module.css b/src/components/UiComponents/Popup/EditForm.module.css
similarity index 100%
rename from src/components/ui/Popup/EditForm.module.css
rename to src/components/UiComponents/Popup/EditForm.module.css
diff --git a/src/components/ui/Popup/EditForm.tsx b/src/components/UiComponents/Popup/EditForm.tsx
similarity index 100%
rename from src/components/ui/Popup/EditForm.tsx
rename to src/components/UiComponents/Popup/EditForm.tsx
diff --git a/src/components/ui/Popup/Popup.module.css b/src/components/UiComponents/Popup/Popup.module.css
similarity index 100%
rename from src/components/ui/Popup/Popup.module.css
rename to src/components/UiComponents/Popup/Popup.module.css
diff --git a/src/components/ui/Popup/Popup.tsx b/src/components/UiComponents/Popup/Popup.tsx
similarity index 100%
rename from src/components/ui/Popup/Popup.tsx
rename to src/components/UiComponents/Popup/Popup.tsx
diff --git a/src/components/ui/Popup/ViewForm.module.css b/src/components/UiComponents/Popup/ViewForm.module.css
similarity index 100%
rename from src/components/ui/Popup/ViewForm.module.css
rename to src/components/UiComponents/Popup/ViewForm.module.css
diff --git a/src/components/ui/Popup/ViewForm.tsx b/src/components/UiComponents/Popup/ViewForm.tsx
similarity index 100%
rename from src/components/ui/Popup/ViewForm.tsx
rename to src/components/UiComponents/Popup/ViewForm.tsx
diff --git a/src/components/ui/Popup/index.ts b/src/components/UiComponents/Popup/index.ts
similarity index 100%
rename from src/components/ui/Popup/index.ts
rename to src/components/UiComponents/Popup/index.ts
diff --git a/src/components/UiComponents/TextField/TextField.module.css b/src/components/UiComponents/TextField/TextField.module.css
new file mode 100644
index 0000000..0415031
--- /dev/null
+++ b/src/components/UiComponents/TextField/TextField.module.css
@@ -0,0 +1,172 @@
+.textFieldWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+  display: block;
+}
+
+.labelRequired {
+  color: var(--color-text);
+}
+
+.required {
+  color: #ef4444;
+  margin-left: 4px;
+}
+
+.inputContainer {
+  position: relative;
+  width: 100%;
+}
+
+.input,
+.textarea {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--color-primary);
+  border-radius: 25px;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  resize: none;
+  overflow-y: auto;
+  line-height: 1.5;
+}
+
+.textarea {
+  min-height: 44px; /* Match input height */
+  height: auto;
+  max-height: calc(1.5em * 5 + 24px); /* 5 lines + padding */
+  overflow-y: auto;
+}
+
+.input:focus,
+.textarea:focus {
+  outline: none;
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 123, 255), 0.1);
+}
+
+.input:disabled,
+.textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--color-bg-disabled, #f5f5f5);
+}
+
+.input:read-only,
+.textarea:read-only {
+  cursor: default;
+  background-color: var(--color-bg-disabled, #f5f5f5);
+}
+
+.inputFieldError {
+  border-color: #ef4444;
+}
+
+.inputFieldError:focus {
+  border-color: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.textarea.inputFieldError:focus {
+  border-color: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+/* Size variants */
+.sm .input,
+.sm .textarea {
+  padding: 8px 12px;
+  font-size: 13px;
+}
+
+.sm .textarea {
+  min-height: 36px;
+}
+
+.md .input,
+.md .textarea {
+  padding: 12px 16px;
+  font-size: 14px;
+}
+
+.md .textarea {
+  min-height: 44px;
+}
+
+.lg .input,
+.lg .textarea {
+  padding: 16px 20px;
+  font-size: 16px;
+}
+
+.lg .textarea {
+  min-height: 52px;
+}
+
+/* Helper text and error text */
+.helperText {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 4px;
+}
+
+.errorText {
+  font-size: 12px;
+  color: #ef4444;
+  margin-top: 4px;
+}
+
+/* Dark theme support */
+[data-theme="dark"] .input,
+[data-theme="dark"] .textarea {
+  border-color: var(--color-primary);
+  background-color: var(--color-bg);
+}
+
+[data-theme="dark"] .input:disabled,
+[data-theme="dark"] .textarea:disabled {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="dark"] .input:read-only,
+[data-theme="dark"] .textarea:read-only {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="dark"] .label {
+  color: var(--color-text);
+}
+
+[data-theme="dark"] .helperText {
+  color: #9ca3af;
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .input,
+  .textarea {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+  
+  .label {
+    font-size: 13px;
+  }
+  
+  .helperText,
+  .errorText {
+    font-size: 11px;
+  }
+}
+
diff --git a/src/components/UiComponents/TextField/TextField.tsx b/src/components/UiComponents/TextField/TextField.tsx
new file mode 100644
index 0000000..c33a7b1
--- /dev/null
+++ b/src/components/UiComponents/TextField/TextField.tsx
@@ -0,0 +1,131 @@
+import React, { useRef, useEffect } from 'react';
+import { BaseTextFieldProps } from './TextFieldTypes';
+import styles from './TextField.module.css';
+
+interface TextFieldProps extends BaseTextFieldProps {
+  // Allow all standard HTML input attributes
+  autoComplete?: string;
+  pattern?: string;
+  step?: string;
+  min?: string | number;
+  max?: string | number;
+}
+
+const TextField: React.FC<TextFieldProps> = ({
+  value = '',
+  onChange,
+  placeholder,
+  disabled = false,
+  required = false,
+  readonly = false,
+  size = 'md',
+  error,
+  helperText,
+  label,
+  className = '',
+  type = 'text',
+  maxLength,
+  minLength,
+  autoFocus = false,
+  name,
+  id,
+  ...props
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Use textarea for text types, input for others
+  const useTextarea = type === 'text' || type === 'search';
+
+  // Simple auto-grow
+  useEffect(() => {
+    if (!useTextarea || !textareaRef.current) return;
+    const textarea = textareaRef.current;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  });
+
+  // Handle input change
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    if (!disabled && !readonly && onChange) {
+      onChange(e.target.value);
+    }
+  };
+
+  // Build classes for input container
+  const containerClasses = [
+    styles.inputContainer,
+    styles[size],
+    className
+  ].filter(Boolean).join(' ');
+
+  // Build classes for input/textarea
+  const inputClasses = [
+    useTextarea ? styles.textarea : styles.input,
+    error ? styles.inputFieldError : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={styles.textFieldWrapper}>
+      {/* Label */}
+      {label && (
+        <label 
+          htmlFor={id || name}
+          className={styles.labelRequired}
+        >
+          {label}
+          {required && <span className={styles.required}>*</span>}
+        </label>
+      )}
+
+      {/* Input or Textarea */}
+      <div className={containerClasses}>
+        {useTextarea ? (
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleChange}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readonly}
+            required={required}
+            className={inputClasses}
+            maxLength={maxLength}
+            minLength={minLength}
+            autoFocus={autoFocus}
+            name={name}
+            id={id}
+            rows={1}
+            {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+          />
+        ) : (
+          <input
+            type={type}
+            value={value}
+            onChange={handleChange}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readonly}
+            required={required}
+            className={inputClasses}
+            maxLength={maxLength}
+            minLength={minLength}
+            autoFocus={autoFocus}
+            name={name}
+            id={id}
+            {...props}
+          />
+        )}
+      </div>
+
+      {/* Error or Helper text */}
+      {error ? (
+        <span className={styles.errorText}>{error}</span>
+      ) : helperText ? (
+        <span className={styles.helperText}>{helperText}</span>
+      ) : null}
+    </div>
+  );
+};
+
+export default TextField;
+
diff --git a/src/components/UiComponents/TextField/TextFieldTypes.ts b/src/components/UiComponents/TextField/TextFieldTypes.ts
new file mode 100644
index 0000000..df47742
--- /dev/null
+++ b/src/components/UiComponents/TextField/TextFieldTypes.ts
@@ -0,0 +1,22 @@
+export type TextFieldSize = 'sm' | 'md' | 'lg';
+
+export interface BaseTextFieldProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  size?: TextFieldSize;
+  error?: string;
+  helperText?: string;
+  label?: string;
+  className?: string;
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+  maxLength?: number;
+  minLength?: number;
+  autoFocus?: boolean;
+  name?: string;
+  id?: string;
+}
+
diff --git a/src/components/UiComponents/TextField/index.ts b/src/components/UiComponents/TextField/index.ts
new file mode 100644
index 0000000..26767d5
--- /dev/null
+++ b/src/components/UiComponents/TextField/index.ts
@@ -0,0 +1,4 @@
+export { default as TextField } from './TextField';
+export { default } from './TextField';
+export * from './TextFieldTypes';
+
diff --git a/src/components/UiComponents/index.ts b/src/components/UiComponents/index.ts
new file mode 100644
index 0000000..a32e421
--- /dev/null
+++ b/src/components/UiComponents/index.ts
@@ -0,0 +1,12 @@
+export * from './Button';
+export * from './Button/UploadButton';
+export { default as MessageOverlay } from './InfoMessageOverlay';
+export type { MessageMode } from './InfoMessageOverlay';
+export * from './DragDropOverlay';
+export * from './TextField';
+export * from './Messages';
+export * from './DropdownSelect';
+export * from './EditFields';
+export * from './LocationInput';
+export * from './MapView';
+export * from './ParcelInfoPanel';
diff --git a/src/components/Workflows/WorkflowsTable.module.css b/src/components/Workflows/WorkflowsTable.module.css
deleted file mode 100644
index 164e10e..0000000
--- a/src/components/Workflows/WorkflowsTable.module.css
+++ /dev/null
@@ -1,175 +0,0 @@
-.workflowsTable {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.workflowsFormGenerator {
-  flex: 1;
-  height: 100%;
-}
-
-/* Error state styling */
-.errorState {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  text-align: center;
-  color: var(--color-error, #dc3545);
-  background-color: var(--color-error-bg, #f8d7da);
-  border: 1px solid var(--color-error-border, #f5c6cb);
-  border-radius: 8px;
-  margin: 1rem;
-}
-
-.retryButton {
-  padding: 0.5rem 1rem;
-  background-color: var(--color-primary, #007bff);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-top: 1rem;
-  transition: background-color 0.2s ease;
-}
-
-.retryButton:hover {
-  background-color: var(--color-primary-dark, #0056b3);
-}
-
-/* Table cell styling */
-.workflowId {
-  font-family: 'Courier New', monospace;
-  font-size: 0.9em;
-  color: var(--color-gray);
-  cursor: help;
-}
-
-.workflowName {
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.statusBadge {
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 12px;
-  font-size: 0.85em;
-  font-weight: 500;
-  text-transform: capitalize;
-  text-align: center;
-  min-width: 60px;
-}
-
-.status-running {
-  background-color: var(--color-gray);
-  color: white;
-}
-
-.status-completed {
-  background-color: var(--color-secondary);
-  color: white;
-}
-
-.status-failed {
-  background-color: var(--color-red);
-  color: white;
-}
-
-.status-stopped {
-  background-color: #f5f5f5;
-  color: #495057;
-  border: 1px solid #dee2e6;
-}
-
-.status-pending {
-  background-color: #fff3cd;
-  color: #856404;
-  border: 1px solid #ffeaa7;
-}
-
-.roundNumber {
-  font-weight: 400;
-  color: var(--color-text);
-  background-color: var(--color-bg);
-  padding: 0.25rem 0.5rem;
-  font-size: 0.9em;
-  min-width: 24px;
-  text-align: center;
-  display: inline-block;
-}
-
-.messageCount {
-  font-weight: 500;
-  color: var(--color-text);
-  background-color: var(--color-bg);
-  padding: 0.25rem 0.5rem;
-  border-radius: 8px;
-  font-size: 0.9em;
-  min-width: 24px;
-  text-align: center;
-  display: inline-block;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .workflowId {
-    font-size: 0.8em;
-  }
-  
-  .statusBadge {
-    font-size: 0.8em;
-    padding: 0.2rem 0.4rem;
-  }
-  
-  .roundNumber,
-  .messageCount {
-    font-size: 0.8em;
-    padding: 0.2rem 0.4rem;
-  }
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .workflowId {
-    color: var(--color-gray);
-  }
-  
-  .workflowName {
-    color: var(--color-text);
-  }
-  
-  .status-running {
-    background-color: var(--color-gray);
-    color: white;
-  }
-  
-  .status-completed {
-    background-color: var(--color-secondary);
-    color: white;
-  }
-  
-  .status-failed {
-    background-color: var(--color-red);
-    color: white;
-  }
-  
-  .status-stopped {
-    background-color: var(--color-primary);
-    color: white;
-  }
-  
-  
-  .roundNumber {
-    background-color: var(--color-bg);
-    color: var(--color-text);
-  }
-  
-  .messageCount {
-    background-color: var(--color-gray);
-    color: white;
-  }
-}
diff --git a/src/components/Workflows/WorkflowsTable.tsx b/src/components/Workflows/WorkflowsTable.tsx
deleted file mode 100644
index 64ea70f..0000000
--- a/src/components/Workflows/WorkflowsTable.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-import { FormGenerator } from '../FormGenerator/FormGenerator';
-import { Popup, EditForm } from '../ui/Popup';
-import { useWorkflowsLogic } from './workflowsLogic';
-import { WorkflowsTableProps } from './workflowsTypes';
-import styles from './WorkflowsTable.module.css';
-
-function WorkflowsTable({ className = '' }: WorkflowsTableProps) {
-  const logic = useWorkflowsLogic();
-
-  // Show error state
-  if (logic.error) {
-    return (
-      <div className={`${styles.workflowsTable} ${className}`}>
-        <div className={styles.errorState}>
-          <p>Error loading workflows: {logic.error}</p>
-          <button onClick={logic.refetch} className={styles.retryButton}>
-            Retry
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`${styles.workflowsTable} ${className}`}>
-      <FormGenerator
-        data={logic.workflows}
-        columns={logic.columns}
-        searchable={true}
-        filterable={true}
-        sortable={true}
-        resizable={true}
-        pagination={true}
-        pageSize={10}
-        loading={logic.loading}
-        actionButtons={logic.actions}
-        onDelete={logic.handleDeleteSingle}
-        onDeleteMultiple={logic.handleDeleteMultiple}
-        onRefresh={logic.refetch}
-        className={styles.workflowsFormGenerator}
-        onRowClick={(workflow: any) => {
-          // TODO: Navigate to workflow detail view
-          console.log('Clicked workflow:', workflow);
-        }}
-      />
-
-      {/* Edit Workflow Modal */}
-      <Popup
-        isOpen={logic.editModalOpen}
-        title="Edit Workflow"
-        onClose={logic.handleCancelEdit}
-        size="small"
-      >
-        {logic.editingWorkflow && (
-          <EditForm
-            data={logic.editingWorkflow}
-            fields={logic.editWorkflowFields}
-            onSave={logic.handleSaveWorkflow}
-            onCancel={logic.handleCancelEdit}
-            saveButtonText="Save"
-            cancelButtonText="Cancel"
-          />
-        )}
-      </Popup>
-    </div>
-  );
-}
-
-export default WorkflowsTable;
diff --git a/src/components/Workflows/index.ts b/src/components/Workflows/index.ts
deleted file mode 100644
index dc20a54..0000000
--- a/src/components/Workflows/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WorkflowsTable } from './WorkflowsTable';
-export { useWorkflowsLogic } from './workflowsLogic';
-export * from './workflowsTypes';
\ No newline at end of file
diff --git a/src/components/Workflows/workflowsLogic.tsx b/src/components/Workflows/workflowsLogic.tsx
deleted file mode 100644
index 69f1d59..0000000
--- a/src/components/Workflows/workflowsLogic.tsx
+++ /dev/null
@@ -1,450 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { IoIosTrash, IoIosPlay } from 'react-icons/io';
-import { MdModeEdit } from 'react-icons/md';
-
-import { useWorkflows, useWorkflowOperations, Workflow } from '../../hooks/useWorkflows';
-import { useApiRequest } from '../../hooks/useApi';
-import { useLanguage } from '../../contexts/LanguageContext';
-import type { EditFieldConfig } from '../ui/Popup/EditForm';
-
-import type { 
-  WorkflowsLogicReturn, 
-  WorkflowMessageCounts, 
-  WorkflowActionConfig,
-  WorkflowColumnConfig 
-} from './workflowsTypes';
-import styles from './WorkflowsTable.module.css';
-
-export function useWorkflowsLogic(): WorkflowsLogicReturn {
-  const { workflows, loading, error, refetch } = useWorkflows();
-  const navigate = useNavigate();
-  const { t } = useLanguage();
-  
-  // State to track message counts for each workflow
-  const [workflowMessageCounts, setWorkflowMessageCounts] = useState<WorkflowMessageCounts>({});
-  const { request } = useApiRequest();
-  
-  // Debug: Log workflow data to see the actual structure
-  console.log('Workflows data:', workflows);
-  if (workflows && workflows.length > 0) {
-    const firstWorkflow = workflows[0];
-    console.log('First workflow object:', firstWorkflow);
-    console.log('First workflow keys:', Object.keys(firstWorkflow));
-    console.log('First workflow stats:', firstWorkflow.stats);
-    if (firstWorkflow.stats) {
-      console.log('Stats keys:', Object.keys(firstWorkflow.stats));
-      console.log('Stats object:', firstWorkflow.stats);
-    }
-    console.log('First workflow messages array:', firstWorkflow.messages, 'length:', firstWorkflow.messages?.length);
-  }
-  
-  const { 
-    deleteWorkflow,
-    updateWorkflow,
-    deletingWorkflows 
-  } = useWorkflowOperations();
-
-  // Edit modal state
-  const [editModalOpen, setEditModalOpen] = useState(false);
-  const [editingWorkflow, setEditingWorkflow] = useState<Workflow | null>(null);
-
-  // Function to fetch message count for a single workflow
-  const fetchMessageCount = async (workflowId: string) => {
-    try {
-      console.log(`Fetching messages for workflow: ${workflowId}`);
-      const messages = await request({
-        url: `/api/workflows/${workflowId}/messages`,
-        method: 'get'
-      });
-      
-      console.log(`Messages for ${workflowId}:`, messages, 'length:', messages?.length);
-      const count = Array.isArray(messages) ? messages.length : 0;
-      console.log(`Setting message count for ${workflowId}:`, count);
-      setWorkflowMessageCounts(prev => ({
-        ...prev,
-        [workflowId]: count
-      }));
-    } catch (error) {
-      console.error(`Failed to fetch message count for workflow ${workflowId}:`, error);
-      // Set count to 0 for failed requests
-      setWorkflowMessageCounts(prev => ({
-        ...prev,
-        [workflowId]: 0
-      }));
-    }
-  };
-
-  // Effect to fetch message counts when workflows change
-  useEffect(() => {
-    if (workflows && workflows.length > 0) {
-      workflows.forEach(workflow => {
-        // Only fetch if we don't already have the count
-        if (!(workflow.id in workflowMessageCounts)) {
-          fetchMessageCount(workflow.id);
-        }
-      });
-    }
-  }, [workflows]); // Don't include workflowMessageCounts to avoid infinite loop
-
-  // Configure edit fields for workflow name editing
-  const editWorkflowFields: EditFieldConfig[] = useMemo(() => [
-    {
-      key: 'name',
-      label: t('workflows.field.name', 'Workflow Name'),
-      type: 'string',
-      editable: true,
-      required: true,
-      validator: (value: string) => {
-        if (!value || value.trim() === '') {
-          return t('workflows.validation.nameRequired', 'Workflow name cannot be empty');
-        }
-        if (value.length > 100) {
-          return t('workflows.validation.nameTooLong', 'Workflow name cannot exceed 100 characters');
-        }
-        return null;
-      }
-    }
-  ], [t]);
-
-  // Configure columns for the workflows table
-  const columns: WorkflowColumnConfig[] = useMemo(() => [
-    {
-      key: 'id',
-      label: t('workflows.column.id'),
-      type: 'string',
-      width: 180,
-      minWidth: 150,
-      maxWidth: 250,
-      sortable: true,
-      filterable: true,
-      searchable: true,
-      formatter: (value: string) => (
-        <span className={styles.workflowId} title={value}>
-          {value.length > 8 ? `${value.substring(0, 8)}...` : value}
-        </span>
-      )
-    },
-    {
-      key: 'name',
-      label: t('workflows.column.name'),
-      type: 'string',
-      width: 200,
-      minWidth: 150,
-      maxWidth: 300,
-      sortable: true,
-      filterable: true,
-      searchable: true,
-      formatter: (value: string | undefined) => (
-        <span className={styles.workflowName}>
-          {value || t('workflows.unnamed')}
-        </span>
-      )
-    },
-    {
-      key: 'status',
-      label: t('workflows.column.status'),
-      type: 'enum',
-      width: 120,
-      minWidth: 100,
-      maxWidth: 150,
-      sortable: true,
-      filterable: true,
-      filterOptions: ['running', 'completed', 'failed', 'stopped', 'pending'],
-      formatter: (value: string) => (
-        <span className={`${styles.statusBadge} ${styles[`status-${value}`]}`}>
-          {t(`workflows.status.${value}`, value)}
-        </span>
-      )
-    },
-    {
-      key: 'currentRound',
-      label: t('workflows.column.round'),
-      type: 'number',
-      width: 80,
-      minWidth: 60,
-      maxWidth: 100,
-      sortable: true,
-      filterable: true,
-      formatter: (value: number | undefined) => (
-        <span className={styles.roundNumber}>
-          {value || 1}
-        </span>
-      )
-    },
-    {
-      key: 'startedAt',
-      label: t('workflows.column.started'),
-      type: 'date',
-      width: 140,
-      minWidth: 120,
-      maxWidth: 180,
-      sortable: true,
-      filterable: true,
-      formatter: (value: number | undefined) => {
-        if (!value) return '-';
-        try {
-          // Backend sends UTC timestamp in seconds (float), convert to milliseconds for Date constructor
-          const date = new Date(value * 1000);
-          
-          // Check if date is valid
-          if (isNaN(date.getTime())) {
-            console.warn('Invalid startedAt date:', value);
-            return '-';
-          }
-          const year = date.getFullYear();
-          const month = String(date.getMonth() + 1).padStart(2, '0');
-          const day = String(date.getDate()).padStart(2, '0');
-          const hours = String(date.getHours()).padStart(2, '0');
-          const minutes = String(date.getMinutes()).padStart(2, '0');
-          const seconds = String(date.getSeconds()).padStart(2, '0');
-          const timezoneOffset = date.getTimezoneOffset();
-          const offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
-          const offsetMinutes = Math.abs(timezoneOffset) % 60;
-          const offsetSign = timezoneOffset <= 0 ? '+' : '-';
-          const timezone = `GMT${offsetSign}${offsetHours}${offsetMinutes > 0 ? ':' + offsetMinutes.toString().padStart(2, '0') : ''}`;
-          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timezone}`;
-        } catch (error) {
-          console.warn('Error parsing startedAt date:', value, error);
-          return '-';
-        }
-      }
-    },
-    {
-      key: 'lastActivity',
-      label: t('workflows.column.lastActivity'),
-      type: 'date',
-      width: 140,
-      minWidth: 120,
-      maxWidth: 180,
-      sortable: true,
-      filterable: true,
-      formatter: (value: number | undefined) => {
-        if (!value) return '-';
-        try {
-          // Backend sends UTC timestamp in seconds (float), convert to milliseconds for Date constructor
-          const date = new Date(value * 1000);
-          
-          // Check if date is valid
-          if (isNaN(date.getTime())) {
-            console.warn('Invalid lastActivity date:', value);
-            return '-';
-          }
-          const year = date.getFullYear();
-          const month = String(date.getMonth() + 1).padStart(2, '0');
-          const day = String(date.getDate()).padStart(2, '0');
-          const hours = String(date.getHours()).padStart(2, '0');
-          const minutes = String(date.getMinutes()).padStart(2, '0');
-          const seconds = String(date.getSeconds()).padStart(2, '0');
-          const timezoneOffset = date.getTimezoneOffset();
-          const offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
-          const offsetMinutes = Math.abs(timezoneOffset) % 60;
-          const offsetSign = timezoneOffset <= 0 ? '+' : '-';
-          const timezone = `GMT${offsetSign}${offsetHours}${offsetMinutes > 0 ? ':' + offsetMinutes.toString().padStart(2, '0') : ''}`;
-          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timezone}`;
-        } catch (error) {
-          console.warn('Error parsing lastActivity date:', value, error);
-          return '-';
-        }
-      }
-    },
-    {
-      key: 'messages',
-      label: t('workflows.column.messages'),
-      type: 'number',
-      width: 100,
-      minWidth: 80,
-      maxWidth: 120,
-      sortable: true,
-      filterable: false,
-      formatter: (_value: any, row: any) => {
-        // Get message count from our fetched data, just like in Dashboard component
-        const workflowId = row?.id;
-        const messageCount = workflowId ? workflowMessageCounts[workflowId] : undefined;
-        
-        console.log(`Messages formatter for ${workflowId}:`, {
-          workflowId,
-          messageCount,
-          hasInCache: workflowId in workflowMessageCounts,
-          allCounts: workflowMessageCounts
-        });
-        
-        // Show the count if available, otherwise show loading indicator or dash
-        let displayValue;
-        if (messageCount !== undefined) {
-          displayValue = messageCount;
-        } else if (workflowId && workflows.some(w => w.id === workflowId)) {
-          // We're still loading this count
-          displayValue = '...';
-        } else {
-          displayValue = '-';
-        }
-        
-        return (
-          <span className={styles.messageCount}>
-            {displayValue}
-          </span>
-        );
-      }
-    }
-  ], [t, workflowMessageCounts, workflows]);
-
-  // Handle workflow actions
-  const handleDeleteWorkflow = async (workflow: Workflow) => {
-    const workflowName = workflow.name || workflow.id;
-    if (window.confirm(t('workflows.delete.confirm').replace('{name}', workflowName))) {
-      const success = await deleteWorkflow(workflow.id);
-      if (success) {
-        refetch(); // Refresh the workflows list
-      }
-    }
-  };
-
-  // Handle single workflow deletion for bulk delete
-  const handleDeleteSingle = async (workflow: Workflow) => {
-    const workflowName = workflow.name || workflow.id;
-    if (window.confirm(t('workflows.delete.confirm', 'Are you sure you want to delete "{name}"?').replace('{name}', workflowName))) {
-      const success = await deleteWorkflow(workflow.id);
-      if (success) {
-        refetch(); // Refresh the workflows list
-      } else {
-        console.error('Delete failed for workflow:', workflow.id);
-      }
-    }
-  };
-
-  // Handle multiple workflow deletion
-  const handleDeleteMultiple = async (workflowsToDelete: Workflow[]) => {
-    const workflowCount = workflowsToDelete.length;
-    if (window.confirm(t('workflows.delete.confirmMultiple', 'Are you sure you want to delete {count} workflows?').replace('{count}', workflowCount.toString()))) {
-      // Start all delete operations simultaneously
-      const deletePromises = workflowsToDelete.map(async (workflow) => {
-        try {
-          const success = await deleteWorkflow(workflow.id);
-          return { workflowId: workflow.id, success };
-        } catch (error) {
-          console.error('Failed to delete workflow:', workflow.id, error);
-          return { workflowId: workflow.id, success: false };
-        }
-      });
-
-      // Wait for all deletions to complete
-      const results = await Promise.all(deletePromises);
-      
-      // Check if any deletions failed
-      const failedDeletions = results.filter(result => !result.success);
-      if (failedDeletions.length > 0) {
-        console.error('Some workflow deletions failed:', failedDeletions);
-      }
-      
-      // Refresh the workflow list regardless of individual failures
-      refetch();
-    }
-  };
-
-  // Handle edit workflow
-  const handleEditWorkflow = (workflow: Workflow) => {
-    setEditingWorkflow(workflow);
-    setEditModalOpen(true);
-  };
-
-  // Handle save workflow
-  const handleSaveWorkflow = async (updatedWorkflow: Workflow) => {
-    if (!editingWorkflow) return;
-
-    try {
-      // Call API to update workflow name
-      const result = await updateWorkflow(editingWorkflow.id, {
-        name: updatedWorkflow.name
-      });
-      
-      if (result.success) {
-        // Close modal
-        setEditModalOpen(false);
-        setEditingWorkflow(null);
-        
-        // Refresh workflow list
-        await refetch();
-        
-        // Notify other components that workflows have been updated
-        window.dispatchEvent(new CustomEvent('workflowUpdated', { 
-          detail: { workflowId: editingWorkflow.id, newName: updatedWorkflow.name }
-        }));
-      } else {
-        console.error('Failed to update workflow:', result.error);
-        // TODO: Show error message to user
-      }
-    } catch (error) {
-      console.error('Failed to update workflow:', error);
-      // TODO: Show error message to user
-    }
-  };
-
-  // Handle cancel edit
-  const handleCancelEdit = () => {
-    setEditModalOpen(false);
-    setEditingWorkflow(null);
-  };
-
-  // Handle play workflow - navigate to dashboard with workflow ID
-  const handlePlayWorkflow = (workflow: Workflow) => {
-    // Navigate to dashboard with workflow ID as URL parameter
-    navigate(`/dashboard?workflowId=${workflow.id}`);
-  };
-
-  // Configure action buttons
-  const actions: WorkflowActionConfig[] = useMemo(() => [
-    {
-      label: t('workflows.action.play'),
-      icon: (_row: Workflow) => {
-        return <IoIosPlay />;
-      },
-      onClick: (row: Workflow) => {
-        handlePlayWorkflow(row);
-      }
-    },
-    {
-      label: t('workflows.action.edit'),
-      icon: (_row: Workflow) => {
-        return <MdModeEdit />;
-      },
-      onClick: (row: Workflow) => {
-        handleEditWorkflow(row);
-      }
-    },
-    {
-      label: t('workflows.action.delete'),
-      icon: (_row: Workflow) => {
-        return <IoIosTrash />;
-      }
-      // onClick is handled by FormGenerator for delete confirmation
-    },
-  ], [t, deletingWorkflows, handleDeleteWorkflow, handleEditWorkflow, handlePlayWorkflow]);
-
-  return {
-    // Data
-    workflows,
-    loading,
-    error,
-    workflowMessageCounts,
-    editModalOpen,
-    editingWorkflow,
-    editWorkflowFields,
-    
-    // Actions
-    handleDeleteSingle,
-    handleDeleteMultiple,
-    handleEditWorkflow,
-    handleSaveWorkflow,
-    handleCancelEdit,
-    handlePlayWorkflow,
-    
-    // Refetch function
-    refetch,
-    
-    // Additional data for rendering
-    columns: columns as any,
-    actions: actions as any
-  };
-}
diff --git a/src/components/Workflows/workflowsTypes.ts b/src/components/Workflows/workflowsTypes.ts
deleted file mode 100644
index ed986d0..0000000
--- a/src/components/Workflows/workflowsTypes.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { Workflow } from '../../hooks/useWorkflows';
-
-export interface WorkflowsTableProps {
-  className?: string;
-}
-
-export interface WorkflowMessageCounts {
-  [workflowId: string]: number;
-}
-
-export interface WorkflowEditState {
-  editModalOpen: boolean;
-  editingWorkflow: Workflow | null;
-}
-
-export interface WorkflowsLogicReturn {
-  // Data
-  workflows: Workflow[];
-  loading: boolean;
-  error: string | null;
-  workflowMessageCounts: WorkflowMessageCounts;
-  editModalOpen: boolean;
-  editingWorkflow: Workflow | null;
-  editWorkflowFields: any[];
-  columns: any[];
-  actions: any[];
-  
-  // Actions
-  handleDeleteSingle: (workflow: Workflow) => Promise<void>;
-  handleDeleteMultiple: (workflows: Workflow[]) => Promise<void>;
-  handleEditWorkflow: (workflow: Workflow) => void;
-  handleSaveWorkflow: (updatedWorkflow: Workflow) => Promise<void>;
-  handleCancelEdit: () => void;
-  handlePlayWorkflow: (workflow: Workflow) => void;
-  
-  // Refetch function
-  refetch: () => Promise<void>;
-}
-
-export interface WorkflowActionConfig {
-  label: string;
-  icon: (row: Workflow) => React.ReactElement;
-  onClick?: (row: Workflow) => void;
-}
-
-export interface WorkflowColumnConfig {
-  key: string;
-  label: string;
-  type: string;
-  width: number;
-  minWidth: number;
-  maxWidth: number;
-  sortable: boolean;
-  filterable: boolean;
-  searchable?: boolean;
-  filterOptions?: string[];
-  formatter: (value: any, row?: any) => React.ReactElement | string;
-}
diff --git a/src/components/settings/settingsSpeech.module.css b/src/components/settings/settingsSpeech.module.css
deleted file mode 100644
index 8cd4dcf..0000000
--- a/src/components/settings/settingsSpeech.module.css
+++ /dev/null
@@ -1,290 +0,0 @@
-/* Speech Settings Form - matches userInfoForm styling */
-.speechSettingsForm {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px;
-    background: var(--color-bg);
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    margin-bottom: 20px;
-}
-
-.settingLabel {
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--color-text);
-    font-family: var(--font-family);
-}
-
-.settingDescription {
-    font-size: 0.875rem;
-    color: var(--color-primary);
-    font-family: var(--font-family);
-}
-
-.loading {
-    text-align: center;
-    padding: 2rem;
-    color: var(--color-text);
-    font-size: 1rem;
-}
-
-.noData {
-    text-align: center;
-    padding: 2rem;
-    background: var(--color-bg);
-    border-radius: 20px;
-    border: 1px solid var(--color-secondary);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.noData p {
-    margin: 0 0 1.5rem 0;
-    color: var(--color-text);
-    font-size: 1rem;
-}
-
-.signUpButton {
-    padding: 12px 24px;
-    border-radius: 25px;
-    border: none;
-    background: var(--color-secondary);
-    color: white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    font-weight: 500;
-    min-width: 120px;
-}
-
-.signUpButton:hover:not(:disabled) {
-    background: var(--color-secondary);
-    border-color: var(--color-secondary);
-    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3);
-    transform: translateY(-2px);
-}
-
-.updateMessage {
-    padding: 12px 16px;
-    border-radius: 8px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 10px;
-}
-
-.successMessage {
-    background-color: rgba(34, 197, 94, 0.1);
-    color: #16a34a;
-    border: 1px solid rgba(34, 197, 94, 0.2);
-}
-
-.errorMessage {
-    background-color: rgba(239, 68, 68, 0.1);
-    color: #dc2626;
-    border: 1px solid rgba(239, 68, 68, 0.2);
-}
-
-/* Section styling */
-.section {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    padding: 15px;
-    background: var(--color-bg);
-    border-radius: 15px;
-    border: 1px solid var(--color-secondary);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.sectionHeader {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid var(--color-secondary);
-}
-
-.sectionIcon {
-    font-size: 1.1rem;
-    color: var(--color-secondary);
-}
-
-.sectionTitle {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--color-text);
-    margin: 0;
-    font-family: var(--font-family);
-}
-
-/* Form styling - matches userInfoForm */
-.formRow {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-
-.formField {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    flex: 1;
-    min-width: 250px;
-}
-
-.fieldLabel {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--color-text);
-    font-family: var(--font-family);
-}
-
-.formInput,
-.formSelect {
-    padding: 12px 16px;
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    transition: all 0.3s ease;
-    outline: none;
-}
-
-.formInput:focus,
-.formSelect:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
-}
-
-.formInput:hover,
-.formSelect:hover {
-    border-color: var(--color-secondary);
-}
-
-.formSelect {
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right 0.5rem center;
-    background-repeat: no-repeat;
-    background-size: 1.5em 1.5em;
-    padding-right: 2.5rem;
-}
-
-.formSelect option {
-    background: var(--color-bg);
-    color: var(--color-text);
-    padding: 10px;
-}
-
-/* Actions styling - matches userInfoForm */
-.formActions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    padding-top: 10px;
-}
-
-.saveButton {
-    padding: 12px 24px;
-    border-radius: 25px;
-    border: none;
-    background: var(--color-secondary);
-    color: white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    font-weight: 500;
-    min-width: 120px;
-}
-
-.saveButton:hover:not(:disabled) {
-    background: var(--color-secondary);
-    border-color: var(--color-secondary);
-    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3);
-    transform: translateY(-2px);
-}
-
-.saveButton:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-}
-
-.resetButton {
-    padding: 12px 24px;
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    background: var(--color-bg);
-    color: var(--color-text);
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    font-weight: 500;
-    min-width: 120px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.resetButton:hover:not(:disabled) {
-    background: var(--color-primary);
-    color: white;
-    transform: translateY(-2px);
-}
-
-.resetButton:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-}
-
-.resetIcon {
-    font-size: 1rem;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .formRow {
-        flex-direction: column;
-        gap: 15px;
-    }
-    
-    .formField {
-        min-width: unset;
-    }
-    
-    .formActions {
-        justify-content: center;
-        flex-direction: column;
-    }
-    
-    .saveButton,
-    .resetButton {
-        width: 100%;
-    }
-}
-
-@media (max-width: 640px) {
-    .speechSettingsForm {
-        padding: 15px;
-    }
-    
-    .section {
-        padding: 12px;
-    }
-    
-    .sectionHeader {
-        gap: 6px;
-        padding-bottom: 6px;
-    }
-    
-    .formRow {
-        gap: 12px;
-    }
-}
diff --git a/src/components/settings/settingsSpeech.tsx b/src/components/settings/settingsSpeech.tsx
deleted file mode 100644
index 64c1b30..0000000
--- a/src/components/settings/settingsSpeech.tsx
+++ /dev/null
@@ -1,387 +0,0 @@
-import { useState, useEffect } from 'react';
-import { IoIosBusiness, IoIosContact, IoIosTime, IoIosRefresh } from 'react-icons/io';
-import { useNavigate } from 'react-router-dom';
-import styles from './settingsSpeech.module.css';
-import { useLanguage } from '../../contexts/LanguageContext';
-
-interface MandateData {
-  id: string;
-  mandate_general: {
-    company_name: string;
-    industry: string;
-    contact_info: {
-      email: string;
-      phone: string;
-      street: string;
-      postal_code: string;
-      city: string;
-      country: string;
-    };
-    business_hours: string;
-    timezone: string;
-  };
-  setup_contacts: boolean;
-}
-
-interface SettingsSpeechProps {
-  onDataUpdate?: (data: MandateData) => void;
-}
-
-function SettingsSpeech({ onDataUpdate }: SettingsSpeechProps) {
-  const { t } = useLanguage();
-  const navigate = useNavigate();
-  const [formData, setFormData] = useState<MandateData | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-  const [saveMessage, setSaveMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
-
-  // Load data from localStorage on component mount
-  useEffect(() => {
-    const loadSpeechData = () => {
-      try {
-        const savedData = localStorage.getItem('speechSignUpData');
-        const timestamp = localStorage.getItem('speechSignUpTimestamp');
-        
-        if (savedData && timestamp) {
-          const parsedData = JSON.parse(savedData);
-          const savedTime = parseInt(timestamp);
-          const now = Date.now();
-          const twentyFourHours = 24 * 60 * 60 * 1000;
-          
-          // Check if data is still valid (within 24 hours)
-          if (now - savedTime < twentyFourHours) {
-            setFormData(parsedData);
-          } else {
-            // Data expired, clear it
-            localStorage.removeItem('speechSignUpData');
-            localStorage.removeItem('speechSignUpTimestamp');
-          }
-        }
-      } catch (error) {
-        console.error('Error loading speech data:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadSpeechData();
-  }, []);
-
-  const handleInputChange = (field: string, value: string) => {
-    if (!formData) return;
-    
-    const newData = { ...formData };
-    const fieldParts = field.split('.');
-    
-    if (fieldParts.length === 2) {
-      // Handle nested fields like mandate_general.company_name
-      const [parent, child] = fieldParts;
-      if (parent === 'mandate_general' && child in newData.mandate_general) {
-        (newData.mandate_general as any)[child] = value;
-      }
-    } else if (fieldParts.length === 3) {
-      // Handle deeply nested fields like mandate_general.contact_info.email
-      const [parent, child, grandchild] = fieldParts;
-      if (parent === 'mandate_general' && child === 'contact_info' && grandchild in newData.mandate_general.contact_info) {
-        (newData.mandate_general.contact_info as any)[grandchild] = value;
-      }
-    } else if (field === 'setup_contacts') {
-      newData.setup_contacts = value === 'true';
-    }
-    
-    setFormData(newData);
-    setSaveMessage(null);
-  };
-
-
-  const handleSave = async () => {
-    if (!formData) return;
-    
-    setIsSaving(true);
-    try {
-      // Save to localStorage
-      localStorage.setItem('speechSignUpData', JSON.stringify(formData));
-      localStorage.setItem('speechSignUpTimestamp', Date.now().toString());
-      
-      // Dispatch event to notify other components
-      window.dispatchEvent(new CustomEvent('speechSignUpChanged'));
-      
-      setSaveMessage({ type: 'success', text: t('speech.settings.save_success') });
-      
-      // Notify parent component if callback provided
-      if (onDataUpdate) {
-        onDataUpdate(formData);
-      }
-      
-      // Clear message after 3 seconds
-      setTimeout(() => setSaveMessage(null), 3000);
-    } catch (error) {
-      console.error('Error saving speech settings:', error);
-      setSaveMessage({ type: 'error', text: t('speech.settings.save_error') });
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleReset = () => {
-    if (window.confirm(t('speech.settings.reset_confirm'))) {
-      localStorage.removeItem('speechSignUpData');
-      localStorage.removeItem('speechSignUpTimestamp');
-      window.dispatchEvent(new CustomEvent('speechSignUpChanged'));
-      setFormData(null);
-      setSaveMessage({ type: 'success', text: t('speech.settings.reset_success') });
-      setTimeout(() => setSaveMessage(null), 3000);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className={styles.speechSettingsForm}>
-        <div className={styles.loading}>
-          {t('common.loading')}
-        </div>
-      </div>
-    );
-  }
-
-  if (!formData) {
-    return (
-      <div className={styles.speechSettingsForm}>
-        <div className={styles.noData}>
-          <p>{t('speech.settings.no_data')}</p>
-          <button 
-            className={styles.signUpButton}
-            onClick={() => navigate('/speech')}
-          >
-            {t('speech.settings.sign_up_now')}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.speechSettingsForm}>
-      <span className={styles.settingLabel}>{t('speech.settings.title')}</span>
-      <span className={styles.settingDescription}>{t('speech.settings.description')}</span>
-
-      {saveMessage && (
-        <div className={`${styles.updateMessage} ${saveMessage.type === 'success' ? styles.successMessage : styles.errorMessage}`}>
-          {saveMessage.text}
-        </div>
-      )}
-
-      {/* Company Information Section */}
-      <div className={styles.section}>
-        <div className={styles.sectionHeader}>
-          <IoIosBusiness className={styles.sectionIcon} />
-          <h3 className={styles.sectionTitle}>{t('speech.settings.company_info')}</h3>
-        </div>
-        
-        <div className={styles.formRow}>
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.company_name')} *
-            </label>
-            <input
-              type="text"
-              className={styles.formInput}
-              value={formData.mandate_general.company_name}
-              onChange={(e) => handleInputChange('mandate_general.company_name', e.target.value)}
-              required
-            />
-          </div>
-          
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.industry')} *
-            </label>
-            <input
-              type="text"
-              className={styles.formInput}
-              value={formData.mandate_general.industry}
-              onChange={(e) => handleInputChange('mandate_general.industry', e.target.value)}
-              required
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Contact Information Section */}
-      <div className={styles.section}>
-        <div className={styles.sectionHeader}>
-          <IoIosContact className={styles.sectionIcon} />
-          <h3 className={styles.sectionTitle}>{t('speech.settings.contact_info')}</h3>
-        </div>
-        
-        <div className={styles.formRow}>
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.email')} *
-            </label>
-            <input
-              type="email"
-              className={styles.formInput}
-              value={formData.mandate_general.contact_info.email}
-              onChange={(e) => handleInputChange('mandate_general.contact_info.email', e.target.value)}
-              required
-            />
-          </div>
-          
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.phone')} *
-            </label>
-            <input
-              type="tel"
-              className={styles.formInput}
-              value={formData.mandate_general.contact_info.phone}
-              onChange={(e) => handleInputChange('mandate_general.contact_info.phone', e.target.value)}
-              required
-            />
-          </div>
-        </div>
-
-        <div className={styles.formRow}>
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.street')} *
-            </label>
-            <input
-              type="text"
-              className={styles.formInput}
-              value={formData.mandate_general.contact_info.street}
-              onChange={(e) => handleInputChange('mandate_general.contact_info.street', e.target.value)}
-              required
-            />
-          </div>
-          
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.postal_code')} *
-            </label>
-            <input
-              type="text"
-              className={styles.formInput}
-              value={formData.mandate_general.contact_info.postal_code}
-              onChange={(e) => handleInputChange('mandate_general.contact_info.postal_code', e.target.value)}
-              required
-            />
-          </div>
-        </div>
-
-        <div className={styles.formRow}>
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.city')} *
-            </label>
-            <input
-              type="text"
-              className={styles.formInput}
-              value={formData.mandate_general.contact_info.city}
-              onChange={(e) => handleInputChange('mandate_general.contact_info.city', e.target.value)}
-              required
-            />
-          </div>
-          
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.country')} *
-            </label>
-            <input
-              type="text"
-              className={styles.formInput}
-              value={formData.mandate_general.contact_info.country}
-              onChange={(e) => handleInputChange('mandate_general.contact_info.country', e.target.value)}
-              required
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Business Hours Section */}
-      <div className={styles.section}>
-        <div className={styles.sectionHeader}>
-          <IoIosTime className={styles.sectionIcon} />
-          <h3 className={styles.sectionTitle}>{t('speech.settings.business_hours')}</h3>
-        </div>
-        
-        <div className={styles.formRow}>
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.business_hours')} *
-            </label>
-            <input
-              type="text"
-              className={styles.formInput}
-              value={formData.mandate_general.business_hours}
-              onChange={(e) => handleInputChange('mandate_general.business_hours', e.target.value)}
-              required
-            />
-          </div>
-          
-          <div className={styles.formField}>
-            <label className={styles.fieldLabel}>
-              {t('speech.signup.timezone')} *
-            </label>
-            <select
-              className={styles.formSelect}
-              value={formData.mandate_general.timezone}
-              onChange={(e) => handleInputChange('mandate_general.timezone', e.target.value)}
-              required
-            >
-              <option value="">{t('speech.signup.select_timezone')}</option>
-              <option value="UTC-12">UTC-12 (Baker Island)</option>
-              <option value="UTC-11">UTC-11 (American Samoa)</option>
-              <option value="UTC-10">UTC-10 (Hawaii)</option>
-              <option value="UTC-9">UTC-9 (Alaska)</option>
-              <option value="UTC-8">UTC-8 (Pacific Time)</option>
-              <option value="UTC-7">UTC-7 (Mountain Time)</option>
-              <option value="UTC-6">UTC-6 (Central Time)</option>
-              <option value="UTC-5">UTC-5 (Eastern Time)</option>
-              <option value="UTC-4">UTC-4 (Atlantic Time)</option>
-              <option value="UTC-3">UTC-3 (Brazil)</option>
-              <option value="UTC-2">UTC-2 (Mid-Atlantic)</option>
-              <option value="UTC-1">UTC-1 (Azores)</option>
-              <option value="UTC+0">UTC+0 (Greenwich Mean Time)</option>
-              <option value="UTC+1">UTC+1 (Central European Time)</option>
-              <option value="UTC+2">UTC+2 (Eastern European Time)</option>
-              <option value="UTC+3">UTC+3 (Moscow Time)</option>
-              <option value="UTC+4">UTC+4 (Gulf Standard Time)</option>
-              <option value="UTC+5">UTC+5 (Pakistan Standard Time)</option>
-              <option value="UTC+6">UTC+6 (Bangladesh Standard Time)</option>
-              <option value="UTC+7">UTC+7 (Indochina Time)</option>
-              <option value="UTC+8">UTC+8 (China Standard Time)</option>
-              <option value="UTC+9">UTC+9 (Japan Standard Time)</option>
-              <option value="UTC+10">UTC+10 (Australian Eastern Time)</option>
-              <option value="UTC+11">UTC+11 (Solomon Islands)</option>
-              <option value="UTC+12">UTC+12 (New Zealand)</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      {/* Actions */}
-      <div className={styles.formActions}>
-        <button 
-          className={styles.resetButton}
-          onClick={handleReset}
-          disabled={isSaving}
-        >
-          <IoIosRefresh className={styles.resetIcon} />
-          {t('speech.settings.reset')}
-        </button>
-        
-        <button 
-          className={styles.saveButton}
-          onClick={handleSave}
-          disabled={isSaving}
-        >
-          {isSaving ? t('speech.settings.saving') : t('speech.settings.save')}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default SettingsSpeech;
diff --git a/src/components/settings/settingsUser.module.css b/src/components/settings/settingsUser.module.css
deleted file mode 100644
index f239ab8..0000000
--- a/src/components/settings/settingsUser.module.css
+++ /dev/null
@@ -1,168 +0,0 @@
-/* User Information Form Styles */
-.userInfoForm {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px;
-    background: var(--color-bg);
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    margin-bottom: 20px;
-}
-
-.formRow {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-
-.formField {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    flex: 1;
-    min-width: 250px;
-}
-
-.fieldLabel {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--color-text);
-    font-family: var(--font-family);
-}
-
-.fieldNote {
-    font-size: 0.75rem;
-    font-weight: 400;
-    color: var(--color-primary);
-    font-style: italic;
-}
-
-.formInput,
-.formSelect {
-    padding: 12px 16px;
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    transition: all 0.3s ease;
-    outline: none;
-}
-
-.formInput:focus,
-.formSelect:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
-}
-
-.formInput:hover,
-.formSelect:hover {
-    border-color: var(--color-secondary);
-}
-
-.formInput[readonly] {
-    background: var(--color-gray-light);
-    cursor: not-allowed;
-    opacity: 0.7;
-}
-
-.formSelect option {
-    background: var(--color-bg);
-    color: var(--color-text);
-    padding: 10px;
-}
-
-.formActions {
-    display: flex;
-    justify-content: flex-end;
-    padding-top: 10px;
-}
-
-.saveButton {
-    padding: 12px 24px;
-    border-radius: 25px;
-    border: none;
-    background: var(--color-secondary);
-    color: white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    font-weight: 500;
-    min-width: 120px;
-}
-
-.saveButton:hover:not(:disabled) {
-    background: var(--color-secondary);
-    border-color: var(--color-secondary);
-    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3);
-}
-
-.saveButton:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-.updateMessage {
-    padding: 12px 16px;
-    border-radius: 12px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 10px;
-}
-
-.successMessage {
-    background-color: #e8f5e8;
-    color: #2e7d32;
-    border: 1px solid #81c784;
-}
-
-.errorMessage {
-    background-color: #fce4ec;
-    color: #c2185b;
-    border: 1px solid #f48fb1;
-    padding: 12px 16px;
-    border-radius: 12px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 20px;
-}
-
-.settingLabel {
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--color-text);
-    font-family: var(--font-family);
-}
-
-.settingDescription {
-    font-size: 0.875rem;
-    color: var(--color-primary);
-    font-family: var(--font-family);
-}
-
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .formRow {
-        flex-direction: column;
-        gap: 15px;
-    }
-    
-    .formField {
-        min-width: unset;
-    }
-    
-    .formActions {
-        justify-content: center;
-    }
-    
-    .saveButton {
-        width: 100%;
-        max-width: 200px;
-    }
-}
diff --git a/src/components/settings/settingsUser.tsx b/src/components/settings/settingsUser.tsx
deleted file mode 100644
index e3f9fae..0000000
--- a/src/components/settings/settingsUser.tsx
+++ /dev/null
@@ -1,389 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { useLanguage, Language } from '../../contexts/LanguageContext';
-import { useCurrentUser, useUser, User } from '../../hooks/useUsers';
-import styles from './settingsUser.module.css';
-
-interface SettingsUserProps {
-    className?: string;
-}
-
-function SettingsUser({ className }: SettingsUserProps) {
-    console.log('👤 SettingsUser component loaded');
-    const { currentLanguage, setLanguage, t } = useLanguage();
-    const { user: currentUser } = useCurrentUser();
-    const { getUser, updateUser, isLoading: updateLoading } = useUser();
-    
-    // Local state for user data fetched directly via API
-    const [user, setUser] = useState<User | null>(null);
-    const [userLoading, setUserLoading] = useState(false);
-    const [userError, setUserError] = useState<string | null>(null);
-    
-    // Form state for user info
-    const [userForm, setUserForm] = useState({
-        username: '',
-        fullName: '',
-        email: '',
-        language: 'en' as Language,
-        privilege: '',
-        enabled: true
-    });
-    
-    // Phone name state (stored in localStorage only)
-    const [phoneName, setPhoneName] = useState('');
-    const [updateMessage, setUpdateMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
-    const [isUpdating, setIsUpdating] = useState(false); // Flag to prevent form reset during update
-    const hasLoadedUser = useRef(false);
-    
-    // Load phone name from localStorage
-    const loadPhoneName = () => {
-        try {
-            const savedPhoneName = localStorage.getItem('userPhoneName');
-            if (savedPhoneName) {
-                setPhoneName(savedPhoneName);
-            }
-        } catch (error) {
-            console.error('Failed to load phone name from localStorage:', error);
-        }
-    };
-
-    // Save phone name to localStorage
-    const savePhoneName = (name: string) => {
-        try {
-            if (name.trim()) {
-                localStorage.setItem('userPhoneName', name.trim());
-            } else {
-                localStorage.removeItem('userPhoneName');
-            }
-        } catch (error) {
-            console.error('Failed to save phone name to localStorage:', error);
-        }
-    };
-
-    // Fetch user data directly using the /api/users/{userId} endpoint
-    const fetchUserData = async () => {
-        if (!currentUser?.id || hasLoadedUser.current) return;
-        
-        hasLoadedUser.current = true;
-        setUserLoading(true);
-        setUserError(null);
-        
-        try {
-            const userData = await getUser(currentUser.id);
-            setUser(userData);
-        } catch (error) {
-            console.error('Failed to fetch user data:', error);
-            setUserError(typeof error === 'string' ? error : 'Failed to load user data');
-            hasLoadedUser.current = false; // Reset on error to allow retry
-        } finally {
-            setUserLoading(false);
-        }
-    };
-    
-    // Load phone name from localStorage on component mount
-    useEffect(() => {
-        loadPhoneName();
-    }, []);
-
-    // Fetch user data when currentUser is available
-    useEffect(() => {
-        if (currentUser?.id && !hasLoadedUser.current) {
-            fetchUserData();
-        }
-    }, [currentUser?.id]);
-    
-    // Update form when user data is loaded (but not during an active update)
-    useEffect(() => {
-        if (user && !isUpdating) {
-            console.log('🔄 Updating form with user data:', user);
-            setUserForm({
-                username: user.username || '',
-                fullName: user.fullName || '',
-                email: user.email || '',
-                language: (user.language as Language) || currentLanguage,
-                privilege: user.privilege || '',
-                enabled: user.enabled
-            });
-        }
-    }, [user, currentLanguage, isUpdating]);
-    
-    const handleUserFormChange = (field: keyof typeof userForm, value: string | boolean) => {
-        setUserForm(prev => ({ ...prev, [field]: value }));
-        setUpdateMessage(null); // Clear any previous messages
-        
-        // Language change will be handled when the form is submitted, not immediately
-    };
-
-    const handlePhoneNameChange = (value: string) => {
-        setPhoneName(value);
-        savePhoneName(value); // Save to localStorage immediately
-    };
-    
-    const handleSaveUserInfo = async () => {
-        if (!user) return;
-        
-        setIsUpdating(true); // Prevent form reset during update
-        
-        try {
-            // Create complete User object with updated form data
-            // Only include editable fields based on authentication authority
-            const completeUserData: User = {
-                id: user.id,
-                username: user.authenticationAuthority === 'local' ? userForm.username : user.username,
-                fullName: user.authenticationAuthority === 'local' ? userForm.fullName : user.fullName,
-                email: user.authenticationAuthority === 'local' ? userForm.email : user.email,
-                language: userForm.language, // Language is always editable
-                privilege: userForm.privilege,
-                enabled: userForm.enabled,
-                authenticationAuthority: user.authenticationAuthority,
-                mandateId: user.mandateId
-            };
-            
-            // Update user via API - this returns the updated user
-            const updatedUser = await updateUser(user.id, completeUserData);
-            
-            if (updatedUser) {
-                console.log('✅ User update successful:', updatedUser);
-                
-                // CRITICAL: Update localStorage with new user data (single source of truth!)
-                localStorage.setItem('currentUser', JSON.stringify(updatedUser));
-                console.log('💾 Updated user data cached in localStorage');
-                
-                // Update local user state with the returned data
-                setUser(updatedUser);
-                
-                // Update frontend language if it was changed
-                const newLanguage = updatedUser.language as Language;
-                if (newLanguage && newLanguage !== currentLanguage) {
-                    try {
-                        await setLanguage(newLanguage);
-                        console.log('🌍 Frontend language updated to:', newLanguage);
-                    } catch (error) {
-                        console.error('Failed to change frontend language:', error);
-                    }
-                }
-                
-                // Success: Update form with the actual returned data to ensure consistency
-                setUserForm({
-                    username: updatedUser.username || '',
-                    fullName: updatedUser.fullName || '',
-                    email: updatedUser.email || '',
-                    language: newLanguage || currentLanguage,
-                    privilege: updatedUser.privilege || '',
-                    enabled: updatedUser.enabled
-                });
-                
-                console.log('📝 Form updated with new data');
-                
-                // Dispatch event to notify other components (like sidebar) that user data was updated
-                window.dispatchEvent(new CustomEvent('userInfoUpdated'));
-                
-                setUpdateMessage({ type: 'success', text: t('settings.userinfo.success') });
-            } else {
-                throw new Error('No updated user data returned from server');
-            }
-            
-            // Clear message after 3 seconds
-            setTimeout(() => setUpdateMessage(null), 3000);
-        } catch (error) {
-            console.error('Failed to update user info:', error);
-            setUpdateMessage({ type: 'error', text: t('settings.userinfo.update_error') });
-            
-            // Reset form to original user data on error
-            if (user) {
-                setUserForm({
-                    username: user.username || '',
-                    fullName: user.fullName || '',
-                    email: user.email || '',
-                    language: (user.language as Language) || currentLanguage,
-                    privilege: user.privilege || '',
-                    enabled: user.enabled
-                });
-            }
-        } finally {
-            setIsUpdating(false); // Re-enable form sync
-        }
-    };
-
-    const getLanguageLabel = (lang: Language): string => {
-        switch (lang) {
-            case 'de': return t('language.german');
-            case 'en': return t('language.english');
-            case 'fr': return t('language.french');
-            default: return lang;
-        }
-    };
-
-    if (userLoading) {
-        return (
-            <div className={`${styles.userInfoForm} ${className || ''}`}>
-                <div style={{ padding: '2rem', textAlign: 'center' }}>
-                    {t('settings.userinfo.loading')}
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className={`${styles.userInfoForm} ${className || ''}`}>
-            {userError && (
-                <div className={styles.errorMessage}>
-                    {t('settings.userinfo.error')}: {typeof userError === 'string' ? userError : 'An error occurred'}
-                </div>
-            )}
-            
-            {user && (
-                <>
-                    <span className={styles.settingLabel}>{t('settings.userinfo')}</span>
-                    <span className={styles.settingDescription}>
-                        {t('settings.userinfo.description')}
-                    </span>
-                    <div className={styles.formRow}>
-                        <div className={styles.formField}>
-                            <label className={styles.fieldLabel}>
-                                {t('settings.userinfo.username')}
-                                {user.authenticationAuthority !== 'local' && (
-                                    <span className={styles.fieldNote}>({t('settings.userinfo.managed_by').replace('{provider}', user.authenticationAuthority)})</span>
-                                )}
-                            </label>
-                            <input
-                                type="text"
-                                className={styles.formInput}
-                                value={userForm.username}
-                                onChange={(e) => handleUserFormChange('username', e.target.value)}
-                                placeholder={t('settings.userinfo.username')}
-                                readOnly={user.authenticationAuthority !== 'local'}
-                                title={user.authenticationAuthority !== 'local' ? 
-                                    t('settings.userinfo.managed_note').replace('{provider}', user.authenticationAuthority) : 
-                                    undefined}
-                            />
-                        </div>
-                        
-                        <div className={styles.formField}>
-                            <label className={styles.fieldLabel}>
-                                {t('settings.userinfo.fullname')}
-                                {user.authenticationAuthority !== 'local' && (
-                                    <span className={styles.fieldNote}>({t('settings.userinfo.managed_by').replace('{provider}', user.authenticationAuthority)})</span>
-                                )}
-                            </label>
-                            <input
-                                type="text"
-                                className={styles.formInput}
-                                value={userForm.fullName}
-                                onChange={(e) => handleUserFormChange('fullName', e.target.value)}
-                                placeholder={t('settings.userinfo.fullname')}
-                                readOnly={user.authenticationAuthority !== 'local'}
-                                title={user.authenticationAuthority !== 'local' ? 
-                                    t('settings.userinfo.managed_note').replace('{provider}', user.authenticationAuthority) : 
-                                    undefined}
-                            />
-                        </div>
-                    </div>
-                    
-                    <div className={styles.formRow}>
-                        <div className={styles.formField}>
-                            <label className={styles.fieldLabel}>
-                                {t('settings.userinfo.email')}
-                                {user.authenticationAuthority !== 'local' && (
-                                    <span className={styles.fieldNote}>({t('settings.userinfo.managed_by').replace('{provider}', user.authenticationAuthority)})</span>
-                                )}
-                            </label>
-                            <input
-                                type="email"
-                                className={styles.formInput}
-                                value={userForm.email}
-                                onChange={(e) => handleUserFormChange('email', e.target.value)}
-                                placeholder={t('settings.userinfo.email')}
-                                readOnly={user.authenticationAuthority !== 'local'}
-                                title={user.authenticationAuthority !== 'local' ? 
-                                    t('settings.userinfo.managed_note').replace('{provider}', user.authenticationAuthority) : 
-                                    undefined}
-                            />
-                        </div>
-                        
-                        <div className={styles.formField}>
-                            <label className={styles.fieldLabel}>
-                                {t('settings.userinfo.phone_name')}
-                                <span className={styles.fieldNote}>({t('settings.userinfo.phone_name.description')})</span>
-                            </label>
-                            <input
-                                type="text"
-                                className={styles.formInput}
-                                value={phoneName}
-                                onChange={(e) => handlePhoneNameChange(e.target.value)}
-                                placeholder={t('settings.userinfo.phone_name')}
-                                title="This field is saved locally and not sent to the server"
-                            />
-                        </div>
-                    </div>
-                    
-                    <div className={styles.formRow}>
-                        <div className={styles.formField}>
-                            <label className={styles.fieldLabel}>
-                                {t('settings.language')} 
-                                <span className={styles.fieldNote}>({t('settings.language.description')})</span>
-                            </label>
-                            <select 
-                                className={styles.formSelect}
-                                value={userForm.language}
-                                onChange={(e) => handleUserFormChange('language', e.target.value)}
-                                aria-label={t('settings.language')}
-                            >
-                                <option value="de">{getLanguageLabel('de')}</option>
-                                <option value="en">{getLanguageLabel('en')}</option>
-                                <option value="fr">{getLanguageLabel('fr')}</option>
-                            </select>
-                        </div>
-                        
-                        <div className={styles.formField}>
-                            {/* Empty field to maintain layout */}
-                        </div>
-                    </div>
-                    
-                    <div className={styles.formRow}>
-                        <div className={styles.formField}>
-                            <label className={styles.fieldLabel}>{t('settings.userinfo.privilege')}</label>
-                            <input
-                                type="text"
-                                className={styles.formInput}
-                                value={userForm.privilege}
-                                readOnly
-                                placeholder={t('settings.userinfo.privilege')}
-                                title="This field is read-only"
-                            />
-                        </div>
-                        
-                        <div className={styles.formField}>
-                            <label className={styles.fieldLabel}>{t('settings.userinfo.auth_authority')}</label>
-                            <input
-                                type="text"
-                                className={styles.formInput}
-                                value={user.authenticationAuthority}
-                                readOnly
-                                placeholder={t('settings.userinfo.auth_authority')}
-                                title="This field is read-only"
-                            />
-                        </div>
-                    </div>
-                    
-                    {updateMessage && (
-                        <div className={`${styles.updateMessage} ${updateMessage.type === 'success' ? styles.successMessage : styles.errorMessage}`}>
-                            {updateMessage.text}
-                        </div>
-                    )}
-                    
-                    <div className={styles.formActions}>
-                        <button
-                            className={styles.saveButton}
-                            onClick={handleSaveUserInfo}
-                            disabled={updateLoading}
-                        >
-                            {updateLoading ? t('settings.userinfo.saving') : t('settings.userinfo.save')}
-                        </button>
-                    </div>
-                </>
-            )}
-        </div>
-    );
-}
-
-export default SettingsUser;
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
deleted file mode 100644
index 782ab2b..0000000
--- a/src/components/ui/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './Button';
-export * from './Button/UploadButton';
-export { default as MessageOverlay } from './MessageOverlay';
-export type { MessageMode } from './MessageOverlay';
-export * from './DragDropOverlay';
diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx
new file mode 100644
index 0000000..9fc661d
--- /dev/null
+++ b/src/contexts/FileContext.tsx
@@ -0,0 +1,109 @@
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { useUserFiles, useFileOperations, UserFile } from '../hooks/useFiles';
+
+interface FileContextType {
+  files: UserFile[];
+  loading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+  handleFileUpload: (file: File, workflowId?: string) => Promise<{ success: boolean; fileData?: any; error?: string }>;
+  handleFileDelete: (fileId: string, onOptimisticDelete?: () => void) => Promise<boolean>;
+  uploadingFile: boolean;
+  deletingFiles: Set<string>;
+  previewingFiles: Set<string>;
+}
+
+const FileContext = createContext<FileContextType | undefined>(undefined);
+
+export function FileProvider({ children }: { children: React.ReactNode }) {
+  const { data: files, loading, error, refetch: refetchFiles, removeFileOptimistically, addFileOptimistically } = useUserFiles();
+  const {
+    handleFileUpload: hookHandleFileUpload,
+    handleFileDelete: hookHandleFileDelete,
+    uploadingFile,
+    deletingFiles,
+    previewingFiles
+  } = useFileOperations();
+
+  // Centralized file upload that updates the shared state
+  const handleFileUpload = useCallback(async (file: File, workflowId?: string) => {
+    const result = await hookHandleFileUpload(file, workflowId);
+    
+    if (result.success && result.fileData) {
+      // The API response structure: { message, file: FileInfo, ... }
+      // The file data is nested in the 'file' property
+      const responseData = result.fileData;
+      const fileData = responseData.file || responseData; // Support both nested and direct structure
+      
+      if (!fileData || !fileData.id) {
+        console.error('File upload response missing file data:', responseData);
+        return result;
+      }
+      
+      // Add file optimistically to the shared state
+      const newFile: UserFile = {
+        id: fileData.id,
+        file_name: fileData.fileName || file.name,
+        mime_type: fileData.mimeType || file.type || 'application/octet-stream',
+        action: 'Document', // Will be determined by mime type in useUserFiles
+        created_at: fileData.creationDate ? new Date(fileData.creationDate * 1000).toISOString() : new Date().toISOString(),
+        size: fileData.fileSize || file.size,
+        source: 'user_uploaded'
+      };
+      
+      addFileOptimistically(newFile);
+      
+      // Refetch to ensure we have the latest data (this will update all consumers)
+      await refetchFiles();
+    }
+    
+    return result;
+  }, [hookHandleFileUpload, addFileOptimistically, refetchFiles]);
+
+  // Centralized file delete that updates the shared state
+  const handleFileDelete = useCallback(async (fileId: string, onOptimisticDelete?: () => void) => {
+    const success = await hookHandleFileDelete(fileId, () => {
+      removeFileOptimistically(fileId);
+      onOptimisticDelete?.();
+    });
+    
+    if (success) {
+      // Refetch to ensure we have the latest data
+      await refetchFiles();
+    }
+    
+    return success;
+  }, [hookHandleFileDelete, removeFileOptimistically, refetchFiles]);
+
+  // Expose refetch function
+  const refetch = useCallback(async () => {
+    await refetchFiles();
+  }, [refetchFiles]);
+
+  return (
+    <FileContext.Provider
+      value={{
+        files,
+        loading,
+        error,
+        refetch,
+        handleFileUpload,
+        handleFileDelete,
+        uploadingFile,
+        deletingFiles,
+        previewingFiles
+      }}
+    >
+      {children}
+    </FileContext.Provider>
+  );
+}
+
+export function useFileContext() {
+  const context = useContext(FileContext);
+  if (context === undefined) {
+    throw new Error('useFileContext must be used within a FileProvider');
+  }
+  return context;
+}
+
diff --git a/src/contexts/WorkflowSelectionContext.tsx b/src/contexts/WorkflowSelectionContext.tsx
new file mode 100644
index 0000000..33a2c37
--- /dev/null
+++ b/src/contexts/WorkflowSelectionContext.tsx
@@ -0,0 +1,41 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+interface WorkflowSelectionContextType {
+  selectedWorkflowId: string | null;
+  selectWorkflow: (workflowId: string | null) => void;
+  clearWorkflow: () => void; // Clear workflow and connected files
+}
+
+const WorkflowSelectionContext = createContext<WorkflowSelectionContextType | undefined>(undefined);
+
+export function WorkflowSelectionProvider({ children }: { children: ReactNode }) {
+  const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | null>(null);
+
+  const selectWorkflow = useCallback((workflowId: string | null) => {
+    setSelectedWorkflowId(workflowId);
+    // Also dispatch a custom event for components that might not have access to context
+    window.dispatchEvent(new CustomEvent('workflowSelected', { detail: { workflowId } }));
+  }, []);
+
+  const clearWorkflow = useCallback(() => {
+    setSelectedWorkflowId(null);
+    // Dispatch event to notify that workflow is cleared - connected files should also be cleared
+    window.dispatchEvent(new CustomEvent('workflowCleared', { detail: { workflowId: null } }));
+    // Also dispatch workflowSelected with null for backward compatibility
+    window.dispatchEvent(new CustomEvent('workflowSelected', { detail: { workflowId: null } }));
+  }, []);
+
+  return (
+    <WorkflowSelectionContext.Provider value={{ selectedWorkflowId, selectWorkflow, clearWorkflow }}>
+      {children}
+    </WorkflowSelectionContext.Provider>
+  );
+}
+
+export function useWorkflowSelection() {
+  const context = useContext(WorkflowSelectionContext);
+  if (context === undefined) {
+    throw new Error('useWorkflowSelection must be used within a WorkflowSelectionProvider');
+  }
+  return context;
+}
diff --git a/src/core/PageManager/PageManager.tsx b/src/core/PageManager/PageManager.tsx
index a6df63f..2f2fe3b 100644
--- a/src/core/PageManager/PageManager.tsx
+++ b/src/core/PageManager/PageManager.tsx
@@ -65,7 +65,7 @@ const PageManager: React.FC<PageManagerProps> = ({
     useEffect(() => {
         const pageData = getPageDataByPath(currentPath);
         
-        if (!pageData || !pageData.moduleEnabled || !checkSpeechAccess(currentPath)) {
+        if (!pageData || pageData.hide || !pageData.moduleEnabled || !checkSpeechAccess(currentPath)) {
             return;
         }
 
@@ -99,8 +99,6 @@ const PageManager: React.FC<PageManagerProps> = ({
                                         <PageRenderer 
                                             pageData={pageData}
                                             onButtonClick={(buttonId, button) => {
-                                                console.log(`Button clicked: ${buttonId}`, button);
-                                                // Add global button click handling here
                                             }}
                                         />
                                     )}
@@ -114,20 +112,11 @@ const PageManager: React.FC<PageManagerProps> = ({
                     
                     newInstances.set(currentPath, pageInstance);
                     
-                    if (import.meta.env.DEV) {
-                        console.log(`🔥 PageManager: Created ${shouldPreserve ? 'PRESERVED' : 'regular'} instance for ${currentPath}`, {
-                            totalInstances: newInstances.size,
-                            preservedInstances: Array.from(newInstances.values()).filter(i => i.shouldPreserve).length,
-                            pageData: pageData.name
-                        });
-                    }
+
                 } else {
                     if (import.meta.env.DEV) {
                         const instance = newInstances.get(currentPath);
-                        console.log(`♻️ PageManager: Reusing ${instance?.shouldPreserve ? 'PRESERVED' : 'regular'} instance for ${currentPath}`, {
-                            totalInstances: newInstances.size,
-                            preservedInstances: Array.from(newInstances.values()).filter(i => i.shouldPreserve).length
-                        });
+
                     }
                 }
 
@@ -148,9 +137,7 @@ const PageManager: React.FC<PageManagerProps> = ({
                 });
 
                 instancesToDelete.forEach(path => {
-                    if (import.meta.env.DEV) {
-                        console.log(`🗑️ PageManager: Cleaning up non-preserved instance for ${path}`);
-                    }
+
                     updatedInstances.delete(path);
                 });
 
@@ -163,7 +150,7 @@ const PageManager: React.FC<PageManagerProps> = ({
 
     const pageData = getPageDataByPath(currentPath);
 
-    if (!pageData || !pageData.moduleEnabled || !checkSpeechAccess(currentPath)) {
+    if (!pageData || pageData.hide || !pageData.moduleEnabled || !checkSpeechAccess(currentPath)) {
         return <ErrorComponent />;
     }
 
diff --git a/src/core/PageManager/PageRenderer.tsx b/src/core/PageManager/PageRenderer.tsx
index 43188af..48d7625 100644
--- a/src/core/PageManager/PageRenderer.tsx
+++ b/src/core/PageManager/PageRenderer.tsx
@@ -1,9 +1,13 @@
-import React from 'react';
-import { GenericPageData, PageButton, PageContent, resolveLanguageText } from './pageInterface';
+import React, { useState, useEffect } from 'react';
+import { GenericPageData, PageButton, PageContent, resolveLanguageText, SettingsFieldConfig, SettingsSectionConfig } from './pageInterface';
 import { FormGenerator } from '../../components/FormGenerator';
-import { Button, UploadButton, CreateButton } from '../../components/ui';
-import { DragDropOverlay } from '../../components/ui/DragDropOverlay';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { Button, UploadButton, CreateButton, TextField, Messages, ChatMessage, LogMessage, DropdownSelect, TextInputField, SelectField, ToggleField } from '../../components/UiComponents';
+import { Popup } from '../../components/UiComponents/Popup';
+import { ConnectedFilesList } from '../../components/UiComponents/ConnectedFilesList';
+import type { DropdownSelectItem } from '../../components/UiComponents/DropdownSelect';
+import { DragDropOverlay } from '../../components/UiComponents/DragDropOverlay';
+import { useLanguage } from '../../providers/language/LanguageContext';
+import { FiPaperclip } from 'react-icons/fi';
 import styles from '../../styles/pages.module.css';
 
 interface PageRendererProps {
@@ -21,7 +25,11 @@ const PageRenderer: React.FC<PageRendererProps> = ({
     // Call the hook at the top level to ensure it persists across renders
     // This is CRITICAL - hooks must be called in the same order on every render
     const tableContent = pageData.content?.find(content => content.type === 'table');
-    const hookFactory = tableContent?.tableConfig?.hookFactory;
+    const inputFormContent = pageData.content?.find(content => content.type === 'inputForm');
+    const settingsContent = pageData.content?.find(content => content.type === 'settings');
+    const hookFactory = tableContent?.tableConfig?.hookFactory 
+        || inputFormContent?.inputFormConfig?.hookFactory
+        || settingsContent?.settingsConfig?.hookFactory;
     
     // Create a stable hook instance using React.useMemo
     // This ensures the same hook instance is used across re-renders
@@ -36,11 +44,7 @@ const PageRenderer: React.FC<PageRendererProps> = ({
     // This will be called on every render, but it's the SAME hook instance
     const hookData = useTableData ? useTableData() : null;
     
-    // Debug hook data
-    if (import.meta.env.DEV && hookData) {
-        console.log('🔍 PageRenderer hookData:', hookData);
-        console.log('🔍 PageRenderer has handleUpload:', !!hookData.handleUpload);
-    }
+
 
     // Handle button clicks
     const handleButtonClick = async (button: PageButton) => {
@@ -68,6 +72,338 @@ const PageRenderer: React.FC<PageRendererProps> = ({
         }
     };
 
+    // Helper function to get nested value using dot notation (generic utility)
+    const getNestedValue = (obj: any, path: string): any => {
+        return path.split('.').reduce((current, key) => current?.[key], obj);
+    };
+
+    // Helper function to set nested value using dot notation (generic utility)
+    const setNestedValue = (obj: any, path: string, value: any): any => {
+        const keys = path.split('.');
+        const result = { ...obj };
+        let current = result;
+        for (let i = 0; i < keys.length - 1; i++) {
+            const key = keys[i];
+            if (!(key in current)) {
+                current[key] = {};
+            }
+            current[key] = { ...current[key] };
+            current = current[key];
+        }
+        current[keys[keys.length - 1]] = value;
+        return result;
+    };
+
+    // Generic form section renderer - reusable for any form-based content
+    const FormSectionRenderer: React.FC<{
+        sections: SettingsSectionConfig[];
+        formData: any;
+        fieldsBySection: Record<string, SettingsFieldConfig[]>;
+        loadingBySection: Record<string, boolean>;
+        errorsBySection: Record<string, string | null>;
+        onSave?: (sectionId: string, data: any) => Promise<void>;
+        getNestedValue: (obj: any, path: string) => any;
+        setNestedValue: (obj: any, path: string, value: any) => any;
+    }> = ({ sections, formData, fieldsBySection, loadingBySection, errorsBySection, onSave, getNestedValue, setNestedValue }) => {
+        const [sectionFormData, setSectionFormData] = useState<Record<string, any>>({});
+        const [sectionSaveLoading, setSectionSaveLoading] = useState<Record<string, boolean>>({});
+        const [sectionSaveMessages, setSectionSaveMessages] = useState<Record<string, { type: 'success' | 'error', text: string } | null>>({});
+
+        // Initialize form data from formData when it changes
+        useEffect(() => {
+            const newFormData: Record<string, any> = {};
+            sections.forEach(section => {
+                const allFields = [
+                    ...(section.staticFields || []),
+                    ...(fieldsBySection[section.sectionId] || [])
+                ];
+                
+                if (allFields.length === 0) return;
+                
+                const sectionData: any = { ...(sectionFormData[section.id] || {}) };
+                allFields.forEach(field => {
+                    const value = getNestedValue(formData, field.dataKey);
+                    if (value !== undefined && sectionData[field.dataKey] !== value) {
+                        sectionData[field.dataKey] = value;
+                    }
+                });
+                newFormData[section.id] = sectionData;
+            });
+            
+            const hasChanges = Object.keys(newFormData).some(sectionId => {
+                const newData = newFormData[sectionId];
+                const oldData = sectionFormData[sectionId] || {};
+                return JSON.stringify(newData) !== JSON.stringify(oldData);
+            });
+            
+            if (hasChanges) {
+                setSectionFormData(prev => ({ ...prev, ...newFormData }));
+            }
+        }, [formData, sections.length, JSON.stringify(fieldsBySection)]);
+
+        // Generic field renderer
+        const renderField = (field: SettingsFieldConfig, sectionId: string) => {
+            const localFormData = sectionFormData[sectionId] || {};
+            const currentValue = localFormData[field.dataKey] !== undefined 
+                ? localFormData[field.dataKey] 
+                : getNestedValue(formData, field.dataKey);
+            
+            const isDisabled = typeof field.disabled === 'function' 
+                ? field.disabled(formData)
+                : field.disabled || false;
+
+            const handleFieldChange = (value: any) => {
+                setSectionFormData(prev => ({
+                    ...prev,
+                    [sectionId]: setNestedValue(prev[sectionId] || {}, field.dataKey, value)
+                }));
+                setSectionSaveMessages(prev => ({ ...prev, [sectionId]: null }));
+            };
+
+            switch (field.type) {
+                case 'text':
+                    return (
+                        <TextInputField
+                            key={field.id}
+                            value={currentValue || ''}
+                            onChange={handleFieldChange}
+                            label={resolveLanguageText(field.label, t)}
+                            description={field.description ? resolveLanguageText(field.description, t) : undefined}
+                            placeholder={field.placeholder ? resolveLanguageText(field.placeholder, t) : undefined}
+                            required={field.required}
+                            disabled={isDisabled}
+                            readonly={isDisabled}
+                            type={field.inputType || 'text'}
+                        />
+                    );
+                
+                case 'select':
+                    const options = (field.options || []).map(opt => ({
+                        id: opt.id,
+                        label: resolveLanguageText(opt.label, t),
+                        value: opt.value
+                    }));
+                    return (
+                        <SelectField
+                            key={field.id}
+                            value={currentValue}
+                            onChange={handleFieldChange}
+                            label={resolveLanguageText(field.label, t)}
+                            description={field.description ? resolveLanguageText(field.description, t) : undefined}
+                            options={options}
+                            placeholder={field.placeholder ? resolveLanguageText(field.placeholder, t) : undefined}
+                            required={field.required}
+                            disabled={isDisabled}
+                        />
+                    );
+                
+                case 'toggle':
+                    return (
+                        <ToggleField
+                            key={field.id}
+                            value={currentValue || false}
+                            onChange={handleFieldChange}
+                            label={resolveLanguageText(field.label, t)}
+                            description={field.description ? resolveLanguageText(field.description, t) : undefined}
+                            disabled={isDisabled}
+                        />
+                    );
+                
+                default:
+                    return null;
+            }
+        };
+
+        const handleSectionSave = async (section: typeof sections[0]) => {
+            const localFormData = sectionFormData[section.id] || {};
+            setSectionSaveLoading(prev => ({ ...prev, [section.id]: true }));
+            setSectionSaveMessages(prev => ({ ...prev, [section.id]: null }));
+
+            try {
+                if (onSave) {
+                    await onSave(section.id, localFormData);
+                } else if (section.onSave) {
+                    await section.onSave(section.id, localFormData);
+                }
+                
+                setSectionSaveMessages(prev => ({ 
+                    ...prev, 
+                    [section.id]: { 
+                        type: 'success', 
+                        text: t('settings.save_success') || 'Settings saved successfully' 
+                    } 
+                }));
+                
+                setTimeout(() => {
+                    setSectionSaveMessages(prev => ({ ...prev, [section.id]: null }));
+                }, 3000);
+            } catch (error: any) {
+                setSectionSaveMessages(prev => ({ 
+                    ...prev, 
+                    [section.id]: { 
+                        type: 'error', 
+                        text: error.message || t('settings.save_error') || 'Failed to save settings' 
+                    } 
+                }));
+            } finally {
+                setSectionSaveLoading(prev => ({ ...prev, [section.id]: false }));
+            }
+        };
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+                {sections.map(section => {
+                    // Conditional rendering check (generic - can be used for any section)
+                    if (section.id === 'speech-settings') {
+                        const hasSpeechData = formData.speechData || formData.mandate_general;
+                        if (!hasSpeechData) {
+                            return (
+                                <div key={section.id} id={section.id === 'speech-settings' ? 'speech-settings' : undefined} style={{
+                                    padding: '20px',
+                                    background: 'var(--color-bg)',
+                                    borderRadius: '25px',
+                                    border: '1px solid var(--color-primary)'
+                                }}>
+                                    <h3 style={{ 
+                                        fontSize: '1rem', 
+                                        fontWeight: 500, 
+                                        color: 'var(--color-text)',
+                                        marginBottom: '8px'
+                                    }}>
+                                        {resolveLanguageText(section.title, t)}
+                                    </h3>
+                                    <p style={{ marginBottom: '16px', color: 'var(--color-text)' }}>
+                                        {t('speech.settings.no_data')}
+                                    </p>
+                                    <Button
+                                        variant="primary"
+                                        onClick={() => window.location.href = '/speech'}
+                                    >
+                                        {t('speech.settings.sign_up_now')}
+                                    </Button>
+                                </div>
+                            );
+                        }
+                    }
+
+                    const allFields = [
+                        ...(section.staticFields || []),
+                        ...(fieldsBySection[section.sectionId] || [])
+                    ];
+                    const isLoading = loadingBySection[section.sectionId] || false;
+                    const error = errorsBySection[section.sectionId];
+                    const saveLoading = sectionSaveLoading[section.id] || false;
+                    const saveMessage = sectionSaveMessages[section.id];
+
+                    return (
+                        <div 
+                            key={section.id} 
+                            id={section.id === 'speech-settings' ? 'speech-settings' : undefined}
+                            style={{
+                                padding: '20px',
+                                background: 'var(--color-bg)',
+                                borderRadius: '25px',
+                                border: '1px solid var(--color-primary)',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '20px'
+                            }}
+                        >
+                            {/* Section Header */}
+                            <div>
+                                {section.icon && (
+                                    <section.icon style={{ 
+                                        fontSize: '1.5rem', 
+                                        color: 'var(--color-primary)',
+                                        marginBottom: '8px'
+                                    }} />
+                                )}
+                                <h3 style={{ 
+                                    fontSize: '1rem', 
+                                    fontWeight: 500, 
+                                    color: 'var(--color-text)',
+                                    marginBottom: '4px'
+                                }}>
+                                    {resolveLanguageText(section.title, t)}
+                                </h3>
+                                {section.description && (
+                                    <p style={{ 
+                                        fontSize: '0.875rem', 
+                                        color: 'var(--color-primary)',
+                                        marginTop: '4px'
+                                    }}>
+                                        {resolveLanguageText(section.description, t)}
+                                    </p>
+                                )}
+                            </div>
+
+                            {/* Loading State */}
+                            {isLoading && (
+                                <div style={{ padding: '2rem', textAlign: 'center' }}>
+                                    {t('common.loading')}
+                                </div>
+                            )}
+
+                            {/* Error State */}
+                            {error && !isLoading && (
+                                <div style={{
+                                    padding: '12px 16px',
+                                    borderRadius: '12px',
+                                    backgroundColor: '#fce4ec',
+                                    color: '#c2185b',
+                                    border: '1px solid #f48fb1'
+                                }}>
+                                    {error}
+                                </div>
+                            )}
+
+                            {/* Fields */}
+                            {!isLoading && !error && allFields.length > 0 && (
+                                <div style={{ 
+                                    display: 'grid', 
+                                    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 350px), 1fr))',
+                                    gap: '20px'
+                                }}>
+                                    {allFields.map(field => renderField(field, section.id))}
+                                </div>
+                            )}
+
+                            {/* Save Message */}
+                            {saveMessage && (
+                                <div style={{
+                                    padding: '12px 16px',
+                                    borderRadius: '12px',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    backgroundColor: saveMessage.type === 'success' ? '#e8f5e8' : '#fce4ec',
+                                    color: saveMessage.type === 'success' ? '#2e7d32' : '#c2185b',
+                                    border: `1px solid ${saveMessage.type === 'success' ? '#81c784' : '#f48fb1'}`
+                                }}>
+                                    {saveMessage.text}
+                                </div>
+                            )}
+
+                            {/* Save Button */}
+                            {!isLoading && !error && allFields.length > 0 && (
+                                <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '10px' }}>
+                                    <Button
+                                        variant={section.saveButtonVariant || 'primary'}
+                                        size={section.saveButtonSize || 'md'}
+                                        onClick={() => handleSectionSave(section)}
+                                        loading={saveLoading}
+                                        disabled={saveLoading}
+                                    >
+                                        {resolveLanguageText(section.saveButtonLabel || 'settings.save', t)}
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
     // Render content based on type
     const renderContent = (content: PageContent) => {
         switch (content.type) {
@@ -146,13 +482,18 @@ const PageRenderer: React.FC<PageRendererProps> = ({
                     }
                     
                     // Use columns from hook data if available, otherwise use config columns
-                    const columns = hookData.columns || configColumns;
+                    // If configColumns is an empty array, treat it as undefined to enable auto-detection
+                    // Also check if hookData.columns is an empty array (truthy but not useful)
+                    const hookColumns = hookData.columns && hookData.columns.length > 0 ? hookData.columns : undefined;
+                    const configCols = configColumns && configColumns.length > 0 ? configColumns : undefined;
+                    const columns = hookColumns || configCols;
                     
                     // CRITICAL: Resolve LanguageText objects in column labels
-                    const resolvedColumns = columns.map(col => ({
+                    // Only map if columns exist, otherwise FormGenerator will auto-detect
+                    const resolvedColumns = columns ? columns.map(col => ({
                         ...col,
                         label: resolveLanguageText(col.label, t)
-                    }));
+                    })) : undefined;
                     
                     // Convert action buttons to FormGenerator format
                     // Let each action button handle its own logic using the passed fileOperations
@@ -169,10 +510,27 @@ const PageRenderer: React.FC<PageRendererProps> = ({
                             nameField: action.nameField,
                             typeField: action.typeField,
                             operationName: action.operationName,
-                            loadingStateName: action.loadingStateName
+                            loadingStateName: action.loadingStateName,
+                            // Preserve edit fields configuration
+                            editFields: action.editFields?.map(field => ({
+                                ...field,
+                                label: resolveLanguageText(field.label, t)
+                            }))
                         };
                     }) || [];
                     
+                    // Debug logging for table rendering
+                    if (import.meta.env.DEV) {
+                        console.log('🔍 Rendering FormGenerator:', {
+                            dataLength: hookData.data?.length || 0,
+                            columnsCount: resolvedColumns?.length || 0,
+                            loading: showLoadingSpinner,
+                            hasError: !!hookData.error,
+                            data: hookData.data,
+                            willAutoDetect: !resolvedColumns
+                        });
+                    }
+                    
                     return (
                         <div key={content.id} className={styles.tableContainer}>
                             {hookData.isRefetching && (
@@ -195,6 +553,402 @@ const PageRenderer: React.FC<PageRendererProps> = ({
                 }
                 return null;
             
+            case 'inputForm':
+                if (content.inputFormConfig && hookData) {
+                    const config = content.inputFormConfig;
+                    const isRunning = hookData.isRunning || false;
+                    
+                    // Determine button props based on workflow state
+                    const buttonLabel = isRunning 
+                        ? (config.stopButtonLabel || config.buttonLabel)
+                        : config.buttonLabel;
+                    const buttonIcon = isRunning 
+                        ? (config.stopButtonIcon || config.buttonIcon)
+                        : config.buttonIcon;
+                    const buttonVariant = isRunning 
+                        ? (config.stopButtonVariant || config.buttonVariant || 'primary')
+                        : (config.buttonVariant || 'primary');
+                    const buttonDisabled = hookData.isSubmitting || (!isRunning && !hookData.inputValue?.trim());
+                    
+                    // Handle Enter key press
+                    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+                        if (e.key === 'Enter' && !e.shiftKey && hookData.handleSubmit && !hookData.isSubmitting) {
+                            e.preventDefault();
+                            hookData.handleSubmit();
+                        }
+                    };
+                    
+                    // Check if we have file management (dashboard workflow)
+                    const hasFileManagement = !!(hookData.handleFileUpload && hookData.workflowFiles !== undefined);
+                    
+                    // Grid layout for dashboard with files
+                    if (hasFileManagement) {
+                        return (
+                            <div key={content.id} style={{
+                                display: 'grid',
+                                gridTemplateColumns: '1fr 400px',
+                                gap: '1rem',
+                                margin: '1.5rem 0',
+                                width: '100%',
+                                flexShrink: 0
+                            }}>
+                                {/* Left column: Input and buttons */}
+                                <div style={{
+                                    display: 'flex',
+                                    gap: '12px',
+                                    alignItems: 'flex-start'
+                                }}>
+                                    <div style={{ flex: 1 }}>
+                                        <TextField
+                                            value={hookData.inputValue || ''}
+                                            onChange={hookData.onInputChange}
+                                            placeholder={resolveLanguageText(config.placeholder, t)}
+                                            size={config.textFieldSize || 'md'}
+                                            disabled={hookData.isSubmitting || false}
+                                            {...({ onKeyDown: handleKeyDown } as any)}
+                                        />
+                                    </div>
+                                    <div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
+                                        <Button
+                                            onClick={() => hookData.setIsFileAttachmentPopupOpen?.(true)}
+                                            disabled={hookData.isSubmitting || false}
+                                            variant="secondary"
+                                            size={config.buttonSize || 'md'}
+                                            icon={FiPaperclip}
+                                        >
+                                            Attach Files
+                                        </Button>
+                                        <Button
+                                            onClick={() => hookData.handleSubmit?.()}
+                                            loading={hookData.isSubmitting || false}
+                                            disabled={buttonDisabled}
+                                            variant={buttonVariant}
+                                            size={config.buttonSize || 'md'}
+                                            icon={buttonIcon}
+                                        >
+                                            {resolveLanguageText(buttonLabel, t)}
+                                        </Button>
+                                    </div>
+                                    {/* File Attachment Popup */}
+                                    {hookData.isFileAttachmentPopupOpen && (
+                                        <Popup
+                                            isOpen={hookData.isFileAttachmentPopupOpen || false}
+                                            title="Attach Files"
+                                            onClose={() => hookData.setIsFileAttachmentPopupOpen?.(false)}
+                                            size="large"
+                                        >
+                                            <div style={{ 
+                                                display: 'flex', 
+                                                flexDirection: 'column', 
+                                                gap: '1rem',
+                                                minHeight: '400px',
+                                                maxHeight: '600px'
+                                            }}>
+                                                {/* Upload Button Section */}
+                                                <div style={{ 
+                                                    padding: '1rem', 
+                                                    borderBottom: '1px solid #e0e0e0',
+                                                    display: 'flex',
+                                                    justifyContent: 'flex-end'
+                                                }}>
+                                                    <UploadButton
+                                                        onUpload={hookData.handleFileUploadAndAttach || hookData.handleFileUpload}
+                                                        disabled={hookData.isSubmitting || false}
+                                                        loading={hookData.uploadingFile || false}
+                                                        variant="primary"
+                                                        size="md"
+                                                        multiple={true}
+                                                    >
+                                                        Upload New File
+                                                    </UploadButton>
+                                                </div>
+                                                
+                                                {/* Files List */}
+                                                <div style={{ 
+                                                    flex: 1, 
+                                                    overflowY: 'auto',
+                                                    padding: '0.5rem'
+                                                }}>
+                                                    {hookData.allUserFiles && hookData.allUserFiles.length > 0 ? (
+                                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                                                            {hookData.allUserFiles.map((file: any) => {
+                                                                const isAttached = hookData.pendingFiles?.some((pf: any) => pf.fileId === file.id);
+                                                                return (
+                                                                    <div
+                                                                        key={file.id}
+                                                                        onClick={() => hookData.handleFileAttach?.(file.id)}
+                                                                        style={{
+                                                                            display: 'flex',
+                                                                            alignItems: 'center',
+                                                                            justifyContent: 'space-between',
+                                                                            padding: '0.75rem',
+                                                                            border: `1px solid ${isAttached ? '#4CAF50' : '#e0e0e0'}`,
+                                                                            borderRadius: '4px',
+                                                                            cursor: 'pointer',
+                                                                            backgroundColor: isAttached ? '#f1f8f4' : 'transparent',
+                                                                            transition: 'all 0.2s'
+                                                                        }}
+                                                                        onMouseEnter={(e) => {
+                                                                            if (!isAttached) {
+                                                                                e.currentTarget.style.backgroundColor = '#f5f5f5';
+                                                                            }
+                                                                        }}
+                                                                        onMouseLeave={(e) => {
+                                                                            if (!isAttached) {
+                                                                                e.currentTarget.style.backgroundColor = 'transparent';
+                                                                            }
+                                                                        }}
+                                                                    >
+                                                                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flex: 1 }}>
+                                                                            <span style={{ fontSize: '1.2rem' }}>📎</span>
+                                                                            <div style={{ flex: 1 }}>
+                                                                                <div style={{ fontWeight: 500, fontSize: '0.9rem' }}>
+                                                                                    {file.file_name || file.fileName || 'Unknown File'}
+                                                                                </div>
+                                                                                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
+                                                                                    {(() => {
+                                                                                        const size = file.size;
+                                                                                        const mimeType = file.mime_type || file.mimeType || 'application/octet-stream';
+                                                                                        let sizeStr = '';
+                                                                                        if (size) {
+                                                                                            if (size < 1024) {
+                                                                                                sizeStr = `${size} B`;
+                                                                                            } else if (size < 1024 * 1024) {
+                                                                                                sizeStr = `${(size / 1024).toFixed(1)} KB`;
+                                                                                            } else if (size < 1024 * 1024 * 1024) {
+                                                                                                sizeStr = `${(size / (1024 * 1024)).toFixed(1)} MB`;
+                                                                                            } else {
+                                                                                                sizeStr = `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+                                                                                            }
+                                                                                        }
+                                                                                        return sizeStr ? `${sizeStr} • ${mimeType}` : mimeType;
+                                                                                    })()}
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        <div style={{ 
+                                                                            padding: '0.25rem 0.75rem',
+                                                                            borderRadius: '4px',
+                                                                            fontSize: '0.8rem',
+                                                                            fontWeight: 500,
+                                                                            backgroundColor: isAttached ? '#4CAF50' : '#e0e0e0',
+                                                                            color: isAttached ? 'white' : '#666'
+                                                                        }}>
+                                                                            {isAttached ? 'Attached' : 'Attach'}
+                                                                        </div>
+                                                                    </div>
+                                                                );
+                                                            })}
+                                                        </div>
+                                                    ) : (
+                                                        <div style={{ 
+                                                            textAlign: 'center', 
+                                                            padding: '2rem',
+                                                            color: '#999'
+                                                        }}>
+                                                            No files uploaded yet. Click "Upload New File" to add files.
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </Popup>
+                                    )}
+                                </div>
+                                
+                                {/* Right column: Connected Files List */}
+                                <div style={{ height: '100%', minHeight: '200px' }}>
+                                    <ConnectedFilesList
+                                        files={hookData.workflowFiles || []}
+                                        pendingFiles={hookData.pendingFiles || []}
+                                        onDelete={hookData.handleFileDelete}
+                                        onRemove={hookData.handleFileRemove}
+                                        onAttach={hookData.handleFileAttach} // Allow attaching files for next message
+                                        deletingFiles={hookData.deletingFiles || new Set()}
+                                        previewingFiles={hookData.previewingFiles || new Set()}
+                                        removingFiles={new Set()} // Can be tracked if needed
+                                        workflowId={hookData.workflowId}
+                                        emptyMessage="No files connected to this workflow"
+                                    />
+                                </div>
+                            </div>
+                        );
+                    }
+                    
+                    // Default layout without files (backward compatible)
+                    return (
+                        <div key={content.id} style={{ 
+                            display: 'flex', 
+                            gap: '12px', 
+                            alignItems: 'flex-start',
+                            margin: '1.5rem 0',
+                            width: '100%',
+                            flexShrink: 0
+                        }}>
+                            <div style={{ flex: 1 }}>
+                                <TextField
+                                    value={hookData.inputValue || ''}
+                                    onChange={hookData.onInputChange}
+                                    placeholder={resolveLanguageText(config.placeholder, t)}
+                                    size={config.textFieldSize || 'md'}
+                                    disabled={hookData.isSubmitting || false}
+                                    {...({ onKeyDown: handleKeyDown } as any)}
+                                />
+                            </div>
+                            <div style={{ flexShrink: 0 }}>
+                                <Button
+                                    onClick={() => hookData.handleSubmit?.()}
+                                    loading={hookData.isSubmitting || false}
+                                    disabled={buttonDisabled}
+                                    variant={buttonVariant}
+                                    size={config.buttonSize || 'md'}
+                                    icon={buttonIcon}
+                                >
+                                    {resolveLanguageText(buttonLabel, t)}
+                                </Button>
+                            </div>
+                        </div>
+                    );
+                }
+                return null;
+            
+            case 'messages':
+                const config = content.messagesConfig || {};
+                const dataSource = config.dataSource || 'messages';
+                
+                // Get messages and logs from hook data
+                const hookMessages = Array.isArray(hookData?.messages) ? hookData.messages : [];
+                const hookLogs = Array.isArray(hookData?.logs) ? hookData.logs : [];
+                
+                // Debug: Log messages structure in dev mode
+                if (import.meta.env.DEV && hookMessages.length > 0) {
+                    console.log('PageRenderer messages:', hookMessages.map((m: any) => ({
+                        id: m.id,
+                        role: m.role,
+                        message: m.message?.substring(0, 50),
+                        hasDocuments: !!m.documents,
+                        documentsCount: m.documents?.length || 0,
+                        documents: m.documents,
+                        allKeys: Object.keys(m)
+                    })));
+                    // Log full first message to see structure
+                    if (hookMessages.length > 0) {
+                        console.log('Full first message:', hookMessages[0]);
+                    }
+                }
+                
+                // Determine which data to render based on dataSource
+                let messagesToRender: any[] = [];
+                let variantToUse = config.variant || 'chat';
+                
+                if (dataSource === 'logs') {
+                    messagesToRender = hookLogs;
+                    // Logs should use log variant by default
+                    variantToUse = config.variant || 'log';
+                } else if (dataSource === 'both') {
+                    // Merge messages and logs, with logs using log variant
+                    // We'll render them separately in sequence
+                    const combined = [
+                        ...hookMessages.map((msg: any) => ({ ...msg, _renderVariant: config.variant || 'chat' })),
+                        ...hookLogs.map((log: any) => ({ ...log, _renderVariant: 'log' }))
+                    ].sort((a, b) => {
+                        // Sort by timestamp/sequence to interleave properly
+                        const aTime = a.publishedAt || a.timestamp || 0;
+                        const bTime = b.publishedAt || b.timestamp || 0;
+                        return aTime - bTime;
+                    });
+                    messagesToRender = combined;
+                    // When both, we'll use a custom renderer
+                } else {
+                    // Default: use messages
+                    messagesToRender = hookMessages;
+                }
+                
+                // Custom renderer for when dataSource is 'both' to handle different variants
+                const renderMessage = dataSource === 'both' 
+                    ? (message: any, index: number) => {
+                        const variant = message._renderVariant || 'chat';
+                        const cleanMessage = { ...message };
+                        delete cleanMessage._renderVariant;
+                        
+                        if (variant === 'log') {
+                            return (
+                                <LogMessage
+                                    key={message.id || index}
+                                    message={cleanMessage}
+                                    showDocuments={config.showDocuments !== false}
+                                    showMetadata={config.showMetadata !== false}
+                                    showProgress={config.showProgress !== false}
+                                    onFileDelete={hookData?.handleFileDelete}
+                                    onFileRemove={hookData?.handleFileRemove}
+                                    deletingFiles={hookData?.deletingFiles}
+                                    previewingFiles={hookData?.previewingFiles}
+                                    removingFiles={hookData?.removingFiles}
+                                    workflowId={hookData?.workflowId}
+                                />
+                            );
+                        } else {
+                            return (
+                                <ChatMessage
+                                    key={message.id || index}
+                                    message={cleanMessage}
+                                    showDocuments={config.showDocuments !== false}
+                                    onFileDelete={hookData?.handleFileDelete}
+                                    onFileRemove={hookData?.handleFileRemove}
+                                    deletingFiles={hookData?.deletingFiles}
+                                    previewingFiles={hookData?.previewingFiles}
+                                    removingFiles={hookData?.removingFiles}
+                                    workflowId={hookData?.workflowId}
+                                />
+                            );
+                        }
+                    }
+                    : undefined;
+                
+                return (
+                    <div key={content.id} style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }}>
+                        <Messages
+                            messages={messagesToRender}
+                            variant={variantToUse}
+                            renderMessage={renderMessage}
+                            showDocuments={config.showDocuments !== false}
+                            showMetadata={config.showMetadata !== false}
+                            showProgress={config.showProgress !== false}
+                            emptyMessage={config.emptyMessage ? resolveLanguageText(config.emptyMessage, t) : undefined}
+                            onFileDelete={hookData?.handleFileDelete}
+                            onFileRemove={hookData?.handleFileRemove}
+                            deletingFiles={hookData?.deletingFiles}
+                            previewingFiles={hookData?.previewingFiles}
+                            removingFiles={hookData?.removingFiles}
+                            workflowId={hookData?.workflowId}
+                        />
+                    </div>
+                );
+            
+            case 'settings':
+                if (content.settingsConfig && hookData) {
+                    const config = content.settingsConfig;
+                    const sections = config.sections;
+                    const formData = (hookData as any).settingsData || {};
+                    const fieldsBySection = (hookData as any).settingsFields || {};
+                    const loadingBySection = (hookData as any).settingsLoading || {};
+                    const errorsBySection = (hookData as any).settingsErrors || {};
+                    const saveSectionHandler = (hookData as any).saveSection;
+
+                    // Use a generic form renderer component that can be reused
+                    return <FormSectionRenderer 
+                        key={content.id}
+                        sections={sections}
+                        formData={formData}
+                        fieldsBySection={fieldsBySection}
+                        loadingBySection={loadingBySection}
+                        errorsBySection={errorsBySection}
+                        onSave={saveSectionHandler}
+                        getNestedValue={getNestedValue}
+                        setNestedValue={setNestedValue}
+                    />;
+                }
+                return null;
+            
             default:
                 return null;
         }
@@ -205,33 +959,31 @@ const PageRenderer: React.FC<PageRendererProps> = ({
         if (!pageData.dragDropConfig) {
             return { enabled: false, onDrop: () => {} };
         }
-
-        console.log('🔍 DragDrop Debug - hookData:', hookData);
-        console.log('🔍 DragDrop Debug - has handleUpload:', !!hookData?.handleUpload);
+    
 
         // If the page has drag drop config and hook data with handleUpload, integrate them
         if (hookData?.handleUpload) {
             return {
                 ...pageData.dragDropConfig,
                 onDrop: async (files: File[]) => {
-                    console.log('🚀 DragDrop onDrop triggered with files:', files);
+
                     try {
                         // Process each file through the hook's handleUpload function
                         for (const file of files) {
                             if (hookData.handleUpload) {
-                                console.log('📤 Uploading file:', file.name);
+
                                 await hookData.handleUpload(file);
-                                console.log('✅ File uploaded successfully:', file.name);
+
                             }
                         }
                     } catch (error) {
-                        console.error('❌ Error uploading dropped files:', error);
+                        console.error('Error uploading dropped files:', error);
                     }
                 }
             };
         }
 
-        console.log('⚠️ DragDrop Debug - No handleUpload found, using fallback config');
+
         // Fallback to the original config
         return pageData.dragDropConfig;
     };
@@ -253,6 +1005,78 @@ const PageRenderer: React.FC<PageRendererProps> = ({
                         {pageData.headerButtons && pageData.headerButtons.length > 0 && (
                             <div className={styles.headerButtons}>
                                 {pageData.headerButtons.map((button) => {
+                                    // Check if this is a dropdown button
+                                    if (button.dropdownConfig) {
+                                        const dropdownConfig = button.dropdownConfig;
+                                        
+                                        // Get dropdown data from hookData if dataSource is specified
+                                        let items: DropdownSelectItem[] = [];
+                                        let selectedItemId: string | number | null = null;
+                                        let onSelectHandler: (item: DropdownSelectItem | null) => void | Promise<void> = () => {};
+                                        
+                                        if (dropdownConfig.dataSource && hookData) {
+                                            // Get items from hookData
+                                            if (dropdownConfig.dataSource.itemsProperty) {
+                                                const hookItems = (hookData as any)[dropdownConfig.dataSource.itemsProperty];
+                                                if (Array.isArray(hookItems)) {
+                                                    items = hookItems.map((item: any) => ({
+                                                        id: item.id,
+                                                        label: typeof item.label === 'string' ? item.label : resolveLanguageText(item.label, t),
+                                                        value: item.value || item,
+                                                        metadata: item.metadata
+                                                    }));
+                                                }
+                                            }
+                                            
+                                            // Get selectedItemId from hookData
+                                            if (dropdownConfig.dataSource.selectedIdProperty) {
+                                                selectedItemId = (hookData as any)[dropdownConfig.dataSource.selectedIdProperty] || null;
+                                            }
+                                            
+                                            // Get onSelect handler from hookData
+                                            if (dropdownConfig.dataSource.onSelectMethod) {
+                                                const hookOnSelect = (hookData as any)[dropdownConfig.dataSource.onSelectMethod!];
+                                                if (typeof hookOnSelect === 'function') {
+                                                    onSelectHandler = hookOnSelect;
+                                                }
+                                            }
+                                        } else {
+                                            // Use dropdownConfig directly
+                                            items = dropdownConfig.items.map(item => ({
+                                                id: item.id,
+                                                label: typeof item.label === 'string' ? item.label : resolveLanguageText(item.label, t),
+                                                value: item.value,
+                                                metadata: item.metadata
+                                            }));
+                                            selectedItemId = dropdownConfig.selectedItemId ?? null;
+                                            onSelectHandler = (item: DropdownSelectItem | null) => {
+                                                dropdownConfig.onSelect(item, hookData);
+                                            };
+                                        }
+                                        
+                                        // Check if loading state is available from hookData
+                                        const isLoading = hookData && typeof (hookData as any).workflowsLoading === 'boolean' 
+                                            ? (hookData as any).workflowsLoading 
+                                            : false;
+                                        
+                                        return (
+                                            <DropdownSelect
+                                                key={button.id}
+                                                items={items}
+                                                selectedItemId={selectedItemId}
+                                                onSelect={onSelectHandler}
+                                                placeholder={resolveLanguageText(dropdownConfig.placeholder || button.label, t)}
+                                                emptyMessage={resolveLanguageText(dropdownConfig.emptyMessage || 'No items available', t)}
+                                                headerText={dropdownConfig.headerText ? resolveLanguageText(dropdownConfig.headerText, t) : undefined}
+                                                variant={button.variant || 'primary'}
+                                                size={button.size || 'md'}
+                                                icon={button.icon}
+                                                disabled={button.disabled || isLoading}
+                                                loading={isLoading}
+                                            />
+                                        );
+                                    }
+                                    
                                     // Check if this is an upload button (has handleUpload in hookData)
                                     const handleUpload = (hookData as any)?.handleUpload;
                                     if (handleUpload && button.id === 'upload-file') {
diff --git a/src/core/PageManager/SidebarProvider.tsx b/src/core/PageManager/SidebarProvider.tsx
index 31660d4..61858b0 100644
--- a/src/core/PageManager/SidebarProvider.tsx
+++ b/src/core/PageManager/SidebarProvider.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import { allPageData, SidebarItem } from './data';
-import { useLanguage } from '../../contexts/LanguageContext';
+import { useLanguage } from '../../providers/language/LanguageContext';
 import { resolveLanguageText } from './pageInterface';
 
 interface SidebarContextType {
@@ -38,7 +38,7 @@ export const SidebarProvider: React.FC<SidebarProviderProps> = ({ children }) =>
         
         // Get main pages (no parent path)
         const mainPages = allPageData
-            .filter(page => !page.parentPath && page.showInSidebar !== false)
+            .filter(page => !page.parentPath && !page.hide && page.showInSidebar !== false)
             .sort((a, b) => (a.order || 0) - (b.order || 0));
         
         // Process each main page
@@ -70,7 +70,8 @@ export const SidebarProvider: React.FC<SidebarProviderProps> = ({ children }) =>
                         // Find all subpages for this parent
                         const subpages = allPageData.filter(p => 
                             p.parentPath === pageData.path && 
-                            p.showInSidebar === false // Subpages should not show as main items
+                            !p.hide &&
+                            p.showInSidebar !== false // Include subpages that should show in sidebar
                         );
                         
                         if (subpages.length > 0) {
diff --git a/src/core/PageManager/data/pages/connections.ts b/src/core/PageManager/data/pages/connections.ts
new file mode 100644
index 0000000..a5a05d0
--- /dev/null
+++ b/src/core/PageManager/data/pages/connections.ts
@@ -0,0 +1,241 @@
+import { useCallback } from 'react';
+import { GenericPageData } from '../../pageInterface';
+import { FaGoogle, FaMicrosoft, FaLink } from 'react-icons/fa';
+import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
+import { useConnections } from '../../../../hooks/useConnections';
+
+// Hook factory function for connections data
+const createConnectionsHook = () => {
+    return () => {
+        const { 
+            connections, 
+            fetchConnections, 
+            deleteConnection,
+            createGoogleConnectionAndAuth,
+            createMicrosoftConnectionAndAuth,
+            connectWithPopup,
+            isConnecting,
+            isLoading, 
+            error 
+        } = useConnections();
+        
+        // Handle connection deletion
+        const handleDelete = useCallback(async (connectionId: string) => {
+            try {
+                await deleteConnection(connectionId);
+                // Refresh connections after deletion
+                await fetchConnections();
+                return true;
+            } catch (error) {
+                console.error('Failed to delete connection:', error);
+                return false;
+            }
+        }, [deleteConnection, fetchConnections]);
+
+        return {
+            data: connections,
+            loading: isLoading,
+            error: error,
+            refetch: async () => { await fetchConnections(); },
+            // Operations
+            handleDelete,
+            connectWithPopup,
+            createGoogleConnectionAndAuth,
+            createMicrosoftConnectionAndAuth,
+            // Loading states
+            isConnecting,
+            deletingConnections: new Set() // Placeholder for consistency with other pages
+        };
+    };
+};
+
+// Static columns configuration for connections table
+const connectionsColumns = [
+    {
+        key: 'externalUsername',
+        label: 'connections.column.username',
+        type: 'string',
+        width: 200,
+        minWidth: 150,
+        maxWidth: 300,
+        sortable: true,
+        filterable: true,
+        searchable: true
+    },
+    {
+        key: 'externalEmail',
+        label: 'connections.column.email',
+        type: 'string',
+        width: 250,
+        minWidth: 200,
+        maxWidth: 350,
+        sortable: true,
+        filterable: true,
+        searchable: true
+    },
+    {
+        key: 'authority',
+        label: 'connections.column.authority',
+        type: 'string',
+        width: 150,
+        minWidth: 100,
+        maxWidth: 200,
+        sortable: true,
+        filterable: true,
+        searchable: true
+    },
+    {
+        key: 'status',
+        label: 'connections.column.status',
+        type: 'string',
+        width: 120,
+        minWidth: 100,
+        maxWidth: 150,
+        sortable: true,
+        filterable: true,
+        searchable: true
+    },
+    {
+        key: 'connectedAt',
+        label: 'connections.column.connectedat',
+        type: 'date',
+        width: 180,
+        minWidth: 150,
+        maxWidth: 220,
+        sortable: true,
+        filterable: true
+    },
+    {
+        key: 'lastChecked',
+        label: 'connections.column.lastchecked',
+        type: 'date',
+        width: 180,
+        minWidth: 150,
+        maxWidth: 220,
+        sortable: true,
+        filterable: true
+    },
+    {
+        key: 'expiresAt',
+        label: 'connections.column.expiresat',
+        type: 'date',
+        width: 180,
+        minWidth: 150,
+        maxWidth: 220,
+        sortable: true,
+        filterable: true
+    }
+];
+
+export const connectionsPageData: GenericPageData = {
+    id: 'administration-connections',
+    path: 'administration/connections',
+    name: 'connections.title',
+    description: 'connections.title',
+    
+    // Parent page
+    parentPath: 'administration',
+    
+    // Visual
+    icon: FaLink,
+    title: 'connections.title',
+    subtitle: 'connections.subtitle',
+    
+    // Header buttons - Create Google and Microsoft connections
+    headerButtons: [
+        {
+            id: 'add-google-connection',
+            label: 'connections.add_google_button',
+            icon: FaGoogle,
+            variant: 'primary',
+            onClick: async (hookData: any) => {
+                if (hookData?.createGoogleConnectionAndAuth) {
+                    try {
+                        await hookData.createGoogleConnectionAndAuth();
+                    } catch (error) {
+                        console.error('Failed to create Google connection:', error);
+                    }
+                }
+            }
+        },
+        {
+            id: 'add-microsoft-connection',
+            label: 'connections.add_microsoft_button',
+            icon: FaMicrosoft,
+            variant: 'primary',
+            onClick: async (hookData: any) => {
+                if (hookData?.createMicrosoftConnectionAndAuth) {
+                    try {
+                        await hookData.createMicrosoftConnectionAndAuth();
+                    } catch (error) {
+                        console.error('Failed to create Microsoft connection:', error);
+                    }
+                }
+            }
+        }
+    ],
+    
+    // Content sections - using generic table approach
+    content: [
+        {
+            id: 'connections-table',
+            type: 'table',
+            tableConfig: {
+                hookFactory: createConnectionsHook,
+                columns: connectionsColumns,
+                actionButtons: [
+                    {
+                        type: 'connect',
+                        title: 'connections.action.connect',
+                        idField: 'id',
+                        statusField: 'status',
+                        operationName: 'connectWithPopup',
+                        loadingStateName: 'isConnecting'
+                    },
+                    {
+                        type: 'delete',
+                        title: 'connections.action.delete',
+                        idField: 'id',
+                        operationName: 'handleDelete',
+                        loadingStateName: 'deletingConnections'
+                    }
+                ],
+                searchable: true,
+                filterable: true,
+                sortable: true,
+                resizable: true,
+                pagination: true,
+                pageSize: 10,
+                className: 'connections-table'
+            }
+        }
+    ],
+    
+    // Privilege system
+    privilegeChecker: privilegeCheckers.viewerRole,
+    
+    // Page behavior
+    persistent: false,
+    preload: false,
+    preserveState: true, // Keep page mounted and prevent refetching
+    moduleEnabled: true,
+    
+    // Sidebar - will be shown as subpage under Administration
+    
+    // No drag and drop for connections
+    dragDropConfig: {
+        enabled: false
+    },
+    
+    // Lifecycle hooks
+    onActivate: async () => {
+        if (import.meta.env.DEV) console.log('Connections activated');
+    },
+    onLoad: async () => {
+        if (import.meta.env.DEV) console.log('Connections loaded - can initialize connections list here');
+    },
+    onUnload: async () => {
+        if (import.meta.env.DEV) console.log('Connections unloaded - cleanup connections references');
+    }
+};
+
diff --git a/src/core/PageManager/data/pages/dashboard.ts b/src/core/PageManager/data/pages/dashboard.ts
index 97a59a1..610a910 100644
--- a/src/core/PageManager/data/pages/dashboard.ts
+++ b/src/core/PageManager/data/pages/dashboard.ts
@@ -1,30 +1,76 @@
 import { GenericPageData } from '../../pageInterface';
 import { LuTicket } from 'react-icons/lu';
+import { IoMdSend } from 'react-icons/io';
+import { MdStop } from 'react-icons/md';
+import { HiOutlineCollection } from 'react-icons/hi';
 import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
+import { createDashboardHook } from '../../../../hooks/usePlayground';
 
 export const dashboardPageData: GenericPageData = {
-    id: '1',
-    path: 'dashboard',
+    id: 'start-dashboard',
+    path: 'start/dashboard',
     name: 'Dashboard',
     description: 'Main dashboard with overview and quick actions',
+
+    // Parent page
+    parentPath: 'start',
+    showInSidebar: false,
     
     // Visual
     icon: LuTicket,
     title: 'Dashboard',
     subtitle: 'Welcome to your workspace',
     
+    // Header buttons
+    headerButtons: [
+        {
+            id: 'workflow-selector',
+            label: 'dashboard.workflow.selector',
+            variant: 'primary',
+            size: 'md',
+            icon: HiOutlineCollection,
+            dropdownConfig: {
+                type: 'dropdown',
+                items: [], // Will be populated from hookData
+                placeholder: 'dashboard.workflow.select',
+                emptyMessage: 'dashboard.workflow.empty',
+                headerText: 'dashboard.workflow.header',
+                dataSource: {
+                    itemsProperty: 'workflowItems',
+                    selectedIdProperty: 'selectedWorkflowId',
+                    onSelectMethod: 'onWorkflowSelect'
+                }
+            }
+        }
+    ],
+    
     // Content sections
     content: [
         {
-            id: 'welcome',
-            type: 'heading',
-            content: 'Welcome to your Dashboard',
-            level: 2
+            id: 'workflow-messages',
+            type: 'messages',
+            messagesConfig: {
+                showDocuments: true,
+                showMetadata: false,
+                showProgress: false,
+                emptyMessage: 'No messages yet. Start a workflow to see messages here.'
+            }
         },
         {
-            id: 'intro',
-            type: 'paragraph',
-            content: 'This is your main workspace where you can access all your tools and information. Use the sidebar to navigate between different sections.'
+            id: 'workflow-input',
+            type: 'inputForm',
+            inputFormConfig: {
+                hookFactory: createDashboardHook,
+                placeholder: 'dashboard.input.placeholder',
+                buttonLabel: 'dashboard.button.send',
+                stopButtonLabel: 'dashboard.button.stop',
+                buttonIcon: IoMdSend,
+                stopButtonIcon: MdStop,
+                buttonVariant: 'primary',
+                stopButtonVariant: 'danger',
+                buttonSize: 'md',
+                textFieldSize: 'md'
+            }
         }
     ],
     
@@ -38,8 +84,7 @@ export const dashboardPageData: GenericPageData = {
     moduleEnabled: true,
     
     // Sidebar
-    order: 1,
-    showInSidebar: true,
+    showInSidebar: false,
     
     // Lifecycle hooks
     onActivate: async () => {
diff --git a/src/core/PageManager/data/pages/files.ts b/src/core/PageManager/data/pages/files.ts
index 1949241..4a52077 100644
--- a/src/core/PageManager/data/pages/files.ts
+++ b/src/core/PageManager/data/pages/files.ts
@@ -2,72 +2,70 @@ import { useCallback } from 'react';
 import { GenericPageData } from '../../pageInterface';
 import { FaRegFileAlt, FaUpload } from 'react-icons/fa';
 import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
-import { useUserFiles, useFileOperations } from '../../../../hooks/useFiles';
+import { useFileContext } from '../../../../contexts/FileContext';
+import { useFileOperations } from '../../../../hooks/useFiles';
 
-// Hook factory function for files data
+// Hook factory function for files data - uses central FileContext
 const createFilesHook = () => {
     return () => {
-        const { data: files, loading, error, refetch, removeFileOptimistically } = useUserFiles();
+        // Use central file context for files list and upload/delete operations
+        const { 
+            files, 
+            loading, 
+            error, 
+            refetch, 
+            handleFileUpload: contextHandleFileUpload,
+            handleFileDelete: contextHandleFileDelete,
+            uploadingFile,
+            deletingFiles,
+            previewingFiles
+        } = useFileContext();
+        
+        // Use file operations hook for operations not in context
         const { 
             handleFileDownload, 
-            handleFileDelete, 
             handleFileDeleteMultiple,
             handleFilePreview, 
             handleFileUpdate,
-            handleFileUpload: hookHandleFileUpload,
-            downloadingFiles, 
-            deletingFiles, 
-            previewingFiles,
             editingFiles,
             MessageOverlayComponent
         } = useFileOperations();
         
-        // Upload function that can be called from header buttons
-        // Memoized to prevent unnecessary re-creation on every render
+        // Upload function that uses central context
         const handleFileUpload = useCallback(async (file: File): Promise<{ success: boolean; data: any }> => {
-            try {                
-                // Use the hook's upload function which handles all API calls internally
-                const result = await hookHandleFileUpload(file);
-                
-                if (result.success) {
-                    refetch();
-                    
-                    return { success: true, data: result.fileData };
-                } else {
-                    throw new Error(result.error || 'Upload failed');
-                }
-            } catch (error: any) {
-                console.error('❌ Upload error details:', error);
-                throw error;
-            }
-        }, [hookHandleFileUpload, refetch]); // Only recreate if dependencies change
+            const result = await contextHandleFileUpload(file);
+            return { 
+                success: result.success, 
+                data: result.fileData 
+            };
+        }, [contextHandleFileUpload]);
+        
+        // Delete function that uses central context
+        const handleFileDelete = useCallback(async (fileId: string, onOptimisticDelete?: () => void) => {
+            return await contextHandleFileDelete(fileId, onOptimisticDelete);
+        }, [contextHandleFileDelete]);
+        
+        // Optimistic removal for compatibility
+        const removeFileOptimistically = useCallback((fileId: string) => {
+            // This is handled by the context, but we provide it for compatibility
+        }, []);
         
         // Handle multiple file deletion for FormGenerator
         const handleDeleteMultiple = useCallback(async (selectedFiles: any[]) => {
             const fileIds = selectedFiles.map(file => file.id);
-            const success = await handleFileDeleteMultiple(fileIds, (deletedIds) => {
-                // Optimistically remove files from UI
-                deletedIds.forEach(fileId => {
-                    removeFileOptimistically(fileId);
-                });
-            });
-            
-            if (success) {
-                // Refetch to sync with backend
-                refetch();
-            }
-        }, [handleFileDeleteMultiple, removeFileOptimistically, refetch]);
+            // Delete files one by one using central context
+            const deletePromises = fileIds.map(fileId => 
+                contextHandleFileDelete(fileId)
+            );
+            await Promise.all(deletePromises);
+            // Context handles refetch automatically
+        }, [contextHandleFileDelete]);
 
         // Handle single file deletion for FormGenerator
         const handleDeleteSingle = useCallback(async (file: any) => {
-            const success = await handleFileDelete(file.id, () => {
-                removeFileOptimistically(file.id);
-            });
-            
-            if (success) {
-                refetch();
-            }
-        }, [handleFileDelete, removeFileOptimistically, refetch]);
+            await contextHandleFileDelete(file.id);
+            // Context handles refetch automatically
+        }, [contextHandleFileDelete]);
 
         return {
             data: files,
@@ -86,10 +84,11 @@ const createFilesHook = () => {
             onDelete: handleDeleteSingle,
             onDeleteMultiple: handleDeleteMultiple,
             // Loading states
-            downloadingFiles,
+            downloadingFiles: new Set(), // Not in context, but needed for compatibility
             deletingFiles,
             previewingFiles,
             editingFiles,
+            uploadingFile,
             // Message overlay component
             MessageOverlayComponent
         };
@@ -236,7 +235,6 @@ export const filesPageData: GenericPageData = {
     moduleEnabled: true,
     
     // Sidebar - will be shown as subpage under Administration
-    showInSidebar: false,
     
     // Drag and drop configuration
     dragDropConfig: {
diff --git a/src/core/PageManager/data/pages/index.ts b/src/core/PageManager/data/pages/index.ts
index 6f8f77e..d53e1d1 100644
--- a/src/core/PageManager/data/pages/index.ts
+++ b/src/core/PageManager/data/pages/index.ts
@@ -1,24 +1,45 @@
 // Export all page data
 export { dashboardPageData } from './dashboard';
 export { filesPageData } from './files';
+export { workflowsPageData } from './workflows';
+export { connectionsPageData } from './connections';
 export { teamBereichPageData } from './team-bereich';
 export { administrationPageData } from './administration';
 export { promptsPageData } from './prompts';
+export { startPageData } from './start';
+export { speechPageData } from './speech';
+export { settingsPageData } from './settings';
+export { pekPageData } from './pek';
+export { pekTablesPageData } from './pek-tables';
 
 // Import all page data
 import { dashboardPageData } from './dashboard';
 import { administrationPageData } from './administration';
 import { filesPageData } from './files';
+import { workflowsPageData } from './workflows';
+import { connectionsPageData } from './connections';
 import { teamBereichPageData } from './team-bereich';
 import { promptsPageData } from './prompts';
+import { startPageData } from './start';
+import { speechPageData } from './speech';
+import { settingsPageData } from './settings';
+import { pekPageData } from './pek';
+import { pekTablesPageData } from './pek-tables';
 
 // Array of all page data
 export const allPageData = [
+    startPageData,
     dashboardPageData,
     administrationPageData,
     filesPageData,
+    workflowsPageData,
+    connectionsPageData,
     teamBereichPageData,
     promptsPageData,
+    speechPageData,
+    settingsPageData,
+    pekPageData,
+    pekTablesPageData,
 
 ];
 
diff --git a/src/core/PageManager/data/pages/pek-tables.ts b/src/core/PageManager/data/pages/pek-tables.ts
new file mode 100644
index 0000000..6237cdd
--- /dev/null
+++ b/src/core/PageManager/data/pages/pek-tables.ts
@@ -0,0 +1,139 @@
+import { GenericPageData } from '../../pageInterface';
+import { FaTable, FaBuilding } from 'react-icons/fa';
+import { IoMdSend } from 'react-icons/io';
+import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
+import { usePekTablesContext } from '../../../../hooks/PekTablesContext';
+import PekTablesDropdown from './pek-tables/PekTablesDropdown';
+import PekTablesPageWrapper from './pek-tables/PekTablesPageWrapper';
+
+// Hook factory for PEK Tables page
+const createPekTablesHook = () => {
+    return () => {
+        const pekTablesData = usePekTablesContext();
+        
+        const handleSubmit = async () => {
+            await pekTablesData.processCommand(pekTablesData.commandInput);
+        };
+        
+        return {
+            // Table data
+            data: pekTablesData.tableData,
+            loading: pekTablesData.isLoadingTableData || pekTablesData.isLoadingTables,
+            error: pekTablesData.tableDataError || pekTablesData.tablesError,
+            
+            // Messages for command results
+            messages: pekTablesData.messages.map(msg => ({
+                id: msg.id,
+                role: msg.role,
+                message: msg.message,
+                publishedAt: msg.timestamp.getTime(),
+                ...(msg.data && { data: msg.data })
+            })),
+            
+            // Input form properties (for command input)
+            inputValue: pekTablesData.commandInput,
+            onInputChange: pekTablesData.setCommandInput,
+            handleSubmit,
+            isSubmitting: pekTablesData.isProcessingCommand,
+            
+            // Refresh function
+            onRefresh: pekTablesData.refreshTableData,
+            isRefetching: false
+        };
+    };
+};
+
+export const pekTablesPageData: GenericPageData = {
+    id: 'pek-tables',
+    path: 'pek-tables',
+    name: 'PEK Tabellen',
+    description: 'PEK Datenverwaltung mit Tabellen',
+    
+    // Parent page
+    parentPath: 'start',
+    
+    // Visual
+    icon: FaTable,
+    title: 'PEK Tabellen',
+    subtitle: 'Datenverwaltung',
+    
+    // Header buttons
+    headerButtons: [],
+    
+    // Content sections
+    content: [
+        {
+            id: 'pek-tables-description',
+            type: 'paragraph',
+            content: 'Verwalten Sie PEK-Daten über Tabellen. Wählen Sie eine Tabelle aus oder verwenden Sie natürliche Sprache, um Befehle auszuführen.'
+        },
+        {
+            id: 'pek-tables-dropdown',
+            type: 'custom',
+            customComponent: PekTablesDropdown
+        },
+        {
+            id: 'pek-tables-command-input',
+            type: 'inputForm',
+            inputFormConfig: {
+                hookFactory: createPekTablesHook,
+                placeholder: 'Befehl eingeben (z.B., "Erstelle ein neues Projekt namens \'Hauptstrasse 42\'")',
+                buttonLabel: 'Senden',
+                buttonIcon: IoMdSend,
+                buttonVariant: 'primary',
+                buttonSize: 'md',
+                textFieldSize: 'md'
+            }
+        },
+        {
+            id: 'pek-tables-command-results',
+            type: 'messages',
+            messagesConfig: {
+                variant: 'chat',
+                showDocuments: false,
+                showMetadata: false,
+                showProgress: false,
+                emptyMessage: 'Noch keine Befehle ausgeführt. Senden Sie einen Befehl, um Ergebnisse hier zu sehen.'
+            }
+        },
+        {
+            id: 'pek-tables-table',
+            type: 'table',
+            tableConfig: {
+                hookFactory: createPekTablesHook,
+                columns: [], // Auto-detect columns
+                searchable: true,
+                filterable: true,
+                sortable: true,
+                pagination: true,
+                pageSize: 10,
+                selectable: true
+            }
+        }
+    ],
+    
+    // Privilege system
+    privilegeChecker: privilegeCheckers.viewerRole,
+    
+    // Page behavior
+    persistent: false,
+    preload: false,
+    preserveState: true,
+    moduleEnabled: true,
+    
+    // Sidebar
+    order: 11,
+    showInSidebar: true,
+    
+    // Custom component wrapper with PekTablesProvider
+    customComponent: PekTablesPageWrapper,
+    
+    // Lifecycle hooks
+    onActivate: async () => {
+        if (import.meta.env.DEV) console.log('PEK Tables page activated');
+    },
+    onDeactivate: async () => {
+        if (import.meta.env.DEV) console.log('PEK Tables page deactivated');
+    }
+};
+
diff --git a/src/core/PageManager/data/pages/pek-tables/PekTablesDropdown.tsx b/src/core/PageManager/data/pages/pek-tables/PekTablesDropdown.tsx
new file mode 100644
index 0000000..d0907cb
--- /dev/null
+++ b/src/core/PageManager/data/pages/pek-tables/PekTablesDropdown.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { DropdownSelect } from '../../../../../components/UiComponents';
+import { usePekTablesContext } from '../../../../../hooks/PekTablesContext';
+
+const PekTablesDropdown: React.FC = () => {
+  const {
+    tables,
+    isLoadingTables,
+    tablesError,
+    selectedTable,
+    setSelectedTable
+  } = usePekTablesContext();
+
+  // Ensure tables is always an array
+  const safeTables = tables || [];
+  
+  // Convert tables to DropdownSelectItem format
+  const tableItems = safeTables.map((table, index) => ({
+    id: table.model || `table-${index}`,
+    label: `${table.name}${table.description ? ` - ${table.description}` : ''}`,
+    value: table.model
+  }));
+
+  // Find selected item ID
+  const selectedItemId = selectedTable 
+    ? tableItems.find(item => item.value === selectedTable)?.id || null
+    : null;
+
+  const handleSelect = (item: { id: string | number; label: string; value: any } | null) => {
+    if (item) {
+      setSelectedTable(item.value);
+    } else {
+      setSelectedTable('');
+    }
+  };
+
+  return (
+    <div style={{ marginBottom: '1.5rem' }}>
+      <label style={{ 
+        display: 'block',
+        fontSize: '0.875rem', 
+        fontWeight: 500, 
+        color: 'var(--color-text)',
+        marginBottom: '0.5rem'
+      }}>
+        Tabelle
+      </label>
+      <DropdownSelect
+        items={tableItems}
+        selectedItemId={selectedItemId}
+        onSelect={handleSelect}
+        placeholder={isLoadingTables ? 'Lade Tabellen...' : 'Tabelle auswählen'}
+        emptyMessage="Keine Tabellen verfügbar"
+        disabled={isLoadingTables || safeTables.length === 0}
+        loading={isLoadingTables}
+        size="md"
+        variant="primary"
+        minWidth="100%"
+        showClearButton={false}
+      />
+      {tablesError && (
+        <div style={{ marginTop: '0.5rem', color: '#ef4444', fontSize: '0.875rem' }}>
+          {tablesError}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PekTablesDropdown;
+
diff --git a/src/core/PageManager/data/pages/pek-tables/PekTablesPageWrapper.tsx b/src/core/PageManager/data/pages/pek-tables/PekTablesPageWrapper.tsx
new file mode 100644
index 0000000..d0eed6e
--- /dev/null
+++ b/src/core/PageManager/data/pages/pek-tables/PekTablesPageWrapper.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { PekTablesProvider } from '../../../../../hooks/PekTablesContext';
+import PageRenderer from '../../../PageRenderer';
+import { pekTablesPageData } from '../pek-tables';
+
+const PekTablesPageWrapper: React.FC = () => {
+  // Create a version of pageData without customComponent to avoid infinite loop
+  const { customComponent, ...pageDataWithoutCustom } = pekTablesPageData;
+  
+  return (
+    <PekTablesProvider>
+      <PageRenderer pageData={pageDataWithoutCustom} />
+    </PekTablesProvider>
+  );
+};
+
+export default PekTablesPageWrapper;
+
diff --git a/src/core/PageManager/data/pages/pek.ts b/src/core/PageManager/data/pages/pek.ts
new file mode 100644
index 0000000..726e7af
--- /dev/null
+++ b/src/core/PageManager/data/pages/pek.ts
@@ -0,0 +1,120 @@
+import { GenericPageData } from '../../pageInterface';
+import { FaBuilding } from 'react-icons/fa';
+import { IoMdSend } from 'react-icons/io';
+import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
+import PekLocationInput from './pek/PekLocationInput';
+import PekMapView from './pek/PekMapView';
+import { usePek } from '../../../../hooks/usePek';
+import PekPageWrapper from './pek/PekPageWrapper';
+
+// Hook factory for PEK page
+const createPekHook = () => {
+    return () => {
+        const pekData = usePek();
+        
+        const handleSubmit = async () => {
+            await pekData.processCommand(pekData.commandInput);
+        };
+        
+        return {
+            // Messages for command results
+            messages: pekData.commandResults,
+            // Loading states
+            loading: pekData.isProcessingCommand || pekData.isSearchingParcel,
+            error: pekData.commandError || pekData.parcelSearchError || pekData.locationError,
+            // Empty data array for compatibility
+            data: [],
+            // Input form properties (for command input)
+            inputValue: pekData.commandInput,
+            onInputChange: pekData.setCommandInput,
+            handleSubmit,
+            isSubmitting: pekData.isProcessingCommand
+        };
+    };
+};
+
+export const pekPageData: GenericPageData = {
+    id: 'pek',
+    path: 'pek',
+    name: 'PEK',
+    description: 'Real Estate Data Management (PEK)',
+    
+    // Parent page
+    parentPath: 'start',
+    
+    // Visual
+    icon: FaBuilding,
+    title: 'PEK',
+    subtitle: 'Real Estate Data Management',
+    
+    // Header buttons
+    headerButtons: [],
+    
+    // Content sections
+    content: [
+        {
+            id: 'pek-description',
+            type: 'paragraph',
+            content: 'Suchen Sie nach Parzellen über Adresse oder Koordinaten, oder verwenden Sie natürliche Sprache, um Projekte zu erstellen und zu verwalten.'
+        },
+        {
+            id: 'pek-location-input',
+            type: 'custom',
+            customComponent: PekLocationInput
+        },
+        {
+            id: 'pek-map-view',
+            type: 'custom',
+            customComponent: PekMapView
+        },
+        {
+            id: 'pek-command-input',
+            type: 'inputForm',
+            inputFormConfig: {
+                hookFactory: createPekHook,
+                placeholder: 'Enter a command (e.g., "Erstelle ein neues Projekt namens \'Hauptstrasse 42\'")',
+                buttonLabel: 'Senden',
+                buttonIcon: IoMdSend,
+                buttonVariant: 'primary',
+                buttonSize: 'md',
+                textFieldSize: 'md'
+            }
+        },
+        {
+            id: 'pek-command-results',
+            type: 'messages',
+            messagesConfig: {
+                variant: 'chat',
+                showDocuments: false,
+                showMetadata: false,
+                showProgress: false,
+                emptyMessage: 'Noch keine Befehle ausgeführt. Senden Sie einen Befehl, um Ergebnisse hier zu sehen.'
+            }
+        }
+    ],
+    
+    // Privilege system
+    privilegeChecker: privilegeCheckers.viewerRole,
+    
+    // Page behavior
+    persistent: false,
+    preload: false,
+    preserveState: true,
+    moduleEnabled: true,
+    
+    // Sidebar
+    order: 10,
+    showInSidebar: true,
+    
+    // Custom component wrapper with PekProvider
+    customComponent: PekPageWrapper,
+    
+    // Lifecycle hooks
+    onActivate: async () => {
+        if (import.meta.env.DEV) console.log('PEK page activated');
+    },
+    onDeactivate: async () => {
+        if (import.meta.env.DEV) console.log('PEK page deactivated');
+    }
+};
+
diff --git a/src/core/PageManager/data/pages/pek/PekLocationInput.module.css b/src/core/PageManager/data/pages/pek/PekLocationInput.module.css
new file mode 100644
index 0000000..afed4e3
--- /dev/null
+++ b/src/core/PageManager/data/pages/pek/PekLocationInput.module.css
@@ -0,0 +1,68 @@
+.locationInputContainer {
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.fieldsRow {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.fieldWrapper {
+  flex: 1;
+}
+
+.buttonsWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  min-width: 150px;
+}
+
+.searchButton {
+  white-space: nowrap;
+}
+
+.locationButton {
+  white-space: nowrap;
+}
+
+@media (max-width: 1024px) {
+  .fieldsRow {
+    flex-wrap: wrap;
+  }
+
+  .buttonsWrapper {
+    flex-direction: row;
+    width: 100%;
+    margin-top: 0.5rem;
+  }
+
+  .fieldWrapper {
+    min-width: calc(50% - 0.5rem);
+  }
+}
+
+@media (max-width: 768px) {
+  .fieldsRow {
+    flex-direction: column;
+  }
+
+  .fieldWrapper {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  .buttonsWrapper {
+    width: 100%;
+    margin-top: 0.5rem;
+  }
+
+  .searchButton,
+  .locationButton {
+    flex: 1;
+  }
+}
+
diff --git a/src/core/PageManager/data/pages/pek/PekLocationInput.tsx b/src/core/PageManager/data/pages/pek/PekLocationInput.tsx
new file mode 100644
index 0000000..d54bd90
--- /dev/null
+++ b/src/core/PageManager/data/pages/pek/PekLocationInput.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { TextField, Button } from '../../../../../components/UiComponents';
+import { FaLocationArrow } from 'react-icons/fa';
+import { IoMdSend } from 'react-icons/io';
+import { usePekContext } from '../../../../../hooks/PekContext';
+import styles from './PekLocationInput.module.css';
+
+const PekLocationInput: React.FC = () => {
+  const {
+    kanton,
+    setKanton,
+    gemeinde,
+    setGemeinde,
+    adresse,
+    setAdresse,
+    buildLocationString,
+    useCurrentLocation,
+    isGettingLocation,
+    locationError,
+    searchParcel,
+    isSearchingParcel
+  } = usePekContext();
+
+  const handleSearch = async () => {
+    const locationString = buildLocationString();
+    if (locationString.trim()) {
+      await searchParcel(locationString.trim(), true);
+    }
+  };
+
+  const handleUseCurrentLocation = async () => {
+    await useCurrentLocation();
+  };
+
+
+  return (
+    <div className={styles.locationInputContainer}>
+      <div className={styles.fieldsRow}>
+        <div className={styles.fieldWrapper}>
+          <TextField
+            value={kanton}
+            onChange={setKanton}
+            placeholder="z.B. BE"
+            label="Kanton"
+            error={locationError && !gemeinde && !adresse ? locationError : undefined}
+            disabled={isGettingLocation || isSearchingParcel}
+            size="md"
+            type="text"
+            name="kanton"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                const gemeindeInput = document.querySelector('input[name="gemeinde"]') as HTMLInputElement;
+                if (gemeindeInput) gemeindeInput.focus();
+              }
+            }}
+          />
+        </div>
+        <div className={styles.fieldWrapper}>
+          <TextField
+            value={gemeinde}
+            onChange={setGemeinde}
+            placeholder="z.B. Bern"
+            label="Gemeinde"
+            disabled={isGettingLocation || isSearchingParcel}
+            size="md"
+            type="text"
+            name="gemeinde"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                const adresseInput = document.querySelector('input[name="adresse"]') as HTMLInputElement;
+                if (adresseInput) adresseInput.focus();
+              }
+            }}
+          />
+        </div>
+        <div className={styles.fieldWrapper}>
+          <TextField
+            value={adresse}
+            onChange={setAdresse}
+            placeholder="z.B. Bundesplatz 3"
+            label="Adresse oder Parzelle"
+            disabled={isGettingLocation || isSearchingParcel}
+            size="md"
+            type="text"
+            name="adresse"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleSearch();
+              }
+            }}
+          />
+        </div>
+        <div className={styles.buttonsWrapper}>
+          <Button
+            variant="primary"
+            size="md"
+            icon={IoMdSend}
+            onClick={handleSearch}
+            disabled={!buildLocationString().trim() || isGettingLocation || isSearchingParcel}
+            loading={isSearchingParcel}
+            className={styles.searchButton}
+          >
+            Suchen
+          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            icon={FaLocationArrow}
+            onClick={handleUseCurrentLocation}
+            disabled={isGettingLocation || isSearchingParcel}
+            loading={isGettingLocation}
+            className={styles.locationButton}
+          >
+            Meine Position
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PekLocationInput;
+
diff --git a/src/core/PageManager/data/pages/pek/PekMapView.tsx b/src/core/PageManager/data/pages/pek/PekMapView.tsx
new file mode 100644
index 0000000..1aa0631
--- /dev/null
+++ b/src/core/PageManager/data/pages/pek/PekMapView.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { MapView, ParcelInfoPanel } from '../../../../../components/UiComponents';
+import { usePekContext } from '../../../../../hooks/PekContext';
+
+const PekMapView: React.FC = () => {
+  const {
+    mapCenter,
+    mapZoomBounds,
+    parcelGeometries,
+    handleMapClick,
+    handleParcelClick,
+    selectedParcel,
+    isPanelOpen,
+    setIsPanelOpen
+  } = usePekContext();
+
+  return (
+    <>
+      <div style={{ marginBottom: '1.5rem' }}>
+        <MapView
+          parcels={parcelGeometries}
+          center={mapCenter || undefined}
+          zoomBounds={mapZoomBounds || undefined}
+          onMapClick={handleMapClick}
+          onParcelClick={handleParcelClick}
+          height="600px"
+          emptyMessage="Klicken Sie auf die Karte, um einen Standort auszuwählen, oder suchen Sie nach einer Adresse oben."
+        />
+      </div>
+      
+      <ParcelInfoPanel
+        isOpen={isPanelOpen}
+        onClose={() => setIsPanelOpen(false)}
+        parcelData={selectedParcel}
+        adjacentParcels={selectedParcel?.adjacent_parcels || []}
+      />
+    </>
+  );
+};
+
+export default PekMapView;
+
diff --git a/src/core/PageManager/data/pages/pek/PekPageWrapper.tsx b/src/core/PageManager/data/pages/pek/PekPageWrapper.tsx
new file mode 100644
index 0000000..4c0159b
--- /dev/null
+++ b/src/core/PageManager/data/pages/pek/PekPageWrapper.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { PekProvider } from '../../../../../hooks/PekContext';
+import PageRenderer from '../../../PageRenderer';
+import { pekPageData } from '../pek';
+
+const PekPageWrapper: React.FC = () => {
+  // Create a version of pageData without customComponent to avoid infinite loop
+  const { customComponent, ...pageDataWithoutCustom } = pekPageData;
+  
+  return (
+    <PekProvider>
+      <PageRenderer pageData={pageDataWithoutCustom} />
+    </PekProvider>
+  );
+};
+
+export default PekPageWrapper;
+
diff --git a/src/core/PageManager/data/pages/prompts.ts b/src/core/PageManager/data/pages/prompts.ts
index f09572d..6f7ac38 100644
--- a/src/core/PageManager/data/pages/prompts.ts
+++ b/src/core/PageManager/data/pages/prompts.ts
@@ -7,7 +7,7 @@ import { usePrompts, usePromptOperations } from '../../../../hooks/usePrompts';
 // Hook factory function for prompts data
 const createPromptsHook = () => {
     return () => {
-        const { prompts, loading, error, refetch, removeOptimistically } = usePrompts();
+        const { prompts, loading, error, refetch, removeOptimistically, updateOptimistically } = usePrompts();
         const { 
             handlePromptDelete,
             handlePromptCreate,
@@ -19,19 +19,11 @@ const createPromptsHook = () => {
             updateError
         } = usePromptOperations();
         
-        // Wrapped create handler that adds mandateId automatically
+        // Wrapped create handler that adds mandateId from currentUser cache
         const wrappedHandlePromptCreate = useCallback(async (formData: { name: string; content: string }) => {
-            // Get mandateId from the first prompt if available, or use empty string
-            const mandateId = prompts.length > 0 ? prompts[0].mandateId : '';
-            
-            const promptData = {
-                name: formData.name,
-                content: formData.content,
-                mandateId: mandateId
-            };
-            
-            return await handlePromptCreate(promptData);
-        }, [handlePromptCreate, prompts]);
+            // mandateId is retrieved inside handlePromptCreate from sessionStorage cache
+            return await handlePromptCreate({ name: formData.name, content: formData.content });
+        }, [handlePromptCreate]);
         
         // Handle single prompt deletion for FormGenerator
         const handleDeleteSingle = useCallback(async (prompt: any) => {
@@ -62,6 +54,7 @@ const createPromptsHook = () => {
             error,
             refetch,
             removeOptimistically, // Expose optimistic removal (generic name for DeleteActionButton)
+            updateOptimistically, // Expose optimistic update for EditActionButton
             // Operations
             handleDelete: handlePromptDelete,
             handleDeleteMultiple,
@@ -189,7 +182,38 @@ export const promptsPageData: GenericPageData = {
                         idField: 'id',
                         nameField: 'name',
                         operationName: 'handlePromptUpdate',
-                        loadingStateName: 'updatingPrompts'
+                        loadingStateName: 'updatingPrompts',
+                        editFields: [
+                            {
+                                key: 'name',
+                                label: 'prompts.field.name',
+                                type: 'string',
+                                editable: true,
+                                required: true,
+                                validator: (value: string) => {
+                                    if (!value || value.trim() === '') {
+                                        return 'Prompt name cannot be empty';
+                                    }
+                                    if (value.length > 100) {
+                                        return 'Prompt name cannot exceed 100 characters';
+                                    }
+                                    return null;
+                                }
+                            },
+                            {
+                                key: 'content',
+                                label: 'prompts.field.content',
+                                type: 'textarea',
+                                editable: true,
+                                required: true,
+                                validator: (value: string) => {
+                                    if (!value || value.trim() === '') {
+                                        return 'Prompt content cannot be empty';
+                                    }
+                                    return null;
+                                }
+                            }
+                        ]
                     },
                     {
                         type: 'delete',
@@ -229,7 +253,6 @@ export const promptsPageData: GenericPageData = {
     moduleEnabled: true,
     
     // shown in sidebar under administration
-    showInSidebar: false,
     
     // No drag and drop configuration for prompts
     
diff --git a/src/core/PageManager/data/pages/settings.ts b/src/core/PageManager/data/pages/settings.ts
new file mode 100644
index 0000000..c74d641
--- /dev/null
+++ b/src/core/PageManager/data/pages/settings.ts
@@ -0,0 +1,132 @@
+import { GenericPageData } from '../../pageInterface';
+import { FaCog } from 'react-icons/fa';
+import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
+import { createSettingsHook } from '../../../../hooks/useSettings';
+
+export const settingsPageData: GenericPageData = {
+    id: 'settings',
+    path: 'settings',
+    name: 'Settings',
+    description: 'Manage your account settings and preferences',
+    
+    // Visual
+    icon: FaCog,
+    title: 'settings.title',
+    subtitle: 'Manage your account settings and preferences',
+    
+    // Privilege system
+    privilegeChecker: privilegeCheckers.viewerRole,
+    
+    // Page behavior
+    persistent: false,
+    preserveState: false,
+    preload: true,
+    moduleEnabled: true,
+    
+    // Sidebar
+    showInSidebar: true,
+    order: 999, // Put at the end
+    
+    // Content sections
+    content: [
+        {
+            id: 'settings-content',
+            type: 'settings',
+            settingsConfig: {
+                sections: [
+                    {
+                        id: 'user-info',
+                        sectionId: 'user-info',
+                        title: 'settings.userinfo',
+                        description: 'settings.userinfo.description',
+                        saveButtonLabel: 'settings.userinfo.save',
+                        saveButtonVariant: 'primary',
+                        saveButtonSize: 'md',
+                        // Static fields for user information
+                        staticFields: [
+                            {
+                                id: 'username',
+                                type: 'text',
+                                label: 'settings.userinfo.username',
+                                description: 'settings.userinfo.username.description',
+                                dataKey: 'username',
+                                required: true,
+                                placeholder: 'settings.userinfo.username'
+                            },
+                            {
+                                id: 'fullName',
+                                type: 'text',
+                                label: 'settings.userinfo.fullname',
+                                description: 'settings.userinfo.fullname.description',
+                                dataKey: 'fullName',
+                                required: false,
+                                placeholder: 'settings.userinfo.fullname'
+                            },
+                            {
+                                id: 'email',
+                                type: 'text',
+                                inputType: 'email',
+                                label: 'settings.userinfo.email',
+                                description: 'settings.userinfo.email.description',
+                                dataKey: 'email',
+                                required: true,
+                                placeholder: 'settings.userinfo.email'
+                            },
+                            {
+                                id: 'language',
+                                type: 'select',
+                                label: 'settings.userinfo.language',
+                                description: 'settings.userinfo.language.description',
+                                dataKey: 'language',
+                                required: false,
+                                options: [
+                                    { id: 'en', label: 'English', value: 'en' },
+                                    { id: 'de', label: 'Deutsch', value: 'de' },
+                                    { id: 'fr', label: 'Français', value: 'fr' },
+                                    { id: 'it', label: 'Italiano', value: 'it' }
+                                ]
+                            },
+                            {
+                                id: 'phone-name',
+                                type: 'text',
+                                label: 'settings.userinfo.phone_name',
+                                description: 'settings.userinfo.phone_name.description',
+                                dataKey: 'phoneName',
+                                required: false,
+                                placeholder: 'settings.userinfo.phone_name'
+                            }
+                        ]
+                    },
+                    {
+                        id: 'theme',
+                        title: '',
+                        sectionId: 'theme',
+                        saveButtonLabel: 'settings.save',
+                        saveButtonVariant: 'primary',
+                        saveButtonSize: 'md',
+                        staticFields: [
+                            {
+                                id: 'theme-select',
+                                type: 'select',
+                                label: 'settings.theme',
+                                dataKey: 'theme',
+                                required: false,
+                                options: [
+                                    { id: 'light', label: 'settings.theme.light', value: 'light' },
+                                    { id: 'dark', label: 'settings.theme.dark', value: 'dark' }
+                                ]
+                            }
+                        ]
+                    }
+                ],
+                hookFactory: createSettingsHook
+            }
+        }
+    ],
+    
+    // Lifecycle hooks
+    onActivate: async () => {
+        if (import.meta.env.DEV) console.log('Settings page activated');
+    }
+};
+
diff --git a/src/core/PageManager/data/pages/speech.ts b/src/core/PageManager/data/pages/speech.ts
index d846df8..ebc421d 100644
--- a/src/core/PageManager/data/pages/speech.ts
+++ b/src/core/PageManager/data/pages/speech.ts
@@ -3,11 +3,15 @@ import { FaRegFileAlt, FaMicrophone, FaCog, FaHistory } from 'react-icons/fa';
 import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
 
 export const speechPageData: GenericPageData = {
-    id: '8',
-    path: 'speech',
+    id: 'start-speech',
+    path: 'start/speech',
     name: 'Speech',
     description: 'Speech recognition and transcription tools',
     
+    // Parent page
+    parentPath: 'start',
+    showInSidebar: false,
+    
     // Visual
     icon: FaRegFileAlt,
     title: 'Speech Recognition',
@@ -118,10 +122,7 @@ export const speechPageData: GenericPageData = {
     persistent: false,
     preload: true,
     moduleEnabled: true,
-    
-    // Sidebar
-    order: 7,
-    showInSidebar: true,
+    hide: true, // Completely hide this page - it will not be rendered
     
     // Lifecycle hooks
     onActivate: async () => {
diff --git a/src/core/PageManager/data/pages/start.ts b/src/core/PageManager/data/pages/start.ts
new file mode 100644
index 0000000..f3dc0c4
--- /dev/null
+++ b/src/core/PageManager/data/pages/start.ts
@@ -0,0 +1,68 @@
+import { GenericPageData } from '../../pageInterface';
+import { FaHome } from 'react-icons/fa';
+import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
+
+export const startPageData: GenericPageData = {
+    id: 'start',
+    path: 'start',
+    name: 'start.title',
+    description: 'start.description',
+    
+    // Visual
+    icon: FaHome,
+    title: 'start.title',
+    subtitle: 'start.subtitle',
+    
+    // Content sections
+    content: [
+        {
+            id: 'intro',
+            type: 'heading',
+            content: 'start.title',
+            level: 2
+        },
+        {
+            id: 'description',
+            type: 'paragraph',
+            content: 'start.intro.description'
+        },
+        {
+            id: 'features',
+            type: 'heading',
+            content: 'start.features.title',
+            level: 3
+        },
+        {
+            id: 'features-list',
+            type: 'list',
+            content: 'start.features.description',
+            items: [
+                'start.features.quick_access',
+                'start.features.recent_activities',
+                'start.features.overview',
+                'start.features.navigation'
+            ]
+        }
+    ],
+    
+    // Privilege system
+    privilegeChecker: privilegeCheckers.viewerRole,
+    
+    // Subpage support
+    hasSubpages: true,
+    subpagePrivilegeChecker: privilegeCheckers.viewerRole,
+    
+    // Page behavior
+    persistent: false,
+    preload: true,
+    moduleEnabled: true,
+    
+    // Sidebar
+    order: 1,
+    showInSidebar: true,
+    
+    // Lifecycle hooks
+    onActivate: async () => {
+        if (import.meta.env.DEV) console.log('Start page activated');
+    }
+};
diff --git a/src/core/PageManager/data/pages/workflows.ts b/src/core/PageManager/data/pages/workflows.ts
new file mode 100644
index 0000000..f70f170
--- /dev/null
+++ b/src/core/PageManager/data/pages/workflows.ts
@@ -0,0 +1,217 @@
+import { useCallback } from 'react';
+import { GenericPageData } from '../../pageInterface';
+import { FaProjectDiagram } from 'react-icons/fa';
+import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
+import { useUserWorkflows, useWorkflowOperations } from '../../../../hooks/useWorkflows';
+
+// Hook factory function for workflows data
+const createWorkflowsHook = () => {
+    return () => {
+        const { data: workflows, loading, error, refetch, removeWorkflowOptimistically, updateWorkflowOptimistically } = useUserWorkflows();
+        const { 
+            handleWorkflowDelete, 
+            handleWorkflowDeleteMultiple,
+            handleWorkflowUpdate,
+            deletingWorkflows, 
+            editingWorkflows,
+            MessageOverlayComponent
+        } = useWorkflowOperations();
+        
+        // Handle multiple workflow deletion for FormGenerator
+        const handleDeleteMultiple = useCallback(async (selectedWorkflows: any[]) => {
+            const workflowIds = selectedWorkflows.map(workflow => workflow.id);
+            const success = await handleWorkflowDeleteMultiple(workflowIds, (deletedIds) => {
+                // Optimistically remove workflows from UI
+                deletedIds.forEach(workflowId => {
+                    removeWorkflowOptimistically(workflowId);
+                });
+            });
+            
+            if (success) {
+                // Refetch to sync with backend
+                refetch();
+            }
+        }, [handleWorkflowDeleteMultiple, removeWorkflowOptimistically, refetch]);
+
+        // Handle single workflow deletion for FormGenerator
+        const handleDeleteSingle = useCallback(async (workflow: any) => {
+            const success = await handleWorkflowDelete(workflow.id, () => {
+                removeWorkflowOptimistically(workflow.id);
+            });
+            
+            if (success) {
+                refetch();
+            }
+        }, [handleWorkflowDelete, removeWorkflowOptimistically, refetch]);
+
+        // Wrapper for DeleteActionButton - it calls removeOptimistically directly, so we don't need the callback
+        const handleDeleteForButton = useCallback(async (workflowId: string): Promise<boolean> => {
+            // DeleteActionButton already called removeOptimistically, so we just need to call the API
+            return await handleWorkflowDelete(workflowId);
+        }, [handleWorkflowDelete]);
+
+        return {
+            data: workflows,
+            loading,
+            error,
+            refetch,
+            removeWorkflowOptimistically,
+            // Alias for DeleteActionButton compatibility
+            removeOptimistically: removeWorkflowOptimistically,
+            updateWorkflowOptimistically,
+            // Alias for EditActionButton compatibility
+            updateOptimistically: updateWorkflowOptimistically,
+            // Operations
+            handleDelete: handleDeleteForButton, // Wrapper that matches DeleteActionButton's expected signature
+            handleDeleteMultiple: handleWorkflowDeleteMultiple,
+            handleWorkflowUpdate: handleWorkflowUpdate,
+            // FormGenerator specific handlers
+            onDelete: handleDeleteSingle,
+            onDeleteMultiple: handleDeleteMultiple,
+            // Loading states
+            deletingWorkflows,
+            editingWorkflows,
+            // Message overlay component
+            MessageOverlayComponent
+        };
+    };
+};
+
+// Static columns configuration for workflows table
+const workflowsColumns = [
+    {
+        key: 'id',
+        label: 'workflows.column.id',
+        type: 'string',
+        width: 180,
+        minWidth: 150,
+        maxWidth: 250,
+        sortable: true,
+        filterable: true,
+        searchable: true
+    },
+    {
+        key: 'name',
+        label: 'workflows.column.name',
+        type: 'string',
+        width: 200,
+        minWidth: 150,
+        maxWidth: 300,
+        sortable: true,
+        filterable: true,
+        searchable: true
+    },
+    {
+        key: 'status',
+        label: 'workflows.column.status',
+        type: 'enum',
+        width: 120,
+        minWidth: 100,
+        maxWidth: 150,
+        sortable: true,
+        filterable: true,
+        filterOptions: ['running', 'completed', 'failed', 'stopped', 'pending']
+    },
+    {
+        key: 'workflowMode',
+        label: 'workflows.column.mode',
+        type: 'string',
+        width: 150,
+        minWidth: 120,
+        maxWidth: 200,
+        sortable: true,
+        filterable: true,
+        searchable: false
+    }
+];
+
+export const workflowsPageData: GenericPageData = {
+    id: 'administration-workflows',
+    path: 'administration/workflows',
+    name: 'workflows.title',
+    description: 'workflows.title',
+    
+    // Parent page
+    parentPath: 'administration',
+    
+    // Visual
+    icon: FaProjectDiagram,
+    title: 'workflows.title',
+    subtitle: 'workflows.title',
+    
+    // Header buttons - none for now, workflows are typically created through the playground
+    
+    // Content sections - using generic table approach
+    content: [
+        {
+            id: 'workflows-table',
+            type: 'table',
+            tableConfig: {
+                hookFactory: createWorkflowsHook,
+                columns: workflowsColumns,
+                actionButtons: [
+                    {
+                        type: 'play',
+                        title: 'workflows.action.play',
+                        idField: 'id',
+                        nameField: 'name',
+                        navigateTo: 'start/dashboard'
+                    },
+                    {
+                        type: 'edit',
+                        title: 'workflows.action.edit',
+                        idField: 'id',
+                        nameField: 'name',
+                        operationName: 'handleWorkflowUpdate',
+                        loadingStateName: 'editingWorkflows',
+                        editFields: [
+                            {
+                                key: 'name',
+                                label: 'workflows.column.name',
+                                type: 'string',
+                                editable: true,
+                                required: false
+                            }
+                        ]
+                    },
+                    {
+                        type: 'delete',
+                        title: 'workflows.action.delete',
+                        idField: 'id',
+                        operationName: 'handleDelete',
+                        loadingStateName: 'deletingWorkflows'
+                    }
+                ],
+                searchable: true,
+                filterable: true,
+                sortable: true,
+                resizable: true,
+                pagination: true,
+                pageSize: 10,
+                className: 'workflows-table'
+            }
+        }
+    ],
+    
+    // Privilege system
+    privilegeChecker: privilegeCheckers.viewerRole,
+    
+    // Page behavior
+    persistent: false,
+    preload: false,
+    preserveState: true, // Keep page mounted and prevent refetching
+    moduleEnabled: true,
+    
+    // Sidebar - will be shown as subpage under Administration
+    
+    // Lifecycle hooks
+    onActivate: async () => {
+        if (import.meta.env.DEV) console.log('Workflows activated');
+    },
+    onLoad: async () => {
+        if (import.meta.env.DEV) console.log('Workflows loaded - can initialize workflow lists here');
+    },
+    onUnload: async () => {
+        if (import.meta.env.DEV) console.log('Workflows unloaded - cleanup workflow references');
+    }
+};
diff --git a/src/core/PageManager/pageInterface.ts b/src/core/PageManager/pageInterface.ts
index 6d4af91..e005524 100644
--- a/src/core/PageManager/pageInterface.ts
+++ b/src/core/PageManager/pageInterface.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconType } from 'react-icons';
-import { DragDropConfig } from '../../components/ui/DragDropOverlay/DragDropOverlay';
+import { DragDropConfig } from '../../components/UiComponents/DragDropOverlay/DragDropOverlay';
 
 // Generic privilege checker function type
 export type PrivilegeChecker = () => boolean | Promise<boolean>;
@@ -18,6 +18,28 @@ export interface ButtonFormField {
     defaultValue?: any;
 }
 
+// Dropdown configuration for header dropdown buttons
+export interface DropdownConfig<T = any> {
+    type: 'dropdown';
+    items: Array<{
+        id: string | number;
+        label: string | LanguageText;
+        value: T;
+        metadata?: Record<string, any>;
+    }>;
+    selectedItemId?: string | number | null;
+    onSelect: (item: { id: string | number; label: string | LanguageText; value: T; metadata?: Record<string, any> } | null, hookData?: any) => void | Promise<void>;
+    placeholder?: string | LanguageText;
+    emptyMessage?: string | LanguageText;
+    headerText?: string | LanguageText;
+    // Optional: name of property in hookData that provides items, selectedItemId, and onSelect
+    dataSource?: {
+        itemsProperty?: string; // Property name in hookData that contains items array
+        selectedIdProperty?: string; // Property name in hookData that contains selectedItemId
+        onSelectMethod?: string; // Method name in hookData for onSelect callback
+    };
+}
+
 // Button configuration for header actions
 export interface PageButton {
     id: string;
@@ -37,12 +59,66 @@ export interface PageButton {
         successMessage?: string | LanguageText;
         errorMessage?: string | LanguageText;
     };
+    // Dropdown configuration for dropdown selection buttons
+    dropdownConfig?: DropdownConfig;
+}
+
+// Input form configuration
+export interface InputFormConfig {
+    hookFactory?: () => () => GenericDataHook; // Optional, can use page-level hook from tableConfig if exists
+    placeholder?: string | LanguageText;
+    buttonLabel?: string | LanguageText;
+    stopButtonLabel?: string | LanguageText; // Label for stop button when workflow is running
+    buttonIcon?: IconType;
+    stopButtonIcon?: IconType; // Icon for stop button when workflow is running
+    buttonVariant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+    stopButtonVariant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning'; // Variant for stop button
+    buttonSize?: 'sm' | 'md' | 'lg';
+    textFieldSize?: 'sm' | 'md' | 'lg';
+}
+
+// Settings field configuration
+export interface SettingsFieldConfig {
+    id: string;
+    type: 'text' | 'select' | 'toggle';
+    label: string | LanguageText;
+    description?: string | LanguageText;
+    required?: boolean;
+    disabled?: boolean | ((data: any) => boolean);
+    inputType?: 'text' | 'email' | 'tel';
+    placeholder?: string | LanguageText;
+    options?: Array<{id: string | number; label: string | LanguageText; value: any}>;
+    dataKey: string; // Dot-notation path (e.g., "mandate_general.company_name")
+    onSave?: (value: any, data: any) => Promise<void> | void;
+}
+
+// Settings section configuration
+export interface SettingsSectionConfig {
+    id: string;
+    title: string | LanguageText;
+    description?: string | LanguageText;
+    icon?: IconType; // Optional icon for section header
+    // Fields will be loaded from backend based on sectionId
+    sectionId: string; // Identifier sent to backend to fetch fields
+    // Save handler per section (uses Button component)
+    onSave?: (sectionId: string, data: any) => Promise<void>;
+    saveButtonLabel?: string | LanguageText;
+    saveButtonVariant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+    saveButtonSize?: 'sm' | 'md' | 'lg';
+    // Optional: Static field overrides from config (takes precedence over backend)
+    staticFields?: SettingsFieldConfig[];
+}
+
+// Settings configuration
+export interface SettingsConfig {
+    sections: SettingsSectionConfig[];
+    hookFactory?: () => () => GenericDataHook; // For data fetching and field loading
 }
 
 // Content section for paragraphs
 export interface PageContent {
     id: string;
-    type: 'paragraph' | 'heading' | 'list' | 'code' | 'divider' | 'custom' | 'table';
+    type: 'paragraph' | 'heading' | 'list' | 'code' | 'divider' | 'custom' | 'table' | 'inputForm' | 'messages' | 'settings';
     content?: string | LanguageText; // Optional for dividers
     level?: number; // For headings (1-6)
     items?: (string | LanguageText)[]; // For lists
@@ -51,6 +127,19 @@ export interface PageContent {
     privilegeChecker?: PrivilegeChecker;
     // Table-specific properties
     tableConfig?: TableContentConfig;
+    // Input form-specific properties
+    inputFormConfig?: InputFormConfig;
+    // Messages-specific properties
+    messagesConfig?: {
+        variant?: 'chat' | 'log'; // Message display variant: 'chat' for bubble UI, 'log' for list/table UI
+        dataSource?: 'messages' | 'logs' | 'both'; // Data source to render: 'messages' (default), 'logs', or 'both' (logs use log variant when merged)
+        showDocuments?: boolean;
+        showMetadata?: boolean;
+        showProgress?: boolean;
+        emptyMessage?: string | LanguageText;
+    };
+    // Settings-specific properties
+    settingsConfig?: SettingsConfig;
 }
 
 // Generic hook interface for data fetching
@@ -70,13 +159,32 @@ export interface GenericDataHook {
     // FormGenerator specific handlers
     onDelete?: (row: any) => Promise<void>; // For single item deletion
     onDeleteMultiple?: (rows: any[]) => Promise<void>; // For multiple item deletion
+    // Input form operations
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    handleSubmit?: () => Promise<void>; // No parameters, uses internal inputValue
+    isSubmitting?: boolean;
+    // Workflow lifecycle state
+    workflowId?: string;
+    workflowStatus?: string;
+    isRunning?: boolean;
+    // Messages from workflow
+    messages?: any[];
+    // Logs from workflow
+    logs?: any[];
     // Message overlay component
     MessageOverlayComponent?: () => React.ReactElement;
+    // Settings-specific properties
+    settingsData?: any; // Unified data object for settings fields
+    settingsFields?: Record<string, SettingsFieldConfig[]>; // Field definitions per sectionId
+    settingsLoading?: Record<string, boolean>; // Loading state per section
+    settingsErrors?: Record<string, string | null>; // Error state per section
+    saveSection?: (sectionId: string, data: any) => Promise<void>; // Save handler for a section
 }
 
 // Action button configuration
 export interface ActionButtonConfig {
-    type: 'view' | 'edit' | 'download' | 'delete' | 'copy';
+    type: 'view' | 'edit' | 'download' | 'delete' | 'copy' | 'connect' | 'play';
     onAction?: (row: any) => Promise<void> | void; // Optional for delete buttons since they handle their own logic
     title?: string | LanguageText;
     disabled?: (row: any) => boolean | { disabled: boolean; message?: string };
@@ -86,9 +194,24 @@ export interface ActionButtonConfig {
     nameField?: string; // Field name for display name (default: 'name' or 'file_name')
     typeField?: string; // Field name for type/mime type (default: 'type' or 'mime_type')
     contentField?: string; // Field name for content (default: 'content')
+    statusField?: string; // Field name for status (default: 'status')
+    authorityField?: string; // Field name for authority (msft/google) (default: 'authority')
     // Operation and loading state names
     operationName?: string; // Name of the operation function in hookData
+    disconnectOperationName?: string; // Name of the disconnect operation function in hookData (for connect button)
+    refreshOperationName?: string; // Name of the refresh operation function in hookData (for connect button)
     loadingStateName?: string; // Name of the loading state in hookData
+    // Navigation (for play button)
+    navigateTo?: string; // Path to navigate to after action (default: 'start/dashboard')
+    // Edit configuration
+    editFields?: Array<{
+        key: string;
+        label: string | LanguageText;
+        type: 'string' | 'boolean' | 'email' | 'textarea' | 'date' | 'enum' | 'readonly';
+        editable?: boolean;
+        required?: boolean;
+        validator?: (value: any) => string | null;
+    }>;
 }
 
 // Table content configuration
@@ -159,6 +282,7 @@ export interface GenericPageData {
     preserveState?: boolean;
     preload?: boolean;
     moduleEnabled?: boolean;
+    hide?: boolean; // If true, page is completely hidden and not rendered
     
     // Subpage support
     hasSubpages?: boolean;
diff --git a/src/hooks/PekContext.tsx b/src/hooks/PekContext.tsx
new file mode 100644
index 0000000..30be66f
--- /dev/null
+++ b/src/hooks/PekContext.tsx
@@ -0,0 +1,73 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { usePek } from './usePek';
+
+interface PekContextType {
+  // Location input - separate fields
+  kanton: string;
+  setKanton: (value: string) => void;
+  gemeinde: string;
+  setGemeinde: (value: string) => void;
+  adresse: string;
+  setAdresse: (value: string) => void;
+  buildLocationString: () => string;
+  // Legacy locationInput for backward compatibility
+  locationInput: string;
+  setLocationInput: (value: string) => void;
+  useCurrentLocation: () => Promise<void>;
+  isGettingLocation: boolean;
+  locationError: string | null;
+
+  // Parcel search
+  selectedParcel: any;
+  searchParcel: (location: string, includeAdjacent?: boolean) => Promise<any>;
+  isSearchingParcel: boolean;
+  parcelSearchError: string | null;
+
+  // Map view
+  mapCenter: any;
+  mapZoomBounds: any;
+  parcelGeometries: any[];
+  handleMapClick: (point: any) => Promise<void>;
+  handleParcelClick: (parcelId: string) => Promise<void>;
+
+  // Command processing
+  commandInput: string;
+  setCommandInput: (value: string) => void;
+  processCommand: (userInput: string) => Promise<any>;
+  isProcessingCommand: boolean;
+  commandResults: any[];
+  commandError: string | null;
+
+  // Project management
+  currentProjekt: any;
+  createProjekt: (data: any) => Promise<any>;
+  isCreatingProjekt: boolean;
+  addParcelToProjekt: (projektId: string, data: any) => Promise<any>;
+  isAddingParcel: boolean;
+  projektError: string | null;
+
+  // Panel state
+  isPanelOpen: boolean;
+  setIsPanelOpen: (open: boolean) => void;
+}
+
+const PekContext = createContext<PekContextType | undefined>(undefined);
+
+export const PekProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const pekData = usePek();
+  
+  return (
+    <PekContext.Provider value={pekData}>
+      {children}
+    </PekContext.Provider>
+  );
+};
+
+export const usePekContext = (): PekContextType => {
+  const context = useContext(PekContext);
+  if (!context) {
+    throw new Error('usePekContext must be used within a PekProvider');
+  }
+  return context;
+};
+
diff --git a/src/hooks/PekTablesContext.tsx b/src/hooks/PekTablesContext.tsx
new file mode 100644
index 0000000..a269ba4
--- /dev/null
+++ b/src/hooks/PekTablesContext.tsx
@@ -0,0 +1,52 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { usePekTables } from './usePekTables';
+
+interface PekTablesContextType {
+  // Tables list
+  tables: any[];
+  isLoadingTables: boolean;
+  tablesError: string | null;
+  loadTables: () => Promise<void>;
+
+  // Selected table
+  selectedTable: string;
+  setSelectedTable: (value: string) => void;
+  tableData: any[];
+  isLoadingTableData: boolean;
+  tableDataError: string | null;
+  pagination: any;
+  loadTableData: (tableName: string, page?: number, pageSize?: number, sort?: Array<{ field: string; direction: 'asc' | 'desc' }>) => Promise<void>;
+  refreshTableData: () => void;
+
+  // Commands
+  commandInput: string;
+  setCommandInput: (value: string) => void;
+  processCommand: (userInput: string) => Promise<any>;
+  isProcessingCommand: boolean;
+  commandError: string | null;
+  messages: any[];
+
+  // Create record
+  createRecord: (tableName: string, data: any) => Promise<any>;
+}
+
+const PekTablesContext = createContext<PekTablesContextType | undefined>(undefined);
+
+export const PekTablesProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const pekTablesData = usePekTables();
+  
+  return (
+    <PekTablesContext.Provider value={pekTablesData}>
+      {children}
+    </PekTablesContext.Provider>
+  );
+};
+
+export const usePekTablesContext = (): PekTablesContextType => {
+  const context = useContext(PekTablesContext);
+  if (!context) {
+    throw new Error('usePekTablesContext must be used within a PekTablesProvider');
+  }
+  return context;
+};
+
diff --git a/src/hooks/privilegeTestUtils.ts b/src/hooks/privilegeTestUtils.ts
index 647c75d..45a592d 100644
--- a/src/hooks/privilegeTestUtils.ts
+++ b/src/hooks/privilegeTestUtils.ts
@@ -1,6 +1,7 @@
 // Utility functions for testing and debugging the privilege system
 
 import { privilegeCheckers } from '../utils/privilegeCheckers';
+import { setUserDataCache, clearUserDataCache, getUserDataCache } from '../utils/userCache';
 
 // Function to test all privilege checkers
 export const testAllPrivilegeCheckers = async () => {
@@ -35,31 +36,22 @@ export const simulateUserPrivilege = (privilege: string) => {
         mandateId: 'test-mandate'
     };
     
-    localStorage.setItem('currentUser', JSON.stringify(testUser));
-    console.log(`🎭 Simulated user with privilege: ${privilege}`);
+    setUserDataCache(testUser);
+    console.log(`🎭 Simulated user with privilege: ${privilege} (in sessionStorage cache, secure)`);
 };
 
 // Function to clear test data
 export const clearTestData = () => {
-    localStorage.removeItem('currentUser');
+    clearUserDataCache();
     localStorage.removeItem('speechSignUpData');
     localStorage.removeItem('speechSignUpTimestamp');
     console.log('🧹 Cleared test data');
 };
 
 // Function to get current user privilege for debugging
-export const getCurrentUserPrivilege = (): string | null => {
-    try {
-        const userData = localStorage.getItem('currentUser');
-        if (userData) {
-            const user = JSON.parse(userData);
-            return user.privilege || null;
-        }
-        return null;
-    } catch (error) {
-        console.error('Error getting user privilege:', error);
-        return null;
-    }
+export const getCurrentUserPrivilegeDebug = (): string | null => {
+    const userData = getUserDataCache();
+    return userData?.privilege || null;
 };
 
 // Function to check if a specific page should be visible
diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts
index 0bf3aa1..3c4ff31 100644
--- a/src/hooks/useApi.ts
+++ b/src/hooks/useApi.ts
@@ -134,7 +134,7 @@ export function useApiRequest<RequestData = any, ResponseData = any>() {
         hasResponse: !!error.response,
         hasRequest: !!error.request,
         isAborted: error.code === 'ERR_CANCELED',
-        authAuthority: localStorage.getItem('auth_authority'),
+        authAuthority: sessionStorage.getItem('auth_authority'),
         hasCookies: document.cookie.includes('access_token') || document.cookie.includes('refresh_token')
       });
       
diff --git a/src/hooks/useAuthentication.ts b/src/hooks/useAuthentication.ts
index e74ba18..3e6b29d 100644
--- a/src/hooks/useAuthentication.ts
+++ b/src/hooks/useAuthentication.ts
@@ -5,6 +5,7 @@ import api from '../api';
 import { useApiRequest } from './useApi';
 import { addCSRFTokenToHeaders } from '../utils/csrfUtils';
 import { getApiBaseUrl } from '../../config/config';
+import { setUserDataCache, clearUserDataCache } from '../utils/userCache';
 
 // Regular authentication
 interface LoginResponse {
@@ -40,15 +41,6 @@ export function useAuth() {
       // Add CSRF token if available (for new security implementation)
       addCSRFTokenToHeaders(headers);
 
-      // Log the request details for debugging
-      console.log('🔍 Login request details:', {
-        url: '/api/local/login',
-        headers: headers,
-        hasParams: !!params,
-        paramsSize: params.toString().length,
-        paramsContent: params.toString()
-      });
-
       // Use the existing api instance with custom headers for this request
       const response = await api.post('/api/local/login', params, {
         headers
@@ -57,29 +49,20 @@ export function useAuth() {
       // Tokens are automatically set in httpOnly cookies by backend
       if (response.data.type === 'local_auth_success') {
         if (response.data.authenticationAuthority) {
-          localStorage.setItem('auth_authority', response.data.authenticationAuthority);
+          // Use sessionStorage for non-sensitive routing hint (cleared when tab closes)
+          sessionStorage.setItem('auth_authority', response.data.authenticationAuthority);
         }
         
-        console.log('✅ Local authentication successful - tokens set in httpOnly cookies');
-        
         // CRITICAL: Immediately fetch user data after successful login
         try {
-          console.log('🔄 Fetching user data immediately after login...');
           const userResponse = await api.get('/api/local/me');
           
           if (userResponse.data) {
-            // Cache user data in localStorage for privilege checkers and language
-            localStorage.setItem('currentUser', JSON.stringify(userResponse.data));
-            
-            console.log('✅ User data fetched and cached:', {
-              username: userResponse.data.username,
-              privilege: userResponse.data.privilege,
-              language: userResponse.data.language
-            });
+            // Cache user data in sessionStorage (cleared on tab close - more secure than localStorage)
+            setUserDataCache(userResponse.data);
           }
         } catch (userError) {
-          console.error('❌ Failed to fetch user data after login:', userError);
-          // Don't block login flow, but log the error
+          console.error('Failed to fetch user data after login:', userError);
         }
         
         return response.data;
@@ -88,28 +71,7 @@ export function useAuth() {
     } catch (error: any) {
       let errorMessage = 'An error occurred during login';
       
-      console.error('❌ Login error details:', {
-        status: error.response?.status,
-        statusText: error.response?.statusText,
-        data: error.response?.data,
-        message: error.message,
-        headers: error.response?.headers,
-        config: {
-          url: error.config?.url,
-          method: error.config?.method,
-          headers: error.config?.headers
-        }
-      });
-
-      // Additional debugging for CSRF-related errors
-      if (error.response?.status === 500) {
-        console.error('🚨 500 Error - Possible causes:');
-        console.error('1. Backend CSRF validation not implemented');
-        console.error('2. Backend expecting different CSRF token format');
-        console.error('3. Backend server error');
-        console.error('4. Check backend logs for detailed error information');
-        console.error('💡 To temporarily bypass CSRF, set CSRF_BYPASS_FOR_TESTING = true in csrfUtils.ts');
-      }
+      console.error('Login error:', error);
       
       if (error.response) {
         // Handle different error response formats
@@ -169,34 +131,23 @@ export function useMsalAuth() {
     try {
       return new Promise((resolve, reject) => {
         const backendUrl = getApiBaseUrl();
-        const loginUrl = `${backendUrl}/api/msft/login?state=login`;
         
-        console.log('🔐 Starting MSAL authentication...');
-        console.log('🌐 Backend URL:', backendUrl);
-        console.log('🔗 Login URL:', loginUrl);
-        console.log('🍪 Current cookies before auth:', document.cookie || 'No cookies');
-
-        // Open popup to backend Microsoft login route
-        console.log('🚀 Opening Microsoft auth popup...');
+        // Open popup window
         const popup = window.open(
-          loginUrl,
-          'msft-login',
-          'width=500,height=600,scrollbars=yes,resizable=yes,top=100,left=100'
+          `${backendUrl}/api/msft/login?state=login`,
+          'microsoft-login',
+          'width=600,height=700,left=100,top=100'
         );
-        
-        console.log('🪟 Popup window object:', popup ? 'Created successfully' : 'Failed to create');
 
         if (!popup) {
           const errorMsg = 'Popup was blocked by browser. Please allow popups for this site and try again.';
-          console.error('❌ Popup blocked:', errorMsg);
+          console.error('Popup blocked:', errorMsg);
           setMsalError(errorMsg);
           setIsMsalLoading(false);
           reject(new Error('Popup was blocked'));
           return;
         }
 
-        console.log('✅ Popup opened successfully');
-
         // Listen for messages from the popup
         const messageListener = (event: MessageEvent) => {
           // Filter out React DevTools messages
@@ -206,95 +157,51 @@ export function useMsalAuth() {
             return; // Ignore React DevTools messages
           }
           
-          console.log('📨 Received message from Microsoft auth popup:', {
-            origin: event.origin,
-            data: event.data,
-            dataType: typeof event.data,
-            hasType: !!event.data?.type,
-            messageKeys: event.data ? Object.keys(event.data) : 'No data object',
-            timestamp: new Date().toISOString()
-          });
-          
-          // Verify origin for security
+          // Verify the message origin for security (should match backend origin)
           const apiUrl = new URL(backendUrl);
           if (event.origin !== apiUrl.origin) {
-            console.warn('⚠️ Message from unauthorized origin:', event.origin, 'Expected:', apiUrl.origin);
+            console.warn('Message from unauthorized origin:', event.origin, 'Expected:', apiUrl.origin);
             return;
           }
 
           if (event.data.type === 'msft_auth_success') {
-            console.log('✅ MSAL authentication successful');
-            console.log('📋 Full event data received:', event.data);
+            console.log('Login successful!');
+            const tokenData = event.data.token_data;
             
-            // Store debug info in localStorage for persistence across navigation
-            const debugInfo = {
-              timestamp: new Date().toISOString(),
-              eventData: event.data,
-              eventDataKeys: Object.keys(event.data),
-              hasAuthenticationAuthority: !!event.data.authenticationAuthority,
-              cookiesBeforeAuth: document.cookie || 'No cookies',
-              authFlow: 'msft_popup_success'
-            };
-            localStorage.setItem('msft_auth_debug', JSON.stringify(debugInfo));
+            // Store the token FIRST
+            localStorage.setItem('authToken', tokenData.tokenAccess);
             
-                // Tokens are automatically set in httpOnly cookies by backend
-                if (event.data.authenticationAuthority) {
-                  localStorage.setItem('auth_authority', event.data.authenticationAuthority);
-                  console.log('✅ Auth authority set:', event.data.authenticationAuthority);
-                } else {
-                  // Fallback: set 'msft' as the auth authority for Microsoft login
-                  localStorage.setItem('auth_authority', 'msft');
-                  console.log('⚠️ authenticationAuthority not in event data, setting fallback: msft');
-                  console.log('📋 Available event.data properties:', Object.keys(event.data));
+            // Set auth authority
+            if (event.data.authenticationAuthority) {
+              sessionStorage.setItem('auth_authority', event.data.authenticationAuthority);
+            } else {
+              sessionStorage.setItem('auth_authority', 'msft');
+            }
+            
+            // Configure axios to use the token
+            api.defaults.headers.common['Authorization'] = `Bearer ${tokenData.tokenAccess}`;
+            
+            // NOW fetch user data with proper authentication
+            setTimeout(async () => {
+              try {
+                const userResponse = await api.get('/api/msft/me');
+                if (userResponse.data) {
+                  setUserDataCache(userResponse.data);
                 }
-                
-                console.log('✅ Microsoft authentication successful - tokens set in httpOnly cookies');
-                
-                // CRITICAL: Immediately fetch user data after successful login
-                // Wait a bit for cookies to be properly set
-                setTimeout(async () => {
-                  try {
-                    console.log('🔄 Fetching user data immediately after Microsoft login...');
-                    const userResponse = await api.get('/api/msft/me');
-                    
-                    if (userResponse.data) {
-                      // Cache user data in localStorage for privilege checkers and language
-                      localStorage.setItem('currentUser', JSON.stringify(userResponse.data));
-                      
-                      console.log('✅ User data fetched and cached:', {
-                        username: userResponse.data.username,
-                        privilege: userResponse.data.privilege,
-                        language: userResponse.data.language
-                      });
-                    }
-                  } catch (userError) {
-                    console.error('❌ Failed to fetch user data after Microsoft login:', userError);
-                    // Store debug info
-                    const allCookies = document.cookie;
-                    const hasAccessToken = allCookies.includes('access_token');
-                    const hasRefreshToken = allCookies.includes('refresh_token');
-                    const cookieInfo = {
-                      allCookies: allCookies || 'No cookies visible',
-                      hasAccessToken,
-                      hasRefreshToken,
-                      authAuthority: localStorage.getItem('auth_authority'),
-                      timestamp: new Date().toISOString(),
-                      userFetchError: userError
-                    };
-                    localStorage.setItem('msft_cookie_debug', JSON.stringify(cookieInfo));
-                    console.log('🍪 Cookie check after Microsoft auth:', cookieInfo);
-                  }
-                }, 500);
-
+              } catch (userError) {
+                console.error('Failed to fetch user data after Microsoft login:', userError);
+              }
+            }, 100); // Reduced timeout since we're not waiting for cookies
+            
             // Clean up
             window.removeEventListener('message', messageListener);
             popup.close();
             setIsMsalLoading(false);
-
+            
             // Resolve with the response data
             resolve(event.data);
           } else if (event.data.type === 'msft_connection_error') {
-            console.error('❌ MSAL connection error:', event.data.error);
+            console.error('Login failed:', event.data.error);
             // Handle error
             window.removeEventListener('message', messageListener);
             popup.close();
@@ -307,50 +214,19 @@ export function useMsalAuth() {
         // Add message listener
         window.addEventListener('message', messageListener);
 
-        // Handle popup closing without completing auth
-        let popupClosedManually = false;
-        const checkClosed = setInterval(() => {
+        // Optional: Check if popup was closed without completing auth
+        const checkPopup = setInterval(() => {
           if (popup.closed) {
-            clearInterval(checkClosed);
+            clearInterval(checkPopup);
             window.removeEventListener('message', messageListener);
             setIsMsalLoading(false);
-            
-            if (!popupClosedManually) {
-              console.warn('⚠️ Popup was closed before authentication completed');
-              setMsalError('Authentication was cancelled - popup was closed before completing login');
-            } else {
-              console.log('ℹ️ Popup closed after successful authentication');
-            }
-            
-            if (!popupClosedManually) {
-              reject(new Error('Authentication was cancelled'));
-            }
+            setMsalError('Authentication was cancelled - popup was closed before completing login');
+            reject(new Error('Authentication was cancelled'));
           }
         }, 1000);
-
-        // Set a timeout to detect if popup doesn't load
-        const loadTimeout = setTimeout(() => {
-          if (!popup.closed) {
-            console.warn('⚠️ Popup did not load within 10 seconds');
-            popup.close();
-            clearInterval(checkClosed);
-            window.removeEventListener('message', messageListener);
-            setIsMsalLoading(false);
-            setMsalError('Authentication timeout - please check your internet connection and try again');
-            reject(new Error('Authentication timeout'));
-          }
-        }, 60000);
-
-        // Override popup.close to mark as manually closed
-        const originalClose = popup.close;
-        popup.close = function() {
-          popupClosedManually = true;
-          clearTimeout(loadTimeout);
-          return originalClose.call(this);
-        };
       });
     } catch (error: any) {
-      console.error('❌ MSAL authentication error:', error);
+      console.error('MSAL authentication error:', error);
       setMsalError(error.message || 'Microsoft authentication failed');
       setIsMsalLoading(false);
       throw error;
@@ -487,322 +363,102 @@ export function useGoogleAuth() {
     try {
       return new Promise((resolve, reject) => {
         const backendUrl = getApiBaseUrl();
-        const loginUrl = `${backendUrl}/api/google/login`;
         
-        console.log('🔐 Starting Google authentication...');
-        console.log('🌐 Backend URL:', backendUrl);
-        console.log('🔗 Login URL:', loginUrl);
+        // Open popup window
+        const popup = window.open(
+          `${backendUrl}/api/google/login?state=login`,
+          'google-login',
+          'width=600,height=700,left=100,top=100'
+        );
 
-        // First, get the Google login URL from the backend using fetch to avoid CORS issues
-        fetch(`${backendUrl}/api/google/login`, {
-          method: 'GET',
-          mode: 'cors',
-          credentials: 'include',
-          headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-          },
-          redirect: 'manual' // Don't follow redirects
-        })
-          .then(response => {
-            console.log('📡 Backend response:', response);
-            console.log('📊 Response status:', response.status);
-            console.log('📊 Response type:', response.type);
-            console.log('📊 Response headers:', response.headers);
+        if (!popup) {
+          const errorMsg = 'Popup was blocked by browser. Please allow popups for this site and try again.';
+          console.error('Popup blocked:', errorMsg);
+          setGoogleError(errorMsg);
+          setIsGoogleLoading(false);
+          reject(new Error('Popup was blocked'));
+          return;
+        }
+
+        // Listen for messages from the popup
+        const messageListener = (event: MessageEvent) => {
+          // Filter out React DevTools messages
+          if (event.data?.source?.includes('react-devtools') || 
+              event.data?.source?.includes('devtools') ||
+              event.data?.hello === true) {
+            return; // Ignore React DevTools messages
+          }
+          
+          // Verify the message origin for security (should match backend origin)
+          const apiUrl = new URL(backendUrl);
+          if (event.origin !== apiUrl.origin) {
+            console.warn('Message from unauthorized origin:', event.origin, 'Expected:', apiUrl.origin);
+            return;
+          }
+
+          if (event.data.type === 'google_auth_success') {
+            console.log('Login successful!');
+            const tokenData = event.data.token_data;
             
-            // Check if it's a redirect response
-            if (response.status === 0 || response.type === 'opaque') {
-              // This might be a CORS issue, try to get the redirect URL from the response
-              console.log('🔄 CORS/Redirect detected, trying to extract URL from response');
-              
-              // Try to read the response as text to get the redirect URL
-              return response.text().then(text => {
-                console.log('📄 Response text:', text);
-                
-                // Look for redirect URL in the response
-                const urlMatch = text.match(/https:\/\/accounts\.google\.com\/o\/oauth2\/auth[^"'\s]*/);
-                if (urlMatch) {
-                  return { login_url: urlMatch[0] };
-                }
-                
-                // If no URL found in text, try to construct it from the error
-                throw new Error('Could not extract Google OAuth URL from response');
-              });
-            } else if (response.status >= 200 && response.status < 300) {
-              // Normal JSON response
-              return response.json();
-            } else if (response.status >= 300 && response.status < 400) {
-              // Redirect response
-              const location = response.headers.get('location');
-              console.log('🔄 Redirect location:', location);
-              if (location) {
-                return { login_url: location };
-              }
-              throw new Error('Redirect response without location header');
+            // Store the token FIRST
+            localStorage.setItem('authToken', tokenData.tokenAccess);
+            
+            // Set auth authority
+            if (event.data.authenticationAuthority) {
+              sessionStorage.setItem('auth_authority', event.data.authenticationAuthority);
             } else {
-              throw new Error(`HTTP error! status: ${response.status}`);
+              sessionStorage.setItem('auth_authority', 'google');
             }
-          })
-          .then(data => {
-            console.log('📄 Response data:', data);
             
-            if (data.login_url) {
-              // Open popup with the Google login URL
-              const popup = window.open(
-                data.login_url,
-                'google-login',
-                'width=500,height=600,scrollbars=yes,resizable=yes,top=100,left=100'
-              );
-
-              if (!popup) {
-                const errorMsg = 'Popup was blocked by browser. Please allow popups for this site and try again.';
-                console.error('❌ Popup blocked:', errorMsg);
-                setGoogleError(errorMsg);
-                setIsGoogleLoading(false);
-                reject(new Error('Popup was blocked'));
-                return;
-              }
-
-              console.log('✅ Popup opened successfully');
-
-              // Listen for messages from the popup
-              const messageListener = (event: MessageEvent) => {
-                console.log('📨 Received message from popup:', event.origin, event.data);
-                
-                // Verify origin for security
-                const apiUrl = new URL(backendUrl);
-                if (event.origin !== apiUrl.origin) {
-                  console.warn('⚠️ Message from unauthorized origin:', event.origin, 'Expected:', apiUrl.origin);
-                  return;
-                }
-
-                if (event.data.type === 'google_auth_success') {
-                  console.log('✅ Google authentication successful');
-                  console.log('📋 Full event data received:', event.data);
-                  
-                  // Tokens are automatically set in httpOnly cookies by backend
-                  if (event.data.authenticationAuthority) {
-                    localStorage.setItem('auth_authority', event.data.authenticationAuthority);
-                    console.log('✅ Auth authority set:', event.data.authenticationAuthority);
-                  } else {
-                    // Fallback: set 'google' as the auth authority for Google login
-                    localStorage.setItem('auth_authority', 'google');
-                    console.log('⚠️ authenticationAuthority not in event data, setting fallback: google');
-                    console.log('📋 Available event.data properties:', Object.keys(event.data));
-                  }
-                  
-                  console.log('✅ Google authentication successful - tokens set in httpOnly cookies');
-
-                  // Clean up
-                  window.removeEventListener('message', messageListener);
-                  popup.close();
-                  setIsGoogleLoading(false);
-
-                  // Resolve with the response data
-                  resolve(event.data);
-                } else if (event.data.type === 'google_connection_error') {
-                  console.error('❌ Google connection error:', event.data.error);
-                  // Handle error
-                  window.removeEventListener('message', messageListener);
-                  popup.close();
-                  setIsGoogleLoading(false);
-                  setGoogleError(event.data.error || 'Google authentication failed');
-                  reject(new Error(event.data.error || 'Google authentication failed'));
-                }
-              };
-
-              // Add message listener
-              window.addEventListener('message', messageListener);
-
-              // Handle popup closing without completing auth
-              let popupClosedManually = false;
-              const checkClosed = setInterval(() => {
-                if (popup.closed) {
-                  clearInterval(checkClosed);
-                  window.removeEventListener('message', messageListener);
-                  setIsGoogleLoading(false);
-                  
-                  if (!popupClosedManually) {
-                    console.warn('⚠️ Popup was closed before authentication completed');
-                    setGoogleError('Authentication was cancelled - popup was closed before completing login');
-                  } else {
-                    console.log('ℹ️ Popup closed after successful authentication');
-                  }
-                  
-                  if (!popupClosedManually) {
-                    reject(new Error('Authentication was cancelled'));
-                  }
-                }
-              }, 1000);
-
-              // Set a timeout to detect if popup doesn't load
-              const loadTimeout = setTimeout(() => {
-                if (!popup.closed) {
-                  console.warn('⚠️ Popup did not load within 60 seconds');
-                  popup.close();
-                  clearInterval(checkClosed);
-                  window.removeEventListener('message', messageListener);
-                  setIsGoogleLoading(false);
-                  setGoogleError('Authentication timeout - please check your internet connection and try again');
-                  reject(new Error('Authentication timeout'));
-                }
-              }, 60000);
-
-              // Override popup.close to mark as manually closed
-              const originalClose = popup.close;
-              popup.close = function() {
-                popupClosedManually = true;
-                clearTimeout(loadTimeout);
-                return originalClose.call(this);
-              };
-            } else {
-              throw new Error('No login URL received from backend');
-            }
-          })
-          .catch(error => {
-            console.error('❌ Failed to get Google login URL:', error);
-            console.log('🔄 Attempting fallback approach...');
+            // Configure axios to use the token
+            api.defaults.headers.common['Authorization'] = `Bearer ${tokenData.tokenAccess}`;
             
-            // Fallback: Try to construct the Google OAuth URL directly
-            // This is a temporary solution until the backend is fixed
-            const fallbackGoogleUrl = `${backendUrl}/api/google/login`;
-            console.log('🔄 Using fallback URL:', fallbackGoogleUrl);
+            // NOW fetch user data with proper authentication
+            setTimeout(async () => {
+              try {
+                const userResponse = await api.get('/api/google/me');
+                if (userResponse.data) {
+                  setUserDataCache(userResponse.data);
+                }
+              } catch (userError) {
+                console.error('Failed to fetch user data after Google login:', userError);
+              }
+            }, 100); // Reduced timeout since we're not waiting for cookies
             
-            // Open popup with the fallback URL (let the backend handle the redirect)
-            const popup = window.open(
-              fallbackGoogleUrl,
-              'google-login',
-              'width=500,height=600,scrollbars=yes,resizable=yes,top=100,left=100'
-            );
+            // Clean up
+            window.removeEventListener('message', messageListener);
+            popup.close();
+            setIsGoogleLoading(false);
+            
+            // Resolve with the response data
+            resolve(event.data);
+          } else if (event.data.type === 'google_connection_error') {
+            console.error('Login failed:', event.data.error);
+            // Handle error
+            window.removeEventListener('message', messageListener);
+            popup.close();
+            setIsGoogleLoading(false);
+            setGoogleError(event.data.error || 'Google authentication failed');
+            reject(new Error(event.data.error || 'Google authentication failed'));
+          }
+        };
 
-            if (!popup) {
-              const errorMsg = 'Popup was blocked by browser. Please allow popups for this site and try again.';
-              console.error('❌ Popup blocked:', errorMsg);
-              setGoogleError(errorMsg);
-              setIsGoogleLoading(false);
-              reject(new Error('Popup was blocked'));
-              return;
-            }
+        // Add message listener
+        window.addEventListener('message', messageListener);
 
-            console.log('✅ Popup opened successfully with fallback URL');
-
-            // Listen for messages from the popup
-            const messageListener = (event: MessageEvent) => {
-              console.log('📨 Received message from popup:', event.origin, event.data);
-              
-              // Verify origin for security
-              const apiUrl = new URL(backendUrl);
-              if (event.origin !== apiUrl.origin) {
-                console.warn('⚠️ Message from unauthorized origin:', event.origin, 'Expected:', apiUrl.origin);
-                return;
-              }
-
-              if (event.data.type === 'google_auth_success') {
-                console.log('✅ Google authentication successful');
-                console.log('📋 Full event data received:', event.data);
-                
-                // Tokens are automatically set in httpOnly cookies by backend
-                if (event.data.authenticationAuthority) {
-                  localStorage.setItem('auth_authority', event.data.authenticationAuthority);
-                  console.log('✅ Auth authority set:', event.data.authenticationAuthority);
-                } else {
-                  // Fallback: set 'google' as the auth authority for Google login
-                  localStorage.setItem('auth_authority', 'google');
-                  console.log('⚠️ authenticationAuthority not in event data, setting fallback: google');
-                  console.log('📋 Available event.data properties:', Object.keys(event.data));
-                }
-                
-                console.log('✅ Google authentication successful - tokens set in httpOnly cookies');
-                
-                // CRITICAL: Immediately fetch user data after successful login
-                // Wait a bit for cookies to be properly set
-                setTimeout(async () => {
-                  try {
-                    console.log('🔄 Fetching user data immediately after Google login...');
-                    const userResponse = await api.get('/api/google/me');
-                    
-                    if (userResponse.data) {
-                      // Cache user data in localStorage for privilege checkers and language
-                      localStorage.setItem('currentUser', JSON.stringify(userResponse.data));
-                      
-                      console.log('✅ User data fetched and cached:', {
-                        username: userResponse.data.username,
-                        privilege: userResponse.data.privilege,
-                        language: userResponse.data.language
-                      });
-                    }
-                  } catch (userError) {
-                    console.error('❌ Failed to fetch user data after Google login:', userError);
-                    // Don't block login flow, but log the error
-                  }
-                }, 500);
-
-                // Clean up
-                window.removeEventListener('message', messageListener);
-                popup.close();
-                setIsGoogleLoading(false);
-
-                // Resolve with the response data
-                resolve(event.data);
-              } else if (event.data.type === 'google_connection_error') {
-                console.error('❌ Google connection error:', event.data.error);
-                // Handle error
-                window.removeEventListener('message', messageListener);
-                popup.close();
-                setIsGoogleLoading(false);
-                setGoogleError(event.data.error || 'Google authentication failed');
-                reject(new Error(event.data.error || 'Google authentication failed'));
-              }
-            };
-
-            // Add message listener
-            window.addEventListener('message', messageListener);
-
-            // Handle popup closing without completing auth
-            let popupClosedManually = false;
-            const checkClosed = setInterval(() => {
-              if (popup.closed) {
-                clearInterval(checkClosed);
-                window.removeEventListener('message', messageListener);
-                setIsGoogleLoading(false);
-                
-                if (!popupClosedManually) {
-                  console.warn('⚠️ Popup was closed before authentication completed');
-                  setGoogleError('Authentication was cancelled - popup was closed before completing login');
-                } else {
-                  console.log('ℹ️ Popup closed after successful authentication');
-                }
-                
-                if (!popupClosedManually) {
-                  reject(new Error('Authentication was cancelled'));
-                }
-              }
-            }, 1000);
-
-            // Set a timeout to detect if popup doesn't load
-            const loadTimeout = setTimeout(() => {
-              if (!popup.closed) {
-                console.warn('⚠️ Popup did not load within 60 seconds');
-                popup.close();
-                clearInterval(checkClosed);
-                window.removeEventListener('message', messageListener);
-                setIsGoogleLoading(false);
-                setGoogleError('Authentication timeout - please check your internet connection and try again');
-                reject(new Error('Authentication timeout'));
-              }
-            }, 60000);
-
-            // Override popup.close to mark as manually closed
-            const originalClose = popup.close;
-            popup.close = function() {
-              popupClosedManually = true;
-              clearTimeout(loadTimeout);
-              return originalClose.call(this);
-            };
-          });
+        // Optional: Check if popup was closed without completing auth
+        const checkPopup = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkPopup);
+            window.removeEventListener('message', messageListener);
+            setIsGoogleLoading(false);
+            setGoogleError('Authentication was cancelled - popup was closed before completing login');
+            reject(new Error('Authentication was cancelled'));
+          }
+        }, 1000);
       });
     } catch (error: any) {
-      console.error('❌ Google authentication error:', error);
+      console.error('Google authentication error:', error);
       setGoogleError(error.message || 'Google authentication failed');
       setIsGoogleLoading(false);
       throw error;
@@ -937,15 +593,17 @@ export function useLogout() {
       // Call logout endpoint to clear JWT tokens on server
       await api.post('/api/local/logout');
       
-      console.log('✅ Logout API call completed, waiting for browser to process cookies...');
+
       
       // CRITICAL: Wait for browser to process Set-Cookie headers from logout response
       // This gives the browser time to clear httpOnly cookies before redirect
       await new Promise(resolve => setTimeout(resolve, 1000));
       
-      // Clear all authentication-related localStorage items
-      localStorage.removeItem('currentUser');
-      localStorage.removeItem('auth_authority');
+      // Clear user data cache from sessionStorage
+      clearUserDataCache();
+      
+      // Clear auth authority from sessionStorage
+      sessionStorage.removeItem('auth_authority');
       
       // Clear MSAL cache tokens from localStorage
       // MSAL stores tokens with keys starting with 'msal.'
@@ -964,14 +622,10 @@ export function useLogout() {
         }
       }
       keysToRemove.forEach(key => {
-        console.log('🗑️ Removing token:', key);
+
         localStorage.removeItem(key);
       });
       
-      // Clear debug items and other auth-related data
-      localStorage.removeItem('msft_auth_debug');
-      localStorage.removeItem('msft_cookie_debug');
-      
       // Clear ALL MSAL cache data (including account keys, token keys, version)
       const msalKeysToRemove = [];
       for (let i = 0; i < localStorage.length; i++) {
@@ -981,7 +635,7 @@ export function useLogout() {
         }
       }
       msalKeysToRemove.forEach(key => {
-        console.log('🗑️ Removing MSAL cache:', key);
+
         localStorage.removeItem(key);
       });
       
@@ -990,23 +644,22 @@ export function useLogout() {
       
       // Clear cookies as backup (in case backend doesn't clear them properly)
       // Note: This only works for cookies that are accessible to JavaScript
-      console.log('🍪 Checking cookies for cleanup...');
-      console.log('🍪 All cookies:', document.cookie);
+
       
       const cookies = document.cookie.split(";");
-      console.log('🍪 Cookie count:', cookies.length);
+
       
       cookies.forEach(function(c) { 
         const cookieName = c.split("=")[0].trim();
-        console.log('🍪 Checking cookie:', cookieName);
+
         
         if (cookieName === 'auth_token' || cookieName === 'refresh_token' || cookieName.includes('token') || cookieName.includes('msal')) {
-          console.log('🗑️ Clearing cookie:', cookieName);
+
           document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
         }
       });
       
-      console.log('🍪 Cookies after cleanup attempt:', document.cookie);
+
       
       // Redirect to login page
       window.location.href = '/login?logout=true';
@@ -1020,8 +673,8 @@ export function useLogout() {
       setError(errorMessage);
       
       // Even if logout fails on server, clear local data and redirect
-      localStorage.removeItem('currentUser');
-      localStorage.removeItem('auth_authority');
+      clearUserDataCache();
+      sessionStorage.removeItem('auth_authority');
       
       // Clear MSAL cache tokens from localStorage
       const keysToRemove = [];
@@ -1039,14 +692,10 @@ export function useLogout() {
         }
       }
       keysToRemove.forEach(key => {
-        console.log('🗑️ Removing token (error case):', key);
+
         localStorage.removeItem(key);
       });
       
-      // Clear debug items and other auth-related data
-      localStorage.removeItem('msft_auth_debug');
-      localStorage.removeItem('msft_cookie_debug');
-      
       // Clear ALL MSAL cache data (including account keys, token keys, version)
       const msalKeysToRemove = [];
       for (let i = 0; i < localStorage.length; i++) {
@@ -1056,7 +705,7 @@ export function useLogout() {
         }
       }
       msalKeysToRemove.forEach(key => {
-        console.log('🗑️ Removing MSAL cache (error case):', key);
+
         localStorage.removeItem(key);
       });
       
@@ -1067,7 +716,7 @@ export function useLogout() {
       document.cookie.split(";").forEach(function(c) { 
         const cookieName = c.split("=")[0].trim();
         if (cookieName === 'auth_token' || cookieName === 'refresh_token' || cookieName.includes('token') || cookieName.includes('msal')) {
-          console.log('🗑️ Clearing cookie (error case):', cookieName);
+
           document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
         }
       });
@@ -1097,7 +746,7 @@ export function useCurrentUser() {
 
     try {
       // Determine the correct endpoint based on authentication authority
-      const authAuthority = localStorage.getItem('auth_authority');
+      const authAuthority = sessionStorage.getItem('auth_authority');
       let endpoint = '/api/local/me';
       
       if (authAuthority === 'msft') {
@@ -1106,10 +755,14 @@ export function useCurrentUser() {
         endpoint = '/api/google/me';
       }
       
-      console.log('🔍 Fetching user data from:', endpoint, 'auth authority:', authAuthority);
+    
       
       const response = await api.get(endpoint);
       setUser(response.data);
+      
+      // Cache user data in sessionStorage (cleared on tab close - more secure than localStorage)
+      setUserDataCache(response.data);
+      
       return response.data;
     } catch (error: any) {
       let errorMessage = 'Failed to get current user';
diff --git a/src/hooks/useConnections.ts b/src/hooks/useConnections.ts
index df1ed6f..3a37b3c 100644
--- a/src/hooks/useConnections.ts
+++ b/src/hooks/useConnections.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useApiRequest } from './useApi';
 import { getApiBaseUrl } from '../../config/config';
 
@@ -39,6 +39,8 @@ export interface ConnectResponse {
 // Hook for managing connections
 export function useConnections() {
   const [connections, setConnections] = useState<Connection[]>([]);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [connectError, setConnectError] = useState<string | null>(null);
   const { request, isLoading, error } = useApiRequest<any, any>();
 
   // Fetch all connections
@@ -57,6 +59,11 @@ export function useConnections() {
     }
   };
 
+  // Automatically fetch connections on mount
+  useEffect(() => {
+    fetchConnections();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Create a new connection
   const createConnection = async (connectionData: CreateConnectionData): Promise<Connection> => {
     try {
@@ -201,6 +208,257 @@ export function useConnections() {
     }
   };
 
+  // Connect with popup (OAuth flow)
+  const connectWithPopup = async (connectionId: string): Promise<void> => {
+    setIsConnecting(true);
+    setConnectError(null);
+
+    try {
+      // Get the OAuth URL from backend
+      const response = await connectService(connectionId);
+      if (!response.authUrl) {
+        throw new Error('No OAuth URL received from backend');
+      }
+
+      console.log('OAuth URL from backend:', response.authUrl);
+
+      return new Promise((resolve, reject) => {
+        // Convert relative URL to absolute URL if needed
+        let authUrl = response.authUrl;
+        if (authUrl.startsWith('/')) {
+          authUrl = `${getApiBaseUrl()}${authUrl}`;
+        }
+
+        // Open popup
+        const popup = window.open(
+          authUrl,
+          'oauth-connect',
+          'width=500,height=600,scrollbars=yes,resizable=yes'
+        );
+
+        if (!popup) {
+          setConnectError('Popup was blocked. Please allow popups and try again.');
+          setIsConnecting(false);
+          reject(new Error('Popup was blocked'));
+          return;
+        }
+
+        // Handle popup closing without completing auth
+        const checkClosed = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            setIsConnecting(false);
+            console.log('OAuth popup closed');
+            // Refresh connections anyway in case it succeeded
+            fetchConnections();
+            resolve(); // Resolve instead of reject to avoid error on normal close
+          }
+        }, 1000);
+
+        // Listen for messages from the popup
+        const messageListener = (event: MessageEvent) => {
+          // Verify origin for security
+          const apiUrl = new URL(getApiBaseUrl());
+          if (event.origin !== apiUrl.origin) {
+            return;
+          }
+
+          if (event.data.type === 'msft_connection_success' || event.data.type === 'google_connection_success') {
+            // Clean up
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            popup.close();
+            setIsConnecting(false);
+            console.log('OAuth connection successful');
+            // Refresh connections
+            fetchConnections();
+            resolve();
+          } else if (event.data.type === 'msft_connection_error' || event.data.type === 'google_connection_error') {
+            // Handle error
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            popup.close();
+            setIsConnecting(false);
+            setConnectError(event.data.error || 'OAuth connection failed');
+            reject(new Error(event.data.error || 'OAuth connection failed'));
+          }
+        };
+
+        // Add message listener
+        window.addEventListener('message', messageListener);
+      });
+    } catch (error: any) {
+      setConnectError(error.message || 'OAuth connection failed');
+      setIsConnecting(false);
+      throw error;
+    }
+  };
+
+  // Create Google connection and open OAuth popup
+  const createGoogleConnectionAndAuth = async (): Promise<void> => {
+    try {
+      // Step 1: Create a Google connection
+      const newConnection = await createConnection({
+        type: 'google',
+        authority: 'google'
+      });
+      
+      // Step 2: Get the OAuth URL from backend for this specific connection
+      const connectResponse = await request({
+        url: `/api/connections/${newConnection.id}/connect`,
+        method: 'post'
+      });
+      
+      if (!connectResponse.authUrl) {
+        throw new Error('No OAuth URL received from backend');
+      }
+      
+      // Step 3: Open popup to the OAuth URL
+      const apiBaseUrl = getApiBaseUrl();
+      let authUrl = connectResponse.authUrl;
+      if (authUrl.startsWith('/')) {
+        authUrl = `${apiBaseUrl}${authUrl}`;
+      }
+      
+      return new Promise((resolve, reject) => {
+        const popup = window.open(
+          authUrl,
+          'google-connection',
+          'width=500,height=600,scrollbars=yes,resizable=yes'
+        );
+
+        if (!popup) {
+          reject(new Error('Popup was blocked. Please allow popups and try again.'));
+          return;
+        }
+
+        // Handle popup closing without completing auth
+        const checkClosed = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            console.log('Google OAuth popup closed');
+            // Refresh connections in case it succeeded
+            fetchConnections();
+            resolve();
+          }
+        }, 1000);
+
+        // Listen for messages from the popup
+        const messageListener = (event: MessageEvent) => {
+          // Verify origin for security
+          const apiUrl = new URL(apiBaseUrl);
+          if (event.origin !== apiUrl.origin) {
+            return;
+          }
+
+          if (event.data.type === 'google_connection_success' || event.data.type === 'google_auth_success') {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            popup.close();
+            console.log('Google connection successful');
+            // Refresh connections
+            fetchConnections();
+            resolve();
+          } else if (event.data.type === 'google_connection_error') {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            popup.close();
+            reject(new Error(event.data.error || 'Google connection failed'));
+          }
+        };
+
+        window.addEventListener('message', messageListener);
+      });
+    } catch (error) {
+      console.error('Error creating Google connection:', error);
+      throw error;
+    }
+  };
+
+  // Create Microsoft connection and open OAuth popup
+  const createMicrosoftConnectionAndAuth = async (): Promise<void> => {
+    try {
+      // Step 1: Create a Microsoft connection
+      const newConnection = await createConnection({
+        type: 'msft',
+        authority: 'msft'
+      });
+      
+      // Step 2: Get the OAuth URL from backend for this specific connection
+      const connectResponse = await request({
+        url: `/api/connections/${newConnection.id}/connect`,
+        method: 'post'
+      });
+      
+      if (!connectResponse.authUrl) {
+        throw new Error('No OAuth URL received from backend');
+      }
+      
+      // Step 3: Open popup to the OAuth URL
+      const apiBaseUrl = getApiBaseUrl();
+      let authUrl = connectResponse.authUrl;
+      if (authUrl.startsWith('/')) {
+        authUrl = `${apiBaseUrl}${authUrl}`;
+      }
+      
+      return new Promise((resolve, reject) => {
+        const popup = window.open(
+          authUrl,
+          'msft-connection',
+          'width=500,height=600,scrollbars=yes,resizable=yes'
+        );
+
+        if (!popup) {
+          reject(new Error('Popup was blocked. Please allow popups and try again.'));
+          return;
+        }
+
+        // Handle popup closing without completing auth
+        const checkClosed = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            console.log('Microsoft OAuth popup closed');
+            // Refresh connections in case it succeeded
+            fetchConnections();
+            resolve();
+          }
+        }, 1000);
+
+        // Listen for messages from the popup
+        const messageListener = (event: MessageEvent) => {
+          // Verify origin for security
+          const apiUrl = new URL(apiBaseUrl);
+          if (event.origin !== apiUrl.origin) {
+            return;
+          }
+
+          if (event.data.type === 'msft_connection_success' || event.data.type === 'msft_auth_success') {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            popup.close();
+            console.log('Microsoft connection successful');
+            // Refresh connections
+            fetchConnections();
+            resolve();
+          } else if (event.data.type === 'msft_connection_error') {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageListener);
+            popup.close();
+            reject(new Error(event.data.error || 'Microsoft connection failed'));
+          }
+        };
+
+        window.addEventListener('message', messageListener);
+      });
+    } catch (error) {
+      console.error('Error creating Microsoft connection:', error);
+      throw error;
+    }
+  };
+
   return {
     connections,
     fetchConnections,
@@ -211,8 +469,12 @@ export function useConnections() {
     deleteConnection,
     refreshMicrosoftToken,
     refreshGoogleToken,
+    connectWithPopup,
+    createGoogleConnectionAndAuth,
+    createMicrosoftConnectionAndAuth,
     isLoading,
-    error
+    isConnecting,
+    error: error || connectError
   };
 }
 
diff --git a/src/hooks/useFiles.ts b/src/hooks/useFiles.ts
index bcd93e4..6b09eee 100644
--- a/src/hooks/useFiles.ts
+++ b/src/hooks/useFiles.ts
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import api from '../api';
-import { MessageOverlay } from '../components/ui';
-import type { MessageMode } from '../components/ui';
-import { useLanguage } from '../contexts/LanguageContext';
+import { MessageOverlay } from '../components/UiComponents';
+import type { MessageMode } from '../components/UiComponents';
+import { useLanguage } from '../providers/language/LanguageContext';
 
 // File interfaces - exactly matching backend FileItem model
 export interface FileInfo {
@@ -38,17 +38,6 @@ export function useUserFiles() {
       setLoading(true);
       setError(null);
       
-      
-      // Debug: Check what auth headers are being sent
-      const authData = localStorage.getItem('auth_data');
-      if (authData) {
-        try {
-          JSON.parse(authData);
-        } catch (e) {
-          console.error('❌ Failed to parse auth_data:', e);
-        }
-      }
-      
       const response = await api.get('/api/files/list');
       const data = response.data;
             
@@ -138,16 +127,7 @@ export function useUserFiles() {
       
       setFiles(mappedFiles);
     } catch (error: any) {
-      console.error('❌ Error fetching files:', error);
-      console.error('❌ Error details:', {
-        message: error.message,
-        status: error.response?.status,
-        statusText: error.response?.statusText,
-        data: error.response?.data,
-        url: error.config?.url,
-        headers: error.config?.headers
-      });
-      
+      console.error('Error fetching files:', error);
       setError(error.message || 'Failed to fetch files');
       
       // Provide informative placeholder when CORS blocks the request
@@ -167,21 +147,9 @@ export function useUserFiles() {
         setFiles([]);
       }
       
-      // Check for authentication errors
-      if (error.response?.status === 401) {
-        console.error('🔐 Authentication failed for files API - JWT token might be invalid or expired');
-        const authData = localStorage.getItem('auth_data');
-        const authAuthority = localStorage.getItem('auth_authority');
-        console.error('🔐 Current auth state:', { 
-          hasAuthData: !!authData, 
-          authAuthority,
-          authDataLength: authData?.length 
-        });
-      } else if (error.response?.status === 403) {
-        console.error('🚫 Access forbidden for files API - user might not have permission');
-      } else if (error.message === 'Keine Antwort vom Server erhalten') {
-        console.error('🌐 CORS or network error - backend might not be responding or CORS is blocking');
-      }
+      // Authentication and authorization errors are logged above
+    } finally {
+      setLoading(false);
     }
   }, []); // Only re-create if dependencies change
 
@@ -416,19 +384,6 @@ export function useFileOperations() {
       });
       const fileData = response.data;
       
-      console.log('✅ Upload successful:', fileData);
-      console.log('📤 Upload response details:', {
-        status: response.status,
-        statusText: response.statusText,
-        headers: response.headers,
-        data: response.data,
-        config: {
-          url: response.config.url,
-          method: response.config.method,
-          headers: response.config.headers
-        }
-      });
-      
       // Check if the response indicates a duplicate file
       if (fileData && fileData.isDuplicate && fileData.message) {
         const fileName = fileData.originalFileName || file.name;
@@ -459,16 +414,8 @@ export function useFileOperations() {
       
       return { success: true, fileData };
     } catch (error: any) {
-      console.error('❌ Upload failed:', {
-        error: error,
-        message: error.message,
-        response: error.response,
-        status: error.response?.status,
-        statusText: error.response?.statusText,
-        data: error.response?.data
-      });
+      console.error('Upload failed:', error);
       
-      // Provide detailed error analysis for backend team
       let errorMessage = error.message;
       
       if (error.response?.status === 500) {
@@ -479,8 +426,6 @@ export function useFileOperations() {
         }
       }
       
-      console.error('❌ Upload error details:', error);
-      
       setUploadError(errorMessage);
       return { success: false, error: errorMessage };
     } finally {
@@ -520,15 +465,7 @@ export function useFileOperations() {
       
       return { success: true, fileData: updatedFile };
     } catch (error: any) {
-      console.error(`❌ Update failed for file ID ${fileId}:`, {
-        error,
-        message: error.message,
-        response: error.response,
-        status: error.response?.status,
-        statusText: error.response?.statusText,
-        data: error.response?.data,
-        updateData
-      });
+      console.error(`Update failed for file ID ${fileId}:`, error);
       
       let errorMessage = error.message;
       
diff --git a/src/hooks/usePek.ts b/src/hooks/usePek.ts
new file mode 100644
index 0000000..6dc4297
--- /dev/null
+++ b/src/hooks/usePek.ts
@@ -0,0 +1,675 @@
+import { useState, useCallback } from 'react';
+import api from '../api';
+import type { MapPoint, ParcelGeometry } from '../components/UiComponents/MapView';
+import { wgs84ToLV95 } from '../components/UiComponents/MapView/LV95Converter';
+
+// Parcel search response interfaces
+export interface ParcelSearchResponse {
+  parcel: {
+    id: string;
+    egrid?: string;
+    number?: string;
+    name?: string;
+    identnd?: string;
+    canton?: string;
+    municipality_code?: number;
+    municipality_name?: string;
+    address?: string;
+    perimeter?: {
+      closed: boolean;
+      punkte: Array<{
+        koordinatensystem: string;
+        x: number;
+        y: number;
+        z: number | null;
+      }>;
+    };
+    area_m2?: number;
+    centroid?: { x: number; y: number };
+    geoportal_url?: string;
+    realestate_type?: string | null;
+  };
+  map_view: {
+    center: { x: number; y: number };
+    zoom_bounds: {
+      min_x: number;
+      min_y: number;
+      max_x: number;
+      max_y: number;
+    };
+    geometry_geojson: {
+      type: string;
+      geometry: {
+        type: string;
+        coordinates: number[][][];
+      };
+      properties: {
+        id: string;
+        egrid?: string;
+        number?: string;
+      };
+    };
+  };
+  adjacent_parcels?: Array<{
+    id: string;
+    egrid?: string;
+    number?: string;
+  }>;
+}
+
+// Command response interface
+export interface CommandResponse {
+  success: boolean;
+  intent?: string;
+  entity?: string;
+  result?: any;
+  error?: string;
+}
+
+// Project interfaces
+export interface Projekt {
+  id: string;
+  mandateId?: string;
+  label: string;
+  statusProzess?: string;
+  perimeter?: any;
+  baulinie?: any;
+  parzellen?: any[];
+  dokumente?: any[];
+  kontextInformationen?: any[];
+}
+
+export interface CreateProjektResponse {
+  projekt: Projekt;
+  parzellen?: any[];
+}
+
+export interface AddParcelResponse {
+  projekt: Projekt;
+  parzelle: any;
+}
+
+// Main PEK hook
+export function usePek() {
+  // Location input state - separate fields
+  const [kanton, setKanton] = useState<string>('');
+  const [gemeinde, setGemeinde] = useState<string>('');
+  const [adresse, setAdresse] = useState<string>('');
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+  const [locationError, setLocationError] = useState<string | null>(null);
+  
+  // Legacy locationInput for backward compatibility (combines fields)
+  const locationInput = [kanton, gemeinde, adresse].filter(Boolean).join(', ');
+  const setLocationInput = (value: string) => {
+    // Parse combined input if needed (for map clicks, etc.)
+    const parts = value.split(',').map(p => p.trim());
+    if (parts.length >= 3) {
+      setKanton(parts[0]);
+      setGemeinde(parts[1]);
+      setAdresse(parts.slice(2).join(', '));
+    } else {
+      setAdresse(value);
+    }
+  };
+
+  // Parcel search state
+  const [selectedParcel, setSelectedParcel] = useState<ParcelSearchResponse | null>(null);
+  const [isSearchingParcel, setIsSearchingParcel] = useState(false);
+  const [parcelSearchError, setParcelSearchError] = useState<string | null>(null);
+
+  // Map view state
+  const [mapCenter, setMapCenter] = useState<MapPoint | null>(null);
+  const [mapZoomBounds, setMapZoomBounds] = useState<{
+    min_x: number;
+    min_y: number;
+    max_x: number;
+    max_y: number;
+  } | null>(null);
+  const [parcelGeometries, setParcelGeometries] = useState<ParcelGeometry[]>([]);
+
+  // Command processing state
+  const [commandInput, setCommandInput] = useState<string>('');
+  const [isProcessingCommand, setIsProcessingCommand] = useState(false);
+  const [commandResults, setCommandResults] = useState<any[]>([]);
+  const [commandError, setCommandError] = useState<string | null>(null);
+
+  // Project state
+  const [currentProjekt, setCurrentProjekt] = useState<Projekt | null>(null);
+  const [isCreatingProjekt, setIsCreatingProjekt] = useState(false);
+  const [isAddingParcel, setIsAddingParcel] = useState(false);
+  const [projektError, setProjektError] = useState<string | null>(null);
+
+  // Panel state
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+
+  /**
+   * Get current geolocation and directly search for parcel
+   * Does not fill input fields, directly makes the request
+   */
+  const useCurrentLocation = useCallback(async () => {
+    setIsGettingLocation(true);
+    setLocationError(null);
+
+    try {
+      if (!navigator.geolocation) {
+        throw new Error('Geolocation wird von Ihrem Browser nicht unterstützt');
+      }
+
+      return new Promise<void>((resolve, reject) => {
+        navigator.geolocation.getCurrentPosition(
+          async (position) => {
+            try {
+              // Convert WGS84 to LV95 using the converter function
+              const lat = position.coords.latitude;
+              const lon = position.coords.longitude;
+
+              const lv95 = wgs84ToLV95(lat, lon);
+              const locationString = `${Math.round(lv95.x)},${Math.round(lv95.y)}`;
+              
+              // Directly search for parcel without updating input fields
+              await searchParcel(locationString, true);
+              resolve();
+            } catch (err: any) {
+              setLocationError(err.message || 'Fehler beim Konvertieren der Koordinaten');
+              reject(err);
+            }
+          },
+          (error) => {
+            let errorMessage = 'Fehler beim Abrufen der Position';
+            switch (error.code) {
+              case error.PERMISSION_DENIED:
+                errorMessage = 'Zugriff auf Standort wurde verweigert';
+                break;
+              case error.POSITION_UNAVAILABLE:
+                errorMessage = 'Standortinformationen nicht verfügbar';
+                break;
+              case error.TIMEOUT:
+                errorMessage = 'Zeitüberschreitung beim Abrufen der Position';
+                break;
+            }
+            setLocationError(errorMessage);
+            reject(new Error(errorMessage));
+          },
+          {
+            enableHighAccuracy: true,
+            timeout: 10000,
+            maximumAge: 0
+          }
+        );
+      });
+    } catch (err: any) {
+      setLocationError(err.message || 'Fehler beim Abrufen der aktuellen Position');
+      throw err;
+    } finally {
+      setIsGettingLocation(false);
+    }
+  }, []);
+
+  /**
+   * Search for parcel by location (address or coordinates)
+   * Always includes adjacent parcels by default
+   */
+  const searchParcel = useCallback(async (location: string, includeAdjacent: boolean = true) => {
+    if (!location.trim()) {
+      setParcelSearchError('Bitte geben Sie einen Standort ein');
+      return;
+    }
+
+    setIsSearchingParcel(true);
+    setParcelSearchError(null);
+
+    try {
+      const response = await api.get('/api/realestate/parcel/search', {
+        params: {
+          location: location.trim(),
+          include_adjacent: includeAdjacent
+        }
+      });
+
+      const data: ParcelSearchResponse = response.data;
+
+      // Debug logging
+      if (import.meta.env.DEV) {
+        console.log('📦 Parcel search response:', {
+          hasMapView: !!data.map_view,
+          hasGeometry: !!data.map_view?.geometry_geojson,
+          hasPerimeter: !!data.parcel.perimeter,
+          adjacentCount: data.adjacent_parcels?.length || 0
+        });
+      }
+
+      // Update selected parcel
+      setSelectedParcel(data);
+      
+      // Open panel when parcel is found
+      setIsPanelOpen(true);
+
+      // Update map center and zoom bounds
+      if (data.map_view) {
+        setMapCenter(data.map_view.center);
+        setMapZoomBounds(data.map_view.zoom_bounds);
+
+        // Convert parcel data to geometries
+        const geometries: ParcelGeometry[] = [];
+
+        // Main parcel - use geometry_geojson if available, otherwise use perimeter.punkte
+        let mainParcelCoordinates: MapPoint[] = [];
+
+        if (data.map_view.geometry_geojson?.geometry?.coordinates) {
+          // GeoJSON format: coordinates is an array of coordinate arrays
+          // For Polygon: coordinates[0] is the outer ring
+          const coords = data.map_view.geometry_geojson.geometry.coordinates[0];
+          if (Array.isArray(coords)) {
+            mainParcelCoordinates = coords.map((coord: number[]) => ({
+              x: coord[0], // Longitude/X in LV95
+              y: coord[1]  // Latitude/Y in LV95
+            }));
+          }
+        } else if (data.parcel.perimeter?.punkte) {
+          // Fallback to perimeter.punkte
+          mainParcelCoordinates = data.parcel.perimeter.punkte.map((p) => ({
+            x: p.x,
+            y: p.y
+          }));
+        }
+
+        if (mainParcelCoordinates.length > 0) {
+          geometries.push({
+            id: data.parcel.id,
+            egrid: data.parcel.egrid,
+            number: data.parcel.number,
+            coordinates: mainParcelCoordinates,
+            isSelected: true,
+            isAdjacent: false
+          });
+        }
+
+        // Adjacent parcels (if available)
+        // Fetch geometries for adjacent parcels
+        if (data.adjacent_parcels && includeAdjacent && data.adjacent_parcels.length > 0) {
+          // Fetch geometries for each adjacent parcel
+          const adjacentPromises = data.adjacent_parcels.map(async (adjacent) => {
+            try {
+              // Search for the adjacent parcel by its ID or EGRID
+              const searchLocation = adjacent.egrid || adjacent.id || adjacent.number;
+              if (!searchLocation) {
+                if (import.meta.env.DEV) {
+                  console.warn(`⚠️ Adjacent parcel ${adjacent.id} has no search location`);
+                }
+                return null;
+              }
+
+              if (import.meta.env.DEV) {
+                console.log(`🔍 Fetching geometry for adjacent parcel: ${searchLocation}`);
+              }
+
+              const adjResponse = await api.get('/api/realestate/parcel/search', {
+                params: {
+                  location: searchLocation,
+                  include_adjacent: false // Don't fetch adjacent of adjacent
+                }
+              });
+
+              const adjData: ParcelSearchResponse = adjResponse.data;
+              let adjCoordinates: MapPoint[] = [];
+
+              // Extract coordinates from adjacent parcel
+              if (adjData.map_view?.geometry_geojson?.geometry?.coordinates) {
+                const coords = adjData.map_view.geometry_geojson.geometry.coordinates[0];
+                if (Array.isArray(coords)) {
+                  adjCoordinates = coords.map((coord: number[]) => ({
+                    x: coord[0],
+                    y: coord[1]
+                  }));
+                }
+              } else if (adjData.parcel.perimeter?.punkte) {
+                adjCoordinates = adjData.parcel.perimeter.punkte.map((p) => ({
+                  x: p.x,
+                  y: p.y
+                }));
+              }
+
+              if (import.meta.env.DEV) {
+                console.log(`✅ Fetched ${adjCoordinates.length} coordinates for adjacent parcel ${adjacent.id}`);
+              }
+
+              return {
+                id: adjacent.id,
+                egrid: adjacent.egrid,
+                number: adjacent.number,
+                coordinates: adjCoordinates,
+                isSelected: false,
+                isAdjacent: true
+              };
+            } catch (err) {
+              // If fetching fails, log error but don't add parcel
+              if (import.meta.env.DEV) {
+                console.error(`❌ Failed to fetch geometry for adjacent parcel ${adjacent.id}:`, err);
+              }
+              return null;
+            }
+          });
+
+          // Wait for all adjacent parcel geometries
+          const adjacentGeometries = await Promise.all(adjacentPromises);
+          const validAdjacentGeometries = adjacentGeometries.filter(
+            (g): g is ParcelGeometry => g !== null && g.coordinates.length >= 3
+          );
+          
+          if (import.meta.env.DEV) {
+            console.log(`📦 Adjacent parcels summary:`, {
+              requested: data.adjacent_parcels.length,
+              fetched: adjacentGeometries.filter(g => g !== null).length,
+              valid: validAdjacentGeometries.length,
+              geometries: validAdjacentGeometries.map(g => ({
+                id: g.id,
+                number: g.number,
+                coordCount: g.coordinates.length
+              }))
+            });
+          }
+          
+          // Add adjacent parcels to geometries array
+          geometries.push(...validAdjacentGeometries);
+        }
+
+        // Update parcel geometries with all parcels (main + adjacent)
+        setParcelGeometries(geometries);
+        
+        if (import.meta.env.DEV) {
+          console.log(`🗺️ Total geometries to display: ${geometries.length}`, {
+            main: geometries.filter(g => g.isSelected).length,
+            adjacent: geometries.filter(g => g.isAdjacent).length
+          });
+        }
+      } else {
+        // If no map_view, still try to use parcel data
+        if (data.parcel.perimeter?.punkte) {
+          const coordinates = data.parcel.perimeter.punkte.map((p) => ({
+            x: p.x,
+            y: p.y
+          }));
+
+          setParcelGeometries([{
+            id: data.parcel.id,
+            egrid: data.parcel.egrid,
+            number: data.parcel.number,
+            coordinates,
+            isSelected: true,
+            isAdjacent: false
+          }]);
+
+          // Set center from centroid if available
+          if (data.parcel.centroid) {
+            setMapCenter(data.parcel.centroid);
+          }
+        }
+      }
+
+      return { success: true, data };
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data?.detail || err.message || 'Fehler beim Suchen der Parzelle';
+      setParcelSearchError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setIsSearchingParcel(false);
+    }
+  }, []);
+
+  /**
+   * Handle map click - search for parcel at clicked coordinates
+   */
+  const handleMapClick = useCallback(
+    async (point: MapPoint) => {
+      const locationString = `${point.x},${point.y}`;
+      setLocationInput(locationString);
+      await searchParcel(locationString, true); // Always include adjacent parcels
+    },
+    [searchParcel]
+  );
+
+  /**
+   * Handle parcel click on map
+   */
+  const handleParcelClick = useCallback(async (parcelId: string) => {
+    // Re-search for this specific parcel with adjacent parcels
+    if (selectedParcel) {
+      const locationString = selectedParcel.parcel.centroid
+        ? `${selectedParcel.parcel.centroid.x},${selectedParcel.parcel.centroid.y}`
+        : locationInput;
+      await searchParcel(locationString, true);
+    }
+  }, [selectedParcel, locationInput, searchParcel]);
+
+  /**
+   * Process natural language command
+   */
+  const processCommand = useCallback(async (userInput: string) => {
+    if (!userInput.trim()) {
+      setCommandError('Bitte geben Sie einen Befehl ein');
+      return;
+    }
+
+    setIsProcessingCommand(true);
+    setCommandError(null);
+
+    // Add user message
+    const userMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      message: userInput.trim(),
+      timestamp: Date.now()
+    };
+    setCommandResults((prev) => [...prev, userMessage]);
+
+    try {
+      const response = await api.post('/api/realestate/command', {
+        userInput: userInput.trim()
+      });
+
+      const data: CommandResponse = response.data;
+
+      // Format response as assistant message
+      let responseMessage = '';
+      if (data.success) {
+        if (data.result) {
+          if (typeof data.result === 'object') {
+            responseMessage = `**Intent:** ${data.intent || 'Unknown'}\n**Entity:** ${data.entity || 'N/A'}\n\n**Result:**\n\`\`\`json\n${JSON.stringify(data.result, null, 2)}\n\`\`\``;
+          } else {
+            responseMessage = `**Intent:** ${data.intent || 'Unknown'}\n**Entity:** ${data.entity || 'N/A'}\n\n**Result:** ${data.result}`;
+          }
+        } else {
+          responseMessage = `Command executed successfully.\n**Intent:** ${data.intent || 'Unknown'}\n**Entity:** ${data.entity || 'N/A'}`;
+        }
+      } else {
+        responseMessage = `Error: ${data.error || 'Unknown error'}`;
+      }
+
+      const assistantMessage = {
+        id: `assistant-${Date.now()}`,
+        role: 'assistant',
+        message: responseMessage,
+        timestamp: Date.now()
+      };
+      setCommandResults((prev) => [...prev, assistantMessage]);
+
+      // Clear input on success
+      setCommandInput('');
+
+      return { success: true, data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to send command';
+      setCommandError(errorMessage);
+
+      // Add error message
+      const errorMsg = {
+        id: `error-${Date.now()}`,
+        role: 'assistant',
+        message: `**Error:** ${errorMessage}`,
+        timestamp: Date.now()
+      };
+      setCommandResults((prev) => [...prev, errorMsg]);
+
+      return { success: false, error: errorMessage };
+    } finally {
+      setIsProcessingCommand(false);
+    }
+  }, []);
+
+  /**
+   * Create a new project
+   */
+  const createProjekt = useCallback(
+    async (data: {
+      label: string;
+      statusProzess?: string;
+      location?: string;
+      parcelIds?: string[];
+    }) => {
+      setIsCreatingProjekt(true);
+      setProjektError(null);
+
+      try {
+        const requestBody: any = {
+          label: data.label
+        };
+
+        if (data.statusProzess) {
+          requestBody.statusProzess = data.statusProzess;
+        }
+
+        if (data.location) {
+          requestBody.location = data.location;
+        }
+
+        if (data.parcelIds && data.parcelIds.length > 0) {
+          requestBody.parcelIds = data.parcelIds;
+        }
+
+        const response = await api.post('/api/realestate/projekt/create', requestBody);
+        const result: CreateProjektResponse = response.data;
+
+        setCurrentProjekt(result.projekt);
+        return { success: true, data: result };
+      } catch (err: any) {
+        const errorMessage =
+          err.response?.data?.detail || err.message || 'Fehler beim Erstellen des Projekts';
+        setProjektError(errorMessage);
+        return { success: false, error: errorMessage };
+      } finally {
+        setIsCreatingProjekt(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Add a parcel to an existing project
+   */
+  const addParcelToProjekt = useCallback(
+    async (
+      projektId: string,
+      data: {
+        parcelId?: string;
+        location?: string;
+        parcelData?: Record<string, any>;
+      }
+    ) => {
+      if (!currentProjekt || currentProjekt.id !== projektId) {
+        setProjektError('Projekt nicht gefunden');
+        return { success: false, error: 'Projekt nicht gefunden' };
+      }
+
+      setIsAddingParcel(true);
+      setProjektError(null);
+
+      try {
+        const requestBody: any = {};
+
+        if (data.parcelId) {
+          requestBody.parcelId = data.parcelId;
+        } else if (data.location) {
+          requestBody.location = data.location;
+        } else if (data.parcelData) {
+          requestBody.parcelData = data.parcelData;
+        } else {
+          throw new Error('Bitte geben Sie parcelId, location oder parcelData an');
+        }
+
+        const response = await api.post(
+          `/api/realestate/projekt/${projektId}/add-parcel`,
+          requestBody
+        );
+        const result: AddParcelResponse = response.data;
+
+        setCurrentProjekt(result.projekt);
+        return { success: true, data: result };
+      } catch (err: any) {
+        const errorMessage =
+          err.response?.data?.detail || err.message || 'Fehler beim Hinzufügen der Parzelle';
+        setProjektError(errorMessage);
+        return { success: false, error: errorMessage };
+      } finally {
+        setIsAddingParcel(false);
+      }
+    },
+    [currentProjekt]
+  );
+
+  // Build location string from separate fields
+  const buildLocationString = useCallback(() => {
+    const parts = [kanton, gemeinde, adresse].filter(Boolean);
+    return parts.join(', ');
+  }, [kanton, gemeinde, adresse]);
+
+  return {
+    // Location input - separate fields
+    kanton,
+    setKanton,
+    gemeinde,
+    setGemeinde,
+    adresse,
+    setAdresse,
+    buildLocationString,
+    // Legacy locationInput for backward compatibility
+    locationInput,
+    setLocationInput,
+    useCurrentLocation,
+    isGettingLocation,
+    locationError,
+
+    // Parcel search
+    selectedParcel,
+    searchParcel,
+    isSearchingParcel,
+    parcelSearchError,
+
+    // Map view
+    mapCenter,
+    mapZoomBounds,
+    parcelGeometries,
+    handleMapClick,
+    handleParcelClick,
+
+    // Command processing
+    commandInput,
+    setCommandInput,
+    processCommand,
+    isProcessingCommand,
+    commandResults,
+    commandError,
+
+    // Project management
+    currentProjekt,
+    createProjekt,
+    isCreatingProjekt,
+    addParcelToProjekt,
+    isAddingParcel,
+    projektError,
+
+    // Panel state
+    isPanelOpen,
+    setIsPanelOpen
+  };
+}
diff --git a/src/hooks/usePekTables.ts b/src/hooks/usePekTables.ts
new file mode 100644
index 0000000..7bd264c
--- /dev/null
+++ b/src/hooks/usePekTables.ts
@@ -0,0 +1,264 @@
+import { useState, useCallback, useEffect } from 'react';
+import api from '../api';
+
+// Table list response interface
+export interface TableInfo {
+  name: string;
+  description: string;
+  model: string;
+}
+
+export interface TablesListResponse {
+  tables: TableInfo[];
+  count: number;
+}
+
+// Command response interface
+export interface CommandResponse {
+  success: boolean;
+  intent: string;
+  entity: string;
+  result: any;
+  message?: string;
+}
+
+// Table data response interface
+export interface TableDataResponse {
+  items: any[];
+  pagination: {
+    currentPage: number;
+    pageSize: number;
+    totalItems: number;
+    totalPages: number;
+    sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
+    filters?: any;
+  } | null;
+}
+
+// Message interface for chat
+export interface PekMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  message: string;
+  timestamp: Date;
+  data?: any;
+}
+
+export function usePekTables() {
+  // Tables list state - initialize as empty array
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [isLoadingTables, setIsLoadingTables] = useState(false);
+  const [tablesError, setTablesError] = useState<string | null>(null);
+
+  // Selected table state
+  const [selectedTable, setSelectedTable] = useState<string>('');
+  const [tableData, setTableData] = useState<any[]>([]);
+  const [isLoadingTableData, setIsLoadingTableData] = useState(false);
+  const [tableDataError, setTableDataError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState<TableDataResponse['pagination']>(null);
+
+  // Command state
+  const [commandInput, setCommandInput] = useState<string>('');
+  const [isProcessingCommand, setIsProcessingCommand] = useState(false);
+  const [commandError, setCommandError] = useState<string | null>(null);
+  const [messages, setMessages] = useState<PekMessage[]>([]);
+
+  /**
+   * Load list of available tables
+   */
+  const loadTables = useCallback(async () => {
+    setIsLoadingTables(true);
+    setTablesError(null);
+
+    try {
+      const response = await api.get('/api/realestate/tables');
+      const data: TablesListResponse = response.data;
+      setTables(data.tables || []);
+
+      // Auto-select first table if available
+      if (data.tables && data.tables.length > 0 && !selectedTable) {
+        setSelectedTable(data.tables[0].model);
+      }
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data?.detail || err.message || 'Fehler beim Laden der Tabellen';
+      setTablesError(errorMessage);
+    } finally {
+      setIsLoadingTables(false);
+    }
+  }, [selectedTable]);
+
+  /**
+   * Load data for a specific table
+   */
+  const loadTableData = useCallback(async (tableName: string, page?: number, pageSize?: number, sort?: Array<{ field: string; direction: 'asc' | 'desc' }>) => {
+    setIsLoadingTableData(true);
+    setTableDataError(null);
+
+    try {
+      const params: any = {};
+      
+      // Build pagination object if provided
+      if (page !== undefined || pageSize !== undefined || sort) {
+        params.pagination = JSON.stringify({
+          page: page || 1,
+          pageSize: pageSize || 10,
+          sort: sort || []
+        });
+      }
+
+      const response = await api.get(`/api/realestate/table/${tableName}`, { params });
+      const data: TableDataResponse = response.data;
+      
+      setTableData(data.items || []);
+      setPagination(data.pagination);
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data?.detail || err.message || `Fehler beim Laden der Tabelle ${tableName}`;
+      setTableDataError(errorMessage);
+    } finally {
+      setIsLoadingTableData(false);
+    }
+  }, []);
+
+  // Load tables list on mount
+  useEffect(() => {
+    loadTables();
+  }, [loadTables]);
+
+  // Load table data when selected table changes
+  useEffect(() => {
+    if (selectedTable) {
+      loadTableData(selectedTable);
+    } else {
+      setTableData([]);
+      setPagination(null);
+    }
+  }, [selectedTable, loadTableData]);
+
+  /**
+   * Process natural language command
+   */
+  const processCommand = useCallback(async (userInput: string) => {
+    if (!userInput.trim()) {
+      setCommandError('Bitte geben Sie einen Befehl ein.');
+      return;
+    }
+
+    setIsProcessingCommand(true);
+    setCommandError(null);
+
+    // Add user message
+    const userMessage: PekMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      message: userInput,
+      timestamp: new Date()
+    };
+    setMessages((prev) => [...prev, userMessage]);
+
+    try {
+      const response = await api.post('/api/realestate/command', {
+        userInput: userInput.trim()
+      });
+
+      const data: CommandResponse = response.data;
+
+      // Add assistant message
+      const assistantMessage: PekMessage = {
+        id: `assistant-${Date.now()}`,
+        role: 'assistant',
+        message: data.message || `Befehl erfolgreich ausgeführt: ${data.intent} ${data.entity}`,
+        timestamp: new Date(),
+        data: data.result
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      // Reload table data if command might have affected it
+      if (selectedTable && (data.intent === 'CREATE' || data.intent === 'UPDATE' || data.intent === 'DELETE')) {
+        await loadTableData(selectedTable);
+      }
+
+      // Clear input
+      setCommandInput('');
+
+      return { success: true, data };
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data?.detail || err.message || 'Fehler beim Verarbeiten des Befehls';
+      setCommandError(errorMessage);
+
+      // Add error message
+      const errorMsg: PekMessage = {
+        id: `error-${Date.now()}`,
+        role: 'assistant',
+        message: `Fehler: ${errorMessage}`,
+        timestamp: new Date()
+      };
+      setMessages((prev) => [...prev, errorMsg]);
+
+      return { success: false, error: errorMessage };
+    } finally {
+      setIsProcessingCommand(false);
+    }
+  }, [selectedTable, loadTableData]);
+
+  /**
+   * Create a new record in the selected table
+   */
+  const createRecord = useCallback(async (tableName: string, data: any) => {
+    try {
+      const response = await api.post(`/api/realestate/table/${tableName}`, data);
+      
+      // Reload table data
+      if (tableName === selectedTable) {
+        await loadTableData(selectedTable);
+      }
+
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data?.detail || err.message || 'Fehler beim Erstellen des Eintrags';
+      return { success: false, error: errorMessage };
+    }
+  }, [selectedTable, loadTableData]);
+
+  /**
+   * Refresh current table data
+   */
+  const refreshTableData = useCallback(() => {
+    if (selectedTable) {
+      loadTableData(selectedTable);
+    }
+  }, [selectedTable, loadTableData]);
+
+  return {
+    // Tables list
+    tables,
+    isLoadingTables,
+    tablesError,
+    loadTables,
+
+    // Selected table
+    selectedTable,
+    setSelectedTable,
+    tableData,
+    isLoadingTableData,
+    tableDataError,
+    pagination,
+    loadTableData,
+    refreshTableData,
+
+    // Commands
+    commandInput,
+    setCommandInput,
+    processCommand,
+    isProcessingCommand,
+    commandError,
+    messages,
+
+    // Create record
+    createRecord
+  };
+}
+
diff --git a/src/hooks/usePlayground.ts b/src/hooks/usePlayground.ts
new file mode 100644
index 0000000..0023fa1
--- /dev/null
+++ b/src/hooks/usePlayground.ts
@@ -0,0 +1,1399 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import type React from 'react';
+import { useApiRequest } from './useApi';
+import { useWorkflowSelection } from '../contexts/WorkflowSelectionContext';
+import { useFileContext } from '../contexts/FileContext';
+import { MessageDocument } from '../components/UiComponents/Messages/MessagesTypes';
+import {
+  type Workflow,
+  type WorkflowMessage,
+  type WorkflowLog,
+  type StartWorkflowRequest,
+  type StartWorkflowResponse,
+  type ChatDataResponse,
+  fetchWorkflows as fetchWorkflowsApi,
+  fetchWorkflowStatus as fetchWorkflowStatusApi,
+  fetchWorkflowMessages as fetchWorkflowMessagesApi,
+  fetchWorkflowLogs as fetchWorkflowLogsApi,
+  startWorkflowApi,
+  stopWorkflowApi,
+  updateWorkflowApi,
+  deleteWorkflowApi,
+  deleteWorkflowsApi,
+  deleteMessageApi,
+  deleteFileFromMessageApi
+} from '../api/workflowApi';
+
+// Re-export types for backward compatibility
+export type {
+  Workflow,
+  WorkflowMessage,
+  WorkflowLog,
+  StartWorkflowRequest,
+  StartWorkflowResponse,
+  ChatDataResponse
+};
+
+export interface UserInputRequest {
+  input: string;
+  files?: any[]; // optional file attachments
+  metadata?: Record<string, any>; // optional metadata
+}
+
+// File interface for workflow context
+export interface WorkflowFile {
+  id: string;
+  fileId: string;
+  fileName: string;
+  fileSize: number;
+  mimeType: string;
+  messageId?: string;
+  source?: 'user_uploaded' | 'ai_created';
+}
+
+// ============================================================================
+// WORKFLOWS LIST HOOK
+// ============================================================================
+
+/**
+ * Hook for fetching all workflows for the current user
+ * Endpoint: GET /api/workflows/
+ */
+export function useWorkflows() {
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [isRefetching, setIsRefetching] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { request } = useApiRequest<null, Workflow[]>();
+  const { selectedWorkflowId, clearWorkflow } = useWorkflowSelection();
+
+  const fetchWorkflows = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      const workflowList = await fetchWorkflowsApi(request);
+      setWorkflows(workflowList);
+    } catch (error: any) {
+      console.error('Error fetching workflows:', error);
+      setError(error.message || 'Failed to fetch workflows');
+      setWorkflows([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [request]);
+
+  useEffect(() => {
+    fetchWorkflows();
+  }, [fetchWorkflows]);
+
+  // Listen for workflow deletion events to refetch workflows list
+  useEffect(() => {
+    const handleWorkflowDeleted = (event: CustomEvent<{ workflowIds: string[] }>) => {
+      const deletedIds = event.detail.workflowIds;
+      
+      // Refetch workflows to update the list
+      fetchWorkflows();
+      
+      // Clear workflow selection if the selected workflow was deleted
+      if (selectedWorkflowId && deletedIds.includes(selectedWorkflowId)) {
+        clearWorkflow();
+      }
+    };
+
+    window.addEventListener('workflowDeleted', handleWorkflowDeleted as EventListener);
+    
+    return () => {
+      window.removeEventListener('workflowDeleted', handleWorkflowDeleted as EventListener);
+    };
+  }, [fetchWorkflows, selectedWorkflowId, clearWorkflow]);
+
+  const refetch = useCallback(async () => {
+    setIsRefetching(true);
+    try {
+      await fetchWorkflows();
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [fetchWorkflows]);
+
+  return { 
+    workflows, 
+    loading, 
+    isRefetching,
+    error, 
+    refetch 
+  };
+}
+
+// ============================================================================
+// WORKFLOW OPERATIONS HOOK
+// ============================================================================
+
+/**
+ * Hook for workflow CRUD operations (create, update, delete, start, stop)
+ * Handles all workflow mutations
+ */
+export function useWorkflowOperations() {
+  const [startingWorkflow, setStartingWorkflow] = useState(false);
+  const [stoppingWorkflows, setStoppingWorkflows] = useState<Set<string>>(new Set());
+  const [updatingWorkflows, setUpdatingWorkflows] = useState<Set<string>>(new Set());
+  const [deletingWorkflows, setDeletingWorkflows] = useState<Set<string>>(new Set());
+  const [deletingMessages, setDeletingMessages] = useState<Set<string>>(new Set());
+  const [deletingFiles, setDeletingFiles] = useState<Set<string>>(new Set());
+  
+  const [startError, setStartError] = useState<string | null>(null);
+  const [stopError, setStopError] = useState<string | null>(null);
+  const [updateError, setUpdateError] = useState<string | null>(null);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [deleteMessageError, setDeleteMessageError] = useState<string | null>(null);
+  const [deleteFileError, setDeleteFileError] = useState<string | null>(null);
+  
+  const { request } = useApiRequest();
+
+  // Helper function to handle delete operations with consistent error handling
+  const handleDeleteOperation = async <T>(
+    operationKey: string,
+    setLoadingSet: React.Dispatch<React.SetStateAction<Set<string>>>,
+    setErrorState: React.Dispatch<React.SetStateAction<string | null>>,
+    operation: () => Promise<T>,
+    errorMessages: { default: string; notFound: string; forbidden: string }
+  ): Promise<{ success: boolean; error?: string }> => {
+    setErrorState(null);
+    setLoadingSet(prev => new Set(prev).add(operationKey));
+    
+    try {
+      await operation();
+      return { success: true };
+    } catch (error: any) {
+      let errorMessage = error.message || errorMessages.default;
+      
+      if (error.response?.status === 404) {
+        errorMessage = errorMessages.notFound;
+        return { success: true }; // Consider 404 as success (already deleted)
+      } else if (error.response?.status === 403) {
+        errorMessage = errorMessages.forbidden;
+      }
+      
+      setErrorState(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoadingSet(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(operationKey);
+        return newSet;
+      });
+    }
+  };
+
+  /**
+   * Start a new workflow or continue an existing one
+   * Endpoint: POST /api/chat/playground/start
+   * Query params: workflowId (optional), workflowMode (default: "Actionplan")
+   */
+  const startWorkflow = async (
+    workflowData: StartWorkflowRequest, 
+    options?: { workflowId?: string; workflowMode?: 'Actionplan' | 'React' }
+  ) => {
+    setStartError(null);
+    setStartingWorkflow(true);
+    
+    try {
+      const response = await startWorkflowApi(request, workflowData, options);
+      return { success: true, data: response };
+    } catch (error: any) {
+      console.error('Failed to start workflow:', error);
+      const errorMessage = error.message || 'Failed to start workflow';
+      setStartError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setStartingWorkflow(false);
+    }
+  };
+
+  /**
+   * Stop a running workflow
+   * Endpoint: POST /api/chat/playground/{workflowId}/stop
+   */
+  const stopWorkflow = async (workflowId: string) => {
+    setStopError(null);
+    setStoppingWorkflows(prev => new Set(prev).add(workflowId));
+    
+    try {
+      await stopWorkflowApi(request, workflowId);
+      return { success: true };
+    } catch (error: any) {
+      console.error(`Failed to stop workflow ${workflowId}:`, error);
+      const errorMessage = error.message || 'Failed to stop workflow';
+      setStopError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setStoppingWorkflows(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(workflowId);
+        return newSet;
+      });
+    }
+  };
+
+  /**
+   * Update workflow properties
+   * Endpoint: PUT /api/workflows/{workflowId}
+   */
+  const updateWorkflow = async (
+    workflowId: string, 
+    updateData: Partial<{ name: string; description?: string; tags?: string[] }>
+  ) => {
+    setUpdateError(null);
+    setUpdatingWorkflows(prev => new Set(prev).add(workflowId));
+    
+    try {
+      const updatedWorkflow = await updateWorkflowApi(request, workflowId, updateData);
+      return { success: true, data: updatedWorkflow };
+    } catch (error: any) {
+      console.error(`Failed to update workflow ${workflowId}:`, error);
+      const errorMessage = error.message || 'Failed to update workflow';
+      setUpdateError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setUpdatingWorkflows(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(workflowId);
+        return newSet;
+      });
+    }
+  };
+
+  /**
+   * Delete a workflow and all associated data
+   * Endpoint: DELETE /api/workflows/{workflowId}
+   */
+  const deleteWorkflow = async (workflowId: string) => {
+    const result = await handleDeleteOperation(
+      workflowId,
+      setDeletingWorkflows,
+      setDeleteError,
+      () => deleteWorkflowApi(request, workflowId),
+      {
+        default: 'Failed to delete workflow',
+        notFound: 'Workflow not found or has already been deleted.',
+        forbidden: 'No permission to delete this workflow.'
+      }
+    );
+    
+    if (!result.success && result.error) {
+      console.error(`Failed to delete workflow ${workflowId}:`, result.error);
+    }
+    
+    return result;
+  };
+
+  /**
+   * Delete multiple workflows
+   */
+  const deleteWorkflows = async (workflowIds: string[]) => {
+    setDeleteError(null);
+    setDeletingWorkflows(prev => {
+      const newSet = new Set(prev);
+      workflowIds.forEach(id => newSet.add(id));
+      return newSet;
+    });
+    
+    try {
+      await deleteWorkflowsApi(request, workflowIds);
+      return { success: true };
+    } catch (error: any) {
+      console.error('Bulk delete failed:', error);
+      setDeleteError(error.message || 'Bulk delete failed');
+      return { success: false, error: error.message };
+    } finally {
+      setDeletingWorkflows(prev => {
+        const newSet = new Set(prev);
+        workflowIds.forEach(id => newSet.delete(id));
+        return newSet;
+      });
+    }
+  };
+
+  /**
+   * Delete a message from a workflow
+   * Endpoint: DELETE /api/workflows/{workflowId}/messages/{messageId}
+   */
+  const deleteMessage = async (workflowId: string, messageId: string) => {
+    const operationKey = `${workflowId}:${messageId}`;
+    const result = await handleDeleteOperation(
+      operationKey,
+      setDeletingMessages,
+      setDeleteMessageError,
+      () => deleteMessageApi(request, workflowId, messageId),
+      {
+        default: 'Failed to delete message',
+        notFound: 'Message not found or has already been deleted.',
+        forbidden: 'No permission to delete this message.'
+      }
+    );
+    
+    if (!result.success && result.error) {
+      console.error(`Failed to delete message ${messageId} from workflow ${workflowId}:`, result.error);
+    }
+    
+    return result;
+  };
+
+  /**
+   * Delete a file reference from a message
+   * Endpoint: DELETE /api/workflows/{workflowId}/messages/{messageId}/files/{fileId}
+   */
+  const deleteFileFromMessage = async (
+    workflowId: string, 
+    messageId: string, 
+    fileId: string
+  ) => {
+    const operationKey = `${workflowId}:${messageId}:${fileId}`;
+    const result = await handleDeleteOperation(
+      operationKey,
+      setDeletingFiles,
+      setDeleteFileError,
+      () => deleteFileFromMessageApi(request, workflowId, messageId, fileId),
+      {
+        default: 'Failed to delete file',
+        notFound: 'File not found or has already been deleted.',
+        forbidden: 'No permission to delete this file.'
+      }
+    );
+    
+    if (!result.success && result.error) {
+      console.error(`Failed to delete file ${fileId} from message ${messageId}:`, result.error);
+    }
+    
+    return result;
+  };
+
+  return {
+    // Loading states
+    startingWorkflow,
+    stoppingWorkflows,
+    updatingWorkflows,
+    deletingWorkflows,
+    deletingMessages,
+    deletingFiles,
+    
+    // Error states
+    startError,
+    stopError,
+    updateError,
+    deleteError,
+    deleteMessageError,
+    deleteFileError,
+    
+    // Operations
+    startWorkflow,
+    stopWorkflow,
+    updateWorkflow,
+    deleteWorkflow,
+    deleteWorkflows,
+    deleteMessage,
+    deleteFileFromMessage
+  };
+}
+
+// ============================================================================
+// WORKFLOW LIFECYCLE HOOK
+// ============================================================================
+
+/**
+ * Hook for managing workflow lifecycle with automatic status polling
+ * Handles starting, stopping, and polling workflow status while running
+ */
+export function useWorkflowLifecycle() {
+  const [workflowId, setWorkflowId] = useState<string | null>(null);
+  const [workflowStatus, setWorkflowStatus] = useState<string>('idle'); // 'idle' | 'running' | 'completed' | 'failed' | 'stopped'
+  const [messages, setMessages] = useState<WorkflowMessage[]>([]);
+  const [logs, setLogs] = useState<WorkflowLog[]>([]);
+  const { startWorkflow, stopWorkflow, startingWorkflow, stoppingWorkflows } = useWorkflowOperations();
+  const { request } = useApiRequest();
+  
+  // Load messages and logs when workflowId exists (even if not running) and poll while running
+  useEffect(() => {
+    if (!workflowId) {
+      // Clear messages and logs if no workflowId
+      setMessages([]);
+      setLogs([]);
+      return;
+    }
+
+    const loadWorkflowData = async () => {
+      try {
+        // Fetch messages, logs, and status separately
+        const [messagesData, logsData, statusData] = await Promise.all([
+          fetchWorkflowMessagesApi(request, workflowId).catch(err => {
+            console.error('Error fetching messages:', err);
+            return [];
+          }),
+          fetchWorkflowLogsApi(request, workflowId).catch(err => {
+            console.error('Error fetching logs:', err);
+            return [];
+          }),
+          fetchWorkflowStatusApi(request, workflowId).catch(err => {
+            console.error('Error fetching status:', err);
+            return null;
+          })
+        ]);
+        
+        // Update messages
+        if (Array.isArray(messagesData)) {
+          // Sort messages by timestamp (publishedAt) first, then by sequenceNr for proper conversation order
+          const sortedMessages = [...messagesData].sort((a, b) => {
+            // Prefer publishedAt (timestamp) for sorting
+            if (a.publishedAt !== undefined && b.publishedAt !== undefined) {
+              return a.publishedAt - b.publishedAt;
+            }
+            // If one has publishedAt and other doesn't, prefer the one with timestamp
+            if (a.publishedAt !== undefined) return -1;
+            if (b.publishedAt !== undefined) return 1;
+            // Fallback to sequenceNr
+            if (a.sequenceNr !== undefined && b.sequenceNr !== undefined) {
+              return a.sequenceNr - b.sequenceNr;
+            }
+            return 0;
+          });
+          setMessages(sortedMessages);
+        } else {
+          // Even if empty, set empty array to ensure state is updated
+          setMessages([]);
+        }
+
+        // Update logs
+        if (Array.isArray(logsData)) {
+          // Sort logs by timestamp or sequence
+          const sortedLogs = [...logsData].sort((a, b) => {
+            if (a.timestamp !== undefined && b.timestamp !== undefined) {
+              return a.timestamp - b.timestamp;
+            }
+            if (a.publishedAt !== undefined && b.publishedAt !== undefined) {
+              return a.publishedAt - b.publishedAt;
+            }
+            if (a.sequenceNr !== undefined && b.sequenceNr !== undefined) {
+              return a.sequenceNr - b.sequenceNr;
+            }
+            return 0;
+          });
+          setLogs(sortedLogs);
+        } else {
+          setLogs([]);
+        }
+
+        // Update workflow status
+        if (statusData?.status) {
+          setWorkflowStatus(statusData.status);
+        }
+      } catch (error) {
+        console.error('Error loading workflow data:', error);
+      }
+    };
+
+    // Load messages, logs, and status immediately when workflowId is set
+    loadWorkflowData();
+
+        // If workflow is running, poll every 2 seconds
+        if (workflowStatus === 'running') {
+          const pollWorkflowData = async () => {
+            try {
+              // Poll separate endpoints for messages, logs, and status
+              const [messagesData, logsData, statusData] = await Promise.all([
+                fetchWorkflowMessagesApi(request, workflowId).catch(err => {
+                  console.error('Error polling messages:', err);
+                  return [];
+                }),
+                fetchWorkflowLogsApi(request, workflowId).catch(err => {
+                  console.error('Error polling logs:', err);
+                  return [];
+                }),
+                fetchWorkflowStatusApi(request, workflowId).catch(err => {
+                  console.error('Error polling status:', err);
+                  return null;
+                })
+              ]);
+              
+              // Update messages
+              if (Array.isArray(messagesData)) {
+                // Sort messages by timestamp (publishedAt) first, then by sequenceNr for proper conversation order
+                const sortedMessages = [...messagesData].sort((a, b) => {
+                  // Prefer publishedAt (timestamp) for sorting
+                  if (a.publishedAt !== undefined && b.publishedAt !== undefined) {
+                    return a.publishedAt - b.publishedAt;
+                  }
+                  // If one has publishedAt and other doesn't, prefer the one with timestamp
+                  if (a.publishedAt !== undefined) return -1;
+                  if (b.publishedAt !== undefined) return 1;
+                  // Fallback to sequenceNr
+                  if (a.sequenceNr !== undefined && b.sequenceNr !== undefined) {
+                    return a.sequenceNr - b.sequenceNr;
+                  }
+                  return 0;
+                });
+                setMessages(sortedMessages);
+              }
+          
+              // Update logs
+              if (Array.isArray(logsData)) {
+                const sortedLogs = [...logsData].sort((a, b) => {
+                  if (a.timestamp !== undefined && b.timestamp !== undefined) {
+                    return a.timestamp - b.timestamp;
+                  }
+                  if (a.publishedAt !== undefined && b.publishedAt !== undefined) {
+                    return a.publishedAt - b.publishedAt;
+                  }
+                  if (a.sequenceNr !== undefined && b.sequenceNr !== undefined) {
+                    return a.sequenceNr - b.sequenceNr;
+                  }
+                  return 0;
+                });
+                setLogs(sortedLogs);
+              }
+          
+              // Update workflow status
+          if (statusData?.status) {
+            const newStatus = statusData.status;
+            setWorkflowStatus(newStatus);
+            
+            // Status change is handled automatically by the dependency array
+          }
+        } catch (error) {
+              console.error('Error polling workflow data:', error);
+          // Don't stop polling on error, might be temporary
+        }
+      };
+      
+      // Poll every 2 seconds while running
+          const intervalId = setInterval(pollWorkflowData, 2000);
+      
+      return () => {
+        clearInterval(intervalId);
+      };
+    }
+  }, [workflowStatus, workflowId, request]);
+  
+  // Start workflow
+  const handleStartWorkflow = useCallback(async (
+    workflowData: StartWorkflowRequest,
+    options?: { workflowMode?: 'Actionplan' | 'React' }
+  ) => {
+    try {
+      const result = await startWorkflow(workflowData, options);
+      
+      if (result.success && result.data) {
+        const workflow = result.data as Workflow;
+        setWorkflowId(workflow.id);
+        setWorkflowStatus(workflow.status || 'running');
+        return { success: true, data: result.data };
+      } else {
+        return { success: false, error: result.error || 'Failed to start workflow' };
+      }
+    } catch (error: any) {
+      console.error('Error starting workflow:', error);
+      return { success: false, error: error.message || 'Failed to start workflow' };
+    }
+  }, [startWorkflow]);
+  
+  // Stop workflow
+  const handleStopWorkflow = useCallback(async () => {
+    if (!workflowId) {
+      return { success: false, error: 'No workflow to stop' };
+    }
+    
+    try {
+      const result = await stopWorkflow(workflowId);
+      
+      if (result.success) {
+        setWorkflowStatus('stopped');
+        // Don't clear workflowId, keep it for reference
+        return { success: true };
+      } else {
+        return { success: false, error: result.error || 'Failed to stop workflow' };
+      }
+    } catch (error: any) {
+      console.error('Error stopping workflow:', error);
+      return { success: false, error: error.message || 'Failed to stop workflow' };
+    }
+  }, [workflowId, stopWorkflow]);
+  
+  // Reset workflow state (call when starting a new workflow after previous one ended)
+  // Note: messages are NOT cleared here - they persist until page refresh or new workflow starts
+  const resetWorkflow = useCallback(() => {
+    setWorkflowId(null);
+    setWorkflowStatus('idle');
+    // Don't clear messages - they persist for user to review
+  }, []);
+  
+  // Select an existing workflow (loads its messages and logs)
+  const selectWorkflow = useCallback(async (workflowIdToSelect: string) => {
+    try {
+      setWorkflowId(workflowIdToSelect);
+      // Status, messages, and logs will be loaded by the useEffect when workflowId changes
+      // Fetch status immediately
+      const statusData = await fetchWorkflowStatusApi(request, workflowIdToSelect).catch(err => {
+        console.error('Error fetching workflow status:', err);
+        return null;
+      });
+      
+      if (statusData?.status) {
+        setWorkflowStatus(statusData.status);
+      }
+    } catch (error: any) {
+      console.error('Error selecting workflow:', error);
+    }
+  }, [request]);
+  
+  const isRunning = workflowStatus === 'running';
+  const isStopping = workflowId ? stoppingWorkflows.has(workflowId) : false;
+  
+  return {
+    workflowId,
+    workflowStatus,
+    isRunning,
+    isStopping,
+    startingWorkflow,
+    messages,
+    logs,
+    startWorkflow: handleStartWorkflow,
+    stopWorkflow: handleStopWorkflow,
+    resetWorkflow,
+    selectWorkflow
+  };
+}
+
+// ============================================================================
+// DASHBOARD INPUT FORM HOOK
+// ============================================================================
+
+/**
+ * Hook for dashboard input form with workflow lifecycle management
+ * Combines input form state with workflow operations
+ */
+export function useDashboardInputForm() {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [pendingFiles, setPendingFiles] = useState<WorkflowFile[]>([]);
+  const [isFileAttachmentPopupOpen, setIsFileAttachmentPopupOpen] = useState(false);
+  const [optimisticMessage, setOptimisticMessage] = useState<WorkflowMessage | null>(null);
+  const { selectedWorkflowId, selectWorkflow: selectWorkflowFromContext, clearWorkflow: clearWorkflowFromContext } = useWorkflowSelection();
+  const {
+    workflowId,
+    workflowStatus,
+    isRunning,
+    isStopping,
+    startingWorkflow,
+    messages,
+    logs,
+    startWorkflow,
+    stopWorkflow,
+    resetWorkflow,
+    selectWorkflow
+  } = useWorkflowLifecycle();
+  
+  // Use central file context for upload/delete operations
+  const fileContext = useFileContext();
+  const { request } = useApiRequest();
+  
+  // Sync context selection with lifecycle hook
+  useEffect(() => {
+    if (selectedWorkflowId && selectedWorkflowId !== workflowId) {
+      selectWorkflow(selectedWorkflowId);
+    }
+  }, [selectedWorkflowId, workflowId, selectWorkflow]);
+  
+  // Fetch workflows for dropdown
+  const { workflows, loading: workflowsLoading, refetch: refetchWorkflows } = useWorkflows();
+  
+  // Extract all unique files from workflow messages and optimistic message
+  // Backend may return files in "documents" or "files" field
+  // Includes files from optimistic message so they appear immediately in connected files list
+  const workflowFiles = useMemo(() => {
+    const fileMap = new Map<string, WorkflowFile>();
+    
+    // Create a set of pending file IDs for quick lookup
+    const pendingFileIds = new Set(pendingFiles.map(f => f.fileId));
+    
+    // Helper function to add files from a message to the map
+    const addFilesFromMessage = (message: WorkflowMessage, messageId: string) => {
+      // Check both "documents" and "files" fields for backward compatibility
+      const documents = (message as any).documents as MessageDocument[] | undefined;
+      const files = (message as any).files as any[] | undefined;
+      
+      // Process documents field
+      if (documents && Array.isArray(documents)) {
+        documents.forEach((doc: MessageDocument) => {
+          // Skip if fileId is missing or invalid
+          if (!doc.fileId || doc.fileId.trim() === '') {
+            return;
+          }
+          // Use fileId as unique key - don't override if already exists
+          if (!fileMap.has(doc.fileId)) {
+            // If file is in pending files, it's user uploaded, otherwise assume AI created
+            const source = pendingFileIds.has(doc.fileId) ? 'user_uploaded' : 'ai_created';
+            fileMap.set(doc.fileId, {
+              id: doc.id || doc.fileId,
+              fileId: doc.fileId,
+              fileName: doc.fileName || 'Unknown File',
+              fileSize: doc.fileSize || 0,
+              mimeType: doc.mimeType || 'application/octet-stream',
+              messageId: doc.messageId || messageId,
+              source
+            });
+          }
+        });
+      }
+      
+      // Process files field (alternative backend format)
+      if (files && Array.isArray(files)) {
+        files.forEach((file: any) => {
+          const fileId = file.id || file.fileId;
+          if (!fileId || fileId.trim() === '') {
+            return;
+          }
+          if (!fileMap.has(fileId)) {
+            const source = pendingFileIds.has(fileId) ? 'user_uploaded' : 'ai_created';
+            fileMap.set(fileId, {
+              id: fileId,
+              fileId: fileId,
+              fileName: file.fileName || file.name || 'Unknown File',
+              fileSize: file.fileSize || file.size || 0,
+              mimeType: file.mimeType || file.mime_type || 'application/octet-stream',
+              messageId: messageId,
+              source
+            });
+          }
+        });
+      }
+    };
+    
+    // Add files from backend messages
+    if (messages && messages.length > 0) {
+      messages.forEach((message: WorkflowMessage) => {
+        addFilesFromMessage(message, message.id);
+      });
+    }
+    
+    // Add files from optimistic message (so they appear immediately)
+    if (optimisticMessage) {
+      addFilesFromMessage(optimisticMessage, optimisticMessage.id || 'optimistic');
+    }
+    
+    return Array.from(fileMap.values());
+  }, [messages, pendingFiles, optimisticMessage]);
+
+  // Track which files have already been sent with previous messages
+  const sentFileIds = useMemo(() => {
+    const sentIds = new Set<string>();
+    if (messages && messages.length > 0) {
+      messages.forEach((message: WorkflowMessage) => {
+        const documents = (message as any).documents as MessageDocument[] | undefined;
+        const files = (message as any).files as any[] | undefined;
+        
+        if (documents && Array.isArray(documents)) {
+          documents.forEach((doc: MessageDocument) => {
+            if (doc.fileId) {
+              sentIds.add(doc.fileId);
+            }
+          });
+        }
+        if (files && Array.isArray(files)) {
+          files.forEach((file: any) => {
+            const fileId = file.id || file.fileId;
+            if (fileId) {
+              sentIds.add(fileId);
+            }
+          });
+        }
+      });
+    }
+    return sentIds;
+  }, [messages]);
+
+  // Clear pending files that have been confirmed in messages and remove optimistic message
+  useEffect(() => {
+    if (!messages || messages.length === 0) {
+      return;
+    }
+
+    // Extract all fileIds from messages (check both documents and files fields)
+    const messageFileIds = new Set<string>();
+    const messageTexts = new Set<string>();
+    messages.forEach((message: WorkflowMessage) => {
+      // Track message text to detect if optimistic message was confirmed
+      if (message.message) {
+        messageTexts.add(message.message.trim());
+      }
+      // Check documents field
+      const documents = (message as any).documents as MessageDocument[] | undefined;
+      if (documents && Array.isArray(documents)) {
+        documents.forEach((doc: MessageDocument) => {
+          if (doc.fileId && doc.fileId.trim() !== '') {
+            messageFileIds.add(doc.fileId);
+          }
+        });
+      }
+      // Check files field (alternative backend format)
+      const files = (message as any).files as any[] | undefined;
+      if (files && Array.isArray(files)) {
+        files.forEach((file: any) => {
+          const fileId = file.id || file.fileId;
+          if (fileId && fileId.trim() !== '') {
+            messageFileIds.add(fileId);
+          }
+        });
+      }
+    });
+
+    // Remove optimistic message only if a real message with matching text AND files appears
+    // Don't remove if backend returns empty documents array
+    if (optimisticMessage && optimisticMessage.message) {
+      const optimisticText = optimisticMessage.message.trim();
+      const optimisticFileIds = new Set<string>();
+      
+      // Get file IDs from optimistic message
+      if (optimisticMessage.documents && Array.isArray(optimisticMessage.documents)) {
+        optimisticMessage.documents.forEach((doc: any) => {
+          if (doc.fileId) {
+            optimisticFileIds.add(doc.fileId);
+          }
+        });
+      }
+      
+      // Check if matching message has documents with the same files
+      const matchingMessage = Array.from(messages).find((msg: WorkflowMessage) => 
+        msg.message && msg.message.trim() === optimisticText
+      );
+      
+      if (matchingMessage) {
+        const matchingFileIds = new Set<string>();
+        const documents = (matchingMessage as any).documents as MessageDocument[] | undefined;
+        const files = (matchingMessage as any).files as any[] | undefined;
+        
+        if (documents && Array.isArray(documents)) {
+          documents.forEach((doc: MessageDocument) => {
+            if (doc.fileId) {
+              matchingFileIds.add(doc.fileId);
+            }
+          });
+        }
+        if (files && Array.isArray(files)) {
+          files.forEach((file: any) => {
+            const fileId = file.id || file.fileId;
+            if (fileId) {
+              matchingFileIds.add(fileId);
+            }
+          });
+        }
+        
+        // Only remove optimistic message if backend confirmed documents exist
+        // Check if all optimistic files are present in the matching message
+        if (optimisticFileIds.size > 0) {
+          const allFilesConfirmed = Array.from(optimisticFileIds).every(fileId => 
+            matchingFileIds.has(fileId)
+          );
+          if (allFilesConfirmed && matchingFileIds.size > 0) {
+            setOptimisticMessage(null);
+          }
+        } else {
+          // If no files in optimistic message, just check text match
+          if (messageTexts.has(optimisticText)) {
+            setOptimisticMessage(null);
+          }
+        }
+      }
+    }
+
+    // Don't remove files from pendingFiles just because they're in messages
+    // Users should be able to reattach files that were sent in previous messages
+    // Files will only be removed when they're sent in a new message (handled in handleSubmit)
+  }, [messages, pendingFiles, optimisticMessage]);
+
+  // Merge messages with optimistic message and sort by timestamp
+  // Also normalize messages to ensure documents field is populated from files field if needed
+  // Filter out duplicate user messages from backend that match optimistic message
+  const displayMessages = useMemo(() => {
+    const optimisticText = optimisticMessage?.message?.trim();
+    
+    // Process and filter backend messages
+    const processedMessages = (messages || []).map((message: WorkflowMessage) => {
+      // If message has files but no documents, convert files to documents format
+      const files = (message as any).files as any[] | undefined;
+      const documents = (message as any).documents as MessageDocument[] | undefined;
+      
+      if (files && Array.isArray(files) && (!documents || documents.length === 0)) {
+        // Convert files array to documents format
+        const convertedDocuments: MessageDocument[] = files.map((file: any) => ({
+          id: file.id || file.fileId || file.file_id,
+          fileId: file.id || file.fileId || file.file_id,
+          fileName: file.fileName || file.name || file.file_name || 'Unknown File',
+          fileSize: file.fileSize || file.size || 0,
+          mimeType: file.mimeType || file.mime_type || 'application/octet-stream',
+          messageId: message.id,
+          roundNumber: 0,
+          taskNumber: 0,
+          actionNumber: 0,
+          actionId: ''
+        }));
+        
+        return {
+          ...message,
+          documents: convertedDocuments
+        };
+      }
+      
+      return message;
+    });
+    
+    // Filter out user messages from backend that match optimistic message text
+    // Only keep them if they have documents/files (backend confirmed)
+    // Also capture timestamp from filtered message to preserve sort order
+    let replacedMessageTimestamp: number | undefined;
+    const filteredMessages = processedMessages.filter((message: WorkflowMessage) => {
+      const isUserMessage = message.role?.toLowerCase() === 'user';
+      const messageText = message.message?.trim();
+      
+      // If we have an optimistic message with the same text
+      if (optimisticMessage && optimisticText && isUserMessage && messageText === optimisticText) {
+        // Check if backend message has documents/files
+        const documents = (message as any).documents as MessageDocument[] | undefined;
+        const files = (message as any).files as any[] | undefined;
+        const hasDocuments = documents && Array.isArray(documents) && documents.length > 0;
+        const hasFiles = files && Array.isArray(files) && files.length > 0;
+        
+        // If backend message has documents/files, keep it
+        if (hasDocuments || hasFiles) {
+          return true;
+        }
+        
+        // Otherwise, capture its timestamp before filtering it out
+        // This ensures optimistic message maintains correct sort order
+        if (message.publishedAt !== undefined) {
+          replacedMessageTimestamp = message.publishedAt;
+        }
+        
+        // Filter out backend message (no documents/files)
+        return false;
+      }
+      
+      // Keep all other messages
+      return true;
+    });
+    
+    // Add optimistic message if it exists (it will replace filtered backend message)
+    // Use the captured timestamp from filtered message to preserve sort order
+    const allMessages = [...filteredMessages];
+    if (optimisticMessage) {
+      // Update optimistic message timestamp if we captured one from filtered message
+      const optimisticWithTimestamp = replacedMessageTimestamp !== undefined
+        ? { ...optimisticMessage, publishedAt: replacedMessageTimestamp }
+        : optimisticMessage;
+      allMessages.push(optimisticWithTimestamp);
+    }
+    
+    // Sort by timestamp (publishedAt) first, then by sequenceNr
+    // This ensures chronological order with oldest messages first, newest last
+    return allMessages.sort((a, b) => {
+      // Prefer publishedAt (timestamp) for sorting - ascending order (oldest first)
+      if (a.publishedAt !== undefined && b.publishedAt !== undefined) {
+        return a.publishedAt - b.publishedAt;
+      }
+      // If one has publishedAt and other doesn't, prefer the one with timestamp
+      if (a.publishedAt !== undefined) return -1;
+      if (b.publishedAt !== undefined) return 1;
+      // Fallback to sequenceNr - ascending order (lower sequence first)
+      if (a.sequenceNr !== undefined && b.sequenceNr !== undefined) {
+        return a.sequenceNr - b.sequenceNr;
+      }
+      // If one has sequenceNr and other doesn't, prefer the one with sequenceNr
+      if (a.sequenceNr !== undefined) return -1;
+      if (b.sequenceNr !== undefined) return 1;
+      // Both have no timestamp or sequence - maintain order
+      return 0;
+    });
+  }, [messages, optimisticMessage]);
+  
+  // Handle file upload - uploads to backend and adds to pending files for message
+  const handleFileUpload = useCallback(async (file: File) => {
+    // Upload file to backend using central file context
+    // If workflowId exists, include it so file is associated with workflow
+    const result = await fileContext.handleFileUpload(file, workflowId);
+    
+    if (result.success && result.fileData) {
+      // The API response structure: { message, file: FileInfo, ... }
+      // The file data is nested in the 'file' property
+      const responseData = result.fileData;
+      const fileData = responseData.file || responseData; // Support both nested and direct structure
+      
+      // Extract file ID - the API returns 'id' field
+      const fileId = fileData?.id;
+      if (!fileId) {
+        console.error('File upload failed: No file ID returned', responseData);
+        return;
+      }
+      
+      // Create WorkflowFile object for pending files list
+      const newFile: WorkflowFile = {
+        id: fileId,
+        fileId: fileId,
+        fileName: fileData.fileName || file.name,
+        fileSize: fileData.fileSize || file.size,
+        mimeType: fileData.mimeType || file.type || 'application/octet-stream',
+        source: 'user_uploaded'
+      };
+      
+      // Add to pending files so it can be sent with the next message
+      setPendingFiles(prev => {
+        // Avoid duplicates
+        if (prev.some(f => f.fileId === fileId)) {
+          return prev;
+        }
+        return [...prev, newFile];
+      });
+    } else {
+      console.error('File upload failed:', result.error);
+    }
+  }, [workflowId, fileContext]);
+
+  // Handle file attachment/detachment from popup or connected files list
+  // Allow re-attaching files even if they were already sent - they'll be included in next message
+  const handleFileAttach = useCallback(async (fileId: string) => {
+    console.log('🔧 handleFileAttach called with fileId:', fileId);
+    console.log('🔧 Current pendingFiles:', pendingFiles.map(f => f.fileId));
+    console.log('🔧 Available workflowFiles:', workflowFiles.map(f => f.fileId));
+    console.log('🔧 Available fileContext.files:', fileContext.files.map(f => f.id));
+    
+    // Check if file is already in pendingFiles
+    const isInPending = pendingFiles.some(f => f.fileId === fileId);
+    console.log('🔧 isInPending:', isInPending);
+    
+    if (isInPending) {
+      // File is already in pendingFiles - remove it (detach)
+      console.log('🔧 Detaching file:', fileId);
+      setPendingFiles(prev => prev.filter(f => f.fileId !== fileId));
+    } else {
+      // Attach file - try to find it in FileContext first, then in workflowFiles
+      // This allows re-attaching files that were sent in previous messages
+      let workflowFile: WorkflowFile | null = null;
+      
+      // First, try to find in FileContext (for user uploaded files)
+      const userFile = fileContext.files.find(f => f.id === fileId);
+      if (userFile) {
+        console.log('🔧 Found file in FileContext:', userFile);
+        workflowFile = {
+          id: userFile.id,
+          fileId: userFile.id,
+          fileName: userFile.file_name,
+          fileSize: userFile.size || 0,
+          mimeType: userFile.mime_type || 'application/octet-stream',
+          source: 'user_uploaded'
+        };
+      } else {
+        // If not in FileContext, try to find in workflowFiles (from previous messages)
+        const existingWorkflowFile = workflowFiles.find(f => f.fileId === fileId);
+        console.log('🔧 Looking in workflowFiles, found:', existingWorkflowFile);
+        if (existingWorkflowFile) {
+          workflowFile = {
+            ...existingWorkflowFile,
+            // Ensure all required fields are present
+            id: existingWorkflowFile.id || existingWorkflowFile.fileId,
+            fileId: existingWorkflowFile.fileId,
+            fileName: existingWorkflowFile.fileName || 'Unknown File',
+            fileSize: existingWorkflowFile.fileSize || 0,
+            mimeType: existingWorkflowFile.mimeType || 'application/octet-stream',
+            source: existingWorkflowFile.source || 'user_uploaded'
+          };
+        }
+      }
+      
+      if (workflowFile) {
+        console.log('🔧 Attaching file:', workflowFile);
+        setPendingFiles(prev => {
+          // Avoid duplicates (shouldn't happen due to check above, but safety check)
+          if (prev.some(f => f.fileId === fileId)) {
+            console.log('🔧 File already in pendingFiles, skipping');
+            return prev;
+          }
+          const updated = [...prev, workflowFile!];
+          console.log('🔧 Updated pendingFiles:', updated.map(f => f.fileId));
+          console.log('🔧 Full updated pendingFiles:', updated);
+          return updated;
+        });
+        console.log('✅ File attachment initiated');
+      } else {
+        console.warn(`❌ Cannot attach file ${fileId}: file not found in FileContext or workflowFiles`);
+        console.warn('Available fileIds in workflowFiles:', workflowFiles.map(f => f.fileId));
+        console.warn('Available fileIds in fileContext:', fileContext.files.map(f => f.id));
+        console.warn('Full workflowFiles:', workflowFiles);
+        console.warn('Full fileContext.files:', fileContext.files);
+      }
+    }
+  }, [pendingFiles, fileContext.files, workflowFiles]);
+
+  // Handle file upload from popup - uploads and automatically attaches
+  const handleFileUploadAndAttach = useCallback(async (file: File) => {
+    await handleFileUpload(file);
+  }, [handleFileUpload]);
+  
+  // Handle file remove - removes from workflow/pending files but doesn't delete from backend
+  const handleFileRemove = useCallback(async (file: WorkflowFile) => {
+    // Simply remove from pending files - no backend call
+    setPendingFiles(prev => prev.filter(f => f.fileId !== file.fileId));
+  }, []);
+
+  // Handle file delete - deletes from backend using central file context
+  const handleFileDelete = useCallback(async (file: WorkflowFile) => {
+    if (!file.fileId) {
+      console.error('Cannot delete file: fileId is missing');
+      return;
+    }
+    
+    // Delete file from backend using central file context
+    const success = await fileContext.handleFileDelete(file.fileId, () => {
+      // Optimistically remove from pending files immediately
+      setPendingFiles(prev => prev.filter(f => f.fileId !== file.fileId));
+    });
+    
+    if (success) {
+      // File deleted from backend, remove from pending files if still present
+      setPendingFiles(prev => prev.filter(f => f.fileId !== file.fileId));
+      
+      // If file was in messages, also remove from those messages
+      if (workflowId) {
+        const messagesWithFile = messages.filter((msg: WorkflowMessage) => {
+          const docs = (msg as any).documents as MessageDocument[] | undefined;
+          return docs?.some(doc => doc.fileId === file.fileId);
+        });
+        
+        // Remove file references from messages
+        for (const message of messagesWithFile) {
+          try {
+            await deleteFileFromMessageApi(request, workflowId, message.id, file.fileId);
+          } catch (error) {
+            console.error(`Failed to delete file ${file.fileId} from message ${message.id}:`, error);
+            // Continue with other messages even if one fails
+          }
+        }
+      }
+    } else {
+      console.error('Failed to delete file from backend');
+      // File deletion failed, could show error message here
+    }
+  }, [workflowId, messages, fileContext, request]);
+  
+  // Handle input change
+  const onInputChange = useCallback((value: string) => {
+    setInputValue(value);
+  }, []);
+  
+  // Handle submit (start or stop workflow)
+  const handleSubmit = useCallback(async () => {
+    // If running, stop the workflow
+    if (isRunning && workflowId) {
+      try {
+        const result = await stopWorkflow();
+        console.log('Workflow stop response:', result);
+        if (result.success) {
+          // Reset workflow state after stopping
+          resetWorkflow();
+        }
+      } catch (error) {
+        console.error('Error stopping workflow:', error);
+      }
+      return;
+    }
+    
+    // Otherwise, start a new workflow or resume an existing one
+    const trimmedInput = inputValue.trim();
+    if (!trimmedInput || startingWorkflow) {
+      return;
+    }
+    
+    try {
+      // Send all files in pendingFiles - user can re-attach files that were already sent
+      // Files must already be uploaded via /api/files/upload - we just send their IDs
+      // Files will only appear once in connected files list due to deduplication by fileId
+      const filesToSend = pendingFiles.filter(file => file.fileId);
+      // Extract file IDs as strings for listFileId array
+      const fileIdsToSend = filesToSend.map(f => f.fileId).filter((id): id is string => !!id);
+      const sentFileIdsSet = new Set(fileIdsToSend);
+      
+      // Create optimistic message with user input and attached files
+      const optimisticMsg: WorkflowMessage = {
+        id: `optimistic-${Date.now()}`,
+        workflowId: workflowId || '',
+        message: trimmedInput,
+        role: 'user',
+        publishedAt: Date.now(), // Use current timestamp for sorting
+        documents: filesToSend.map(file => ({
+          id: file.id || file.fileId,
+          fileId: file.fileId,
+          fileName: file.fileName,
+          fileSize: file.fileSize,
+          mimeType: file.mimeType,
+          messageId: `optimistic-${Date.now()}`,
+          roundNumber: 0,
+          taskNumber: 0,
+          actionNumber: 0,
+          actionId: ''
+        }))
+      };
+      setOptimisticMessage(optimisticMsg);
+      
+      // Remove files from pendingFiles after sending so they can be re-attached for next message
+      // Files remain visible in connected files list via optimistic message until backend confirms
+      setPendingFiles(prev => prev.filter(file => 
+        !file.fileId || !sentFileIdsSet.has(file.fileId)
+      ));
+      
+      // If workflowId exists, resume the existing workflow; otherwise create a new one
+      const workflowOptions: { workflowId?: string; workflowMode?: 'Actionplan' | 'React' } = {
+        workflowMode: 'Actionplan'
+      };
+      
+      // Resume existing workflow if one is selected
+      if (workflowId) {
+        workflowOptions.workflowId = workflowId;
+      }
+      
+      const result = await startWorkflow(
+        { 
+          prompt: trimmedInput,
+          listFileId: fileIdsToSend.length > 0 ? fileIdsToSend : undefined, // Array of file ID strings
+          userLanguage: 'en' // Optional, defaults to "en"
+        },
+        workflowOptions
+      );
+      
+      // Log the full response
+      console.log('Workflow start response:', result);
+      
+      if (result.success) {
+        // Log the response data
+        console.log('Workflow started successfully:', result.data);
+        // Clear input on success
+        setInputValue('');
+        
+        // If no workflowId was selected before starting (new workflow created)
+        const wasNewWorkflow = !workflowId;
+        if (wasNewWorkflow && result.data) {
+          const workflow = result.data as Workflow;
+          
+          // Dispatch event to notify other components (e.g., workflows table)
+          window.dispatchEvent(new CustomEvent('workflowCreated', { 
+            detail: { workflow } 
+          }));
+          
+          // Refetch workflows list to include the new workflow
+          await refetchWorkflows();
+          // Select the new workflow
+          selectWorkflowFromContext(workflow.id);
+          // Select the workflow in lifecycle hook
+          await selectWorkflow(workflow.id);
+        } else if (workflowId) {
+          // If resuming existing workflow, ensure it's selected in lifecycle hook
+          // The workflow status will be updated via polling
+          await selectWorkflow(workflowId);
+        }
+      } else {
+        // Remove optimistic message on failure
+        // Files remain in pendingFiles (they weren't removed on send)
+        setOptimisticMessage(null);
+        console.error('Failed to start workflow:', result.error);
+      }
+    } catch (error) {
+      // Remove optimistic message on error
+      // Files remain in pendingFiles (they weren't removed on send)
+      setOptimisticMessage(null);
+      console.error('Error starting workflow:', error);
+    }
+  }, [inputValue, pendingFiles, sentFileIds, isRunning, workflowId, startingWorkflow, startWorkflow, stopWorkflow, resetWorkflow, refetchWorkflows, selectWorkflowFromContext, selectWorkflow]);
+  
+
+  // Listen for workflow cleared events to clear connected files
+  useEffect(() => {
+    const handleWorkflowCleared = () => {
+      // Clear pending files and optimistic message when workflow is cleared via context
+      setPendingFiles([]);
+      setOptimisticMessage(null);
+    };
+
+    window.addEventListener('workflowCleared', handleWorkflowCleared);
+    return () => {
+      window.removeEventListener('workflowCleared', handleWorkflowCleared);
+    };
+  }, []);
+
+  // Handle workflow selection from dropdown
+  const handleWorkflowSelect = useCallback(async (item: { id: string | number; label: string; value: any; metadata?: Record<string, any> } | null) => {
+    if (item === null) {
+      // Clear selection using context's clearWorkflow method - this will dispatch workflowCleared event
+      // which will trigger pendingFiles clearing via the event listener
+      clearWorkflowFromContext();
+      resetWorkflow();
+      // Also explicitly clear pending files and optimistic message here for immediate update
+      setPendingFiles([]);
+      setOptimisticMessage(null);
+      return;
+    }
+    
+    const workflowIdToSelect = typeof item.id === 'string' ? item.id : String(item.id);
+    selectWorkflowFromContext(workflowIdToSelect);
+    
+    // Select the workflow in lifecycle hook, which will load its messages and logs
+    if (selectWorkflow) {
+      await selectWorkflow(workflowIdToSelect);
+    }
+  }, [selectWorkflow, resetWorkflow, selectWorkflowFromContext, clearWorkflowFromContext]);
+
+  // Prepare workflow items for dropdown
+  const workflowItems = workflows.map(workflow => ({
+    id: workflow.id,
+    label: workflow.name || workflow.id,
+    value: workflow,
+    metadata: {
+      status: workflow.status,
+      workflowMode: workflow.workflowMode
+    }
+  }));
+
+  return {
+    data: [],
+    loading: false,
+    error: null,
+    inputValue,
+    onInputChange,
+    handleSubmit,
+    isSubmitting: startingWorkflow || isStopping,
+    workflowId: workflowId || undefined,
+    workflowStatus,
+    isRunning,
+    messages: displayMessages || [],
+    logs: logs || [],
+    // Workflow selection properties for dropdown
+    workflowItems,
+    selectedWorkflowId: selectedWorkflowId || workflowId || null,
+    onWorkflowSelect: handleWorkflowSelect,
+    workflowsLoading,
+    // File management properties
+    workflowFiles,
+    pendingFiles,
+    handleFileUpload,
+    handleFileDelete,
+    handleFileRemove,
+    uploadingFile: fileContext.uploadingFile,
+    deletingFiles: fileContext.deletingFiles,
+    previewingFiles: fileContext.previewingFiles,
+    // File attachment popup properties
+    isFileAttachmentPopupOpen,
+    setIsFileAttachmentPopupOpen,
+    allUserFiles: fileContext.files || [],
+    handleFileAttach,
+    handleFileUploadAndAttach
+  };
+}
+
+// Hook factory for dashboard input form
+export function createDashboardHook() {
+  return () => useDashboardInputForm();
+}
diff --git a/src/hooks/usePrompts.ts b/src/hooks/usePrompts.ts
index b23948c..484a5c1 100644
--- a/src/hooks/usePrompts.ts
+++ b/src/hooks/usePrompts.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useApiRequest } from './useApi';
+import { getUserDataCache } from '../utils/userCache';
 
 // Prompt interface based on the API response
 export interface Prompt {
@@ -37,6 +38,17 @@ export function usePrompts() {
     setPrompts(prevPrompts => prevPrompts.filter(prompt => prompt.id !== promptId));
   };
 
+  // Optimistically update a prompt in the local state
+  const updateOptimistically = (promptId: string, updateData: { name: string; content: string }) => {
+    setPrompts(prevPrompts => 
+      prevPrompts.map(prompt => 
+        prompt.id === promptId 
+          ? { ...prompt, ...updateData }
+          : prompt
+      )
+    );
+  };
+
   useEffect(() => {
     fetchPrompts();
   }, []);
@@ -46,7 +58,8 @@ export function usePrompts() {
     loading, 
     error, 
     refetch: fetchPrompts,
-    removeOptimistically
+    removeOptimistically,
+    updateOptimistically
   };
 }
 
@@ -84,15 +97,26 @@ export function usePromptOperations() {
     }
   };
 
-  const handlePromptCreate = async (promptData: { name: string; content: string; mandateId: string }) => {
+  const handlePromptCreate = async (promptData: { name: string; content: string }) => {
     setCreateError(null);
     setCreatingPrompt(true);
     
     try {
+      // Get mandateId from currentUser in sessionStorage cache
+      const currentUserData = getUserDataCache();
+      const mandateId = currentUserData?.mandateId || '';
+      
+      // Structure the request body as required by the API
+      const requestBody = {
+        mandateId: mandateId,
+        name: promptData.name,
+        content: promptData.content
+      };
+      
       const newPrompt = await request({
         url: '/api/prompts',
         method: 'post',
-        data: promptData
+        data: requestBody
       });
       
       return { success: true, promptData: newPrompt };
@@ -104,14 +128,25 @@ export function usePromptOperations() {
     }
   };
 
-  const handlePromptUpdate = async (promptId: string, updateData: { id: string; name: string; content: string; mandateId: string }) => {
-    setUpdateError(null); // Reuse update error state for update operations
+  const handlePromptUpdate = async (promptId: string, updateData: { name: string; content: string }) => {
+    setUpdateError(null);
     
     try {
+      // Get mandateId from currentUser in sessionStorage cache
+      const currentUserData = getUserDataCache();
+      const mandateId = currentUserData?.mandateId || '';
+      
+      // Structure the request body as required by the API
+      const requestBody = {
+        mandateId: mandateId,
+        name: updateData.name,
+        content: updateData.content
+      };
+      
       const updatedPrompt = await request({
         url: `/api/prompts/${promptId}`,
         method: 'put',
-        data: updateData
+        data: requestBody
       });
       
       return { success: true, promptData: updatedPrompt };
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
new file mode 100644
index 0000000..0d0ce30
--- /dev/null
+++ b/src/hooks/useSettings.ts
@@ -0,0 +1,384 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useUser, useCurrentUser } from './useUsers';
+import { useApiRequest } from './useApi';
+import { GenericDataHook } from '../core/PageManager/pageInterface';
+import type { SettingsFieldConfig } from '../core/PageManager/pageInterface';
+
+// Interface for unified settings data
+export interface SettingsData {
+  // User data (from API)
+  username?: string;
+  fullName?: string;
+  email?: string;
+  language?: string;
+  privilege?: string;
+  enabled?: boolean;
+  authenticationAuthority?: string;
+  // Phone name (localStorage)
+  phoneName?: string;
+  // Theme (localStorage)
+  theme?: string;
+  // Speech data (localStorage)
+  speechData?: any;
+  // Nested speech fields
+  mandate_general?: {
+    company_name?: string;
+    industry?: string;
+    contact_info?: {
+      email?: string;
+      phone?: string;
+      street?: string;
+      postal_code?: string;
+      city?: string;
+      country?: string;
+    };
+    business_hours?: string;
+    timezone?: string;
+  };
+  setup_contacts?: boolean;
+}
+
+// Create settings hook factory
+export function createSettingsHook(): () => GenericDataHook {
+  return function useSettings() {
+    const { user: currentUser } = useCurrentUser();
+    const { getUser, updateUser } = useUser();
+    const { request } = useApiRequest();
+    
+    const [settingsData, setSettingsData] = useState<SettingsData>({});
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [settingsFields, setSettingsFields] = useState<Record<string, SettingsFieldConfig[]>>({});
+    const [settingsLoading, setSettingsLoading] = useState<Record<string, boolean>>({});
+    const [settingsErrors, setSettingsErrors] = useState<Record<string, string | null>>({});
+    
+    // Track if we've loaded data initially to prevent infinite loops
+    const hasLoadedRef = useRef(false);
+    const currentUserIdRef = useRef<string | undefined>(currentUser?.id);
+
+    // Load phone name from localStorage
+    const loadPhoneName = useCallback((): string => {
+      try {
+        return localStorage.getItem('userPhoneName') || '';
+      } catch (error) {
+        console.error('Failed to load phone name from localStorage:', error);
+        return '';
+      }
+    }, []);
+
+    // Load theme from localStorage
+    const loadTheme = useCallback((): string => {
+      try {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+          return savedTheme;
+        }
+        // Default to system preference
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      } catch (error) {
+        console.error('Failed to load theme from localStorage:', error);
+        return 'light';
+      }
+    }, []);
+
+    // Load speech data from localStorage
+    const loadSpeechData = useCallback((): any | null => {
+      try {
+        const savedData = localStorage.getItem('speechSignUpData');
+        const timestamp = localStorage.getItem('speechSignUpTimestamp');
+        
+        if (savedData && timestamp) {
+          const parsedData = JSON.parse(savedData);
+          const savedTime = parseInt(timestamp);
+          const now = Date.now();
+          const twentyFourHours = 24 * 60 * 60 * 1000;
+          
+          // Check if data is still valid (within 24 hours)
+          if (now - savedTime < twentyFourHours) {
+            return parsedData;
+          } else {
+            // Data expired, clear it
+            localStorage.removeItem('speechSignUpData');
+            localStorage.removeItem('speechSignUpTimestamp');
+            return null;
+          }
+        }
+        return null;
+      } catch (error) {
+        console.error('Error loading speech data:', error);
+        return null;
+      }
+    }, []);
+
+    // Fetch user data from API
+    const fetchUserData = useCallback(async () => {
+      if (!currentUser?.id) return null;
+      
+      try {
+        const userData = await getUser(currentUser.id);
+        return userData;
+      } catch (error) {
+        console.error('Failed to fetch user data:', error);
+        throw error;
+      }
+    }, [currentUser?.id, getUser]);
+
+    // Fetch field definitions from backend
+    const fetchFieldsForSection = useCallback(async (sectionId: string): Promise<SettingsFieldConfig[]> => {
+      try {
+        setSettingsLoading(prev => ({ ...prev, [sectionId]: true }));
+        setSettingsErrors(prev => ({ ...prev, [sectionId]: null }));
+        
+        // TODO: Replace with actual backend endpoint
+        // For now, return empty array - fields will come from backend later
+        const response = await request({
+          url: `/api/settings/fields?section=${sectionId}`,
+          method: 'get'
+        });
+        
+        const fields = response?.fields || [];
+        setSettingsFields(prev => ({ ...prev, [sectionId]: fields }));
+        return fields;
+      } catch (error: any) {
+        const errorMessage = error.message || `Failed to load fields for ${sectionId}`;
+        console.error(`Error fetching fields for section ${sectionId}:`, error);
+        setSettingsErrors(prev => ({ ...prev, [sectionId]: errorMessage }));
+        return [];
+      } finally {
+        setSettingsLoading(prev => ({ ...prev, [sectionId]: false }));
+      }
+    }, [request]);
+
+    // Load all settings data
+    const loadSettingsData = useCallback(async () => {
+      // Prevent multiple simultaneous loads
+      if (loading && hasLoadedRef.current) return;
+      
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Load from different sources - call functions directly to avoid dependency issues
+        const userData = currentUser?.id ? await getUser(currentUser.id) : null;
+        const phoneName = localStorage.getItem('userPhoneName') || '';
+        const savedTheme = localStorage.getItem('theme');
+        const theme = savedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        
+        // Load speech data
+        let speechData: any | null = null;
+        try {
+          const savedData = localStorage.getItem('speechSignUpData');
+          const timestamp = localStorage.getItem('speechSignUpTimestamp');
+          if (savedData && timestamp) {
+            const parsedData = JSON.parse(savedData);
+            const savedTime = parseInt(timestamp);
+            const now = Date.now();
+            const twentyFourHours = 24 * 60 * 60 * 1000;
+            if (now - savedTime < twentyFourHours) {
+              speechData = parsedData;
+            } else {
+              localStorage.removeItem('speechSignUpData');
+              localStorage.removeItem('speechSignUpTimestamp');
+            }
+          }
+        } catch (error) {
+          console.error('Error loading speech data:', error);
+        }
+
+        // Merge all data into unified object
+        const unifiedData: SettingsData = {
+          ...(userData || {}),
+          phoneName,
+          theme,
+          speechData,
+          // Flatten speech data if it exists
+          ...(speechData?.mandate_general && {
+            mandate_general: speechData.mandate_general
+          }),
+          ...(speechData?.setup_contacts !== undefined && {
+            setup_contacts: speechData.setup_contacts
+          })
+        };
+
+        setSettingsData(unifiedData);
+        hasLoadedRef.current = true;
+      } catch (error: any) {
+        console.error('Error loading settings data:', error);
+        setError(error.message || 'Failed to load settings');
+      } finally {
+        setLoading(false);
+      }
+    }, [currentUser?.id, getUser]); // Only depend on currentUser?.id and getUser
+
+    // Save section data
+    const saveSection = useCallback(async (sectionId: string, data: any) => {
+      try {
+        setSettingsLoading(prev => ({ ...prev, [sectionId]: true }));
+        setSettingsErrors(prev => ({ ...prev, [sectionId]: null }));
+
+        if (sectionId === 'user-info') {
+          // Separate user API data from localStorage data
+          const { phoneName, id, mandateId, ...userApiData } = data;
+          
+          // Build clean update object with only allowed fields (explicitly exclude id and mandateId)
+          // Allowed fields: username, email, fullName, language, enabled, privilege, authenticationAuthority
+          const userUpdateData: Record<string, any> = {};
+          const allowedFields = ['username', 'email', 'fullName', 'language', 'enabled', 'privilege', 'authenticationAuthority'];
+          
+          allowedFields.forEach(field => {
+            if (userApiData.hasOwnProperty(field)) {
+              userUpdateData[field] = userApiData[field];
+            }
+          });
+          
+          // Save user data via API (only allowed fields, no id or mandateId)
+          if (currentUser?.id && Object.keys(userUpdateData).length > 0) {
+            const updatedUser = await updateUser(currentUser.id, userUpdateData);
+            // Update local state with API data
+            setSettingsData(prev => ({ ...prev, ...updatedUser }));
+            
+            // Update localStorage cache
+            localStorage.setItem('currentUser', JSON.stringify(updatedUser));
+            
+            // Dispatch event to notify other components
+            window.dispatchEvent(new CustomEvent('userInfoUpdated'));
+          }
+          
+          // Save phone name to localStorage separately
+          if (phoneName !== undefined) {
+            if (phoneName?.trim()) {
+              localStorage.setItem('userPhoneName', phoneName.trim());
+            } else {
+              localStorage.removeItem('userPhoneName');
+            }
+            // Update local state with phone name
+            setSettingsData(prev => ({ ...prev, phoneName }));
+          }
+        } else if (sectionId === 'theme') {
+          // Save theme to localStorage
+          localStorage.setItem('theme', data.theme);
+          // Apply theme immediately
+          document.documentElement.setAttribute('data-theme', data.theme);
+          document.documentElement.classList.remove('light-theme', 'dark-theme');
+          document.documentElement.classList.add(`${data.theme}-theme`);
+          // Update local state
+          setSettingsData(prev => ({ ...prev, theme: data.theme }));
+        } else if (sectionId === 'speech-settings') {
+          // Save speech data to localStorage
+          localStorage.setItem('speechSignUpData', JSON.stringify(data));
+          localStorage.setItem('speechSignUpTimestamp', Date.now().toString());
+          // Update local state
+          setSettingsData(prev => ({ 
+            ...prev, 
+            speechData: data,
+            ...(data.mandate_general && { mandate_general: data.mandate_general }),
+            ...(data.setup_contacts !== undefined && { setup_contacts: data.setup_contacts })
+          }));
+          // Dispatch event to notify other components
+          window.dispatchEvent(new CustomEvent('speechSignUpChanged'));
+        } else if (sectionId === 'phone-name') {
+          // Save phone name to localStorage
+          if (data.phoneName?.trim()) {
+            localStorage.setItem('userPhoneName', data.phoneName.trim());
+          } else {
+            localStorage.removeItem('userPhoneName');
+          }
+          // Update local state
+          setSettingsData(prev => ({ ...prev, phoneName: data.phoneName }));
+        }
+      } catch (error: any) {
+        const errorMessage = error.message || `Failed to save ${sectionId}`;
+        console.error(`Error saving section ${sectionId}:`, error);
+        setSettingsErrors(prev => ({ ...prev, [sectionId]: errorMessage }));
+        throw error;
+      } finally {
+        setSettingsLoading(prev => ({ ...prev, [sectionId]: false }));
+      }
+    }, [currentUser?.id, updateUser]);
+
+    // Initial load - only when currentUser?.id changes or on first mount
+    useEffect(() => {
+      // Only load if:
+      // 1. We haven't loaded yet, OR
+      // 2. The user ID changed
+      if (!hasLoadedRef.current || currentUserIdRef.current !== currentUser?.id) {
+        currentUserIdRef.current = currentUser?.id;
+        
+        // Load data directly to avoid dependency issues
+        const loadData = async () => {
+          if (loading && hasLoadedRef.current) return;
+          
+          try {
+            setLoading(true);
+            setError(null);
+
+            // Load from different sources
+            const userData = currentUser?.id ? await getUser(currentUser.id) : null;
+            const phoneName = localStorage.getItem('userPhoneName') || '';
+            const savedTheme = localStorage.getItem('theme');
+            const theme = savedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            
+            // Load speech data
+            let speechData: any | null = null;
+            try {
+              const savedData = localStorage.getItem('speechSignUpData');
+              const timestamp = localStorage.getItem('speechSignUpTimestamp');
+              if (savedData && timestamp) {
+                const parsedData = JSON.parse(savedData);
+                const savedTime = parseInt(timestamp);
+                const now = Date.now();
+                const twentyFourHours = 24 * 60 * 60 * 1000;
+                if (now - savedTime < twentyFourHours) {
+                  speechData = parsedData;
+                } else {
+                  localStorage.removeItem('speechSignUpData');
+                  localStorage.removeItem('speechSignUpTimestamp');
+                }
+              }
+            } catch (error) {
+              console.error('Error loading speech data:', error);
+            }
+
+            // Merge all data into unified object
+            const unifiedData: SettingsData = {
+              ...(userData || {}),
+              phoneName,
+              theme,
+              speechData,
+              ...(speechData?.mandate_general && {
+                mandate_general: speechData.mandate_general
+              }),
+              ...(speechData?.setup_contacts !== undefined && {
+                setup_contacts: speechData.setup_contacts
+              })
+            };
+
+            setSettingsData(unifiedData);
+            hasLoadedRef.current = true;
+          } catch (error: any) {
+            console.error('Error loading settings data:', error);
+            setError(error.message || 'Failed to load settings');
+          } finally {
+            setLoading(false);
+          }
+        };
+        
+        loadData();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentUser?.id]); // Only depend on currentUser?.id
+
+    return {
+      data: [], // Not used for settings
+      loading,
+      error,
+      settingsData,
+      settingsFields,
+      settingsLoading,
+      settingsErrors,
+      saveSection,
+      refetch: loadSettingsData
+    } as GenericDataHook;
+  };
+}
+
diff --git a/src/hooks/useSidebar.ts b/src/hooks/useSidebar.ts
index f83d290..13dde43 100644
--- a/src/hooks/useSidebar.ts
+++ b/src/hooks/useSidebar.ts
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useSidebar as useNewSidebar } from '../core/PageManager/SidebarProvider';
 import { SidebarItem } from '../core/PageManager/pageInterface';
-import { useLanguage } from '../contexts/LanguageContext';
+import { useLanguage } from '../providers/language/LanguageContext';
 
 // Hook to get sidebar items from page configurations
 export const useSidebarFromPageConfigs = (): { items: SidebarItem[]; isLoading: boolean } => {
diff --git a/src/hooks/useUsers.ts b/src/hooks/useUsers.ts
index ede9a4e..372ab68 100644
--- a/src/hooks/useUsers.ts
+++ b/src/hooks/useUsers.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useApiRequest } from './useApi';
+import { setUserDataCache, getUserDataCache, clearUserDataCache } from '../utils/userCache';
 
 // User interfaces
 export interface User {
@@ -23,25 +24,22 @@ export function useCurrentUser() {
 
   const fetchCurrentUser = async (retryCount = 0) => {
     try {
-      // Check if we already have user data from JWT token
-      const cachedUser = localStorage.getItem('currentUser');
+      // Check if we already have user data in sessionStorage cache
+      const cachedUser = getUserDataCache();
       if (cachedUser) {
-        try {
-          const userData = JSON.parse(cachedUser);
-          setUser(userData);
-          console.log('✅ Using cached user data from JWT:', userData);
-          return;
-        } catch (error) {
-          console.error('Error parsing cached user data:', error);
-          localStorage.removeItem('currentUser');
-        }
+        setUser(cachedUser);
+        console.log('✅ Using cached user data from sessionStorage (persists during session):', {
+          username: cachedUser.username,
+          privilege: cachedUser.privilege
+        });
+        return;
       }
       
       // JWT tokens are now stored in httpOnly cookies, so we fetch user data from API
-      console.log('🍪 JWT tokens are now in httpOnly cookies, fetching user data from API');
+      console.log('🍪 JWT tokens are in httpOnly cookies, fetching user data from API');
       
       // Determine the correct endpoint based on authentication authority
-      const authAuthority = localStorage.getItem('auth_authority');
+      const authAuthority = sessionStorage.getItem('auth_authority');
       let endpoint = '/api/local/me';
       
       if (authAuthority === 'msft') {
@@ -67,31 +65,18 @@ export function useCurrentUser() {
         method: 'get'
       });
       setUser(data);
-      // Cache user data in localStorage for privilege checkers
-      localStorage.setItem('currentUser', JSON.stringify(data));
-      console.log('✅ User data fetched from API and cached:', data);
+      // Cache user data in sessionStorage (cleared on tab close - more secure than localStorage)
+      setUserDataCache(data);
+      console.log('✅ User data fetched from API and cached in sessionStorage (secure):', {
+        username: data.username,
+        privilege: data.privilege
+      });
     } catch (error: any) {
       console.error('❌ Failed to fetch user data:', error);
       
-      // Display stored debug information if this is a Microsoft auth failure
-      const authAuthority = localStorage.getItem('auth_authority');
-      if (authAuthority === 'msft') {
-        const msftAuthDebug = localStorage.getItem('msft_auth_debug');
-        const msftCookieDebug = localStorage.getItem('msft_cookie_debug');
-        
-        console.log('🔍 Microsoft authentication debug information:');
-        if (msftAuthDebug) {
-          console.log('📋 Auth flow debug:', JSON.parse(msftAuthDebug));
-        } else {
-          console.log('❌ No Microsoft auth debug info found');
-        }
-        
-        if (msftCookieDebug) {
-          console.log('🍪 Cookie debug:', JSON.parse(msftCookieDebug));
-        } else {
-          console.log('❌ No Microsoft cookie debug info found');
-        }
-        
+      // Display debug information if this is a Microsoft/Google auth failure
+      const authAuthority = sessionStorage.getItem('auth_authority');
+      if (authAuthority === 'msft' || authAuthority === 'google') {
         console.log('🔧 Current state:', {
           authAuthority,
           currentCookies: document.cookie || 'No cookies',
@@ -116,17 +101,15 @@ export function useCurrentUser() {
       
       // If all retries failed or this is not a retryable error
       setUser(null);
-      localStorage.removeItem('currentUser');
+      clearUserDataCache();
       
       // If authentication failed after all retries, clear auth data
       if (error.message?.includes('Not authenticated') || error.message?.includes('401')) {
         console.log('🔐 Authentication failed after retries - clearing auth data');
         
-        // Clean up debug info
-        localStorage.removeItem('msft_auth_debug');
-        localStorage.removeItem('msft_cookie_debug');
-        localStorage.removeItem('auth_authority');
-        localStorage.removeItem('currentUser');
+        // Clear auth authority
+        sessionStorage.removeItem('auth_authority');
+        clearUserDataCache();
         
         // Trigger a redirect to login by forcing a page reload
         setTimeout(() => {
@@ -167,11 +150,13 @@ export function useCurrentUser() {
       
       // CRITICAL: Clear all authentication data BEFORE any redirects
       // This ensures cleanup happens even if MSAL redirect interrupts the process
-      console.log('🧹 Starting comprehensive localStorage cleanup...');
+      console.log('🧹 Starting comprehensive cleanup...');
       
-      // Clear all authentication-related localStorage items
-      localStorage.removeItem('currentUser');
-      localStorage.removeItem('auth_authority');
+      // Clear user data cache from sessionStorage
+      clearUserDataCache();
+      
+      // Clear auth authority from sessionStorage
+      sessionStorage.removeItem('auth_authority');
       
       // Clear MSAL cache tokens from localStorage
       // MSAL stores tokens with keys starting with 'msal.'
@@ -194,10 +179,6 @@ export function useCurrentUser() {
         localStorage.removeItem(key);
       });
       
-      // Clear debug items and other auth-related data
-      localStorage.removeItem('msft_auth_debug');
-      localStorage.removeItem('msft_cookie_debug');
-      
       // Clear ALL MSAL cache data (including account keys, token keys, version)
       const msalKeysToRemove = [];
       for (let i = 0; i < localStorage.length; i++) {
@@ -234,7 +215,7 @@ export function useCurrentUser() {
       
       console.log('🍪 Cookies after cleanup attempt:', document.cookie);
       
-      console.log('✅ localStorage cleanup completed');
+      console.log('✅ Cleanup completed');
       
       // Handle MSAL logout for Microsoft authentication
       if (user.authenticationAuthority === 'msft' && msalInstance) {
@@ -264,20 +245,15 @@ export function useCurrentUser() {
   };
 
   useEffect(() => {
-    // Try to load user from localStorage first for faster initial load
-    const cachedUser = localStorage.getItem('currentUser');
+    // Try to load user from sessionStorage cache first for faster initial load
+    const cachedUser = getUserDataCache();
     if (cachedUser) {
-      try {
-        const userData = JSON.parse(cachedUser);
-        setUser(userData);
-      } catch (error) {
-        console.error('Error parsing cached user data:', error);
-        localStorage.removeItem('currentUser');
-      }
+      setUser(cachedUser);
+      console.log('✅ Using cached user data from sessionStorage on mount (persists during session)');
     }
     
     // For OAuth authentication, wait a bit longer before fetching user data
-    const authAuthority = localStorage.getItem('auth_authority');
+    const authAuthority = sessionStorage.getItem('auth_authority');
     const isOAuth = authAuthority === 'msft' || authAuthority === 'google';
     
     if (isOAuth) {
@@ -380,7 +356,8 @@ export function useUser() {
     });
   };
 
-  const updateUser = async (userId: string, userData: User): Promise<User> => {
+  const updateUser = async (userId: string, userData: UserUpdateData): Promise<User> => {
+    
     return await request({
       url: `/api/users/${userId}`,
       method: 'put',
diff --git a/src/hooks/useWorkflows.ts b/src/hooks/useWorkflows.ts
index 599f5ba..51d5907 100644
--- a/src/hooks/useWorkflows.ts
+++ b/src/hooks/useWorkflows.ts
@@ -1,113 +1,201 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useApiRequest } from './useApi';
+import { 
+  fetchWorkflows, 
+  updateWorkflowApi, 
+  deleteWorkflowApi, 
+  deleteWorkflowsApi,
+  type Workflow 
+} from '../api/workflowApi';
+import { MessageOverlay } from '../components/UiComponents';
+import type { MessageMode } from '../components/UiComponents';
+import { useLanguage } from '../providers/language/LanguageContext';
+import { useWorkflowSelection } from '../contexts/WorkflowSelectionContext';
 
-// Import the centralized workflow interfaces
-import type { Workflow, WorkflowMessage, WorkflowStats, WorkflowDocument, WorkflowLog } from '../components/Dashboard/DashboardChat/dashboardChatAreaTypes';
-export type { Workflow, WorkflowMessage, WorkflowStats, WorkflowDocument, WorkflowLog };
-
-export interface StartWorkflowRequest {
-  prompt: string;
-  listFileId: string[];
-}
-
-export interface StartWorkflowResponse {
+// Workflow interface matching backend
+export interface UserWorkflow {
   id: string;
+  mandateId: string;
   status: string;
-  message: string;
+  name?: string;
+  workflowMode?: string;
+  [key: string]: any; // Allow additional properties
 }
 
 // Workflows list hook
-export function useWorkflows() {
-  const [workflows, setWorkflows] = useState<Workflow[]>([]);
-  const { request, isLoading: loading, error } = useApiRequest<null, Workflow[]>();
+export function useUserWorkflows() {
+  const [workflows, setWorkflows] = useState<UserWorkflow[]>([]);
+  const [isRefetching, setIsRefetching] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { request } = useApiRequest<null, Workflow[]>();
 
-  const fetchWorkflows = async () => {
+  const fetchWorkflowsData = useCallback(async () => {
     try {
-      const data = await request({
-        url: '/api/workflows/',
-        method: 'get'
+      setLoading(true);
+      setError(null);
+      
+      const workflowList = await fetchWorkflows(request);
+      
+      // Ensure data is an array, handle null/undefined responses
+      const validWorkflows = Array.isArray(workflowList) ? workflowList : [];
+      
+      // Map API response to our frontend model
+      const mappedWorkflows = validWorkflows.map((apiWorkflow: any): UserWorkflow => {
+        return {
+          id: apiWorkflow.id,
+          mandateId: apiWorkflow.mandateId || '',
+          status: apiWorkflow.status || 'unknown',
+          name: apiWorkflow.name,
+          workflowMode: apiWorkflow.workflowMode,
+          ...apiWorkflow // Include any additional properties
+        };
       });
       
-      setWorkflows(data);
-    } catch (error) {
-      // Error is already handled by useApiRequest
+      setWorkflows(mappedWorkflows);
+    } catch (error: any) {
+      console.error('Error fetching workflows:', error);
+      setError(error.message || 'Failed to fetch workflows');
+      setWorkflows([]);
+    } finally {
+      setLoading(false);
     }
+  }, [request]);
+
+  // Optimistically remove a workflow from the local state
+  const removeWorkflowOptimistically = (workflowId: string) => {
+    setWorkflows(prevWorkflows => prevWorkflows.filter(workflow => workflow.id !== workflowId));
+  };
+
+  // Add a workflow to the local state (for when creation completes)
+  const addWorkflowOptimistically = useCallback((newWorkflow: UserWorkflow) => {
+    setWorkflows(prevWorkflows => [newWorkflow, ...prevWorkflows]);
+  }, []);
+
+  // Optimistically update a workflow in the local state
+  const updateWorkflowOptimistically = (workflowId: string, updateData: Partial<UserWorkflow>) => {
+    setWorkflows(prevWorkflows => 
+      prevWorkflows.map(workflow => 
+        workflow.id === workflowId 
+          ? { ...workflow, ...updateData }
+          : workflow
+      )
+    );
   };
 
   useEffect(() => {
-    fetchWorkflows();
-  }, []);
+    fetchWorkflowsData();
+  }, [fetchWorkflowsData]);
 
-  return { workflows, loading, error, refetch: fetchWorkflows };
+  // Listen for workflow creation events to refetch workflows list
+  useEffect(() => {
+    const handleWorkflowCreated = (event: CustomEvent<{ workflow: UserWorkflow }>) => {
+      const newWorkflow = event.detail.workflow;
+      
+      // Map the workflow to our frontend model
+      const mappedWorkflow: UserWorkflow = {
+        id: newWorkflow.id,
+        mandateId: newWorkflow.mandateId || '',
+        status: newWorkflow.status || 'unknown',
+        name: newWorkflow.name,
+        workflowMode: newWorkflow.workflowMode,
+        ...newWorkflow
+      };
+      
+      // Optimistically add the new workflow to the list
+      addWorkflowOptimistically(mappedWorkflow);
+      
+      // Also refetch to ensure we have the latest data
+      fetchWorkflowsData();
+    };
+
+    window.addEventListener('workflowCreated', handleWorkflowCreated as EventListener);
+    
+    return () => {
+      window.removeEventListener('workflowCreated', handleWorkflowCreated as EventListener);
+    };
+  }, [fetchWorkflowsData, addWorkflowOptimistically]);
+
+  const refetch = useCallback(async () => {
+    setIsRefetching(true);
+    try {
+      await fetchWorkflowsData();
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [fetchWorkflowsData]);
+
+  return { 
+    data: workflows, 
+    loading, 
+    isRefetching,
+    error, 
+    refetch,
+    removeWorkflowOptimistically,
+    addWorkflowOptimistically,
+    updateWorkflowOptimistically
+  };
 }
 
 // Workflow operations hook
 export function useWorkflowOperations() {
-  const [startingWorkflow, setStartingWorkflow] = useState(false);
-  const [stoppingWorkflows, setStoppingWorkflows] = useState<Set<string>>(new Set());
   const [deletingWorkflows, setDeletingWorkflows] = useState<Set<string>>(new Set());
-  const { request, isLoading } = useApiRequest();
-  const [startError, setStartError] = useState<string | null>(null);
-  const [stopError, setStopError] = useState<string | null>(null);
+  const [editingWorkflows, setEditingWorkflows] = useState<Set<string>>(new Set());
   const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [updateError, setUpdateError] = useState<string | null>(null);
+  
+  // Warning state
+  const [showWarning, setShowWarning] = useState(false);
+  const [warningData, setWarningData] = useState<{ header: string; message: string; mode: MessageMode } | null>(null);
+  
+  // Language context
+  const { t } = useLanguage();
+  
+  // Workflow selection context - to clear selection if deleted workflow is selected
+  const { selectedWorkflowId, clearWorkflow } = useWorkflowSelection();
+  
+  const { request } = useApiRequest();
 
-  const startWorkflow = async (workflowData: StartWorkflowRequest, workflowId?: string) => {
-    setStartError(null);
-    setStartingWorkflow(true);
-    
-    try {
-      const response = await request({
-        url: '/api/workflows/start',
-        method: 'post',
-        data: workflowData,
-        params: workflowId ? { workflowId } : undefined
-      }) as StartWorkflowResponse;
-      
-      return { success: true, data: response };
-    } catch (error: any) {
-      setStartError(error.message);
-      return { success: false, error: error.message };
-    } finally {
-      setStartingWorkflow(false);
-    }
-  };
-
-  const stopWorkflow = async (workflowId: string) => {
-    setStopError(null);
-    setStoppingWorkflows(prev => new Set(prev).add(workflowId));
-    
-    try {
-      await request({
-        url: `/api/workflows/${workflowId}/stop`,
-        method: 'post'
-      });
-      
-      return true;
-    } catch (error: any) {
-      setStopError(error.message);
-      return false;
-    } finally {
-      setStoppingWorkflows(prev => {
-        const newSet = new Set(prev);
-        newSet.delete(workflowId);
-        return newSet;
-      });
-    }
-  };
-
-  const deleteWorkflow = async (workflowId: string) => {
+  const handleWorkflowDelete = async (workflowId: string, onOptimisticDelete?: () => void) => {
     setDeleteError(null);
     setDeletingWorkflows(prev => new Set(prev).add(workflowId));
     
+    // Optimistically remove from UI if callback provided
+    if (onOptimisticDelete) {
+      onOptimisticDelete();
+    }
+    
     try {
-      await request({
-        url: `/api/workflows/${workflowId}`,
-        method: 'delete'
-      });
+      await deleteWorkflowApi(request, workflowId);
+
+      // Add a small delay to ensure backend has time to process
+      await new Promise(resolve => setTimeout(resolve, 300));
+      
+      // Dispatch event to notify other components (e.g., dashboard dropdown)
+      window.dispatchEvent(new CustomEvent('workflowDeleted', { 
+        detail: { workflowIds: [workflowId] } 
+      }));
+      
+      // Clear workflow selection if the deleted workflow was selected
+      if (selectedWorkflowId === workflowId) {
+        clearWorkflow();
+      }
       
       return true;
     } catch (error: any) {
-      setDeleteError(error.message);
+      console.error(`❌ Delete failed for workflow ID ${workflowId}:`, error);
+      let errorMessage = error.message;
+      
+      if (error.response?.status === 404) {
+        errorMessage = `Workflow not found or has already been deleted.`;
+        // If workflow doesn't exist, consider it successfully "deleted"
+        return true;
+      } else if (error.response?.status === 403) {
+        errorMessage = `No permission to delete this workflow.`;
+      }
+      
+      setDeleteError(errorMessage);
+      // If deletion failed and we optimistically removed it, we should refetch to restore the workflow
       return false;
     } finally {
       setDeletingWorkflows(prev => {
@@ -118,391 +206,112 @@ export function useWorkflowOperations() {
     }
   };
 
-  const updateWorkflow = async (workflowId: string, updateData: Partial<{ name: string }>) => {
-    setDeleteError(null); // Reuse delete error state for update operations
+  const handleWorkflowDeleteMultiple = async (workflowIds: string[], onOptimisticDelete?: (workflowIds: string[]) => void) => {
+    setDeleteError(null);
+    setDeletingWorkflows(prev => {
+      const newSet = new Set(prev);
+      workflowIds.forEach(id => newSet.add(id));
+      return newSet;
+    });
     
-    try {
-      const updatedWorkflow = await request({
-        url: `/api/workflows/${workflowId}`,
-        method: 'put',
-        data: updateData
-      });
-      
-      return { success: true, data: updatedWorkflow };
-    } catch (error: any) {
-      setDeleteError(error.message);
-      return { success: false, error: error.message };
-    }
-  };
-
-  return {
-    startingWorkflow,
-    stoppingWorkflows,
-    deletingWorkflows,
-    startError,
-    stopError,
-    deleteError,
-    startWorkflow,
-    stopWorkflow,
-    deleteWorkflow,
-    updateWorkflow,
-    isLoading
-  };
-}
-
-// Workflow status hook
-export function useWorkflowStatus(workflowId: string | null) {
-  const [status, setStatus] = useState<Workflow | null>(null);
-  const { request, isLoading: loading, error } = useApiRequest<null, Workflow>();
-
-  const fetchStatus = async () => {
-    if (!workflowId) {
-      // Clear status when no workflow is selected
-      setStatus(null);
-      return;
+    // Optimistically remove from UI if callback provided
+    if (onOptimisticDelete) {
+      onOptimisticDelete(workflowIds);
     }
     
     try {
-      const data = await request({
-        url: `/api/workflows/${workflowId}/status`,
-        method: 'get'
-      });
+      // Delete workflows one by one since there's no bulk delete endpoint
+      await deleteWorkflowsApi(request, workflowIds);
+
+      // Add a small delay to ensure backend has time to process
+      await new Promise(resolve => setTimeout(resolve, 300));
       
-      setStatus(data);
-    } catch (error) {
-      // Error is already handled by useApiRequest
-    }
-  };
-
-  useEffect(() => {
-    fetchStatus();
-  }, [workflowId]);
-
-  return { status, loading, error, refetch: fetchStatus };
-}
-
-// Enhanced workflow messages hook with better typing
-export function useWorkflowMessages(workflowId: string | null) {
-  const [messages, setMessages] = useState<WorkflowMessage[]>([]);
-  const [lastFetchTime, setLastFetchTime] = useState<number>(0);
-  const { request, isLoading: loading, error } = useApiRequest<null, WorkflowMessage[]>();
-
-  const fetchMessages = async () => {
-    if (!workflowId) {
-      setMessages([]);
-      return [];
-    }
-    
-    try {
-      console.log(`📡 Fetching messages for workflow: ${workflowId}`);
-      const data = await request({
-        url: `/api/workflows/${workflowId}/messages`,
-        method: 'get'
-      });
+      // Dispatch event to notify other components (e.g., dashboard dropdown)
+      window.dispatchEvent(new CustomEvent('workflowDeleted', { 
+        detail: { workflowIds } 
+      }));
       
-      console.log(`📨 Raw API response for messages:`, {
-        url: `/api/workflows/${workflowId}/messages`,
-        responseType: typeof data,
-        isArray: Array.isArray(data),
-        length: data?.length,
-        rawData: data,
-        firstMessage: data?.[0],
-        firstMessageKeys: data?.[0] ? Object.keys(data[0]) : []
-      });
-      
-      // Only update if data has actually changed
-      const hasChanged = JSON.stringify(data) !== JSON.stringify(messages);
-      if (hasChanged) {
-        console.log(`📝 Messages updated: ${messages.length} → ${data?.length || 0}`);
-        setMessages(data);
-        setLastFetchTime(Date.now());
-      } else {
-        console.log(`📝 No changes in messages (${data?.length || 0} messages)`);
+      // Clear workflow selection if the selected workflow was deleted
+      if (selectedWorkflowId && workflowIds.includes(selectedWorkflowId)) {
+        clearWorkflow();
       }
       
-      return data;
-    } catch (error) {
-      console.error('Failed to fetch workflow messages:', error);
-      return [];
-    }
-  };
-
-  useEffect(() => {
-    fetchMessages();
-  }, [workflowId]);
-
-  return { messages, loading, error, refetch: fetchMessages, lastFetchTime };
-}
-
-// Get single workflow hook
-export function useWorkflow(workflowId: string | null) {
-  const [workflow, setWorkflow] = useState<Workflow | null>(null);
-  const { request, isLoading: loading, error } = useApiRequest<null, Workflow>();
-
-  const fetchWorkflow = async () => {
-    if (!workflowId) {
-      setWorkflow(null);
-      return null;
-    }
-    
-    try {
-      const data = await request({
-        url: `/api/workflows/${workflowId}`,
-        method: 'get'
-      });
-      
-      setWorkflow(data);
-      return data;
-    } catch (error) {
-      console.error('Failed to fetch workflow:', error);
-      return null;
-    }
-  };
-
-  useEffect(() => {
-    fetchWorkflow();
-  }, [workflowId]);
-
-  return { workflow, loading, error, refetch: fetchWorkflow };
-}
-
-// Enhanced workflow logs hook with better typing
-export function useWorkflowLogs(workflowId: string | null) {
-  const [logs, setLogs] = useState<WorkflowLog[]>([]);
-  const [lastFetchTime, setLastFetchTime] = useState<number>(0);
-  const { request, isLoading: loading, error } = useApiRequest<null, WorkflowLog[]>();
-
-  const fetchLogs = async () => {
-    if (!workflowId) {
-      setLogs([]);
-      return [];
-    }
-    
-    try {
-      console.log(`📡 Fetching logs for workflow: ${workflowId}`);
-      const data = await request({
-        url: `/api/workflows/${workflowId}/logs`,
-        method: 'get'
-      });
-      
-      console.log(`📋 Raw API response for logs:`, {
-        url: `/api/workflows/${workflowId}/logs`,
-        responseType: typeof data,
-        isArray: Array.isArray(data),
-        length: data?.length,
-        rawData: data,
-        firstLog: data?.[0],
-        firstLogKeys: data?.[0] ? Object.keys(data[0]) : []
-      });
-      
-      // Only update if data has actually changed
-      const hasChanged = JSON.stringify(data) !== JSON.stringify(logs);
-      if (hasChanged) {
-        console.log(`📋 Logs updated: ${logs.length} → ${data?.length || 0}`);
-        setLogs(data || []);
-        setLastFetchTime(Date.now());
-      } else {
-        console.log(`📋 No changes in logs (${data?.length || 0} logs)`);
-      }
-      
-      return data || [];
-    } catch (error) {
-      console.error('Failed to fetch workflow logs:', error);
-      return [];
-    }
-  };
-
-  useEffect(() => {
-    fetchLogs();
-  }, [workflowId]);
-
-  return { logs, loading, error, refetch: fetchLogs, lastFetchTime };
-}
-
-// File preview hook
-export function useFilePreview() {
-  const [previewContent, setPreviewContent] = useState<string | null>(null);
-  const [fileMetadata, setFileMetadata] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const { request } = useApiRequest();
-
-  const fetchPreview = async (fileId: string | number) => {
-    if (!fileId) {
-      setError("File ID not available");
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    setPreviewContent(null);
-    setFileMetadata(null);
-    
-    try {
-      // Convert fileId to number since backend expects integer
-      let numericFileId: number;
-      
-      if (typeof fileId === 'number') {
-        numericFileId = fileId;
-      } else {
-        numericFileId = parseInt(String(fileId), 10);
-      }
-      
-      if (isNaN(numericFileId)) {
-        throw new Error(`Invalid file ID format: "${fileId}" (type: ${typeof fileId}). Expected a numeric file ID, but got a document UUID. Make sure the document object has a 'fileId' property with the numeric file ID.`);
-      }
-
-                    const response = await request({
-                url: `/api/files/${numericFileId}/preview`,
-                method: 'get'
-              });
-      
-      // Handle response as object with metadata and preview content
-      if (typeof response === 'object' && response !== null) {
-        setFileMetadata(response);
-        
-        // Debug: log the full response
-        console.log('Full backend response:', response);
-        console.log('Response keys:', Object.keys(response));
-        
-        // Try different possible property names for the content
-        const content = response.preview || response.content || response.data || response.previewContent;
-        
-        console.log('Extracted content:', content ? 'has content' : 'null/empty');
-        console.log('Content type:', typeof content);
-        console.log('Content length:', content?.length);
-        
-        // If base64Encoded is true and we have content, try to decode it
-        let processedContent = content;
-        if (response.base64Encoded && content && typeof content === 'string') {
-          try {
-            processedContent = atob(content);
-            console.log('Decoded base64 content:', processedContent.substring(0, 200));
-          } catch (e) {
-            console.error('Failed to decode base64 content:', e);
-          }
-        }
-        
-        // If no preview content but file should be previewable, try to fetch raw content
-        if (!processedContent && response.name) {
-          const fileExtension = response.name.split('.').pop()?.toLowerCase();
-          const shouldBePreviewable = ['md', 'markdown', 'txt', 'py', 'js', 'ts', 'jsx', 'tsx', 'html', 'css', 'json', 'xml', 'yaml', 'yml'].includes(fileExtension || '');
-          
-          if (shouldBePreviewable) {
-            console.log('File should be previewable, attempting to fetch raw content...');
-            try {
-              // Try to fetch the raw file content using download endpoint
-              const rawResponse = await request({
-                url: `/api/files/${numericFileId}/download`,
-                method: 'get',
-                additionalConfig: { responseType: 'text' }
-              });
-              
-              console.log('Raw content fetched:', typeof rawResponse, rawResponse?.substring?.(0, 200));
-              setPreviewContent(rawResponse || null);
-              return;
-            } catch (rawError) {
-              console.error('Failed to fetch raw content:', rawError);
-            }
-          }
-        }
-        
-        setPreviewContent(processedContent || null);
-      } else {
-        // Fallback if response is just the content
-        setPreviewContent(response);
-      }
-    } catch (err: any) {
-      setError(err.message || "Failed to load preview");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const clearPreview = () => {
-    setPreviewContent(null);
-    setFileMetadata(null);
-    setError(null);
-    setIsLoading(false);
-  };
-
-  return {
-    previewContent,
-    fileMetadata,
-    isLoading,
-    error,
-    fetchPreview,
-    clearPreview
-  };
-}
-
-// File download hook
-export function useFileDownload() {
-  const [isDownloading, setIsDownloading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const { request } = useApiRequest();
-
-  const downloadFile = async (fileId: string | number, fileName?: string) => {
-    if (!fileId) {
-      setError("File ID not available");
-      return;
-    }
-
-    setIsDownloading(true);
-    setError(null);
-    
-    try {
-      // Convert fileId to number since backend expects integer
-      let numericFileId: number;
-      
-      if (typeof fileId === 'number') {
-        numericFileId = fileId;
-      } else {
-        numericFileId = parseInt(String(fileId), 10);
-      }
-      
-      if (isNaN(numericFileId)) {
-        throw new Error(`Invalid file ID format: "${fileId}" (type: ${typeof fileId}). Expected a numeric file ID, but got a document UUID. Make sure the document object has a 'fileId' property with the numeric file ID.`);
-      }
-
-      // Use the same approach as useFiles.ts - use request with blob response type
-      const blob = await request({
-        url: `/api/files/${numericFileId}/download`,
-        method: 'get',
-        // Override axios config for blob response
-        additionalConfig: { responseType: 'blob' }
-      });
-      
-      // Use provided fileName or fallback to 'download'
-      const downloadFileName = fileName || 'download';
-      
-      // Create download link and trigger download (same as useFiles.ts)
-      const url = window.URL.createObjectURL(new Blob([blob]));
-      const link = document.createElement('a');
-      link.href = url;
-      link.setAttribute('download', downloadFileName);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(url);
-      
       return true;
-    } catch (err: any) {
-      setError(err.message || "Failed to download file");
+    } catch (error: any) {
+      console.error(`❌ Bulk delete failed:`, error);
+      setDeleteError(error.message || 'Bulk delete failed');
       return false;
     } finally {
-      setIsDownloading(false);
+      setDeletingWorkflows(prev => {
+        const newSet = new Set(prev);
+        workflowIds.forEach(id => newSet.delete(id));
+        return newSet;
+      });
     }
   };
 
-  const clearError = () => {
-    setError(null);
+  const handleWorkflowUpdate = async (workflowId: string, updateData: Partial<{ name: string; description?: string; tags?: string[] }>, originalWorkflowData?: any) => {
+    setUpdateError(null);
+    setEditingWorkflows(prev => new Set(prev).add(workflowId));
+    
+    try {
+      const updatedWorkflow = await updateWorkflowApi(request, workflowId, updateData);
+      
+      return { success: true, workflowData: updatedWorkflow };
+    } catch (error: any) {
+      console.error(`Update failed for workflow ID ${workflowId}:`, error);
+      
+      let errorMessage = error.message;
+      
+      if (error.response?.status === 404) {
+        errorMessage = `Workflow not found or has been deleted.`;
+      } else if (error.response?.status === 403) {
+        errorMessage = `No permission to update this workflow.`;
+      } else if (error.response?.status === 400) {
+        errorMessage = `Invalid workflow update data: ${error.response?.data?.detail || error.response?.data || errorMessage}`;
+      } else if (error.response?.status === 422) {
+        errorMessage = `Validation error: ${error.response?.data?.detail || errorMessage}`;
+      } else if (error.response?.status === 500) {
+        errorMessage = `Server error: ${error.response?.data?.detail || errorMessage}`;
+      }
+      
+      setUpdateError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setEditingWorkflows(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(workflowId);
+        return newSet;
+      });
+    }
   };
 
+  // Function to close warning
+  const closeWarning = useCallback(() => {
+    setShowWarning(false);
+    // Delay clearing the data to allow exit animation to complete (matches CSS transition)
+    setTimeout(() => {
+      setWarningData(null);
+    }, 700);
+  }, []);
+
   return {
-    isDownloading,
-    error,
-    downloadFile,
-    clearError
+    deletingWorkflows,
+    editingWorkflows,
+    deleteError,
+    updateError,
+    handleWorkflowDelete,
+    handleWorkflowDeleteMultiple,
+    handleWorkflowUpdate,
+    // Message overlay component
+    MessageOverlayComponent: () => React.createElement(MessageOverlay, {
+      header: warningData?.header || '',
+      message: warningData?.message || '',
+      isVisible: showWarning,
+      mode: warningData?.mode || 'info',
+      onClose: closeWarning,
+      autoClose: true,
+      autoCloseDelay: 5000
+    })
   };
-} 
\ No newline at end of file
+}
diff --git a/src/locales/de.ts b/src/locales/de.ts
index d8d6e98..8da1f22 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -123,8 +123,13 @@ export default {
 
     // Connections
     'connections.title': 'Verbindungen',
+    'connections.subtitle': 'Verwalten Sie Ihre Service-Verbindungen',
     'connections.connect_google': 'Google verbinden',
     'connections.connect_microsoft': 'Microsoft verbinden',
+    'connections.add_google_button': 'Google-Verbindung hinzufügen',
+    'connections.add_microsoft_button': 'Microsoft-Verbindung hinzufügen',
+    'connections.create_google_title': 'Google-Verbindung erstellen',
+    'connections.create_microsoft_title': 'Microsoft-Verbindung erstellen',
     'connections.edit_connection_title': '{authority} Verbindung bearbeiten',
     'connections.update_connection': 'Verbindung aktualisieren',
     'connections.service_connections': 'Service-Verbindungen',
@@ -146,6 +151,15 @@ export default {
     'connections.field.last_checked': 'Zuletzt geprüft',
     'connections.field.expires_at': 'Läuft ab am',
     
+    // Connection Columns
+    'connections.column.username': 'Benutzername',
+    'connections.column.email': 'E-Mail',
+    'connections.column.authority': 'Service',
+    'connections.column.status': 'Status',
+    'connections.column.connectedat': 'Verbunden am',
+    'connections.column.lastchecked': 'Zuletzt geprüft',
+    'connections.column.expiresat': 'Läuft ab am',
+    
     // Connection Services
     'connections.service.google': 'Google',
     'connections.service.microsoft': 'Microsoft',
@@ -159,6 +173,8 @@ export default {
     'connections.action.edit': 'Bearbeiten',
     'connections.action.update': 'Aktualisieren',
     'connections.action.delete': 'Löschen',
+    'connections.action.connect': 'Verbinden',
+    'connections.action.refresh': 'Aktualisieren',
     
     // Prompt Modal
     'modal.create_prompt': 'Neuen Prompt erstellen',
@@ -694,6 +710,18 @@ export default {
     'administration.features.user_management': 'Benutzerverwaltung - Teammitglieder und Berechtigungen verwalten',
     'administration.features.system_settings': 'Systemeinstellungen - Arbeitsbereich-Einstellungen konfigurieren',
     'administration.features.data_management': 'Datenverwaltung - Datenimporte und -exporte verwalten',
+    
+    // Start page
+    'start.title': 'Start',
+    'start.description': 'Willkommen in Ihrem Arbeitsbereich',
+    'start.subtitle': 'Willkommen in Ihrem Arbeitsbereich',
+    'start.intro.description': 'Dies ist Ihr Ausgangspunkt für den Zugriff auf alle Arbeitsbereich-Features und -Tools.',
+    'start.features.title': 'Schnellzugriff',
+    'start.features.description': 'Beginnen Sie mit:',
+    'start.features.quick_access': 'Schnellzugriff - Springen Sie zu häufig verwendeten Features',
+    'start.features.recent_activities': 'Letzte Aktivitäten - Sehen Sie Ihre neueste Arbeit',
+    'start.features.overview': 'Übersicht - Sehen Sie den Arbeitsbereich-Status und Updates',
+    'start.features.navigation': 'Navigation - Erkunden Sie alle verfügbaren Tools',
 
     // Drag and Drop
     'dragdrop.overlay.default_text': 'Dateien hier ablegen',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 1afb559..1469c90 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -123,8 +123,13 @@ export default {
 
     // Connections
     'connections.title': 'Connections',
+    'connections.subtitle': 'Manage your service connections',
     'connections.connect_google': 'Connect Google',
     'connections.connect_microsoft': 'Connect Microsoft',
+    'connections.add_google_button': 'Add Google Connection',
+    'connections.add_microsoft_button': 'Add Microsoft Connection',
+    'connections.create_google_title': 'Create Google Connection',
+    'connections.create_microsoft_title': 'Create Microsoft Connection',
     'connections.edit_connection_title': 'Edit {authority} Connection',
     'connections.update_connection': 'Update Connection',
     'connections.service_connections': 'Service Connections',
@@ -146,6 +151,15 @@ export default {
     'connections.field.last_checked': 'Last Checked',
     'connections.field.expires_at': 'Expires At',
     
+    // Connection Columns
+    'connections.column.username': 'Username',
+    'connections.column.email': 'Email',
+    'connections.column.authority': 'Service',
+    'connections.column.status': 'Status',
+    'connections.column.connectedat': 'Connected At',
+    'connections.column.lastchecked': 'Last Checked',
+    'connections.column.expiresat': 'Expires At',
+    
     // Connection Services
     'connections.service.google': 'Google',
     'connections.service.microsoft': 'Microsoft',
@@ -159,6 +173,8 @@ export default {
     'connections.action.edit': 'Edit',
     'connections.action.update': 'Update',
     'connections.action.delete': 'Delete',
+    'connections.action.connect': 'Connect',
+    'connections.action.refresh': 'Refresh',
 
     
     // Prompt Modal
@@ -694,6 +710,18 @@ export default {
     'administration.features.user_management': 'User Management - Manage team members and permissions',
     'administration.features.system_settings': 'System Settings - Configure workspace settings',
     'administration.features.data_management': 'Data Management - Handle data imports and exports',
+    
+    // Start page
+    'start.title': 'Start',
+    'start.description': 'Welcome to your workspace',
+    'start.subtitle': 'Welcome to your workspace',
+    'start.intro.description': 'This is your starting point for accessing all workspace features and tools.',
+    'start.features.title': 'Quick Access',
+    'start.features.description': 'Get started with:',
+    'start.features.quick_access': 'Quick Access - Jump to frequently used features',
+    'start.features.recent_activities': 'Recent Activities - View your latest work',
+    'start.features.overview': 'Overview - See workspace status and updates',
+    'start.features.navigation': 'Navigation - Explore all available tools',
 
     // Drag and Drop
     'dragdrop.overlay.default_text': 'Drop files here',
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index 7306485..422ead8 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -123,8 +123,13 @@ export default {
     
     // Connections
     'connections.title': 'Connexions',
+    'connections.subtitle': 'Gérez vos connexions de service',
     'connections.connect_google': 'Connecter Google',
     'connections.connect_microsoft': 'Connecter Microsoft',
+    'connections.add_google_button': 'Ajouter une connexion Google',
+    'connections.add_microsoft_button': 'Ajouter une connexion Microsoft',
+    'connections.create_google_title': 'Créer une connexion Google',
+    'connections.create_microsoft_title': 'Créer une connexion Microsoft',
     'connections.edit_connection_title': 'Modifier la connexion {authority}',
     'connections.update_connection': 'Mettre à jour la connexion',
     'connections.service_connections': 'Connexions de service',
@@ -146,6 +151,15 @@ export default {
     'connections.field.last_checked': 'Dernière vérification',
     'connections.field.expires_at': 'Expire le',
     
+    // Connection Columns
+    'connections.column.username': 'Nom d\'utilisateur',
+    'connections.column.email': 'E-mail',
+    'connections.column.authority': 'Service',
+    'connections.column.status': 'Statut',
+    'connections.column.connectedat': 'Connecté le',
+    'connections.column.lastchecked': 'Dernière vérification',
+    'connections.column.expiresat': 'Expire le',
+    
     // Connection Services
     'connections.service.google': 'Google',
     'connections.service.microsoft': 'Microsoft',
@@ -159,6 +173,8 @@ export default {
     'connections.action.edit': 'Modifier',
     'connections.action.update': 'Mettre à jour',
     'connections.action.delete': 'Supprimer',
+    'connections.action.connect': 'Connecter',
+    'connections.action.refresh': 'Actualiser',
     
     // Prompt Modal
     'modal.create_prompt': 'Créer un nouveau prompt',
@@ -694,6 +710,18 @@ export default {
     'administration.features.user_management': 'Gestion des Utilisateurs - Gérer les membres de l\'équipe et les permissions',
     'administration.features.system_settings': 'Paramètres Système - Configurer les paramètres de l\'espace de travail',
     'administration.features.data_management': 'Gestion des Données - Gérer les imports et exports de données',
+    
+    // Start page
+    'start.title': 'Démarrage',
+    'start.description': 'Bienvenue dans votre espace de travail',
+    'start.subtitle': 'Bienvenue dans votre espace de travail',
+    'start.intro.description': 'Ceci est votre point de départ pour accéder à toutes les fonctionnalités et outils de votre espace de travail.',
+    'start.features.title': 'Accès Rapide',
+    'start.features.description': 'Commencez avec :',
+    'start.features.quick_access': 'Accès Rapide - Accédez rapidement aux fonctionnalités fréquemment utilisées',
+    'start.features.recent_activities': 'Activités Récentes - Consultez votre travail le plus récent',
+    'start.features.overview': 'Aperçu - Consultez le statut et les mises à jour de l\'espace de travail',
+    'start.features.navigation': 'Navigation - Explorez tous les outils disponibles',
 
     // Drag and Drop
     'dragdrop.overlay.default_text': 'Déposer les fichiers ici',
diff --git a/src/pages/Home/Connections.tsx b/src/pages/Home/Connections.tsx
deleted file mode 100644
index 12e9db6..0000000
--- a/src/pages/Home/Connections.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useState } from 'react';
-// import styles from './HomeStyles/Connections.module.css';
-import sharedStyles from '../../core/PageManager/pages.module.css';
-import { IoIosLink } from 'react-icons/io';
-import { 
-  ConnectionsTable, 
-  ConnectionEditModal, 
-  ConnectionsErrorDisplay,
-  useConnectionsLogic,
-  Connection
-} from '../../components/Connections';
-import { useLanguage } from '../../contexts/LanguageContext';
-
-function Connections() {
-  const { t } = useLanguage();
-  
-  // Use the custom hook for all business logic
-  const {
-    connections,
-    isLoading,
-    isConnecting,
-    isDisconnecting,
-    error,
-    connectError,
-    disconnectError,
-    editPopupOpen,
-    editingConnection,
-    connectionColumns,
-    connectionEditFields,
-    tableActions,
-    handleCreateConnection,
-    handleSaveConnection,
-    handleCancelEdit,
-    handleDelete,
-    handleDeleteMultiple
-  } = useConnectionsLogic();
-
-  // Local state for selected connections (if needed)
-  const [, setSelectedConnections] = useState<Connection[]>([]);
-
-  return (
-    <div className={sharedStyles.pageContainer}>
-      <div className={sharedStyles.pageCard}>
-        {/* Page Header */}
-        <div className={sharedStyles.pageHeader}>
-          <h1 className={sharedStyles.pageTitle}>{t('connections.title')}</h1>
-          <div style={{ display: 'flex', gap: '10px' }}>
-            <button 
-              className={sharedStyles.primaryButton}
-              onClick={() => handleCreateConnection('google')}
-              disabled={isLoading || isConnecting || isDisconnecting}
-            >
-              <span className={sharedStyles.buttonIcon}><IoIosLink /></span>
-              {t('connections.connect_google')}
-            </button>
-            <button 
-              className={sharedStyles.primaryButton}
-              onClick={() => handleCreateConnection('msft')}
-              disabled={isLoading || isConnecting || isDisconnecting}
-            >
-              <span className={sharedStyles.buttonIcon}><IoIosLink /></span>
-              {t('connections.connect_microsoft')}
-            </button>
-          </div>
-        </div>
-
-        <div className={sharedStyles.horizontalDivider}></div>
-
-        <div className={sharedStyles.contentArea}>
-          {/* Error Display */}
-          <ConnectionsErrorDisplay
-            error={error}
-            connectError={connectError}
-            disconnectError={disconnectError}
-          />
-
-          {/* Connections Table */}
-          <ConnectionsTable
-            connections={connections}
-            columns={connectionColumns}
-            actions={tableActions}
-            isLoading={isLoading}
-            onRowSelect={setSelectedConnections}
-            onDelete={handleDelete}
-            onDeleteMultiple={handleDeleteMultiple}
-          />
-        </div>
-      </div>
-
-      {/* Edit Connection Modal */}
-      <ConnectionEditModal
-        isOpen={editPopupOpen}
-        connection={editingConnection}
-        fields={connectionEditFields}
-        onSave={handleSaveConnection}
-        onCancel={handleCancelEdit}
-      />
-    </div>
-  );
-}
-
-export default Connections;
\ No newline at end of file
diff --git a/src/pages/Home/Dashboard.tsx b/src/pages/Home/Dashboard.tsx
deleted file mode 100644
index 92ef876..0000000
--- a/src/pages/Home/Dashboard.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { IoMdArrowDropdown } from 'react-icons/io';
-import { useLanguage } from '../../contexts/LanguageContext';
-import { useWorkflows } from '../../hooks/useWorkflows';
-import { Workflow } from '../../components/Dashboard/DashboardChat/dashboardChatAreaTypes';
-import { useWorkflowManager } from '../../components/Dashboard/DashboardChat/useWorkflowManager';
-import styles from './HomeStyles/Dashboard.module.css'
-import sharedStyles from '../../core/PageManager/pages.module.css';
-import DashboardChat from '../../components/Dashboard/DashboardChat/DashboardChat';
-import { IoMdClose } from 'react-icons/io';
-
-function Dashboard() {
-    const { t } = useLanguage();
-    const [searchParams, setSearchParams] = useSearchParams();
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    
-    // Get workflow ID from URL parameters
-    const workflowIdFromUrl = searchParams.get('workflowId');
-    const [workflowState, workflowActions] = useWorkflowManager(workflowIdFromUrl);
-    const { workflows, loading: workflowsLoading, error: workflowsError, refetch: refetchWorkflows } = useWorkflows();
-
-    const handleWorkflowSelect = useCallback((workflowId: string) => {
-        workflowActions.loadWorkflow(workflowId);
-        setIsDropdownOpen(false);
-        // Clear the URL parameter once workflow is loaded
-        setSearchParams({});
-    }, [workflowActions, setSearchParams]);
-
-    const handleResetWorkflow = useCallback(() => {
-        workflowActions.clearWorkflow();
-        // Clear the URL parameter when resetting
-        setSearchParams({});
-    }, [workflowActions, setSearchParams]);
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-                setIsDropdownOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
-
-    // Listen for workflow updates from other components (like WorkflowsTable)
-    useEffect(() => {
-        const handleWorkflowUpdated = (event: CustomEvent) => {
-            console.log('Dashboard received workflow update event:', event.detail);
-            // Refetch workflows to update the dropdown
-            refetchWorkflows();
-        };
-
-        window.addEventListener('workflowUpdated', handleWorkflowUpdated as EventListener);
-        return () => window.removeEventListener('workflowUpdated', handleWorkflowUpdated as EventListener);
-    }, [refetchWorkflows]);
-
-    const getWorkflowDisplayName = (workflow: Workflow) => 
-        workflow.name || `${workflow.id.substring(0, 8)}...`;
-
-    const formatWorkflowId = (id: string) => `${id.substring(0, 8)}...`;
-
-    const displayWorkflowId = workflowState.currentWorkflowId ? 
-        `${workflowState.currentWorkflowId.substring(0, 8)}...` : 
-        t('dashboard.log.no_workflow');
-
-    const getWorkflowStats = () => {
-        if (!workflowState.workflow) return null;
-        
-        const { workflow, messages } = workflowState;
-        const messageCount = messages?.length || 0;
-        const fileCount = messages?.reduce((count, msg) => 
-            count + (msg.documents?.length || msg.fileIds?.length || 0), 0) || 0;
-        
-        const totalTokens = (workflow.stats?.tokenCount || 0) + 
-            (messages?.reduce((sum, msg) => sum + (msg.stats?.tokenCount || 0), 0) || 0);
-        const totalBytesSent = (workflow.stats?.bytesSent || 0) + 
-            (messages?.reduce((sum, msg) => sum + (msg.stats?.bytesSent || 0), 0) || 0);
-        const totalBytesReceived = (workflow.stats?.bytesReceived || 0) + 
-            (messages?.reduce((sum, msg) => sum + (msg.stats?.bytesReceived || 0), 0) || 0);
-        const totalErrors = (workflow.stats?.errorCount || 0) + 
-            (messages?.reduce((sum, msg) => sum + (msg.stats?.errorCount || 0), 0) || 0);
-        
-        const successfulMessages = messages?.filter(msg => msg.success)?.length || 0;
-        const successRate = messageCount > 0 ? (successfulMessages / messageCount) * 100 : 100;
-
-        return {
-            status: workflow.status,
-            rounds: workflow.currentRound,
-            startedAt: workflow.startedAt,
-            messageCount,
-            fileCount,
-            tokenCount: totalTokens,
-            bytesSent: totalBytesSent,
-            bytesReceived: totalBytesReceived,
-            successRate: Math.round(successRate),
-            errorCount: totalErrors
-        };
-    };
-
-    const formatBytes = (bytes: number) => {
-        if (bytes === 0) return '0 B';
-        const k = 1024;
-        const sizes = ['B', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-    };
-
-    const formatDate = (dateValue: string | number) => {
-        if (typeof dateValue === 'number') {
-            // Convert from seconds to milliseconds for Date constructor
-            return new Date(dateValue * 1000).toLocaleString();
-        }
-        return new Date(dateValue).toLocaleString();
-    };
-
-    const getStatusColor = (status: string) => {
-        switch (status.toLowerCase()) {
-            case 'completed':
-            case 'success':
-            case 'finished':
-                return 'var(--color-success)';
-            case 'running':
-            case 'processing':
-            case 'started':
-            case 'in_progress':
-                return 'var(--color-warning)';
-            case 'failed':
-            case 'error':
-            case 'cancelled':
-                return 'var(--color-error)';
-            case 'pending':
-            case 'queued':
-            case 'waiting':
-                return 'var(--color-text-secondary)';
-            default:
-                return 'var(--color-text)';
-        }
-    };
-
-    const formatStatus = (status: string) => 
-        status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
-
-    const stats = getWorkflowStats();
-
-    return (
-        <div className={sharedStyles.pageContainer}>
-            <div className={`${sharedStyles.pageCard} ${styles.dashboardPageCard}`}>
-                <div className={styles.verticalDivider}></div>
-                
-                <div className={sharedStyles.pageHeader}>
-                    <h1 className={sharedStyles.pageTitle}>{t('nav.dashboard')}</h1>
-                    <div className={styles.headerControls}>
-                        {workflowState.currentWorkflowId ? (
-                            <>
-                                <div className={styles.workflowStats}>
-                                    <div className={styles.statItem}>
-                                        <span className={styles.statLabel}>{t('dashboard.stats.workflow')}</span>
-                                        <span className={styles.statValueMonospace}>{displayWorkflowId}</span>
-                                    </div>
-                                    
-                                    {stats && (
-                                        <>
-                                            <div className={styles.statDivider}></div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.status')}</span>
-                                                <span className={`${styles.statValue} ${styles.statValueBold}`} style={{ color: getStatusColor(stats.status) }}>
-                                                    {formatStatus(stats.status)}
-                                                </span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.rounds')}</span>
-                                                <span className={styles.statValue}>{stats.rounds}</span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.messages')}</span>
-                                                <span className={styles.statValue}>{stats.messageCount}</span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.files')}</span>
-                                                <span className={styles.statValue}>{stats.fileCount}</span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.tokens')}</span>
-                                                <span className={styles.statValue}>{stats.tokenCount.toLocaleString()}</span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.data_sent')}</span>
-                                                <span className={styles.statValue}>{formatBytes(stats.bytesSent)}</span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.data_received')}</span>
-                                                <span className={styles.statValue}>{formatBytes(stats.bytesReceived)}</span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.success_rate')}</span>
-                                                <span className={styles.statValue} style={{ 
-                                                    color: stats.successRate >= 90 ? 'var(--color-success)' : 
-                                                           stats.successRate >= 70 ? 'var(--color-warning)' : 'var(--color-error)'
-                                                }}>{stats.successRate}%</span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.errors')}</span>
-                                                <span className={`${styles.statValue} ${stats.errorCount > 0 ? styles.statValueError : ''}`}>
-                                                    {stats.errorCount}
-                                                </span>
-                                            </div>
-                                            
-                                            <div className={styles.statItem}>
-                                                <span className={styles.statLabel}>{t('dashboard.stats.started')}</span>
-                                                <span className={`${styles.statValue} ${styles.statValueSmall}`}>
-                                                    {formatDate(stats.startedAt)}
-                                                </span>
-                                            </div>
-                                        </>
-                                    )}
-                                </div>
-                                <button
-                                    className={sharedStyles.primaryButton}
-                                    onClick={handleResetWorkflow}
-                                    aria-label="Reset workflow"
-                                >
-                                    <span className={sharedStyles.buttonIcon}><IoMdClose /></span>
-                                    
-                                </button>
-                            </>
-                        ) : (
-                            <div className={styles.dropdownContainer} ref={dropdownRef}>
-                                <button
-                                    className={`${sharedStyles.primaryButton} ${styles.dropdownButton}`}
-                                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                                    disabled={workflowsLoading}
-                                    aria-expanded={isDropdownOpen}
-                                    aria-haspopup="listbox"
-                                >
-                                    <span>
-                                        {workflowsLoading 
-                                            ? t('dashboard.workflow_dropdown.loading')
-                                            : workflowsError 
-                                                ? t('dashboard.workflow_dropdown.error')
-                                                : t('dashboard.workflow_dropdown.select_workflow')
-                                        }
-                                    </span>
-                                    <IoMdArrowDropdown 
-                                        className={`${sharedStyles.buttonIcon} ${styles.dropdownIcon} ${
-                                            isDropdownOpen ? styles.dropdownIconOpen : ''
-                                        }`}
-                                    />
-                                </button>
-                                
-                                {isDropdownOpen && !workflowsLoading && !workflowsError && (
-                                    <div className={styles.dropdownMenu}>
-                                        <div className={styles.dropdownHeader}>
-                                            {t('dashboard.workflow_dropdown.available_workflows')}
-                                        </div>
-                                        
-                                        {workflows.length === 0 ? (
-                                            <div className={styles.dropdownEmpty}>
-                                                {t('dashboard.workflow_dropdown.no_workflows')}
-                                            </div>
-                                        ) : (
-                                            workflows.map((workflow) => (
-                                                <button
-                                                    key={workflow.id}
-                                                    onClick={() => handleWorkflowSelect(workflow.id)}
-                                                    className={styles.dropdownItem}
-                                                >
-                                                    <div className={styles.workflowInfo}>
-                                                        <span className={styles.workflowName}>
-                                                            {getWorkflowDisplayName(workflow)}
-                                                        </span>
-                                                        <span className={styles.workflowId}>
-                                                            ID: {formatWorkflowId(workflow.id)}
-                                                        </span>
-                                                        <span className={styles.workflowStatus}>
-                                                            {workflow.status}
-                                                        </span>
-                                                    </div>
-                                                </button>
-                                            ))
-                                        )}
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                </div>
-                <div className={sharedStyles.horizontalDivider}></div>
-                
-                <div className={styles.dashboardContentArea}>
-                    <div className={styles.chatLogContainer}>
-                        <div className={styles.chatArea}>
-                            <DashboardChat 
-                                workflowState={workflowState}
-                                workflowActions={workflowActions}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Dashboard;
diff --git a/src/pages/Home/Einstellungen.tsx b/src/pages/Home/Einstellungen.tsx
deleted file mode 100644
index e81054b..0000000
--- a/src/pages/Home/Einstellungen.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import styles from './HomeStyles/Einstellungen.module.css';
-import sharedStyles from '../../core/PageManager/pages.module.css';
-import { useLanguage } from '../../contexts/LanguageContext';
-import SettingsSpeech from '../../components/settings/settingsSpeech';
-import SettingsUser from '../../components/settings/settingsUser';
-
-function Einstellungen() {
-    console.log('🏠 Einstellungen component loaded');
-    const [isDarkMode, setIsDarkMode] = useState(false);
-    const { t, isLoading } = useLanguage();
-    const navigate = useNavigate();
-    
-    // Speech integration state
-    const [hasSpeechIntegration, setHasSpeechIntegration] = useState(false);
-
-    // Check for speech integration data
-    const checkSpeechIntegration = () => {
-        try {
-            const savedData = localStorage.getItem('speechSignUpData');
-            const timestamp = localStorage.getItem('speechSignUpTimestamp');
-            
-            if (savedData && timestamp) {
-                const savedTime = parseInt(timestamp);
-                const now = Date.now();
-                const twentyFourHours = 24 * 60 * 60 * 1000;
-                
-                // Check if data is still valid (within 24 hours)
-                if (now - savedTime < twentyFourHours) {
-                    setHasSpeechIntegration(true);
-                } else {
-                    // Data expired, clear it
-                    localStorage.removeItem('speechSignUpData');
-                    localStorage.removeItem('speechSignUpTimestamp');
-                    setHasSpeechIntegration(false);
-                }
-            } else {
-                setHasSpeechIntegration(false);
-            }
-        } catch (error) {
-            console.error('Error checking speech integration data:', error);
-            setHasSpeechIntegration(false);
-        }
-    };
-
-    // Sync component state with current theme on mount
-    useEffect(() => {
-        const savedTheme = localStorage.getItem('theme');
-        const prefersDark = savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);
-        setIsDarkMode(prefersDark);
-        
-        // Check for speech integration data
-        checkSpeechIntegration();
-    }, []);
-    
-
-    // Listen for speech integration updates
-    useEffect(() => {
-        const handleSpeechUpdate = () => {
-            checkSpeechIntegration();
-        };
-
-        window.addEventListener('speechSignUpChanged', handleSpeechUpdate);
-        return () => {
-            window.removeEventListener('speechSignUpChanged', handleSpeechUpdate);
-        };
-    }, []);
-
-    // Handle hash navigation to speech settings
-    useEffect(() => {
-        const handleHashChange = () => {
-            console.log('🔍 Current hash:', window.location.hash);
-            if (window.location.hash === '#speech-settings') {
-                console.log('🔗 Hash navigation detected: #speech-settings');
-                // Wait for the component to render, then scroll
-                const scrollToElement = () => {
-                    const element = document.getElementById('speech-settings');
-                    console.log('🎯 Looking for element with id="speech-settings":', element);
-                    if (element) {
-                        console.log('✅ Element found, scrolling to it');
-                        element.scrollIntoView({ behavior: 'smooth' });
-                        return true;
-                    }
-                    console.log('❌ Element not found');
-                    return false;
-                };
-
-                // Try immediately, then with increasing delays
-                if (!scrollToElement()) {
-                    setTimeout(() => {
-                        if (!scrollToElement()) {
-                            setTimeout(() => scrollToElement(), 200);
-                        }
-                    }, 100);
-                }
-            }
-        };
-
-        // Check hash on mount with a delay to ensure component is ready
-        const checkHashOnMount = () => {
-            console.log('🚀 Initial hash check:', window.location.hash);
-            if (window.location.hash === '#speech-settings') {
-                console.log('🚀 Initial hash check: #speech-settings');
-                // Wait for component to be ready
-                setTimeout(() => {
-                    handleHashChange();
-                }, 100);
-            }
-        };
-
-        checkHashOnMount();
-
-        // Listen for hash changes
-        window.addEventListener('hashchange', handleHashChange);
-        return () => {
-            window.removeEventListener('hashchange', handleHashChange);
-        };
-    }, []); // Remove hasSpeechIntegration dependency to avoid re-running
-
-    // Additional effect to handle hash navigation after speech integration status changes
-    useEffect(() => {
-        if (window.location.hash === '#speech-settings') {
-            console.log('🔄 Speech integration status changed, checking hash navigation');
-            // Wait a bit for the component to re-render with new content
-            setTimeout(() => {
-                const element = document.getElementById('speech-settings');
-                console.log('🎯 Re-checking element after status change:', element);
-                if (element) {
-                    console.log('✅ Element found after status change, scrolling to it');
-                    element.scrollIntoView({ behavior: 'smooth' });
-                } else {
-                    console.log('❌ Element still not found after status change');
-                }
-            }, 50);
-        }
-    }, [hasSpeechIntegration]);
-
-    // Effect to handle hash navigation when component mounts
-    useEffect(() => {
-        const handleInitialHash = () => {
-            if (window.location.hash === '#speech-settings') {
-                console.log('🚀 Component mounted with hash: #speech-settings');
-                // Wait for everything to be ready
-                setTimeout(() => {
-                    const element = document.getElementById('speech-settings');
-                    console.log('🎯 Initial mount element check:', element);
-                    if (element) {
-                        console.log('✅ Element found on mount, scrolling to it');
-                        element.scrollIntoView({ behavior: 'smooth' });
-                    } else {
-                        console.log('❌ Element not found on mount');
-                    }
-                }, 200);
-            }
-        };
-
-        handleInitialHash();
-    }, []);
-
-    const applyTheme = (isDark: boolean) => {
-        if (isDark) {
-            document.documentElement.classList.add('dark-theme');
-            document.documentElement.classList.remove('light-theme');
-        } else {
-            document.documentElement.classList.add('light-theme');
-            document.documentElement.classList.remove('dark-theme');
-        }
-        document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
-    };
-
-    const toggleTheme = () => {
-        const newIsDarkMode = !isDarkMode;
-        setIsDarkMode(newIsDarkMode);
-        applyTheme(newIsDarkMode);
-        localStorage.setItem('theme', newIsDarkMode ? 'dark' : 'light');
-    };
-    
-
-    if (isLoading) {
-        return (
-            <div className={sharedStyles.pageContainer}>
-                <div className={sharedStyles.pageCard}>
-                    <div style={{ padding: '2rem', textAlign: 'center' }}>
-                        {t('common.loading')}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className={sharedStyles.pageContainer}>
-            <div className={sharedStyles.pageCard}>
-                <h1 className={sharedStyles.pageTitle}>{t('settings.title')}</h1>
-                <div className={sharedStyles.horizontalDivider}></div>
-
-                <div className={sharedStyles.contentArea}>
-                    {/* User Information Section */}
-                    <SettingsUser />
-                    
-                    {/* Theme Setting */}
-                    <div className={styles.settingItem}>
-                        <div className={styles.settingInfo}>
-                            <span className={styles.settingLabel}>{t('settings.theme')}</span>
-                            <span className={styles.settingDescription}>
-                                {t('settings.theme.description')}
-                            </span>
-                        </div>
-                        
-                        <button 
-                            className={`${styles.themeToggle} ${isDarkMode ? styles.dark : styles.light}`}
-                            onClick={toggleTheme}
-                            aria-label={isDarkMode ? t('settings.theme.toggle.light') : t('settings.theme.toggle.dark')}
-                        >
-                            <div className={styles.toggleSlider}>
-                                <div className={styles.toggleIcon}>
-                                    {isDarkMode ? '🌙' : '☀️'}
-                                </div>
-                            </div>
-                            <span className={styles.toggleLabel}>
-                                {isDarkMode ? t('settings.theme.dark') : t('settings.theme.light')}
-                            </span>
-                        </button>
-                    </div>
-
-                    {/* Speech Integration Settings */}
-                    <div id="speech-settings" className={styles.speechSettingsSection}>
-                        {hasSpeechIntegration ? (
-                            <SettingsSpeech />
-                        ) : (
-                            <div className={styles.noSpeechData}>
-                                <p>{t('speech.settings.no_data')}</p>
-                                <button 
-                                    className={sharedStyles.primaryButton}
-                                    onClick={() => navigate('/speech')}
-                                >
-                                    {t('speech.settings.sign_up_now')}
-                                </button>
-                            </div>
-                        )}
-                    </div>
-                    
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Einstellungen;
\ No newline at end of file
diff --git a/src/pages/Home/HomeStyles/Connections.module.css b/src/pages/Home/HomeStyles/Connections.module.css
deleted file mode 100644
index 6fe72d7..0000000
--- a/src/pages/Home/HomeStyles/Connections.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-
-.connectionsTable {
-    width: 100%;
-}
-
-.errorMessage {
-    color: var(--color-red);
-    padding: 10px;
-    background-color: var(--color-red-hover);
-    border: 1px solid var(--color-red);
-    border-radius: 25px;
-    margin-bottom: 10px;
-}
diff --git a/src/pages/Home/HomeStyles/Dashboard.module.css b/src/pages/Home/HomeStyles/Dashboard.module.css
deleted file mode 100644
index 76e72c9..0000000
--- a/src/pages/Home/HomeStyles/Dashboard.module.css
+++ /dev/null
@@ -1,197 +0,0 @@
-.dashboardContentArea {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.chatLogContainer {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.chatArea {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.dashboardPageCard {
-    position: relative;
-}
-
-.verticalDivider {
-    position: absolute;
-    top: calc(86px + 23px + 1px);
-    bottom: 0;
-    left: calc(66.666% - 9px);
-    width: 1px;
-    background-color: var(--color-primary);
-    z-index: 10;
-    pointer-events: none;
-}
-
-.headerControls {
-    display: flex;
-    gap: 15px;
-    align-items: center;
-}
-
-.workflowStats {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    padding: 12px 20px;
-    border-radius: 12px;
-    font-size: 13px;
-    font-weight: 500;
-}
-
-.statItem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2px;
-    color: var(--color-text);
-}
-
-.statLabel {
-    color: var(--color-text);
-    font-size: 11px;
-    text-transform: uppercase;
-}
-
-.statValue {
-    color: var(--color-text);
-}
-
-.statValueMonospace {
-    color: var(--color-text);
-    font-family: monospace;
-}
-
-.statDivider {
-    width: 1px;
-    height: 40px;
-    background-color: var(--color-primary);
-    opacity: 0.3;
-}
-
-.dropdownContainer {
-    position: relative;
-    display: inline-block;
-}
-
-.dropdownButton {
-    min-width: 180px;
-    justify-content: space-between;
-}
-
-.dropdownIcon {
-    transition: transform 0.2s ease;
-}
-
-.dropdownIconOpen {
-    transform: rotate(180deg);
-}
-
-.dropdownMenu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    margin-top: 4px;
-    background-color: var(--color-bg);
-    border: 1px solid var(--color-primary);
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    z-index: 1000;
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.dropdownHeader {
-    padding: 12px 16px;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--color-text);
-    background-color: var(--color-bg);
-    border-bottom: 1px solid var(--color-primary);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.dropdownEmpty {
-    padding: 12px 16px;
-    font-size: 14px;
-    color: var(--color-text);
-    font-style: italic;
-}
-
-.dropdownItem {
-    width: 100%;
-    padding: 12px 16px;
-    background: none;
-    border: none;
-    text-align: left;
-    cursor: pointer;
-    font-family: var(--font-family);
-    transition: 0.2s ease;
-    border-bottom: 1px solid var(--color-primary);
-    color: var(--color-text);
-}
-
-.dropdownItem:hover {
-    background-color: var(--color-secondary);
-    color: white;
-}
-
-.workflowInfo {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.workflowName {
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.workflowId {
-    font-size: 12px;
-    color: var(--color-text);
-    font-family: monospace;
-}
-
-.workflowStatus {
-    font-size: 12px;
-    color: var(--color-text);
-    text-transform: capitalize;
-}
-
-.statValueSuccess {
-    color: var(--color-text);
-}
-
-.statValueWarning {
-    color: var(--color-text);
-}
-
-.statValueError {
-    color: var(--color-text);
-}
-
-.statValueBold {
-    font-weight: 600;
-}
-
-.statValueSmall {
-    font-size: 12px;
-}
-
diff --git a/src/pages/Home/HomeStyles/Dateien.module.css b/src/pages/Home/HomeStyles/Dateien.module.css
deleted file mode 100644
index 7bda57a..0000000
--- a/src/pages/Home/HomeStyles/Dateien.module.css
+++ /dev/null
@@ -1,101 +0,0 @@
-.tabButtonDiv {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    justify-content: flex-start;
-    flex: 1;
-}
-
-.tabButtonWrapper {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.tabButton {
-    background: transparent;
-    border: none;
-    outline: none;
-    padding: 20px 0px;
-    font-size: 14px;
-    font-weight: 500;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-    position: relative;
-    font-family: var(--font-family);
-}
-
-.tabButtonActive {
-    color: var(--color-text);
-}
-
-.tabButtonInactive {
-    color: var(--color-gray);
-}
-
-.tabButtonInactive:hover {
-    color: var(--color-text);
-}
-
-.tabUnderline {
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    height: 1px;
-    background-color: var(--color-text);
-    border-radius: 1px;
-}
-
-/* Content area customization */
-.contentArea {
-    /* Any Dateien-specific content area customizations go here */
-    /* Base styling now comes from sharedStyles.contentArea */
-}
-
-/* Dateien table container */
-.dateienTableContainer {
-    width: 100%;
-    height: 100%;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 400px; /* Ensure minimum height for table functionality */
-}
-
-/* Drop zone styles */
-.dropZone {
-    border: 2px dashed var(--color-primary);
-    border-radius: 30px;
-    padding: 15px 20px;
-    background: var(--color-bg);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    min-width: 400px;
-    text-align: center;
-}
-
-.dropZone:hover {
-    border-color: var(--color-secondary);
-}
-
-.dropZoneActive {
-    border-color: var(--color-secondary);
-    border-style: solid;
-    min-width: 400px;
-}
-
-.dropZoneText {
-    color: var(--color-text);
-    font-size: 14px;
-    font-family: var(--font-family);
-    font-weight: 400;
-    opacity: 0.8;
-}
-
-.dropZoneActive .dropZoneText {
-    opacity: 1;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/src/pages/Home/HomeStyles/Einstellungen.module.css b/src/pages/Home/HomeStyles/Einstellungen.module.css
deleted file mode 100644
index 574ba99..0000000
--- a/src/pages/Home/HomeStyles/Einstellungen.module.css
+++ /dev/null
@@ -1,317 +0,0 @@
-
-.settingsSection {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-
-.settingItem {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    background: var(--color-bg);
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    gap: 20px;
-}
-
-.settingInfo {
-    display: flex;
-    flex-direction: column;
-    color: var(--color-text);
-    gap: 5px;
-    flex: 1;
-}
-
-.settingLabel {
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--color-text);
-    font-family: var(--font-family);
-}
-
-.settingDescription {
-    font-size: 0.875rem;
-    color: var(--color-primary);
-    font-family: var(--font-family);
-}
-
-.themeToggle {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 20px;
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    background: var(--color-bg);
-    color: var(--color-text);
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    font-weight: 500;
-    min-width: 120px;
-}
-
-.themeToggle:hover {
-    border-color: var(--color-secondary);
-    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.1);
-}
-
-
-.toggleSlider {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    background: var(--color-secondary);
-    transition: all 0.3s ease;
-}
-
-.dark .toggleSlider {
-    background: var(--color-primary);
-}
-
-.toggleIcon {
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.toggleLabel {
-    color: var(--color-text);
-    font-weight: 500;
-}
-
-.languageSelect {
-    display: flex;
-    align-items: center;
-    padding: 12px 20px;
-    border-radius: 25px;
-    border: 2px solid var(--color-gray-disabled);
-    background: var(--color-bg);
-    color: var(--color-text);
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    font-weight: 500;
-    min-width: 140px;
-    outline: none;
-}
-
-.languageSelect:hover {
-    border-color: var(--color-secondary);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.15);
-}
-
-.languageSelect:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
-}
-
-.languageSelect option {
-    background: var(--color-bg);
-    color: var(--color-text);
-    padding: 10px;
-}
-
-/* User Information Form Styles */
-.userInfoForm {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px;
-    background: var(--color-bg);
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    margin-bottom: 20px;
-}
-
-.formRow {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-
-.formField {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    flex: 1;
-    min-width: 250px;
-}
-
-.fieldLabel {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--color-text);
-    font-family: var(--font-family);
-}
-
-.fieldNote {
-    font-size: 0.75rem;
-    font-weight: 400;
-    color: var(--color-primary);
-    font-style: italic;
-}
-
-.formInput,
-.formSelect {
-    padding: 12px 16px;
-    border-radius: 25px;
-    border: 1px solid var(--color-primary);
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    transition: all 0.3s ease;
-    outline: none;
-}
-
-.formInput:focus,
-.formSelect:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
-}
-
-.formInput:hover,
-.formSelect:hover {
-    border-color: var(--color-secondary);
-}
-
-.formInput[readonly] {
-    background: var(--color-gray-light);
-    cursor: not-allowed;
-    opacity: 0.7;
-}
-
-.formSelect option {
-    background: var(--color-bg);
-    color: var(--color-text);
-    padding: 10px;
-}
-
-.formActions {
-    display: flex;
-    justify-content: flex-end;
-    padding-top: 10px;
-}
-
-.saveButton {
-    padding: 12px 24px;
-    border-radius: 25px;
-    border: none;
-    background: var(--color-secondary);
-    color: white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: var(--font-family);
-    font-size: 0.875rem;
-    font-weight: 500;
-    min-width: 120px;
-}
-
-.saveButton:hover:not(:disabled) {
-    background: var(--color-secondary);
-    border-color: var(--color-secondary);
-    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3);
-}
-
-.saveButton:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-.updateMessage {
-    padding: 12px 16px;
-    border-radius: 12px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 10px;
-}
-
-.successMessage {
-    background-color: #e8f5e8;
-    color: #2e7d32;
-    border: 1px solid #81c784;
-}
-
-.errorMessage {
-    background-color: #fce4ec;
-    color: #c2185b;
-    border: 1px solid #f48fb1;
-    padding: 12px 16px;
-    border-radius: 12px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 20px;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .einstellungenContainer {
-        margin: 20px;
-    }
-    
-    .settingsCard {
-        padding: 20px;
-    }
-    
-    .settingItem {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 15px;
-    }
-    
-    .themeToggle {
-        align-self: flex-end;
-    }
-    
-    .formRow {
-        flex-direction: column;
-        gap: 15px;
-    }
-    
-    .formField {
-        min-width: unset;
-    }
-    
-    .formActions {
-        justify-content: center;
-    }
-    
-    .saveButton {
-        width: 100%;
-        max-width: 200px;
-    }
-}
-
-.speechSettingsSection {
-    margin-top: 2rem;
-    padding-top: 2rem;
-    border-top: 2px solid var(--color-secondary);
-}
-
-.noSpeechData {
-    text-align: center;
-    padding: 2rem;
-    background: var(--color-bg);
-    border-radius: 20px;
-    border: 1px solid var(--color-secondary);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.noSpeechData p {
-    margin: 0 0 1.5rem 0;
-    color: var(--color-text);
-    font-size: 1rem;
-}
\ No newline at end of file
diff --git a/src/pages/Home/HomeStyles/Prompts.module.css b/src/pages/Home/HomeStyles/Prompts.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/Home/HomeStyles/Speech.module.css b/src/pages/Home/HomeStyles/Speech.module.css
deleted file mode 100644
index aa2d256..0000000
--- a/src/pages/Home/HomeStyles/Speech.module.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.partnerLogo {
-  height: 45px;
-  width: auto;
-  margin-left: 0.5rem;
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-  transition: transform 0.2s ease;
-}
-
-.partnerLogo:hover {
-  transform: scale(1.05);
-}
-
-.submittedStatus {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.statusText {
-  color: var(--color-secondary);
-  font-weight: 500;
-  font-size: 0.9rem;
-}
-
-.resetButton {
-  padding: 0.5rem 1rem;
-  background: var(--color-bg);
-  border: 1px solid var(--color-secondary);
-  color: var(--color-secondary);
-  border-radius: 20px;
-  font-size: 0.8rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.resetButton:hover {
-  background: var(--color-secondary);
-  color: var(--color-bg);
-}
-
-@media (max-width: 768px) {
-  .partnerLogo {
-    height: 20px;
-  }
-  
-  .submittedStatus {
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 0.5rem;
-  }
-}
diff --git a/src/pages/Home/HomeStyles/SpeechTranscripts.module.css b/src/pages/Home/HomeStyles/SpeechTranscripts.module.css
deleted file mode 100644
index 7b7b774..0000000
--- a/src/pages/Home/HomeStyles/SpeechTranscripts.module.css
+++ /dev/null
@@ -1,293 +0,0 @@
-.content {
-  display: flex;
-  gap: 2rem;
-  height: calc(100vh - 200px);
-  overflow: hidden;
-}
-
-.transcriptList {
-  flex: 1;
-  overflow-y: auto;
-  padding-right: 1rem;
-}
-
-.transcriptList h2 {
-  font-size: 1.2rem;
-  font-weight: bold;
-  color: var(--color-secondary);
-  margin: 0 0 1rem 0;
-  padding-bottom: 0.5rem;
-  border-bottom: 2px solid var(--color-secondary);
-}
-
-.transcriptGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1rem;
-}
-
-.transcriptCard {
-  background: var(--color-bg);
-  border: 1px solid var(--color-secondary);
-  border-radius: 20px;
-  padding: 1.25rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.transcriptCard:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-color: var(--color-secondary);
-}
-
-.transcriptCard.selected {
-  border-color: var(--color-secondary);
-  background: var(--color-secondary);
-  color: white;
-}
-
-.transcriptHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 0.75rem;
-}
-
-.transcriptTitle {
-  font-size: 1rem;
-  font-weight: bold;
-  margin: 0;
-  color: var(--color-text);
-  flex: 1;
-  margin-right: 0.5rem;
-}
-
-.transcriptCard.selected .transcriptTitle {
-  color: white;
-}
-
-.status {
-  padding: 0.25rem 0.5rem;
-  border-radius: 12px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.status.completed {
-  background: #10b981;
-  color: white;
-}
-
-.status.processing {
-  background: #f59e0b;
-  color: white;
-}
-
-.status.failed {
-  background: #ef4444;
-  color: white;
-}
-
-.transcriptMeta {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.85rem;
-  color: var(--color-text);
-}
-
-.transcriptCard.selected .transcriptMeta {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.date, .duration {
-  font-weight: 500;
-}
-
-.transcriptDetails {
-  flex: 1;
-  background: var(--color-bg);
-  border: 1px solid var(--color-secondary);
-  border-radius: 20px;
-  padding: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.detailsHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 2px solid var(--color-secondary);
-}
-
-.detailsHeader h3 {
-  font-size: 1.3rem;
-  font-weight: bold;
-  color: var(--color-text);
-  margin: 0;
-  flex: 1;
-}
-
-.closeButton {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  color: var(--color-text);
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.closeButton:hover {
-  background: var(--color-secondary);
-  color: white;
-}
-
-.detailsContent {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.metaInfo {
-  margin-bottom: 1.5rem;
-}
-
-.metaItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid var(--color-primary);
-}
-
-.metaItem:last-child {
-  border-bottom: none;
-}
-
-.metaItem strong {
-  color: var(--color-text);
-  font-weight: 600;
-}
-
-.metaItem span {
-  color: var(--color-text);
-}
-
-.transcriptContent {
-  background: var(--color-bg);
-  border: 1px solid var(--color-primary);
-  border-radius: 15px;
-  padding: 1rem;
-}
-
-.transcriptContent h4 {
-  font-size: 1rem;
-  font-weight: bold;
-  color: var(--color-secondary);
-  margin: 0 0 0.75rem 0;
-}
-
-.transcriptContent p {
-  color: var(--color-text);
-  line-height: 1.6;
-  margin: 0;
-  white-space: pre-wrap;
-}
-
-.processingMessage {
-  text-align: center;
-  padding: 2rem;
-  color: var(--color-text);
-}
-
-.processingMessage p {
-  font-style: italic;
-  margin: 0;
-}
-
-.emptyState {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: var(--color-text);
-}
-
-.emptyState p {
-  font-size: 1.1rem;
-  margin: 0;
-}
-
-.accessDenied {
-  text-align: center;
-  padding: 3rem 2rem;
-  background: var(--color-bg);
-  border: 1px solid var(--color-secondary);
-  border-radius: 20px;
-  margin: 2rem 0;
-}
-
-.accessDenied h2 {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: var(--color-text);
-  margin: 0 0 1rem 0;
-}
-
-.accessDenied p {
-  color: var(--color-text);
-  margin: 0 0 2rem 0;
-  line-height: 1.6;
-}
-
-@media (max-width: 1024px) {
-  .content {
-    flex-direction: column;
-    height: auto;
-  }
-  
-  .transcriptList {
-    overflow-y: visible;
-    padding-right: 0;
-  }
-  
-  .transcriptDetails {
-    margin-top: 1rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .transcriptGrid {
-    grid-template-columns: 1fr;
-  }
-  
-  .transcriptCard {
-    padding: 1rem;
-  }
-  
-  .transcriptDetails {
-    padding: 1rem;
-  }
-  
-  .detailsHeader h3 {
-    font-size: 1.1rem;
-  }
-  
-  .metaItem {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.25rem;
-  }
-}
diff --git a/src/pages/Home/HomeStyles/TeamBereich.module.css b/src/pages/Home/HomeStyles/TeamBereich.module.css
deleted file mode 100644
index 992083a..0000000
--- a/src/pages/Home/HomeStyles/TeamBereich.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-
-.membersList {
-    list-style: none;
-    padding: 0;
-    margin: 0; /* Custom top margin for spacing after divider */
-    width: 100%;
-    overflow-y: auto;
-}
-
-/* Keep specific height requirement for member list items */
-.membersList li {
-    display: flex;
-    align-items: center;
-    height: 60px; /* Specific height requirement for each member item */
-    padding: 0 16px;
-    border-bottom: 1px solid var(--color-gray-disabled);
-    font-size: 16px;
-    transition: background-color 0.2s ease;
-    color: var(--color-text);
-    font-family: var(--font-family);
-}
-
-.actions {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-  }
\ No newline at end of file
diff --git a/src/pages/Home/HomeStyles/TestSharepoint.module.css b/src/pages/Home/HomeStyles/TestSharepoint.module.css
deleted file mode 100644
index e78b843..0000000
--- a/src/pages/Home/HomeStyles/TestSharepoint.module.css
+++ /dev/null
@@ -1,518 +0,0 @@
-.container {
-  padding: 20px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.title {
-  font-size: 28px;
-  font-weight: 600;
-  margin-bottom: 20px;
-  color: var(--text-primary);
-}
-
-.section {
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-  border: 1px solid var(--border-primary);
-  flex-shrink: 0; /* Prevent sections from shrinking */
-}
-
-.sectionTitle {
-  font-size: 18px;
-  font-weight: 500;
-  margin-bottom: 15px;
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.connectionsGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 15px;
-}
-
-.connectionCard {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-secondary);
-  border-radius: 6px;
-  padding: 15px;
-  transition: border-color 0.2s;
-}
-
-.connectionCard:hover {
-  border-color: var(--border-accent);
-}
-
-.connectionCard.active {
-  border-color: var(--success);
-  background: var(--bg-success-subtle);
-}
-
-.connectionInfo {
-  margin-bottom: 10px;
-}
-
-.connectionName {
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-}
-
-.connectionStatus {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.connectionActions {
-  display: flex;
-  gap: 8px;
-}
-
-.testArea {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-}
-
-.requestPanel,
-.responsePanel {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-secondary);
-  border-radius: 6px;
-  padding: 15px;
-}
-
-.panelTitle {
-  font-size: 16px;
-  font-weight: 500;
-  margin-bottom: 15px;
-  color: var(--text-primary);
-}
-
-.formGroup {
-  margin-bottom: 15px;
-}
-
-.label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 5px;
-  color: var(--text-primary);
-}
-
-.input,
-.textarea,
-.select {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--border-secondary);
-  border-radius: 4px;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 14px;
-  transition: border-color 0.2s;
-}
-
-.input:focus,
-.textarea:focus,
-.select:focus {
-  outline: none;
-  border-color: var(--border-accent);
-}
-
-.textarea {
-  min-height: 120px;
-  resize: vertical;
-  font-family: 'Courier New', monospace;
-}
-
-.buttonGroup {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 15px;
-}
-
-.button {
-  padding: 8px 16px;
-  border: 1px solid var(--border-secondary);
-  border-radius: 4px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.button:hover {
-  background: var(--bg-secondary);
-  border-color: var(--border-accent);
-}
-
-.button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.button.primary {
-  background: var(--primary);
-  color: white;
-  border-color: var(--primary);
-}
-
-.button.primary:hover {
-  background: var(--primary-dark);
-}
-
-.button.danger {
-  background: var(--error);
-  color: white;
-  border-color: var(--error);
-}
-
-.button.danger:hover {
-  background: var(--error-dark);
-}
-
-.responseArea {
-  background: var(--bg-code);
-  border: 1px solid var(--border-secondary);
-  border-radius: 4px;
-  padding: 15px;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  color: var(--text-primary);
-  white-space: pre-wrap;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.responseArea.success {
-  border-color: var(--success);
-  background: var(--bg-success-subtle);
-}
-
-.responseArea.error {
-  border-color: var(--error);
-  background: var(--bg-error-subtle);
-}
-
-.loading {
-  text-align: center;
-  padding: 20px;
-  color: var(--text-secondary);
-}
-
-.errorMessage {
-  background: var(--bg-error-subtle);
-  border: 1px solid var(--error);
-  border-radius: 4px;
-  padding: 10px;
-  color: var(--error);
-  font-size: 14px;
-  margin-bottom: 15px;
-}
-
-.successMessage {
-  background: var(--bg-success-subtle);
-  border: 1px solid var(--success);
-  border-radius: 4px;
-  padding: 10px;
-  color: var(--success);
-  font-size: 14px;
-  margin-bottom: 15px;
-}
-
-.exampleButton {
-  background: var(--bg-accent);
-  color: var(--text-accent);
-  border: 1px solid var(--border-accent);
-}
-
-.exampleButton:hover {
-  background: var(--bg-accent-hover);
-}
-
-.statusBadge {
-  display: inline-block;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-}
-
-.statusBadge.active {
-  background: var(--bg-success-subtle);
-  color: var(--success);
-}
-
-.statusBadge.pending {
-  background: var(--bg-warning-subtle);
-  color: var(--warning);
-}
-
-.statusBadge.expired {
-  background: var(--bg-error-subtle);
-  color: var(--error);
-}
-
-.statusBadge.revoked {
-  background: var(--bg-error-subtle);
-  color: var(--error);
-}
-
-.tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border-secondary);
-  margin-bottom: 15px;
-}
-
-.tab {
-  padding: 10px 20px;
-  border: none;
-  background: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s;
-}
-
-.tab:hover {
-  color: var(--text-primary);
-}
-
-.tab.active {
-  color: var(--primary);
-  border-bottom-color: var(--primary);
-}
-
-.tabContent {
-  min-height: 300px;
-}
-
-.helpText {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-top: 5px;
-  line-height: 1.4;
-}
-
-.sharepointTableContainer {
-  width: 100%;
-}
-
-.loading {
-  text-align: center;
-  padding: 20px;
-  color: var(--text-secondary);
-  font-style: italic;
-}
-
-.errorMessage {
-  background: var(--color-error-bg, #ffe6e6);
-  color: var(--color-error, #d32f2f);
-  padding: 12px;
-  border-radius: 4px;
-  border: 1px solid var(--color-error, #d32f2f);
-  margin-bottom: 15px;
-}
-
-.successMessage {
-  color: var(--color-success, #4caf50);
-  font-weight: 500;
-}
-
-.button {
-  padding: 6px 12px;
-  border: 1px solid var(--border-primary);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.button:hover {
-  background: var(--bg-hover);
-  border-color: var(--border-accent);
-}
-
-.button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid var(--border-primary);
-  border-radius: 4px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 14px;
-}
-
-.textarea {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid var(--border-primary);
-  border-radius: 4px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 14px;
-  resize: vertical;
-  min-height: 80px;
-}
-
-.requestPreview {
-  background: var(--bg-code);
-  border: 1px solid var(--border-secondary);
-  border-radius: 4px;
-  padding: 10px;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  color: var(--text-primary);
-  white-space: pre-wrap;
-  max-height: 200px;
-  overflow-y: auto;
-  margin-top: 10px;
-}
-
-/* SharePoint Site Discovery Styles */
-.sitesDiscovery {
-  margin-top: 15px;
-  padding: 15px;
-  background-color: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 6px;
-}
-
-.sitesList {
-  max-height: 300px;
-  overflow-y: auto;
-  margin-top: 10px;
-}
-
-.siteItem {
-  padding: 12px;
-  margin-bottom: 8px;
-  background-color: white;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.siteItem:hover {
-  background-color: #f1f3f4;
-  border-color: #007bff;
-}
-
-.selectedSite {
-  background-color: #e3f2fd !important;
-  border-color: #2196f3 !important;
-  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
-}
-
-.siteName {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.siteName strong {
-  color: #333;
-  font-size: 0.95em;
-}
-
-.siteType {
-  font-size: 0.8em;
-  color: #666;
-  background-color: #e9ecef;
-  padding: 2px 6px;
-  border-radius: 12px;
-  text-transform: uppercase;
-}
-
-.siteUrl {
-  font-size: 0.85em;
-  color: #007bff;
-  margin-bottom: 4px;
-  word-break: break-all;
-}
-
-.siteDescription {
-  font-size: 0.8em;
-  color: #666;
-  line-height: 1.3;
-}
-
-.noSitesFound {
-  padding: 15px;
-  background-color: #fff3cd;
-  border: 1px solid #ffeaa7;
-  border-radius: 4px;
-  color: #856404;
-  text-align: center;
-  margin-top: 10px;
-}
-
-/* Breadcrumb Navigation */
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: var(--color-bg-secondary, #f8f9fa);
-  border: 1px solid var(--color-border, #dee2e6);
-  border-radius: 6px;
-  margin-bottom: 16px;
-  font-size: 14px;
-}
-
-.breadcrumbLabel {
-  font-weight: 600;
-  color: var(--color-text-secondary, #6c757d);
-  margin-right: 8px;
-}
-
-.breadcrumbItem {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  color: var(--color-text, #212529);
-  transition: all 0.2s ease;
-}
-
-.breadcrumbClickable {
-  cursor: pointer;
-  color: var(--color-primary, #007bff);
-  text-decoration: underline;
-}
-
-.breadcrumbClickable:hover {
-  background: var(--color-primary-bg, #e7f1ff);
-  color: var(--color-primary-dark, #0056b3);
-}
-
-.breadcrumbSeparator {
-  color: var(--color-text-secondary, #6c757d);
-  font-weight: bold;
-}
\ No newline at end of file
diff --git a/src/pages/Home/HomeStyles/Workflows.module.css b/src/pages/Home/HomeStyles/Workflows.module.css
deleted file mode 100644
index c637132..0000000
--- a/src/pages/Home/HomeStyles/Workflows.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Workflows Page Styles
- * 
- * This page now uses shared styles from pages.module.css for consistency.
- * Only workflow-specific styles should be defined here.
- */
-
-/* Remove old .workflowsContainer - now using sharedStyles.pageContainer + sharedStyles.pageCard */
-
-/* Workflow table container */
-.workflowsTableContainer {
-    width: 100%;
-    height: 100%;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 400px; /* Ensure minimum height for table functionality */
-}
diff --git a/src/pages/Home/Prompts.tsx b/src/pages/Home/Prompts.tsx
deleted file mode 100644
index 31c6ebd..0000000
--- a/src/pages/Home/Prompts.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-
-import { useState } from 'react';
-import { IoMdAdd } from 'react-icons/io';
-import { PromptsTable } from '../../components/Prompts';
-import { useLanguage } from '../../contexts/LanguageContext';
-import { Popup } from '../../components/ui/Popup/Popup';
-import { EditForm } from '../../components/ui/Popup/EditForm';
-import { usePrompts, usePromptOperations } from '../../hooks/usePrompts';
-import type { EditFieldConfig } from '../../components/ui/Popup/EditForm';
-import sharedStyles from '../../core/PageManager/pages.module.css';
-
-function Prompts() {
-    const { t } = useLanguage();
-    const { prompts } = usePrompts();
-    const { handlePromptCreate, creatingPrompt } = usePromptOperations();
-    const [createModalOpen, setCreateModalOpen] = useState(false);
-    const [tableRefreshKey, setTableRefreshKey] = useState(0);
-
-    // Configure fields for creating a new prompt
-    const createPromptFields: EditFieldConfig[] = [
-        {
-            key: 'name',
-            label: t('prompts.field.name', 'Prompt Name'),
-            type: 'string',
-            editable: true,
-            required: true,
-            validator: (value: string) => {
-                if (!value || value.trim() === '') {
-                    return t('prompts.validation.nameRequired', 'Prompt name cannot be empty');
-                }
-                if (value.length > 100) {
-                    return t('prompts.validation.nameTooLong', 'Prompt name cannot exceed 100 characters');
-                }
-                return null;
-            }
-        },
-        {
-            key: 'content',
-            label: t('prompts.field.content', 'Prompt Content'),
-            type: 'textarea',
-            editable: true,
-            required: true,
-            minRows: 4,
-            maxRows: 8,
-            validator: (value: string) => {
-                if (!value || value.trim() === '') {
-                    return t('prompts.validation.contentRequired', 'Prompt content cannot be empty');
-                }
-                if (value.length > 10000) {
-                    return t('prompts.validation.contentTooLong', 'Prompt content cannot exceed 10,000 characters');
-                }
-                return null;
-            }
-        }
-    ];
-
-    const handleCreatePrompt = () => {
-        setCreateModalOpen(true);
-    };
-
-    const handleSaveNewPrompt = async (newPromptData: any) => {
-        // Get mandateId from existing prompts or use a default
-        const mandateId = prompts.length > 0 ? prompts[0].mandateId : '';
-        
-        if (!mandateId) {
-            console.error('No mandateId available. Cannot create prompt.');
-            // TODO: Show error message to user
-            return;
-        }
-
-        try {
-            const result = await handlePromptCreate({
-                name: newPromptData.name,
-                content: newPromptData.content,
-                mandateId: mandateId
-            });
-
-            if (result.success) {
-                // Close modal
-                setCreateModalOpen(false);
-                
-                // Force remount PromptsTable to refetch
-                setTableRefreshKey(prev => prev + 1);
-            } else {
-                console.error('Failed to create prompt:', result.error);
-                // TODO: Show error message to user
-            }
-        } catch (error) {
-            console.error('Failed to create prompt:', error);
-            // TODO: Show error message to user
-        }
-    };
-
-    const handleCancelCreate = () => {
-        setCreateModalOpen(false);
-    };
-
-    return (
-        <div className={sharedStyles.pageContainer}>
-            <div className={sharedStyles.pageCard}>
-                <div className={sharedStyles.pageHeader}>
-                    <h1 className={sharedStyles.pageTitle}>{t('prompts.title', 'Prompts')}</h1>
-                    <button
-                        className={sharedStyles.primaryButton}
-                        onClick={handleCreatePrompt}
-                        disabled={creatingPrompt}
-                        aria-label="Add new prompt"
-                    >
-                        <span className={sharedStyles.buttonIcon}><IoMdAdd /></span>
-                        {creatingPrompt ? t('prompts.creating', 'Creating...') : t('prompts.addNew', 'Add Prompt')}
-                    </button>
-                </div>
-                <div className={sharedStyles.pageContent}>
-                    <PromptsTable key={tableRefreshKey} />
-                </div>
-
-                {/* Create Prompt Modal */}
-                <Popup
-                    isOpen={createModalOpen}
-                    title={t('prompts.modal.create.title', 'Create New Prompt')}
-                    onClose={handleCancelCreate}
-                    size="large"
-                >
-                    <EditForm
-                        data={{ name: '', content: '' }}
-                        fields={createPromptFields}
-                        onSave={handleSaveNewPrompt}
-                        onCancel={handleCancelCreate}
-                        saveButtonText={t('prompts.modal.create.save', 'Create Prompt')}
-                        cancelButtonText={t('common.cancel', 'Cancel')}
-                    />
-                </Popup>
-            </div>
-        </div>
-    );
-}
-
-export default Prompts;
-
diff --git a/src/pages/Home/Speech.tsx b/src/pages/Home/Speech.tsx
deleted file mode 100644
index a4620f7..0000000
--- a/src/pages/Home/Speech.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, { useState } from 'react';
-import sharedStyles from '../../core/PageManager/pages.module.css';
-import { SpeechInfo, SpeechSignUp, SpeechConfirmation } from '../../components/Speech';
-import { useLanguage } from '../../contexts/LanguageContext';
-import SpitchLogo from '/logos/spitch-logo.svg';
-import styles from './HomeStyles/Speech.module.css';
-
-
-type SpeechPage = 'info' | 'signup' | 'confirmation';
-
-interface MandateData {
-  id: string;
-  mandate_general: {
-    company_name: string;
-    industry: string;
-    contact_info: {
-      email: string;
-      phone: string;
-      street: string;
-      postal_code: string;
-      city: string;
-      country: string;
-    };
-    business_hours: string;
-    timezone: string;
-  };
-  setup_contacts: boolean;
-}
-
-function Speech() {
-  const { t } = useLanguage();
-  const [currentPage, setCurrentPage] = useState<SpeechPage>('info');
-  const [hasSubmitted, setHasSubmitted] = useState<boolean>(false);
-  const [submittedData, setSubmittedData] = useState<MandateData | null>(null);
-
-  // Check for existing sign-up data on component mount
-  React.useEffect(() => {
-    try {
-      const savedData = localStorage.getItem('speechSignUpData');
-      const savedTimestamp = localStorage.getItem('speechSignUpTimestamp');
-      
-      if (savedData && savedTimestamp) {
-        const data = JSON.parse(savedData);
-        const timestamp = parseInt(savedTimestamp);
-        const now = Date.now();
-        
-        // Check if data is from current session (within last 24 hours)
-        const hoursDiff = (now - timestamp) / (1000 * 60 * 60);
-        
-        if (hoursDiff < 24) {
-          setHasSubmitted(true);
-          setSubmittedData(data);
-          setCurrentPage('confirmation');
-        } else {
-          // Clear old data
-          localStorage.removeItem('speechSignUpData');
-          localStorage.removeItem('speechSignUpTimestamp');
-        }
-      }
-    } catch (error) {
-      console.error('Failed to load saved sign-up data:', error);
-    }
-  }, []);
-
-  const handleSignUp = () => {
-    setCurrentPage('signup');
-  };
-
-  const handleSignUpSubmit = (data: MandateData) => {
-    // Save to localStorage for persistence
-    try {
-      localStorage.setItem('speechSignUpData', JSON.stringify(data));
-      localStorage.setItem('speechSignUpTimestamp', Date.now().toString());
-      console.log('Sign-up data saved to localStorage:', data);
-      
-      // Dispatch custom event to refresh sidebar
-      window.dispatchEvent(new CustomEvent('speechSignUpChanged'));
-    } catch (error) {
-      console.error('Failed to save sign-up data:', error);
-    }
-    
-    setSubmittedData(data);
-    setHasSubmitted(true);
-    setCurrentPage('confirmation');
-    console.log('Mandate data submitted:', data);
-  };
-
-  const handleBackToInfo = () => {
-    setCurrentPage('info');
-  };
-
-  const handleResetSignUp = () => {
-    // Clear localStorage and reset state
-    try {
-      localStorage.removeItem('speechSignUpData');
-      localStorage.removeItem('speechSignUpTimestamp');
-      setHasSubmitted(false);
-      setSubmittedData(null);
-      setCurrentPage('info');
-      
-      // Dispatch custom event to refresh sidebar
-      window.dispatchEvent(new CustomEvent('speechSignUpChanged'));
-    } catch (error) {
-      console.error('Failed to clear saved data:', error);
-    }
-  };
-
-  return (
-    <div className={sharedStyles.pageContainer}>
-        <div className={sharedStyles.pageCard}>
-                    <div className={sharedStyles.pageHeader}>
-                        <h1 className={sharedStyles.pageTitle}>{t('speech.title')}</h1>
-                        {currentPage === 'info' && !hasSubmitted && (
-                            <button
-                                className={sharedStyles.primaryButton}
-                                onClick={handleSignUp}
-                            >
-                                {t('speech.signup.button')}
-                            </button>
-                        )}
-                        {hasSubmitted && (
-                            <div className={styles.submittedStatus}>
-                                <span className={styles.statusText}>
-                                    {t('speech.status.submitted')}
-                                </span>
-                                <button
-                                    className={styles.resetButton}
-                                    onClick={handleResetSignUp}
-                                >
-                                    {t('speech.status.reset')}
-                                </button>
-                            </div>
-                        )}
-                    </div>
-            <div className={sharedStyles.pageSubtitle}>
-                <span>{t('speech.subtitle')}</span>
-                <img src={SpitchLogo} alt="Spitch.ai" className={styles.partnerLogo} />
-            </div>
-            {currentPage === 'info' && (
-                    <SpeechInfo />
-            )}
-            {currentPage === 'signup' && (
-              <SpeechSignUp 
-                onBack={handleBackToInfo}
-                onSubmit={handleSignUpSubmit}
-              />
-            )}
-                    {currentPage === 'confirmation' && (
-                      <SpeechConfirmation 
-                        onBackToInfo={handleBackToInfo}
-                        submittedData={submittedData}
-                        onReset={handleResetSignUp}
-                      />
-                    )}
-      </div>
-    </div>
-  );
-}
-
-export default Speech;
\ No newline at end of file
diff --git a/src/pages/Home/SpeechTranscripts.tsx b/src/pages/Home/SpeechTranscripts.tsx
deleted file mode 100644
index e9ca7aa..0000000
--- a/src/pages/Home/SpeechTranscripts.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import { useState, useEffect } from 'react';
-import sharedStyles from '../../core/PageManager/pages.module.css';
-import { useLanguage } from '../../contexts/LanguageContext';
-import { FormGenerator, ColumnConfig } from '../../components/FormGenerator/FormGenerator';
-
-interface CallTranscript {
-  id: string;
-  mandateId: string;
-  start_datetime: string;
-  finish_datetime: string;
-  caller_phone: string;
-  recipient_phone: string;
-  transcript_text: string;
-  subject: string;
-  tags: string[];
-  spitch_call_id: string;
-  created_at: string;
-  created_by: string;
-}
-
-function SpeechTranscripts() {
-  const { t } = useLanguage();
-  const [transcripts, setTranscripts] = useState<CallTranscript[]>([]);
-  const [hasSignedUp, setHasSignedUp] = useState<boolean>(false);
-
-  // Check if user has signed up for speech integration
-  useEffect(() => {
-    try {
-      const savedData = localStorage.getItem('speechSignUpData');
-      const timestamp = localStorage.getItem('speechSignUpTimestamp');
-      
-      if (savedData && timestamp) {
-        const signUpTime = parseInt(timestamp);
-        const now = Date.now();
-        const hoursDiff = (now - signUpTime) / (1000 * 60 * 60);
-        
-        // Data is valid for 24 hours
-        if (hoursDiff < 24) {
-          setHasSignedUp(true);
-        }
-      }
-    } catch (error) {
-      console.error('Error checking speech sign-up status:', error);
-    }
-  }, []);
-
-  // Column configuration for FormGenerator
-  const columns: ColumnConfig[] = [
-    {
-      key: 'subject',
-      label: t('speech.transcripts.subject', 'Subject'),
-      type: 'string',
-      width: 200,
-      sortable: true,
-      filterable: true,
-      searchable: true
-    },
-    {
-      key: 'start_datetime',
-      label: t('speech.transcripts.start_time', 'Start Time'),
-      type: 'date',
-      width: 180,
-      sortable: true,
-      filterable: true,
-      searchable: false
-    },
-    {
-      key: 'finish_datetime',
-      label: t('speech.transcripts.end_time', 'End Time'),
-      type: 'date',
-      width: 180,
-      sortable: true,
-      filterable: true,
-      searchable: false
-    },
-    {
-      key: 'caller_phone',
-      label: t('speech.transcripts.caller', 'Caller'),
-      type: 'string',
-      width: 150,
-      sortable: true,
-      filterable: true,
-      searchable: true
-    },
-    {
-      key: 'recipient_phone',
-      label: t('speech.transcripts.recipient', 'Recipient'),
-      type: 'string',
-      width: 150,
-      sortable: true,
-      filterable: true,
-      searchable: true
-    },
-    {
-      key: 'tags',
-      label: t('speech.transcripts.tags', 'Tags'),
-      type: 'string',
-      width: 200,
-      sortable: false,
-      filterable: true,
-      searchable: true,
-      formatter: (value: string[]) => value.join(', ')
-    },
-    {
-      key: 'created_at',
-      label: t('speech.transcripts.created', 'Created'),
-      type: 'date',
-      width: 150,
-      sortable: true,
-      filterable: true,
-      searchable: false
-    }
-  ];
-
-  // Mock data for demonstration
-  useEffect(() => {
-    if (hasSignedUp) {
-      setTranscripts([
-        {
-          id: '1',
-          mandateId: 'mandate-001',
-          start_datetime: '2024-01-15T10:30:00Z',
-          finish_datetime: '2024-01-15T11:15:00Z',
-          caller_phone: '+41 987 654 321',
-          recipient_phone: '+41 123 456 789',
-          transcript_text: 'This is a sample transcript content for a client meeting discussing project requirements and next steps...',
-          subject: 'Client Meeting - Project Discussion',
-          tags: ['client', 'meeting', 'project'],
-          spitch_call_id: 'spitch-call-uuid-123',
-          created_at: '2024-01-15T10:30:00Z',
-          created_by: 'system'
-        },
-        {
-          id: '2',
-          mandateId: 'mandate-001',
-          start_datetime: '2024-01-14T09:00:00Z',
-          finish_datetime: '2024-01-14T09:15:00Z',
-          caller_phone: '+41 987 654 322',
-          recipient_phone: '+41 123 456 790',
-          transcript_text: 'This is another sample transcript content for a team standup meeting covering daily updates and blockers...',
-          subject: 'Team Standup Meeting',
-          tags: ['team', 'standup', 'internal'],
-          spitch_call_id: 'spitch-call-uuid-124',
-          created_at: '2024-01-14T09:00:00Z',
-          created_by: 'system'
-        },
-        {
-          id: '3',
-          mandateId: 'mandate-001',
-          start_datetime: '2024-01-13T14:20:00Z',
-          finish_datetime: '2024-01-13T14:52:00Z',
-          caller_phone: '+41 987 654 323',
-          recipient_phone: '+41 123 456 791',
-          transcript_text: 'Customer support call regarding billing inquiry and service upgrade options...',
-          subject: 'Customer Support Call',
-          tags: ['support', 'billing', 'customer'],
-          spitch_call_id: 'spitch-call-uuid-125',
-          created_at: '2024-01-13T14:20:00Z',
-          created_by: 'system'
-        },
-        {
-          id: '4',
-          mandateId: 'mandate-001',
-          start_datetime: '2024-01-12T16:45:00Z',
-          finish_datetime: '2024-01-12T17:30:00Z',
-          caller_phone: '+41 987 654 324',
-          recipient_phone: '+41 123 456 792',
-          transcript_text: 'Technical consultation call about system integration and API documentation...',
-          subject: 'Technical Consultation',
-          tags: ['technical', 'consultation', 'integration'],
-          spitch_call_id: 'spitch-call-uuid-126',
-          created_at: '2024-01-12T16:45:00Z',
-          created_by: 'system'
-        },
-        {
-          id: '5',
-          mandateId: 'mandate-001',
-          start_datetime: '2024-01-11T11:10:00Z',
-          finish_datetime: '2024-01-11T11:25:00Z',
-          caller_phone: '+41 987 654 325',
-          recipient_phone: '+41 123 456 793',
-          transcript_text: 'Quick follow-up call to confirm meeting details and deliverables...',
-          subject: 'Follow-up Call',
-          tags: ['follow-up', 'meeting', 'confirmation'],
-          spitch_call_id: 'spitch-call-uuid-127',
-          created_at: '2024-01-11T11:10:00Z',
-          created_by: 'system'
-        }
-      ]);
-    }
-  }, [hasSignedUp]);
-
-  if (!hasSignedUp) {
-    return (
-      <div className={sharedStyles.pageContainer}>
-        <div className={sharedStyles.pageCard}>
-          <div className={sharedStyles.pageHeader}>
-            <h1 className={sharedStyles.pageTitle}>{t('speech.transcripts.title')}</h1>
-          </div>
-          <div className={sharedStyles.pageContent}>
-            <h2>{t('speech.transcripts.access_denied_title')}</h2>
-            <p>{t('speech.transcripts.access_denied_message')}</p>
-            <button 
-              className={sharedStyles.primaryButton}
-              onClick={() => window.location.href = '/speech'}
-            >
-              {t('speech.transcripts.sign_up_now')}
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={sharedStyles.pageContainer}>
-      <div className={sharedStyles.pageCard}>
-        <div className={sharedStyles.pageHeader}>
-          <h1 className={sharedStyles.pageTitle}>{t('speech.transcripts.title')}</h1>
-        </div>
-        
-        <FormGenerator
-          data={transcripts}
-          columns={columns}
-          title={t('speech.transcripts.recent_transcripts')}
-          searchable={true}
-          filterable={true}
-          sortable={true}
-          resizable={true}
-          pagination={true}
-          pageSize={10}
-          selectable={true}
-          onRowClick={(transcript) => {
-            // Handle row click - could open a modal with transcript details
-            console.log('Selected transcript:', transcript);
-          }}
-          actionButtons={[
-            {
-              type: 'view',
-              title: t('speech.transcripts.view', 'View'),
-              onAction: (transcript: CallTranscript) => {
-                // Handle view action
-                console.log('View transcript:', transcript);
-              }
-            },
-            {
-              type: 'download',
-              title: t('speech.transcripts.download', 'Download'),
-              onAction: (transcript: CallTranscript) => {
-                // Handle download action
-                console.log('Download transcript:', transcript);
-              }
-            }
-          ]}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default SpeechTranscripts;
diff --git a/src/pages/Home/TeamBereich.tsx b/src/pages/Home/TeamBereich.tsx
deleted file mode 100644
index db3dbb8..0000000
--- a/src/pages/Home/TeamBereich.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useState } from 'react';
-import { IoMdAdd } from 'react-icons/io';
-import { useLanguage } from '../../contexts/LanguageContext';
-import sharedStyles from '../../core/PageManager/pages.module.css';
-import MitgliederTable from '../../components/Mitglieder/MitgliederTable';
-
-function TeamBereich() {
-    const { t } = useLanguage();
-    const [showAddUser, setShowAddUser] = useState(false);
-
-    const handleAddUser = () => {
-        setShowAddUser(true);
-    };
-
-    return (
-        <div className={sharedStyles.pageContainer}>
-            <div className={sharedStyles.pageCard}>
-                <div className={sharedStyles.pageHeader}>
-                    <h1 className={sharedStyles.pageTitle}>{t('nav.team', 'Team-Bereich')}</h1>
-                    <button
-                        className={sharedStyles.primaryButton}
-                        onClick={handleAddUser}
-                        aria-label={t('users.add.title', 'Add User')}
-                    >
-                        <span className={sharedStyles.buttonIcon}><IoMdAdd /></span>
-                        {t('users.add.button', 'Add User')}
-                    </button>
-                </div>
-                <div className={sharedStyles.horizontalDivider}></div>
-                
-                <div className={sharedStyles.contentArea}>
-                    <MitgliederTable 
-                        showAddUser={showAddUser}
-                        onAddUserClose={() => setShowAddUser(false)}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default TeamBereich;
-
diff --git a/src/pages/Home/Workflows.tsx b/src/pages/Home/Workflows.tsx
deleted file mode 100644
index 87a0be6..0000000
--- a/src/pages/Home/Workflows.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import styles from './HomeStyles/Workflows.module.css'
-import sharedStyles from '../../core/PageManager/pages.module.css';
-import { WorkflowsTable } from '../../components/Workflows'
-import { useLanguage } from '../../contexts/LanguageContext'
-
-function Workflows () {
-    const { t } = useLanguage()
-    
-    return (
-        <div className={sharedStyles.pageContainer}>
-            <div className={sharedStyles.pageCard}>
-                <h1 className={sharedStyles.pageTitle}>{t('workflows.title')}</h1>
-                <div className={sharedStyles.horizontalDivider}></div>
-                
-                <div className={sharedStyles.contentArea}>
-                    <WorkflowsTable className={styles.workflowsTableContainer} />
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Workflows;
diff --git a/src/auth/authProvider.tsx b/src/providers/auth/AuthProvider.tsx
similarity index 92%
rename from src/auth/authProvider.tsx
rename to src/providers/auth/AuthProvider.tsx
index 03efdc4..5835037 100644
--- a/src/auth/authProvider.tsx
+++ b/src/providers/auth/AuthProvider.tsx
@@ -31,7 +31,7 @@ import {
                 
                 // Store authentication authority for backend communication
                 if (payload.account?.environment) {
-                  localStorage.setItem('auth_authority', payload.account.environment);
+                  sessionStorage.setItem('auth_authority', payload.account.environment);
                 }
                 
                 console.log('✅ MSAL login successful - tokens will be set in httpOnly cookies by backend');
@@ -55,7 +55,7 @@ import {
               
               // Store authentication authority
               if (response.account.environment) {
-                localStorage.setItem('auth_authority', response.account.environment);
+                sessionStorage.setItem('auth_authority', response.account.environment);
               }
               
               console.log('✅ MSAL redirect completed - tokens will be set in httpOnly cookies by backend');
@@ -69,7 +69,7 @@ import {
             
             // Store authentication authority for existing accounts
             if (accounts[0].environment) {
-              localStorage.setItem('auth_authority', accounts[0].environment);
+              sessionStorage.setItem('auth_authority', accounts[0].environment);
             }
             
             console.log('✅ MSAL account found - tokens will be set in httpOnly cookies by backend');
diff --git a/src/auth/ProtectedRoute.tsx b/src/providers/auth/ProtectedRoute.tsx
similarity index 95%
rename from src/auth/ProtectedRoute.tsx
rename to src/providers/auth/ProtectedRoute.tsx
index 4863442..07f11dc 100644
--- a/src/auth/ProtectedRoute.tsx
+++ b/src/providers/auth/ProtectedRoute.tsx
@@ -27,7 +27,7 @@ export const ProtectedRoute = ({
         
         try {
           // Check for authentication authority (httpOnly cookies are handled automatically)
-          const authAuthority = localStorage.getItem('auth_authority');
+          const authAuthority = sessionStorage.getItem('auth_authority');
           console.log('🔍 Checking auth authority:', authAuthority);
           
           if (authAuthority) {
@@ -50,7 +50,7 @@ export const ProtectedRoute = ({
           hasMsalAccount,
           hasBackendAuth,
           isAuthenticated: isAuth,
-          authAuthority: localStorage.getItem('auth_authority')
+          authAuthority: sessionStorage.getItem('auth_authority')
         });
         
         if (hasBackendAuth) {
@@ -82,7 +82,7 @@ export const ProtectedRoute = ({
     if (!isChecking) {
       // Double-check authentication state periodically when not initially loading
       const recheckTimer = setTimeout(() => {
-        const authAuthority = localStorage.getItem('auth_authority');
+        const authAuthority = sessionStorage.getItem('auth_authority');
         const hasMsalAccount = accounts.length > 0;
         const hasBackendAuth = !!authAuthority;
         const isAuth = hasMsalAccount || hasBackendAuth;
diff --git a/src/auth/authConfig.ts b/src/providers/auth/authConfig.ts
similarity index 100%
rename from src/auth/authConfig.ts
rename to src/providers/auth/authConfig.ts
diff --git a/src/contexts/LanguageContext.tsx b/src/providers/language/LanguageContext.tsx
similarity index 68%
rename from src/contexts/LanguageContext.tsx
rename to src/providers/language/LanguageContext.tsx
index 3f184e1..2424079 100644
--- a/src/contexts/LanguageContext.tsx
+++ b/src/providers/language/LanguageContext.tsx
@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import { Language, TranslationKeys, loadLanguage } from '../locales';
+import { Language, TranslationKeys, loadLanguage } from '../../locales';
+import { getUserDataCache } from '../../utils/userCache';
 
 
 export type { Language };
@@ -44,19 +45,12 @@ export const LanguageProvider: React.FC<LanguageProviderProps> = ({ children })
             let initialLanguage: Language = 'de';
             
             // Priority 1: Check if user data has language setting (ONLY source of truth!)
-            try {
-                const currentUserData = localStorage.getItem('currentUser');
-                if (currentUserData) {
-                    const userData = JSON.parse(currentUserData);
-                    if (userData.language && ['de', 'en', 'fr'].includes(userData.language)) {
-                        initialLanguage = userData.language as Language;
-                        console.log('🌍 Using language from user profile:', initialLanguage);
-                        await loadAndSetLanguage(initialLanguage);
-                        return;
-                    }
-                }
-            } catch (error) {
-                console.error('Error parsing user data for language:', error);
+            const userData = getUserDataCache();
+            if (userData?.language && ['de', 'en', 'fr'].includes(userData.language)) {
+                initialLanguage = userData.language as Language;
+                console.log('🌍 Using language from user profile (sessionStorage cache):', initialLanguage);
+                await loadAndSetLanguage(initialLanguage);
+                return;
             }
             
             // Priority 2: Detect browser language (fallback only if no user data)
@@ -75,29 +69,20 @@ export const LanguageProvider: React.FC<LanguageProviderProps> = ({ children })
         
         // Listen for user data updates to sync language
         const handleUserUpdate = () => {
-            try {
-                const currentUserData = localStorage.getItem('currentUser');
-                if (currentUserData) {
-                    const userData = JSON.parse(currentUserData);
-                    if (userData.language && ['de', 'en', 'fr'].includes(userData.language)) {
-                        const userLanguage = userData.language as Language;
-                        if (userLanguage !== currentLanguage) {
-                            console.log('🔄 Syncing language with user data:', userLanguage);
-                            loadAndSetLanguage(userLanguage);
-                        }
-                    }
+            const userData = getUserDataCache();
+            if (userData?.language && ['de', 'en', 'fr'].includes(userData.language)) {
+                const userLanguage = userData.language as Language;
+                if (userLanguage !== currentLanguage) {
+                    console.log('🔄 Syncing language with user data (sessionStorage cache):', userLanguage);
+                    loadAndSetLanguage(userLanguage);
                 }
-            } catch (error) {
-                console.error('Error syncing language with user data:', error);
             }
         };
 
-        // Listen for storage changes (user data updates)
-        window.addEventListener('storage', handleUserUpdate);
+        // Listen for user info update events
         window.addEventListener('userInfoUpdated', handleUserUpdate);
         
         return () => {
-            window.removeEventListener('storage', handleUserUpdate);
             window.removeEventListener('userInfoUpdated', handleUserUpdate);
         };
     }, []);
@@ -110,7 +95,7 @@ export const LanguageProvider: React.FC<LanguageProviderProps> = ({ children })
         // The settings component should:
         // 1. Update backend user profile with new language
         // 2. Refetch user data (which includes the new language)
-        // 3. Update localStorage('currentUser') with new data
+        // 3. Update sessionStorage cache with new data (via setUserDataCache)
         // 4. Call this function to sync the UI
     };
 
diff --git a/src/styles/pages.module.css b/src/styles/pages.module.css
index 58217fe..283ad78 100644
--- a/src/styles/pages.module.css
+++ b/src/styles/pages.module.css
@@ -22,7 +22,7 @@
     align-self: top;
     background: var(--color-bg);
     gap: 20px;
-    min-height: 100%;
+    height: 100%;
     overflow: hidden; /* Prevent card from expanding beyond viewport */
 }
 
@@ -224,19 +224,20 @@
 
 /* Content areas */
 .contentArea {
-    min-height: 100%;
     display: flex;
     flex-direction: column;
     gap: 10px;
     flex: 1;
-    overflow-y: auto;
-    max-height: calc(100vh - 200px); /* Account for header and padding */
+    min-height: 0;
+    overflow: hidden;
 }
 
 .scrollableContent {
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
     flex: 1;
     min-height: 0;
+    overflow: hidden;
 }
 
 
diff --git a/src/utils/privilegeCheckers.ts b/src/utils/privilegeCheckers.ts
index 0a3bf9d..b9965b1 100644
--- a/src/utils/privilegeCheckers.ts
+++ b/src/utils/privilegeCheckers.ts
@@ -1,23 +1,17 @@
 import { PrivilegeChecker } from '../core/PageManager/pageInterface';
+import { getUserDataCache } from './userCache';
 
-// Function to get current user privilege from localStorage (where it's cached)
+/**
+ * Privilege Checkers
+ * 
+ * Read-only access to user data for privilege checking.
+ * Does not manage user data storage - that's handled by authentication hooks.
+ */
+
+// Function to get current user privilege from sessionStorage cache
 const getCurrentUserPrivilege = (): string | null => {
-    try {
-        const userData = localStorage.getItem('currentUser');
-        console.log('🔍 Raw user data from localStorage:', userData);
-        
-        if (userData) {
-            const user = JSON.parse(userData);
-            console.log('🔍 Parsed user object:', user);
-            console.log('🔍 User privilege:', user.privilege);
-            return user.privilege || null;
-        }
-        console.log('❌ No user data found in localStorage');
-        return null;
-    } catch (error) {
-        console.error('Error getting user privilege from localStorage:', error);
-        return null;
-    }
+    const userData = getUserDataCache();
+    return userData?.privilege || null;
 };
 
 // Generic privilege checker for localStorage-based data with expiration
@@ -31,27 +25,14 @@ export const createLocalStoragePrivilegeChecker = (
             const savedData = localStorage.getItem(dataKey);
             const timestamp = localStorage.getItem(timestampKey);
             
-            console.log(`🔍 Checking privilege for ${dataKey}:`, { 
-                savedData: !!savedData, 
-                timestamp 
-            });
-            
             if (savedData && timestamp) {
                 const dataTime = parseInt(timestamp);
                 const now = Date.now();
                 const hoursDiff = (now - dataTime) / (1000 * 60 * 60);
                 
-                console.log(`📊 Privilege validation for ${dataKey}:`, { 
-                    dataTime, 
-                    now, 
-                    hoursDiff, 
-                    isValid: hoursDiff < expirationHours 
-                });
-                
                 return hoursDiff < expirationHours;
             }
             
-            console.log(`❌ No privilege data found for ${dataKey}`);
             return false;
         } catch (error) {
             console.error(`Error checking privilege for ${dataKey}:`, error);
@@ -70,12 +51,6 @@ export const createRolePrivilegeChecker = (
             const userRoles = await getUserRoles();
             const hasRequiredRole = requiredRoles.some(role => userRoles.includes(role));
             
-            console.log(`🔍 Checking role privilege:`, { 
-                requiredRoles, 
-                userRoles, 
-                hasRequiredRole 
-            });
-            
             return hasRequiredRole;
         } catch (error) {
             console.error('Error checking role privilege:', error);
@@ -92,14 +67,7 @@ export const createFeatureFlagChecker = (
     return async (): Promise<boolean> => {
         try {
             const flags = await getFeatureFlags();
-            const isEnabled = flags[featureFlag] === true;
-            
-            console.log(`🔍 Checking feature flag ${featureFlag}:`, { 
-                isEnabled, 
-                allFlags: flags 
-            });
-            
-            return isEnabled;
+            return flags[featureFlag] === true;
         } catch (error) {
             console.error(`Error checking feature flag ${featureFlag}:`, error);
             return false;
@@ -113,9 +81,7 @@ export const createAuthPrivilegeChecker = (
 ): PrivilegeChecker => {
     return async (): Promise<boolean> => {
         try {
-            const authenticated = await isAuthenticated();
-            console.log(`🔍 Checking authentication status:`, { authenticated });
-            return authenticated;
+            return await isAuthenticated();
         } catch (error) {
             console.error('Error checking authentication status:', error);
             return false;
@@ -144,9 +110,6 @@ export const privilegeCheckers = {
         ['admin', 'sysadmin'],
         () => {
             const userPrivilege = getCurrentUserPrivilege();
-            console.log('🔍 Admin role check - user privilege:', userPrivilege);
-            console.log('🔍 Admin role check - required roles: [admin, sysadmin]');
-            console.log('🔍 Admin role check - user roles array:', userPrivilege ? [userPrivilege] : []);
             return Promise.resolve(userPrivilege ? [userPrivilege] : []);
         }
     ),
@@ -171,7 +134,6 @@ export const privilegeCheckers = {
     betaFeatures: createFeatureFlagChecker(
         'betaFeatures',
         () => {
-            // This would typically come from your feature flag service
             const flags = JSON.parse(localStorage.getItem('featureFlags') || '{}');
             return Promise.resolve(flags);
         }
@@ -180,7 +142,6 @@ export const privilegeCheckers = {
     // Authentication checker
     authenticated: createAuthPrivilegeChecker(
         () => {
-            // This would typically come from your auth context
             const token = localStorage.getItem('authToken');
             return Promise.resolve(!!token);
         }
@@ -200,9 +161,6 @@ export const privilegeCheckers = {
         ['viewer', 'user', 'admin', 'sysadmin'],
         () => {
             const userPrivilege = getCurrentUserPrivilege();
-            console.log('🔍 Viewer role check - user privilege:', userPrivilege);
-            console.log('🔍 Viewer role check - required roles: [viewer, user, admin, sysadmin]');
-            console.log('🔍 Viewer role check - user roles array:', userPrivilege ? [userPrivilege] : []);
             return Promise.resolve(userPrivilege ? [userPrivilege] : []);
         }
     ),
diff --git a/src/utils/userCache.ts b/src/utils/userCache.ts
new file mode 100644
index 0000000..6022ffc
--- /dev/null
+++ b/src/utils/userCache.ts
@@ -0,0 +1,66 @@
+/**
+ * User Data Cache Management
+ * 
+ * Centralized user data storage using sessionStorage for security.
+ * sessionStorage is cleared when the browser tab/window closes, making it more secure than localStorage.
+ * 
+ * Flow:
+ * 1. Login → Authentication hooks (useAuthentication.ts, useUsers.ts) set user data
+ * 2. Components/Checkers → Read user data from cache
+ * 3. Logout → Clear user data cache
+ */
+
+const USER_CACHE_KEY = '__user_cache__';
+
+export interface CachedUserData {
+    id: string;
+    username: string;
+    email: string;
+    fullName: string;
+    privilege: string;
+    mandateId: string;
+    language: string;
+    enabled: boolean;
+    authenticationAuthority: string;
+}
+
+/**
+ * Set user data in sessionStorage cache
+ * Called by authentication hooks after successful login
+ */
+export const setUserDataCache = (userData: CachedUserData): void => {
+    if (userData) {
+        try {
+            sessionStorage.setItem(USER_CACHE_KEY, JSON.stringify(userData));
+        } catch (error) {
+            console.error('Failed to cache user data:', error);
+        }
+    }
+};
+
+/**
+ * Get user data from sessionStorage cache
+ * Called by components and privilege checkers
+ */
+export const getUserDataCache = (): CachedUserData | null => {
+    try {
+        const cached = sessionStorage.getItem(USER_CACHE_KEY);
+        if (cached) {
+            return JSON.parse(cached);
+        }
+    } catch (error) {
+        console.error('Failed to parse user data from cache:', error);
+        // Clear corrupted data
+        sessionStorage.removeItem(USER_CACHE_KEY);
+    }
+    return null;
+};
+
+/**
+ * Clear user data cache
+ * Called on logout
+ */
+export const clearUserDataCache = (): void => {
+    sessionStorage.removeItem(USER_CACHE_KEY);
+};
+