From a6cc5a9827d860428600dd4e8f2a611597ce463c Mon Sep 17 00:00:00 2001
From: sokol <sokol@HP>
Date: Thu, 19 Feb 2026 22:55:26 +0300
Subject: [PATCH] refactor: complete application rewrite with modern UI

---
 e2e/environment.spec.ts                  |  104 +-
 package-lock.json                        | 1193 +++++++++++++++++++++-
 package.json                             |    4 +
 postcss.config.js                        |    6 +
 src/App.css                              |   75 ++
 src/App.tsx                              |  132 +--
 src/components/ui/Badge.tsx              |   42 +
 src/components/ui/Button.tsx             |   71 ++
 src/components/ui/Card.tsx               |   85 ++
 src/components/ui/CodeBlock.tsx          |   49 +
 src/components/ui/Input.tsx              |   68 ++
 src/components/ui/Select.tsx             |   55 +
 src/components/ui/Tabs.tsx               |   75 ++
 src/components/ui/index.ts               |   16 +
 src/componets/FileChooser.tsx            |  135 ++-
 src/componets/content/ConfigTemplate.tsx |  126 ++-
 src/componets/content/Content.tsx        |  247 +++--
 src/componets/env/Environment.tsx        |  270 ++---
 src/componets/env/EnvironmentParam.tsx   |  168 +--
 src/index.css                            |  139 +++
 src/models/Config.tsx                    |  212 ++--
 src/models/ConfigReader.tsx              |  192 ++--
 src/models/Env.ts                        |  181 +++-
 src/models/EnvParam.ts                   |   95 +-
 src/models/types.ts                      |   13 +
 tailwind.config.js                       |   77 ++
 26 files changed, 3036 insertions(+), 794 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 src/components/ui/Badge.tsx
 create mode 100644 src/components/ui/Button.tsx
 create mode 100644 src/components/ui/Card.tsx
 create mode 100644 src/components/ui/CodeBlock.tsx
 create mode 100644 src/components/ui/Input.tsx
 create mode 100644 src/components/ui/Select.tsx
 create mode 100644 src/components/ui/Tabs.tsx
 create mode 100644 src/components/ui/index.ts
 create mode 100644 src/models/types.ts
 create mode 100644 tailwind.config.js

diff --git a/e2e/environment.spec.ts b/e2e/environment.spec.ts
index 99d3c37..f42f2c7 100644
--- a/e2e/environment.spec.ts
+++ b/e2e/environment.spec.ts
@@ -4,29 +4,32 @@ import * as fs from 'fs';
 test.describe('Environment Management', () => {
   test('should not allow removing DEFAULT environment', async ({ page }) => {
     await page.goto('/');
-    await page.click('button:has-text("Create new")');
-    const removeButton = page.locator('button.btn-danger[title="Remove environment"]');
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
+    const removeButton = page.locator('button[title="Remove environment"]');
     await expect(removeButton).toBeDisabled();
   });
 
   test('should remove non-DEFAULT environment', async ({ page }) => {
     await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
     page.once('dialog', async dialog => { await dialog.accept('toRemove'); });
-    await page.click('button.btn-success[title="Add environment"]');
+    await page.click('button[title="Add environment"]');
     await page.waitForTimeout(500);
     await expect(page.locator('#environments option')).toHaveCount(2);
     page.once('dialog', async dialog => { await dialog.accept(); });
-    await page.click('button.btn-danger[title="Remove environment"]');
+    await page.click('button[title="Remove environment"]');
     await page.waitForTimeout(300);
     await expect(page.locator('#environments option')).toHaveCount(1);
   });
 
   test('should create new environment and switch without errors', async ({ page }) => {
     await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
     page.once('dialog', async dialog => { await dialog.accept('env1'); });
-    await page.click('button.btn-success[title="Add environment"]');
+    await page.click('button[title="Add environment"]');
     await page.waitForTimeout(500);
     await expect(page.locator('#environments option')).toHaveCount(2);
     await page.locator('#environments').selectOption({ index: 0 });
@@ -38,12 +41,13 @@ test.describe('Environment Management', () => {
 
   test('should create multiple environments and switch between them', async ({ page }) => {
     await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
     page.once('dialog', async dialog => { await dialog.accept('env1'); });
-    await page.click('button.btn-success[title="Add environment"]');
+    await page.click('button[title="Add environment"]');
     await page.waitForTimeout(500);
     page.once('dialog', async dialog => { await dialog.accept('env2'); });
-    await page.click('button.btn-success[title="Add environment"]');
+    await page.click('button[title="Add environment"]');
     await page.waitForTimeout(500);
     await expect(page.locator('#environments option')).toHaveCount(3);
     await page.locator('#environments').selectOption({ index: 0 });
@@ -57,10 +61,11 @@ test.describe('Environment Management', () => {
 
   test('should add params and edit template manually', async ({ page }) => {
     await page.goto('/');
-    await page.click('button:has-text("Create new")');
-    const nameInput = page.locator('input[placeholder="name"]').first();
-    const valueInput = page.locator('input[placeholder="value"]').first();
-    const addButton = page.locator('button.btn-success').first();
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
+    const nameInput = page.locator('input[placeholder="Parameter name"]').first();
+    const valueInput = page.locator('input[placeholder="Parameter value"]').first();
+    const addButton = page.locator('button[title="Add parameter"]').first();
     await nameInput.fill('host');
     await valueInput.fill('localhost:8080');
     await addButton.click();
@@ -69,48 +74,49 @@ test.describe('Environment Management', () => {
     await valueInput.fill('9090');
     await addButton.click();
     await page.waitForTimeout(500);
-    await page.click('a:has-text("Content Template")');
+    await page.click('button:has-text("Content Template")');
     await page.waitForTimeout(500);
-    await expect(page.locator('button:has-text("Edit")')).toBeVisible();
-    await page.click('button:has-text("Edit")');
+    await expect(page.locator('button:has-text("Edit Template")')).toBeVisible();
+    await page.click('button:has-text("Edit Template")');
     await page.waitForTimeout(500);
     const textarea = page.locator('textarea');
     await expect(textarea).toBeVisible();
     await textarea.fill('{\n    "!!! host": "@host@",\n    "!!! port": "@port@",\n    "!!! custom": "@custom@"\n}');
     await page.waitForTimeout(300);
-    await page.click('button:has-text("Save")');
+    await page.click('button:has-text("Save Changes")');
     await page.waitForTimeout(500);
-    await expect(page.locator('button:has-text("Edit")')).toBeVisible();
+    await expect(page.locator('button:has-text("Edit Template")')).toBeVisible();
     const pageContent = await page.content();
     expect(pageContent).toContain('!!! custom');
   });
 
   test('should not duplicate params when placeholder already exists', async ({ page }) => {
     await page.goto('/');
-    await page.click('button:has-text("Create new")');
-    const nameInput = page.locator('input[placeholder="name"]').first();
-    const valueInput = page.locator('input[placeholder="value"]').first();
-    const addButton = page.locator('button.btn-success').first();
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
+    const nameInput = page.locator('input[placeholder="Parameter name"]').first();
+    const valueInput = page.locator('input[placeholder="Parameter value"]').first();
+    const addButton = page.locator('button[title="Add parameter"]').first();
     await nameInput.fill('host');
     await valueInput.fill('localhost:8080');
     await addButton.click();
     await page.waitForTimeout(500);
-    await page.click('a:has-text("Content Template")');
+    await page.click('button:has-text("Content Template")');
     await page.waitForTimeout(500);
-    await page.click('button:has-text("Edit")');
+    await page.click('button:has-text("Edit Template")');
     await page.waitForTimeout(300);
     const textarea = page.locator('textarea');
     await textarea.fill('{\n    "!!! host": "@host@",\n    "apiUrl": "http://@host@/api"\n}');
     await page.waitForTimeout(300);
-    await page.click('button:has-text("Save")');
+    await page.click('button:has-text("Save Changes")');
     await page.waitForTimeout(500);
-    await page.click('a:has-text("Env")');
+    await page.click('button:has-text("Env")');
     await page.waitForTimeout(300);
     await nameInput.fill('host');
     await valueInput.fill('updated-host:9090');
     await addButton.click();
     await page.waitForTimeout(500);
-    await page.click('a:has-text("Content Template")');
+    await page.click('button:has-text("Content Template")');
     await page.waitForTimeout(500);
     const templateContent = await page.locator('.config-template-editor').textContent();
     const hostKeyCount = (templateContent.match(/!!! host/g) || []).length;
@@ -121,49 +127,49 @@ test.describe('Environment Management', () => {
 
   test('should validate template with unquoted placeholders', async ({ page }) => {
     await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
     await page.waitForTimeout(500);
-    
-    // Add a parameter
-    await page.click('button:has-text("✚")');
+
+    // Add a parameter - use first() to get the new parameter inputs
+    await page.click('button[title="Add parameter"]');
     await page.waitForTimeout(300);
-    const nameInput = page.locator('input[placeholder="name"]');
-    const valueInput = page.locator('input[placeholder="value"]');
-    const addButton = page.locator('button:has-text("✓")');
+    const nameInput = page.locator('input[placeholder="Parameter name"]').last();
+    const valueInput = page.locator('input[placeholder="Parameter value"]').last();
+    const addButton = page.locator('button[title="Add parameter"]').last();
     await nameInput.fill('port');
     await valueInput.fill('8080');
     await addButton.click();
     await page.waitForTimeout(500);
-    
+
     // Go to Content Template and edit with unquoted placeholder
-    await page.click('a:has-text("Content Template")');
+    await page.click('button:has-text("Content Template")');
     await page.waitForTimeout(300);
-    await page.click('button:has-text("Edit")');
+    await page.click('button:has-text("Edit Template")');
     await page.waitForTimeout(300);
-    
+
     // Fill template with unquoted @port@ placeholder
     const textarea = page.locator('textarea');
     await textarea.fill('{\n    "Host": "@host@",\n    "Port": @port@,\n    "Url": "http://@host@:@port@/api"\n}');
     await page.waitForTimeout(300);
-    
+
     // Check that Save button is enabled (validation passed)
-    const saveButton = page.locator('button:has-text("Save")');
+    const saveButton = page.locator('button:has-text("Save Changes")');
     await expect(saveButton).toBeEnabled();
-    
+
     // Check that there's no JSON error
-    const errorAlert = page.locator('.alert-danger');
+    const errorAlert = page.locator('.bg-red-50');
     await expect(errorAlert).not.toBeVisible();
-    
+
     // Save the template
     await saveButton.click();
     await page.waitForTimeout(500);
-    
+
     // Verify it was saved - should be in view mode with Edit button visible
-    const editButton = page.locator('button:has-text("Edit")');
+    const editButton = page.locator('button:has-text("Edit Template")');
     await expect(editButton).toBeVisible();
-    
+
     // Verify the template content is displayed correctly
-    const codeContent = page.locator('code');
+    const codeContent = page.locator('.hljs');
     await expect(codeContent).toBeVisible();
     const content = await codeContent.textContent();
     expect(content).toContain('@port@');
@@ -171,7 +177,7 @@ test.describe('Environment Management', () => {
 
   test('should download config file with correct filename', async ({ page }) => {
     await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
     await page.waitForTimeout(500);
     const [download] = await Promise.all([
       page.waitForEvent('download'),
diff --git a/package-lock.json b/package-lock.json
index 9ee2cc2..d3f09b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "bootstrap": "^5.3.3",
+        "lucide-react": "^0.575.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-highlight": "^0.15.0"
@@ -20,11 +21,14 @@
         "@types/react-dom": "^18.3.5",
         "@types/react-highlight": "^0.12.8",
         "@vitejs/plugin-react": "^4.3.4",
+        "autoprefixer": "^10.4.24",
         "eslint": "^9.17.0",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.16",
         "globals": "^16.5.0",
         "jsdom": "^27.4.0",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.19",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.46.4",
         "vite": "^7.2.4",
@@ -38,6 +42,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.1.tgz",
@@ -1229,6 +1246,44 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.58.2",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
@@ -2160,6 +2215,47 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2177,6 +2273,43 @@
         "node": ">=12"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.24",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz",
+      "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001766",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2204,6 +2337,19 @@
         "require-from-string": "^2.0.2"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/bootstrap": {
       "version": "5.3.8",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
@@ -2234,6 +2380,19 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
@@ -2278,10 +2437,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001762",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001762.tgz",
-      "integrity": "sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==",
+      "version": "1.0.30001770",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001770.tgz",
+      "integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==",
       "dev": true,
       "funding": [
         {
@@ -2326,6 +2495,44 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2346,6 +2553,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2389,6 +2606,19 @@
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cssstyle": {
       "version": "5.3.6",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.6.tgz",
@@ -2468,6 +2698,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.267",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
@@ -2764,6 +3020,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2778,6 +3064,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2809,6 +3105,19 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2847,6 +3156,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2862,6 +3185,16 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2908,6 +3241,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -2995,6 +3341,35 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3018,6 +3393,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -3032,6 +3417,18 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3163,6 +3560,300 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
+      "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.31.1",
+        "lightningcss-darwin-arm64": "1.31.1",
+        "lightningcss-darwin-x64": "1.31.1",
+        "lightningcss-freebsd-x64": "1.31.1",
+        "lightningcss-linux-arm-gnueabihf": "1.31.1",
+        "lightningcss-linux-arm64-gnu": "1.31.1",
+        "lightningcss-linux-arm64-musl": "1.31.1",
+        "lightningcss-linux-x64-gnu": "1.31.1",
+        "lightningcss-linux-x64-musl": "1.31.1",
+        "lightningcss-win32-arm64-msvc": "1.31.1",
+        "lightningcss-win32-x64-msvc": "1.31.1"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
+      "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
+      "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
+      "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
+      "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
+      "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
+      "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
+      "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
+      "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
+      "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
+      "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
+      "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3196,6 +3887,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.575.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.575.0.tgz",
+      "integrity": "sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -3213,6 +3913,43 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3233,6 +3970,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -3266,6 +4015,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/obug": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
@@ -3373,6 +4152,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -3400,6 +4186,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.58.2",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
@@ -3476,6 +4282,140 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3496,6 +4436,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
@@ -3536,6 +4497,42 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3546,6 +4543,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3556,6 +4574,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.54.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
@@ -3598,6 +4627,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -3694,6 +4747,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3707,6 +4783,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -3714,6 +4803,77 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -3778,6 +4938,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.0.tgz",
@@ -3817,6 +4990,13 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3909,6 +5089,13 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
diff --git a/package.json b/package.json
index 0fe473b..0428c46 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
+    "lucide-react": "^0.575.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-highlight": "^0.15.0"
@@ -24,11 +25,14 @@
     "@types/react-dom": "^18.3.5",
     "@types/react-highlight": "^0.12.8",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.24",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^16.5.0",
     "jsdom": "^27.4.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.css b/src/App.css
index e69de29..1d65600 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,75 @@
+/* App-specific styles - most styling is done with Tailwind */
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar for webkit browsers */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Highlight.js override for better dark mode support */
+.hljs {
+  background: #fafafa !important;
+  padding: 1rem !important;
+  border-radius: 0.5rem;
+}
+
+/* Animation utilities */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+/* Focus visible for better accessibility */
+:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Transition utilities */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
diff --git a/src/App.tsx b/src/App.tsx
index d9009c1..3fc60e3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,15 @@
-import { useState } from 'react'
-import './App.css'
-import 'bootstrap/dist/css/bootstrap.css'
-import { Env } from './models/Env'
-import Environment from "./componets/env"
-import Content from './componets/content'
-import { FileChooser } from './componets/FileChooser'
-import { Config } from "./models/Config"
-import logo from './assets/cgg.png'
+import { useState } from 'react';
+import { File } from 'lucide-react';
+import { Env } from './models/Env';
+import { Environment } from './componets/env/Environment';
+import { Content } from './componets/content/Content';
+import { FileChooser } from './componets/FileChooser';
+import { Config } from './models/Config';
 
 class AppState {
   private constructor(
     public config: Config = new Config(),
-  ) { }
+  ) {}
 
   static readonly Instance = new AppState();
 
@@ -23,7 +21,7 @@ class AppState {
     // Simulate async save with 1 second delay
     return await new Promise<number>((resolve) => {
       setTimeout(() => {
-        console.log("Saved env:", env.name);
+        console.log('Saved env:', env.name);
         resolve(0);
       }, 1000);
     });
@@ -41,9 +39,9 @@ function App() {
 
   async function handleEnvChanged(env: Env) {
     // Optimistic update - update React state immediately
-    setEnvs(prevEnvs => {
+    setEnvs((prevEnvs) => {
       const newEnvs = [...prevEnvs];
-      const idx = newEnvs.findIndex(x => x.id === env.id);
+      const idx = newEnvs.findIndex((x) => x.id === env.id);
       if (idx > -1) {
         newEnvs[idx] = env;
       }
@@ -51,10 +49,9 @@ function App() {
     });
 
     // Also update config.envs and template to keep them in sync
-    setConfig(prevConfig => {
+    setConfig((prevConfig) => {
       const newConfig = new Config();
-      newConfig.envs = prevConfig.envs.map(e => e.id === env.id ? env : e);
-      // Update template JSON with params from this environment
+      newConfig.envs = prevConfig.envs.map((e) => (e.id === env.id ? env : e));
       newConfig.template = prevConfig.template;
       newConfig.updateTemplateFromEnv(env);
       return newConfig;
@@ -70,8 +67,8 @@ function App() {
 
   function handleEnvAdded(env: Env): number {
     const newIdx = envs.length;
-    setEnvs(prevEnvs => [...prevEnvs, env]);
-    setConfig(prevConfig => {
+    setEnvs((prevEnvs) => [...prevEnvs, env]);
+    setConfig((prevConfig) => {
       const newConfig = new Config();
       newConfig.envs = [...prevConfig.envs, env];
       newConfig.template = prevConfig.template;
@@ -81,63 +78,80 @@ function App() {
   }
 
   function handleEnvRemoved(envId: number) {
-    setEnvs(prevEnvs => prevEnvs.filter(e => e.id !== envId));
-    setConfig(prevConfig => {
+    setEnvs((prevEnvs) => prevEnvs.filter((e) => e.id !== envId));
+    setConfig((prevConfig) => {
       const newConfig = new Config();
-      newConfig.envs = prevConfig.envs.filter(e => e.id !== envId);
+      newConfig.envs = prevConfig.envs.filter((e) => e.id !== envId);
       newConfig.template = prevConfig.template;
       return newConfig;
     });
   }
 
   function handleTemplateSaved(newContent: string) {
-    setConfig(prevConfig => {
+    setConfig((prevConfig) => {
       const newConfig = new Config();
       newConfig.envs = prevConfig.envs;
-      newConfig.addTemplate(newContent);
+      newConfig.setTemplate(newContent);
       return newConfig;
     });
   }
 
   return (
-    <>
-      <main className="container-fluid m-2">
-        <div className="row mb-2">
-          <FileChooser onSelected={x => {
-            AppState.Instance.loadConfig(x);
-            setEnvs(x.envs);
-            setConfig(x);
-          }} config={config} />
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+      <main className="container mx-auto px-4 py-6 max-w-7xl">
+        {/* Header */}
+        <div className="mb-6">
+          <FileChooser
+            onSelected={(x) => {
+              AppState.Instance.loadConfig(x);
+              setEnvs(x.envs);
+              setConfig(x);
+            }}
+            config={config}
+          />
         </div>
-        {envs.length > 0 ?
-          (<div className="row">
-            <section id="env" className='col-4 me-1'>
-              <Environment
-                envs={envs}
-                onChanged={async (e) => await handleEnvChanged(e)}
-                onSelected={handleEnvSelected}
-                onAdd={handleEnvAdded}
-                onRemove={handleEnvRemoved} />
-            </section>
-            <section id="content" className="col-8 col-xl-7 border-start ms-1">
-              <Content env={currentEnv} config={config} onTemplateSaved={handleTemplateSaved} />
-            </section>
-          </div>)
-          :
-          (
-            <div className="row justify-content-center pt-5" >
-              <div className="col-1 pt-5">
-                <img src={logo} alt="" style={{ opacity: 0.2, transform: 'scale(1.8)' }} />
-              </div>
-            </div>
 
-          )}
+        {envs.length > 0 ? (
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+            {/* Environment Panel */}
+            <section className="lg:col-span-5 xl:col-span-4">
+              <div className="sticky top-6">
+                <Environment
+                  envs={envs}
+                  onChanged={async (e) => await handleEnvChanged(e)}
+                  onSelected={handleEnvSelected}
+                  onAdd={handleEnvAdded}
+                  onRemove={handleEnvRemoved}
+                />
+              </div>
+            </section>
+
+            {/* Content Panel */}
+            <section className="lg:col-span-7 xl:col-span-8">
+              <Content
+                env={currentEnv}
+                config={config}
+                onTemplateSaved={handleTemplateSaved}
+              />
+            </section>
+          </div>
+        ) : (
+          /* Empty State */
+          <div className="flex flex-col items-center justify-center py-20">
+            <div className="w-24 h-24 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
+              <File className="w-12 h-12 text-white opacity-80" />
+            </div>
+            <h2 className="text-2xl font-bold text-slate-700 mb-2">
+              No Configuration Loaded
+            </h2>
+            <p className="text-slate-500 text-center max-w-md">
+              Create a new configuration or upload an existing XML file to get started
+            </p>
+          </div>
+        )}
       </main>
-    </>
-  )
+    </div>
+  );
 }
 
-export default App
-
-
-
+export default App;
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..be99d23
--- /dev/null
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,42 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: 'sm' | 'md';
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  default: 'bg-slate-100 text-slate-700',
+  success: 'bg-green-100 text-green-800',
+  warning: 'bg-yellow-100 text-yellow-800',
+  danger: 'bg-red-100 text-red-800',
+  info: 'bg-blue-100 text-blue-800',
+};
+
+const sizeStyles: Record<'sm' | 'md', string> = {
+  sm: 'px-1.5 py-0.5 text-xs',
+  md: 'px-2 py-1 text-sm',
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className = '', variant = 'default', size = 'sm', children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={`
+          inline-flex items-center font-medium rounded-full
+          ${variantStyles[variant]}
+          ${sizeStyles[size]}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..c968482
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,71 @@
+import { LucideIcon } from 'lucide-react';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+export type ButtonVariant = 'primary' | 'success' | 'danger' | 'secondary' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: LucideIcon;
+  iconPosition?: 'left' | 'right';
+  isLoading?: boolean;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-md hover:shadow-lg',
+  success: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500 shadow-md hover:shadow-lg',
+  danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-md hover:shadow-lg',
+  secondary: 'bg-slate-200 text-slate-700 hover:bg-slate-300 focus:ring-slate-400',
+  ghost: 'bg-transparent text-slate-600 hover:bg-slate-100 focus:ring-slate-400',
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-base',
+  lg: 'px-6 py-3 text-lg',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className = '',
+      variant = 'primary',
+      size = 'md',
+      icon: Icon,
+      iconPosition = 'left',
+      isLoading = false,
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const baseStyles = `
+      inline-flex items-center justify-center gap-2
+      font-medium rounded-lg
+      transition-all duration-200
+      focus:outline-none focus:ring-2 focus:ring-offset-2
+      disabled:opacity-50 disabled:cursor-not-allowed
+      ${variantStyles[variant]}
+      ${sizeStyles[size]}
+      ${className}
+    `;
+
+    return (
+      <button ref={ref} className={baseStyles} disabled={disabled || isLoading} {...props}>
+        {isLoading ? (
+          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+        ) : Icon ? (
+          <Icon className="w-4 h-4" />
+        ) : null}
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..9d4b9a3
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,85 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'bordered' | 'elevated';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const variantStyles: Record<string, string> = {
+  default: 'bg-white',
+  bordered: 'bg-white border-2 border-slate-200',
+  elevated: 'bg-white shadow-lg',
+};
+
+const paddingStyles: Record<string, string> = {
+  none: '',
+  sm: 'p-3',
+  md: 'p-4',
+  lg: 'p-6',
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className = '', variant = 'default', padding = 'md', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`rounded-xl overflow-hidden transition-all duration-300 ${variantStyles[variant]} ${paddingStyles[padding]} ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`px-4 py-3 border-b border-slate-200 bg-slate-50 ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardHeader.displayName = 'CardHeader';
+
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`p-4 ${className}`} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardBody.displayName = 'CardBody';
+
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`px-4 py-3 border-t border-slate-200 bg-slate-50 ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardFooter.displayName = 'CardFooter';
diff --git a/src/components/ui/CodeBlock.tsx b/src/components/ui/CodeBlock.tsx
new file mode 100644
index 0000000..558d4ea
--- /dev/null
+++ b/src/components/ui/CodeBlock.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import Highlight from 'react-highlight';
+import 'highlight.js/styles/atom-one-light.css';
+
+interface CodeBlockProps {
+  code: string;
+  language?: 'json' | 'xml' | 'javascript' | 'typescript' | 'css' | 'html' | 'plaintext';
+  showLineNumbers?: boolean;
+  maxHeight?: string;
+  className?: string;
+}
+
+export function CodeBlock({
+  code,
+  language = 'plaintext',
+  showLineNumbers = false,
+  maxHeight = 'none',
+  className = '',
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={`relative group ${className}`}>
+      <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          onClick={handleCopy}
+          className="px-2 py-1 text-xs bg-slate-800 text-white rounded hover:bg-slate-700 transition-colors"
+        >
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+      
+      <div
+        className="rounded-lg overflow-hidden border border-slate-200"
+        style={{ maxHeight, overflow: maxHeight !== 'none' ? 'auto' : 'visible' }}
+      >
+        <Highlight className={`language-${language} text-sm ${showLineNumbers ? 'line-numbers' : ''}`}>
+          {code || '// Empty'}
+        </Highlight>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..ebf43b2
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,68 @@
+import { InputHTMLAttributes, forwardRef, useState } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  icon?: React.ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, hint, icon, className = '', id, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+    const baseStyles = `
+      w-full px-3 py-2
+      border rounded-lg
+      transition-all duration-200
+      focus:outline-none focus:ring-2 focus:border-transparent
+      disabled:bg-slate-100 disabled:cursor-not-allowed
+      ${error 
+        ? 'border-red-300 focus:ring-red-500 focus:border-red-500' 
+        : 'border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+      }
+      ${isFocused ? 'ring-2 ring-blue-500 border-transparent bg-blue-50' : 'bg-white'}
+      ${icon ? 'pl-10' : ''}
+      ${className}
+    `;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium text-slate-700 mb-1">
+            {label}
+          </label>
+        )}
+        
+        <div className="relative">
+          {icon && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
+              {icon}
+            </div>
+          )}
+          
+          <input
+            ref={ref}
+            id={inputId}
+            className={baseStyles}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            {...props}
+          />
+        </div>
+
+        {error && (
+          <p className="mt-1 text-sm text-red-600">{error}</p>
+        )}
+
+        {hint && !error && (
+          <p className="mt-1 text-sm text-slate-500">{hint}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
new file mode 100644
index 0000000..a9e918c
--- /dev/null
+++ b/src/components/ui/Select.tsx
@@ -0,0 +1,55 @@
+import { SelectHTMLAttributes, forwardRef } from 'react';
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  options: { value: string | number; label: string; disabled?: boolean }[];
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ label, error, options, className = '', id, ...props }, ref) => {
+    const selectId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+    const baseStyles = `
+      w-full px-3 py-2
+      border rounded-lg
+      bg-white cursor-pointer
+      transition-all duration-200
+      focus:outline-none focus:ring-2 focus:border-transparent
+      disabled:bg-slate-100 disabled:cursor-not-allowed
+      ${error 
+        ? 'border-red-300 focus:ring-red-500' 
+        : 'border-slate-300 focus:ring-blue-500'
+      }
+      ${className}
+    `;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={selectId} className="block text-sm font-medium text-slate-700 mb-1">
+            {label}
+          </label>
+        )}
+        
+        <select ref={ref} id={selectId} className={baseStyles} {...props}>
+          {options.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+
+        {error && (
+          <p className="mt-1 text-sm text-red-600">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = 'Select';
diff --git a/src/components/ui/Tabs.tsx b/src/components/ui/Tabs.tsx
new file mode 100644
index 0000000..36a1978
--- /dev/null
+++ b/src/components/ui/Tabs.tsx
@@ -0,0 +1,75 @@
+import { HTMLAttributes } from 'react';
+
+export interface Tab {
+  id: string;
+  label: string;
+  badge?: string | number;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'danger';
+}
+
+export interface TabsProps {
+  tabs: Tab[];
+  activeTab: string;
+  onChange: (tabId: string) => void;
+  className?: string;
+}
+
+export function Tabs({ tabs, activeTab, onChange, className = '', ...props }: TabsProps) {
+  return (
+    <div className={`border-b border-slate-200 ${className}`} {...props}>
+      <nav className="-mb-px flex gap-2" aria-label="Tabs">
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onChange(tab.id)}
+              className={`
+                flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-t-lg
+                border-b-2 transition-all duration-200
+                ${isActive
+                  ? 'border-blue-500 text-blue-600 bg-white'
+                  : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 hover:bg-slate-50'
+                }
+              `}
+              aria-current={isActive ? 'page' : undefined}
+            >
+              {tab.label}
+              {tab.badge !== undefined && (
+                <span
+                  className={`
+                    inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
+                    ${tab.badgeVariant === 'danger' || tab.badgeVariant === 'warning'
+                      ? 'bg-red-100 text-red-800'
+                      : 'bg-slate-100 text-slate-600'
+                    }
+                  `}
+                >
+                  {tab.badge}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}
+
+interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  isActive: boolean;
+}
+
+export function TabPanel({ isActive, children, className = '', ...props }: TabPanelProps) {
+  if (!isActive) return null;
+
+  return (
+    <div
+      className={`animate-fade-in ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
new file mode 100644
index 0000000..709523b
--- /dev/null
+++ b/src/components/ui/index.ts
@@ -0,0 +1,16 @@
+export { Button } from './Button';
+export type { ButtonVariant, ButtonSize } from './Button';
+
+export { Input } from './Input';
+
+export { Card, CardHeader, CardBody, CardFooter } from './Card';
+
+export { Select } from './Select';
+
+export { Badge } from './Badge';
+export type { BadgeVariant } from './Badge';
+
+export { Tabs, TabPanel } from './Tabs';
+export type { Tab } from './Tabs';
+
+export { CodeBlock } from './CodeBlock';
diff --git a/src/componets/FileChooser.tsx b/src/componets/FileChooser.tsx
index b86ca7d..00ed77a 100644
--- a/src/componets/FileChooser.tsx
+++ b/src/componets/FileChooser.tsx
@@ -1,41 +1,57 @@
-import { Env } from "../models/Env";
-import { ConfigReader } from "../models/ConfigReader";
-import { Config } from "../models/Config";
-import { ConfigBuilder } from "../builders/ConfigBuilder";
+import { useRef } from 'react';
+import { Upload, Download, FilePlus, File } from 'lucide-react';
+import { Button } from '../components/ui';
+import { Config } from '../models/Config';
+import { ConfigReader } from '../models/ConfigReader';
+import { ConfigBuilder } from '../builders/ConfigBuilder';
+import { Env } from '../models/Env';
 
-export function FileChooser(props: { onSelected: (x: Config) => void, config?: Config }) {
-  async function handleFile(x: React.ChangeEvent<HTMLInputElement>) {
-    let file = x.target.files![0];
+interface FileChooserProps {
+  onSelected: (config: Config) => void;
+  config?: Config;
+}
 
-    console.log(file.name, file.type, file.size, "supported:", ConfigReader.isSupportedFormat(file));
-    let reader = new ConfigReader();
-    let cfg = await reader.parseFromFile(file);
+export function FileChooser({ onSelected, config }: FileChooserProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  async function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    console.log(file.name, file.type, file.size, 'supported:', ConfigReader.isSupportedFormat(file));
+    
+    const reader = new ConfigReader();
+    const cfg = await reader.parseFromFile(file);
 
     if (cfg !== null) {
-      props.onSelected(cfg);
+      onSelected(cfg);
+    }
+    
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
     }
   }
 
-  function handleNew(){
-    let cfg = new Config();
-    cfg.addEnvs([new Env(0, "DEFAULT", [])]);
-    cfg.addTemplate("{}");
-    props.onSelected(cfg);
+  function handleNew() {
+    const cfg = new Config();
+    cfg.setEnvs([new Env(0, 'DEFAULT', [])]);
+    cfg.setTemplate('{}');
+    onSelected(cfg);
   }
 
   function handleDownload() {
-    if (!props.config) {
-      alert("No configuration loaded");
+    if (!config) {
+      alert('No configuration loaded');
       return;
     }
 
-    const xmlContent = ConfigBuilder.buildFullXml(props.config);
+    const xmlContent = ConfigBuilder.buildFullXml(config);
     const filename = ConfigBuilder.generateFilename();
-    
-    // Create blob and download
-    const blob = new Blob([xmlContent], { type: "text/xml" });
+
+    const blob = new Blob([xmlContent], { type: 'text/xml' });
     const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
+    const link = document.createElement('a');
     link.href = url;
     link.download = filename;
     document.body.appendChild(link);
@@ -45,25 +61,60 @@ export function FileChooser(props: { onSelected: (x: Config) => void, config?: C
   }
 
   return (
-    <>
-      <div className="col-2">
-        <button className="btn btn-primary" onClick={handleNew} >Create new</button>
-      </div>
-      <div className="col-auto">
-        <button 
-          className="btn btn-success" 
-          onClick={handleDownload}
-          disabled={!props.config}
-          title="Download full config template"
-        >
-          ⬇ Download
-        </button>
-      </div>
-      <div className="col-1">or</div>
+    <div className="bg-white rounded-xl shadow-md p-4 border border-slate-200">
+      <div className="flex items-center gap-4 flex-wrap">
+        {/* Logo/Brand */}
+        <div className="flex items-center gap-2">
+          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
+            <File className="w-6 h-6 text-white" />
+          </div>
+          <span className="font-bold text-xl text-slate-800">Configucci</span>
+        </div>
 
-      <div className="col">
-        <input className="form-control" type="file" id="formFile" onChange={handleFile} />
-      </div >
-    </>
+        <div className="h-8 w-px bg-slate-200" />
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-2 flex-1">
+          <Button
+            variant="primary"
+            onClick={handleNew}
+            icon={FilePlus}
+            size="sm"
+          >
+            New Config
+          </Button>
+
+          <Button
+            variant="success"
+            onClick={handleDownload}
+            icon={Download}
+            size="sm"
+            disabled={!config}
+            title="Download full config template"
+          >
+            Download
+          </Button>
+
+          <span className="text-slate-400 text-sm">or</span>
+
+          {/* File Upload */}
+          <div className="flex-1">
+            <label
+              className="flex items-center justify-center gap-2 px-4 py-2 border-2 border-dashed border-slate-300 rounded-lg cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-all duration-200"
+            >
+              <Upload className="w-4 h-4 text-slate-400" />
+              <span className="text-sm text-slate-600">Upload XML Config</span>
+              <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                accept=".xml,text/xml"
+                onChange={handleFileChange}
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/componets/content/ConfigTemplate.tsx b/src/componets/content/ConfigTemplate.tsx
index cb5b102..aed7336 100644
--- a/src/componets/content/ConfigTemplate.tsx
+++ b/src/componets/content/ConfigTemplate.tsx
@@ -1,29 +1,29 @@
-import { useState, useEffect } from "react";
-import Highlight from 'react-highlight';
-import 'highlight.js/styles/far.css';
-import { Config } from "../../models/Config";
+import { useState, useEffect } from 'react';
+import { Pencil, Save, XCircle, CheckCircle } from 'lucide-react';
+import { Button, CodeBlock, Badge } from '../../components/ui';
+import { Config } from '../../models/Config';
 
-interface ConfigTemplateProps {
+interface ConfigTemplateEditorProps {
   config: Config;
   onSaved: (newContent: string) => void;
 }
 
-export function ConfigTemplate(props: ConfigTemplateProps) {
+export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorProps) {
   const [mode, setMode] = useState<'view' | 'edit'>('view');
-  const [draftContent, setDraftContent] = useState(props.config.template.content);
-  const [originalContent, setOriginalContent] = useState(props.config.template.content);
+  const [draftContent, setDraftContent] = useState(config.template.content);
+  const [originalContent, setOriginalContent] = useState(config.template.content);
   const [jsonError, setJsonError] = useState<string | null>(null);
 
   // Sync draft when config changes (only in view mode)
   useEffect(() => {
     if (mode === 'view') {
-      setDraftContent(props.config.template.content);
+      setDraftContent(config.template.content);
     }
-  }, [props.config.template.content, mode]);
+  }, [config.template.content, mode]);
 
   function handleEdit() {
-    setOriginalContent(props.config.template.content);
-    setDraftContent(props.config.template.content);
+    setOriginalContent(config.template.content);
+    setDraftContent(config.template.content);
     setJsonError(null);
     setMode('edit');
   }
@@ -40,7 +40,7 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
       const sanitizedValue = draftContent.replace(/@[^@]+@/g, '1');
       JSON.parse(sanitizedValue);
       setJsonError(null);
-      props.onSaved(draftContent);
+      onSaved(draftContent);
       setMode('view');
     } catch (e) {
       setJsonError((e as Error).message);
@@ -52,10 +52,7 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
     // Validate JSON on every change
     try {
       if (value.trim()) {
-        // Replace @placeholders@ with valid JSON values for validation
-        // Strategy: Replace ALL @...@ patterns with "1" (valid for both string and numeric contexts)
         const sanitizedValue = value.replace(/@[^@]+@/g, '1');
-        
         JSON.parse(sanitizedValue);
         setJsonError(null);
       } else {
@@ -73,11 +70,11 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
       const start = textarea.selectionStart;
       const end = textarea.selectionEnd;
       const value = textarea.value;
-      
+
       // Insert 2 spaces at cursor position
       const newValue = value.substring(0, start) + '  ' + value.substring(end);
       handleDraftChange(newValue);
-      
+
       // Move cursor after the inserted spaces
       setTimeout(() => {
         textarea.selectionStart = textarea.selectionEnd = start + 2;
@@ -88,57 +85,86 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
   const isValidJson = jsonError === null;
 
   return (
-    <div className="config-template-editor">
+    <div className="config-template-editor animate-fade-in">
       {mode === 'view' ? (
-        <>
-          <div className="mb-2">
-            <button className="btn btn-primary btn-sm" onClick={handleEdit}>
-              ✎ Edit
-            </button>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Badge variant="success">View Mode</Badge>
+            </div>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleEdit}
+              icon={Pencil}
+            >
+              Edit Template
+            </Button>
           </div>
-          <Highlight className="language-json">
-            {props.config.template.content || "{}"}
-          </Highlight>
-        </>
+          
+          <CodeBlock code={config.template.content || '{}'} language="json" maxHeight="500px" />
+        </div>
       ) : (
-        <>
-          <div className="mb-2 d-flex gap-2 align-items-center">
-            <button 
-              className="btn btn-success btn-sm" 
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 flex-wrap">
+            <Button
+              variant="success"
+              size="sm"
               onClick={handleSave}
               disabled={!isValidJson}
+              icon={Save}
             >
-              ✓ Save
-            </button>
-            <button 
-              className="btn btn-secondary btn-sm" 
+              Save Changes
+            </Button>
+            
+            <Button
+              variant="secondary"
+              size="sm"
               onClick={handleRevert}
+              icon={XCircle}
             >
-              × Revert
-            </button>
-            <span className={`ms-2 ${isValidJson ? 'text-success' : 'text-danger'}`}>
-              {isValidJson ? 'Valid JSON' : 'Invalid JSON'}
-            </span>
+              Revert
+            </Button>
+
+            <Badge variant={isValidJson ? 'success' : 'danger'}>
+              {isValidJson ? (
+                <>
+                  <CheckCircle className="w-3 h-3 mr-1" />
+                  Valid JSON
+                </>
+              ) : (
+                <>
+                  <XCircle className="w-3 h-3 mr-1" />
+                  Invalid JSON
+                </>
+              )}
+            </Badge>
           </div>
+
           {jsonError && (
-            <div className="alert alert-danger py-1 px-2 mb-2" style={{ fontSize: '0.875rem' }}>
-              {jsonError}
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+              <p className="text-sm text-red-700 font-mono">{jsonError}</p>
             </div>
           )}
+
           <textarea
-            className={`form-control font-monospace ${isValidJson ? 'border-success' : 'border-danger'}`}
+            className={`
+              w-full p-3 font-mono text-sm rounded-lg border-2
+              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+              transition-all duration-200
+              ${isValidJson 
+                ? 'border-green-300 bg-green-50' 
+                : 'border-red-300 bg-red-50'
+              }
+            `}
             value={draftContent}
             onChange={(e) => handleDraftChange(e.target.value)}
             onKeyDown={handleKeyDown}
             rows={20}
-            style={{
-              fontFamily: 'monospace',
-              whiteSpace: 'pre',
-              overflowX: 'auto'
-            }}
+            style={{ whiteSpace: 'pre', overflowX: 'auto' }}
             spellCheck={false}
           />
-        </>
+        </div>
       )}
     </div>
   );
diff --git a/src/componets/content/Content.tsx b/src/componets/content/Content.tsx
index 89441e5..6d77cac 100644
--- a/src/componets/content/Content.tsx
+++ b/src/componets/content/Content.tsx
@@ -1,157 +1,148 @@
-import { useState } from "react";
-import { Env } from "../../models/Env";
-import Highlight from 'react-highlight'
-import 'highlight.js/styles/far.css'
-import { Builder } from "../../builders";
-import { Config } from "../../models/Config";
-import { ConfigTemplate } from "./ConfigTemplate";
+import { useState } from 'react';
+import { Tabs, TabPanel, CodeBlock } from '../../components/ui';
+import { Env } from '../../models/Env';
+import { Config } from '../../models/Config';
+import { ConfigTemplateEditor } from './ConfigTemplate';
+import { Builder } from '../../builders';
 
-
-export function Content(props: { config: Config, env: Env, onTemplateSaved: (newContent: string) => void }) {
-    const [selectTab, setTab] = useState(ContentType.Env);
-
-    // Validate placeholders for warning badge
-    const missingPlaceholders = props.config.validatePlaceholders();
-    const hasValidationWarnings = missingPlaceholders.length > 0;
-
-    return (
-        <>
-            <ContentTabs onSelected={(id) => setTab(id)} selectedTab={selectTab} hasValidationWarnings={hasValidationWarnings} />
-            <div className="">
-                {selectTab == ContentType.Env ? (<ContentParams env={props.env} />) : ""}
-                {selectTab == ContentType.Json ? (<ConfigTemplate config={props.config} onSaved={props.onTemplateSaved} />) : ""}
-                {selectTab == ContentType.Raw ? (<ContentRaw config={props.config} env={props.env} />) : ""}
-                {selectTab == ContentType.Test ? (<ContentTest config={props.config} env={props.env} />) : ""}
-            </div>
-        </>
-    );
+interface ContentProps {
+  config: Config;
+  env: Env;
+  onTemplateSaved: (newContent: string) => void;
 }
 
-enum ContentType {
-    Env = 0,
-    Json = 1,
-    Raw = 2,
-    Test = 3
+export function Content({ config, env, onTemplateSaved }: ContentProps) {
+  const [activeTab, setActiveTab] = useState('env');
+
+  // Validate placeholders for warning badge
+  const missingPlaceholders = config.validatePlaceholders();
+  const hasValidationWarnings = missingPlaceholders.length > 0;
+
+  const tabs: Array<{ id: string; label: string; badge?: string | number; badgeVariant?: 'warning' | 'danger' }> = [
+    { id: 'env', label: 'Env' },
+    { 
+      id: 'template', 
+      label: 'Content Template',
+      badge: hasValidationWarnings ? '!' : undefined,
+      badgeVariant: hasValidationWarnings ? 'warning' : undefined,
+    },
+    { id: 'raw', label: 'Raw Template' },
+    { id: 'test', label: 'Test-filled' },
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden">
+      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+      
+      <div className="p-4">
+        <TabPanel isActive={activeTab === 'env'}>
+          <ContentParams env={env} />
+        </TabPanel>
+        
+        <TabPanel isActive={activeTab === 'template'}>
+          <ConfigTemplateEditor config={config} onSaved={onTemplateSaved} />
+        </TabPanel>
+        
+        <TabPanel isActive={activeTab === 'raw'}>
+          <ContentRaw config={config} env={env} />
+        </TabPanel>
+        
+        <TabPanel isActive={activeTab === 'test'}>
+          <ContentTest config={config} env={env} />
+        </TabPanel>
+      </div>
+    </div>
+  );
 }
 
-function ContentTabs(props: { onSelected: (id: ContentType) => void, selectedTab: ContentType, hasValidationWarnings: boolean }) {
-    function clickHandler(type: ContentType) {
-        props.onSelected(type);
-    }
-
-    function isActive(type: ContentType): string {
-        return type == props.selectedTab ? " active" : " ";
-    }
-
-    return (
-        <ul className="nav nav-pills nav-fill">
-            <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Env)} aria-current="page" href="#" onClick={() => clickHandler(ContentType.Env)}>Env</a>
-            </li>
-            <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Json)} href="#" onClick={() => clickHandler(ContentType.Json)} >
-                    Content Template
-                    {props.hasValidationWarnings && (
-                        <span className="badge bg-warning text-dark ms-1">!</span>
-                    )}
-                </a>
-            </li>
-            <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Raw)} href="#" onClick={() => clickHandler(ContentType.Raw)}>Raw template</a>
-            </li>
-            <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Test)} href="#" onClick={() => clickHandler(ContentType.Test)}>Test-filled template</a>
-            </li>
-        </ul>
-    )
+function ContentParams({ env }: { env: Env }) {
+  const xml = Builder.getEnv(env).build();
+  
+  return (
+    <div className="animate-fade-in">
+      <CodeBlock code={xml} language="xml" maxHeight="500px" />
+    </div>
+  );
 }
 
-function ContentRaw(props: { config: Config, env: Env }) {
-    const envsXml = Builder.getEnvs(props.config.envs);
-    const templateContent = props.config.template.content;
+function ContentRaw({ config }: { config: Config; env: Env }) {
+  const envsXml = Builder.getEnvs(config.envs);
+  const templateContent = config.template.content;
 
-    const xml = `<engine>
+  const xml = `<engine>
 ${envsXml}
     <template>
 ${templateContent}
     </template>
 </engine>`;
 
-    return (
-        <>
-            <Highlight className="language-xml">
-                {xml}
-            </Highlight>
-        </>
-    )
+  return (
+    <div className="animate-fade-in">
+      <CodeBlock code={xml} language="xml" maxHeight="500px" />
+    </div>
+  );
 }
 
-function ContentTest(props: { config: Config, env: Env }) {
-    const [selectedEnvId, setSelectedEnvId] = useState(props.env.id);
-    const selectedEnv = props.config.envs.find(e => e.id === selectedEnvId) ?? props.env;
+function ContentTest({ config, env }: { config: Config; env: Env }) {
+  const [selectedEnvId, setSelectedEnvId] = useState(env.id ?? 0);
+  const selectedEnv = config.envs.find(e => e.id === selectedEnvId) ?? env;
 
-    const filledTemplate = fillTemplate(props.config, selectedEnv);
+  const filledTemplate = fillTemplate(config, selectedEnv);
 
-    return (
-        <>
-            <div className="mb-2">
-                <label className="form-label">Select Environment:</label>
-                <select 
-                    className="form-select w-auto d-inline-block" 
-                    value={selectedEnvId}
-                    onChange={(e) => setSelectedEnvId(Number(e.target.value))}
-                >
-                    {props.config.envs.map(env => (
-                        <option key={env.id} value={env.id}>{env.name}</option>
-                    ))}
-                </select>
-            </div>
-            <Highlight className="language-json">
-                {filledTemplate}
-            </Highlight>
-        </>
-    )
+  const selectOptions = config.envs.map((e) => ({
+    value: e.id ?? 0,
+    label: e.name ?? 'Unknown',
+  }));
+
+  return (
+    <div className="animate-fade-in space-y-4">
+      <div className="flex items-center gap-2">
+        <label className="text-sm font-medium text-slate-700">Select Environment:</label>
+        <select
+          className="px-3 py-1.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          value={selectedEnvId}
+          onChange={(e) => setSelectedEnvId(Number(e.target.value))}
+        >
+          {selectOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
+      
+      <CodeBlock code={filledTemplate} language="json" maxHeight="500px" />
+    </div>
+  );
 }
 
 function fillTemplate(config: Config, env: Env): string {
-    const defaultEnv = config.envs.find(e => e.name === "DEFAULT");
-    const paramMap = new Map<string, string>();
+  const defaultEnv = config.envs.find((e) => e.name === 'DEFAULT');
+  const paramMap = new Map<string, string>();
 
-    // First, load DEFAULT values as fallback
-    if (defaultEnv) {
-        for (const param of defaultEnv.params) {
-            if (param.name && param.value !== undefined) {
-                paramMap.set(param.name, param.value);
-            }
-        }
+  // Load DEFAULT values first
+  if (defaultEnv) {
+    for (const param of defaultEnv.params) {
+      if (param.name && param.value !== undefined) {
+        paramMap.set(param.name, param.value);
+      }
     }
+  }
 
-    // Then, override with selected environment values (precedence)
-    for (const param of env.params) {
-        if (param.name && param.value !== undefined) {
-            paramMap.set(param.name, param.value);
-        }
+  // Override with selected environment values
+  for (const param of env.params) {
+    if (param.name && param.value !== undefined) {
+      paramMap.set(param.name, param.value);
     }
+  }
 
-    let filledTemplate = config.template.content;
-    const placeholderRegex = /@(\w+)@/g;
+  let filledTemplate = config.template.content;
+  const placeholderRegex = /@(\w+)@/g;
 
-    filledTemplate = filledTemplate.replace(placeholderRegex, (_, paramName) => {
-        if (paramName === Config.ENV_NAME_PARAM) {
-            return env.name ?? "--NO-VALUE--";
-        }
-        return paramMap.get(paramName) ?? "--NO-VALUE--";
-    });
+  filledTemplate = filledTemplate.replace(placeholderRegex, (_, paramName) => {
+    if (paramName === Config.ENV_NAME_PARAM) {
+      return env.name ?? '--NO-VALUE--';
+    }
+    return paramMap.get(paramName) ?? '--NO-VALUE--';
+  });
 
-    return filledTemplate;
+  return filledTemplate;
 }
-
-function ContentParams(props: { env: Env }) {
-    const bldr = Builder.getEnv(props.env);
-
-    return (
-        <Highlight className="language-xml">
-            {bldr.build()}
-        </Highlight>
-    )
-}
\ No newline at end of file
diff --git a/src/componets/env/Environment.tsx b/src/componets/env/Environment.tsx
index 8da6008..e241fc2 100644
--- a/src/componets/env/Environment.tsx
+++ b/src/componets/env/Environment.tsx
@@ -1,125 +1,153 @@
-import { useState, useEffect } from "react";
-import { AddEvent, AppEvent, DelEvent, Env, UpdateEvent } from "../../models/Env";
-import { EnvParam } from "../../models/EnvParam";
-import { EnvironmentParam } from "./EnvironmentParam";
+import { useState, useEffect } from 'react';
+import { Plus, Minus } from 'lucide-react';
+import { Button, Select, Card, CardBody } from '../../components/ui';
+import { Env, AddEvent, RemoveEvent, UpdateEvent } from '../../models/Env';
+import { EnvParam } from '../../models/EnvParam';
+import { EnvironmentParam } from './EnvironmentParam';
 
-export function Environment(props: { envs: Env[], onChanged: (env: Env) => void, onSelected: (envId: number) => void, onAdd: (env: Env) => number, onRemove: (envId: number) => void }) {
-    const [currEnvId, setCurrEnvId] = useState(props.envs[0]?.id);
-    
-    // Sync currEnvId when props.envs changes
-    useEffect(() => {
-        if (!props.envs.find(e => e.id === currEnvId)) {
-            setCurrEnvId(props.envs[0]?.id);
-        }
-    }, [props.envs, currEnvId]);
-    
-    const currEnv = props.envs.find(e => e.id === currEnvId) ?? props.envs[0];
-
-    function handleParamChanged(e: AppEvent<EnvParam>) {
-        let isChanged = false;
-        let env = currEnv;
-
-        if (e instanceof DelEvent) {
-            env = currEnv.delParam(e.payload);
-            isChanged = true;
-        }
-
-        if (e instanceof AddEvent) {
-            env = currEnv.addParams(e.payload);
-            isChanged = true;
-        }
-
-        if (e instanceof UpdateEvent) {
-            env = currEnv.updateParams(e.payload);
-            isChanged = true;
-        }
-
-        if (isChanged) {
-            props.onChanged(env);
-            setCurrEnvId(env.id);
-        }
-    }
-
-    function handleAddEnv() {
-        const name = prompt("Enter new environment name:");
-        if (!name || name.trim() === "") return;
-
-        // Calculate next integer ID based on max existing ID
-        const maxId = props.envs.reduce((max, e) => Math.max(max, e.id ?? 0), -1);
-        const newId = maxId + 1;
-
-        const newEnv = new Env(
-            newId,
-            name.trim(),
-            [...currEnv.params]
-        );
-        // Parent synchronously adds the env and returns the index
-        const newIdx = props.onAdd(newEnv);
-        setCurrEnvId(newEnv.id);
-        props.onSelected(newIdx);
-    }
-
-    function handleRemoveEnv() {
-        if (currEnv.isDefault()) {
-            alert("Cannot remove DEFAULT environment");
-            return;
-        }
-        if (!confirm(`Remove environment "${currEnv.name}"?`)) return;
-
-        const idx = props.envs.findIndex(x => x.id === currEnv.id);
-        if (idx > -1 && currEnv.id !== undefined) {
-            // Let parent handle the removal
-            props.onRemove(currEnv.id);
-            const newIdx = Math.max(0, idx - 1);
-            const newEnv = props.envs[newIdx];
-            if (newEnv?.id !== undefined) {
-                setCurrEnvId(newEnv.id);
-            }
-            props.onSelected(newIdx);
-        }
-    }
-
-    const selectOptions = props.envs.map((x) => <option key={x.id} value={x.id} >{x.name}</option>);
-    const paramCtrls = currEnv.params.map(x =>
-        <EnvironmentParam key={`${currEnv.id}-${x.id}`}
-            param={new EnvParam(x.id, x.name, x.value)}
-            onChanged={handleParamChanged}
-            isNew={false} />);
-
-    return (
-        <>
-            <div className="row g-0">
-                <div className="col">
-                    <select
-                        id="environments"
-                        name="environments"
-                        aria-label="Environments"
-                        className="form-select"
-                        value={currEnvId}
-                        onChange={x => {
-                            let id = Number.parseInt(x.target.value);
-                            setCurrEnvId(id);
-                            props.onSelected(id);
-                        }}>
-                        {selectOptions}
-                    </select>
-                </div>
-                <div className="col-auto ms-2">
-                    <button className="btn btn-success" onClick={handleAddEnv} title="Add environment">✚</button>
-                </div>
-                <div className="col-auto ms-2">
-                    <button className="btn btn-danger" onClick={handleRemoveEnv} title="Remove environment" disabled={currEnv.isDefault()}>−</button>
-                </div>
-            </div>
-            <div className="row">Params</div>
-            {paramCtrls}
-            <EnvironmentParam key={`${currEnv.id}-new`}
-                param={new EnvParam(-1, "", "")}
-                onChanged={handleParamChanged}
-                isNew={true}
-            />
-        </>
-    );
+interface EnvironmentProps {
+  envs: Env[];
+  onChanged: (env: Env) => void;
+  onSelected: (envId: number) => void;
+  onAdd: (env: Env) => number;
+  onRemove: (envId: number) => void;
 }
 
+export function Environment({ envs, onChanged, onSelected, onAdd, onRemove }: EnvironmentProps) {
+  const [currEnvId, setCurrEnvId] = useState<number>(envs[0]?.id ?? 0);
 
+  // Sync currEnvId when envs changes
+  useEffect(() => {
+    if (!envs.find(e => e.id === currEnvId)) {
+      setCurrEnvId(envs[0]?.id ?? 0);
+    }
+  }, [envs, currEnvId]);
+
+  const currEnv = envs.find(e => e.id === currEnvId) ?? envs[0];
+
+  function handleParamChanged(event: AddEvent<EnvParam> | RemoveEvent<EnvParam> | UpdateEvent<EnvParam>) {
+    let newEnv: Env = currEnv;
+    let isChanged = false;
+
+    if (event instanceof RemoveEvent) {
+      newEnv = currEnv.delParam(event.payload);
+      isChanged = true;
+    } else if (event instanceof AddEvent) {
+      newEnv = currEnv.addParams(event.payload);
+      isChanged = true;
+    } else if (event instanceof UpdateEvent) {
+      newEnv = currEnv.updateParams(event.payload);
+      isChanged = true;
+    }
+
+    if (isChanged) {
+      onChanged(newEnv);
+      setCurrEnvId(newEnv.id ?? 0);
+    }
+  }
+
+  function handleAddEnv() {
+    const name = prompt('Enter new environment name:');
+    if (!name || name.trim() === '') return;
+
+    // Calculate next integer ID based on max existing ID
+    const maxId = envs.reduce((max, e) => Math.max(max, e.id ?? 0), -1);
+    const newId = maxId + 1;
+
+    const newEnv = new Env(newId, name.trim(), [...currEnv.params]);
+    const newIdx = onAdd(newEnv);
+    setCurrEnvId(newEnv.id ?? 0);
+    onSelected(newIdx);
+  }
+
+  function handleRemoveEnv() {
+    if (currEnv.isDefault()) {
+      alert('Cannot remove DEFAULT environment');
+      return;
+    }
+    if (!confirm(`Remove environment "${currEnv.name}"?`)) return;
+
+    const idx = envs.findIndex(x => x.id === currEnv.id);
+    if (idx > -1 && currEnv.id !== undefined) {
+      onRemove(currEnv.id);
+      const newIdx = Math.max(0, idx - 1);
+      const newEnv = envs[newIdx];
+      if (newEnv?.id !== undefined) {
+        setCurrEnvId(newEnv.id);
+      }
+      onSelected(newIdx);
+    }
+  }
+
+  const selectOptions = envs.map((x) => ({
+    value: x.id ?? 0,
+    label: x.name ?? 'Unknown',
+  }));
+
+  const paramCtrls = currEnv.params.map((x) => (
+    <EnvironmentParam
+      key={`${currEnv.id}-${x.id}`}
+      param={new EnvParam(x.id, x.name, x.value)}
+      onChanged={handleParamChanged}
+      isNew={false}
+    />
+  ));
+
+  return (
+    <Card variant="bordered" padding="none" className="h-full">
+      <CardBody className="space-y-4">
+        {/* Environment Selector */}
+        <div className="flex items-center gap-2">
+          <div className="flex-1">
+            <Select
+              label="Environment"
+              value={currEnvId}
+              options={selectOptions}
+              onChange={(e) => {
+                const id = Number.parseInt(e.target.value);
+                setCurrEnvId(id);
+                onSelected(id);
+              }}
+              id="environments"
+            />
+          </div>
+          
+          <Button
+            variant="success"
+            size="sm"
+            onClick={handleAddEnv}
+            title="Add environment"
+            icon={Plus}
+          />
+          
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={handleRemoveEnv}
+            title="Remove environment"
+            icon={Minus}
+            disabled={currEnv.isDefault()}
+          />
+        </div>
+
+        {/* Parameters Section */}
+        <div>
+          <h3 className="text-sm font-semibold text-slate-700 mb-3 uppercase tracking-wide">
+            Parameters
+          </h3>
+          
+          <div className="space-y-2">
+            {paramCtrls}
+            
+            <EnvironmentParam
+              key={`${currEnv.id}-new`}
+              param={new EnvParam(-1, '', '')}
+              onChanged={handleParamChanged}
+              isNew={true}
+            />
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/componets/env/EnvironmentParam.tsx b/src/componets/env/EnvironmentParam.tsx
index 4fbc660..30acb04 100644
--- a/src/componets/env/EnvironmentParam.tsx
+++ b/src/componets/env/EnvironmentParam.tsx
@@ -1,68 +1,104 @@
-import { useState } from "react";
-import { EnvParam } from "../../models/EnvParam";
-import { AppEvent } from "../../models/Env";
+import { useState } from 'react';
+import { Check, Minus } from 'lucide-react';
+import { Button, Input } from '../../components/ui';
+import { EnvParam } from '../../models/EnvParam';
+import { AddEvent, RemoveEvent, UpdateEvent } from '../../models/Env';
 
-
-export function EnvironmentParam(props: { param: EnvParam; onChanged: (e: AppEvent<EnvParam>) => void, isNew: boolean }) {
-    const [param, setParam] = useState(props.param);
-    const [isFocused, setIsFocused] = useState(false);
-
-    function doSet(x: string, act: (x: string) => void) {
-        act(x);
-        setParam(param.Changed(true));
-    }
-
-    function handleChange() {
-        if (!param.isChanged)
-            return;
-
-        let newParam = param.Changed(false);
-        if (!props.isNew) {
-            props.onChanged(AppEvent.update(newParam));
-        }
-
-        setParam(newParam);
-    }
-
-    function handleAdd() {
-        props.onChanged(AppEvent.add(param));
-        setParam(new EnvParam(0, "", ""));
-    }
-
-    function handleKeyUp(x: React.KeyboardEvent<HTMLInputElement>) {
-        if (x.key === "Enter") { handleChange(); }
-    }
-
-    return (
-        <div className={"row px-0" + (param.isChanged ? "border border-warning" : "")}
-            style={isFocused ? { backgroundColor: "lightskyblue", padding: "1px 0" } : { padding: "1px 0" }}>
-            <div className="col-4 mx-0 px-0">
-                <input type="text"
-                    className="form-control"
-                    style={{ backgroundColor: "rgba(170, 170, 247, 0.16)" }}
-                    value={param.name}
-                    onChange={x => doSet(x.target.value, (v) => param.name = v)}
-                    onBlur={() => { handleChange(); setIsFocused(false); }}
-                    onFocus={() => setIsFocused(true)}
-                    onKeyUp={handleKeyUp}
-                    placeholder="name"
-                    aria-label="name" />
-            </div>
-            <div className="col mx-0 px-0">
-                <input type="text"
-                    className="form-control"
-                    value={param.value}
-                    onChange={x => doSet(x.target.value, v => param.value = v)}
-                    onBlur={() => { handleChange(); setIsFocused(false); }}
-                    onFocus={() => setIsFocused(true)}
-                    onKeyUp={handleKeyUp}
-                    placeholder="value"
-                    aria-label="value" />
-            </div>
-            <div className="col-1 mx-0 px-0" >
-                <button className="btn btn-success" hidden={!props.isNew} onClick={handleAdd}>✓</button>
-                <button className="btn btn-warning" hidden={props.isNew} onClick={() => props.onChanged(AppEvent.del(param))} tabIndex={-1}>−</button>
-            </div>
-        </div>
-    );
+interface EnvironmentParamProps {
+  param: EnvParam;
+  onChanged: (event: AddEvent<EnvParam> | RemoveEvent<EnvParam> | UpdateEvent<EnvParam>) => void;
+  isNew: boolean;
+}
+
+export function EnvironmentParam({ param, onChanged, isNew }: EnvironmentParamProps) {
+  const [localParam, setLocalParam] = useState(param);
+  const [isFocused, setIsFocused] = useState(false);
+
+  function updateParam(updates: Partial<EnvParam>) {
+    const updated = localParam.update(updates).markChanged(true);
+    setLocalParam(updated);
+  }
+
+  function handleChange() {
+    if (!localParam.isChanged) return;
+
+    const savedParam = localParam.markChanged(false);
+    
+    if (!isNew) {
+      onChanged(UpdateEvent.update(savedParam));
+    }
+    
+    setLocalParam(savedParam);
+  }
+
+  function handleAdd() {
+    onChanged(AddEvent.add(localParam));
+    setLocalParam(new EnvParam(0, '', ''));
+  }
+
+  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter') {
+      handleChange();
+    }
+  }
+
+  const isChangedClass = localParam.isChanged ? 'ring-2 ring-yellow-400 border-yellow-400' : '';
+  const focusedClass = isFocused ? 'bg-blue-50' : '';
+
+  return (
+    <div
+      className={`
+        grid grid-cols-12 gap-2 p-2 rounded-lg transition-all duration-200
+        ${isChangedClass}
+        ${focusedClass ? 'bg-blue-50' : 'bg-white'}
+        hover:bg-slate-50
+      `}
+    >
+      <div className="col-span-4">
+        <Input
+          value={localParam.name ?? ''}
+          onChange={(e) => updateParam({ name: e.target.value })}
+          onBlur={() => { handleChange(); setIsFocused(false); }}
+          onFocus={() => setIsFocused(true)}
+          onKeyUp={handleKeyUp}
+          placeholder="Parameter name"
+          className="text-sm"
+        />
+      </div>
+      
+      <div className="col-span-7">
+        <Input
+          value={localParam.value ?? ''}
+          onChange={(e) => updateParam({ value: e.target.value })}
+          onBlur={() => { handleChange(); setIsFocused(false); }}
+          onFocus={() => setIsFocused(true)}
+          onKeyUp={handleKeyUp}
+          placeholder="Parameter value"
+          className="text-sm"
+        />
+      </div>
+      
+      <div className="col-span-1 flex items-center justify-center">
+        {isNew ? (
+          <Button
+            variant="success"
+            size="sm"
+            onClick={handleAdd}
+            title="Add parameter"
+            icon={Check}
+            className="px-2"
+          />
+        ) : (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onChanged(new RemoveEvent(localParam))}
+            title="Remove parameter"
+            icon={Minus}
+            className="px-2 text-red-600 hover:text-red-700 hover:bg-red-50"
+          />
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/src/index.css b/src/index.css
index e69de29..8a28884 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,139 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 
+           focus:outline-none focus:ring-2 focus:ring-offset-2
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 
+           focus:ring-primary-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-success {
+    @apply btn bg-success-600 text-white hover:bg-success-700 
+           focus:ring-success-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-danger {
+    @apply btn bg-danger-600 text-white hover:bg-danger-700 
+           focus:ring-danger-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-secondary {
+    @apply btn bg-slate-200 text-slate-700 hover:bg-slate-300 
+           focus:ring-slate-400 shadow-sm;
+  }
+  
+  .btn-sm {
+    @apply px-3 py-1.5 text-sm;
+  }
+  
+  .btn-icon {
+    @apply p-2 rounded-lg transition-all duration-200
+           hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary-500;
+  }
+  
+  .input {
+    @apply w-full px-3 py-2 border border-slate-300 rounded-lg
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+           transition-all duration-200
+           placeholder:text-slate-400;
+  }
+  
+  .input-focused {
+    @apply ring-2 ring-primary-500 border-transparent bg-primary-50;
+  }
+  
+  .card {
+    @apply bg-white rounded-xl shadow-lg border border-slate-200 
+           overflow-hidden transition-all duration-300;
+  }
+  
+  .card-header {
+    @apply px-4 py-3 border-b border-slate-200 bg-slate-50;
+  }
+  
+  .card-body {
+    @apply p-4;
+  }
+  
+  .select {
+    @apply w-full px-3 py-2 border border-slate-300 rounded-lg
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+           bg-white cursor-pointer transition-all duration-200;
+  }
+  
+  .tab {
+    @apply px-4 py-2 text-sm font-medium rounded-t-lg
+           transition-all duration-200 border-b-2 border-transparent
+           hover:bg-slate-100 cursor-pointer;
+  }
+  
+  .tab-active {
+    @apply tab bg-white border-primary-500 text-primary-600;
+  }
+  
+  .tab-inactive {
+    @apply tab text-slate-600;
+  }
+  
+  .badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
+  }
+  
+  .badge-warning {
+    @apply badge bg-warning-100 text-warning-800;
+  }
+  
+  .badge-success {
+    @apply badge bg-success-100 text-success-800;
+  }
+  
+  .badge-danger {
+    @apply badge bg-danger-100 text-danger-800;
+  }
+  
+  .label {
+    @apply block text-sm font-medium text-slate-700 mb-1;
+  }
+}
+
+@layer utilities {
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+  
+  .animate-slide-in {
+    animation: slideIn 0.3s ease-out;
+  }
+  
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 3px;
+  }
+}
diff --git a/src/models/Config.tsx b/src/models/Config.tsx
index b51417e..1b8ba3a 100644
--- a/src/models/Config.tsx
+++ b/src/models/Config.tsx
@@ -1,158 +1,174 @@
-import { Env } from "./Env";
-
+import { Env } from './Env';
 
+/**
+ * Configuration template with placeholder support
+ */
 export class ConfigTemplate {
-  public static Empty: ConfigTemplate = new ConfigTemplate();
+  public static readonly Empty: ConfigTemplate = new ConfigTemplate();
 
-  constructor(text: string = "") {
-    this._contentText = text;
-    this.extractParams();
+  private _contentText: string;
+  private _params: string[];
+
+  constructor(contentText: string = '') {
+    this._contentText = contentText;
+    this._params = this.extractParams();
   }
 
-  private _contentText: string = "";
-  private _params: string[] = [];
-
   public get content(): string {
     return this._contentText;
   }
 
+  /**
+   * Backward compatibility getter
+   */
   public get Params(): string[] {
+    return this.params;
+  }
+
+  public get params(): string[] {
     return [...this._params];
   }
 
-  private extractParams() {
-    let regex = /@(\w+)@/g;
-    let matches;
-    let paramsSet = new Set<string>();
+  /**
+   * Extracts @placeholder@ patterns from template content
+   */
+  private extractParams(): string[] {
+    const regex = /@(\w+)@/g;
+    const paramsSet = new Set<string>();
+    let match;
 
-    while ((matches = regex.exec(this._contentText)) !== null) {
-      if (matches.length > 1) {
-        paramsSet.add(matches[1]);
-      }
+    while ((match = regex.exec(this._contentText)) !== null) {
+      paramsSet.add(match[1]);
     }
 
-    this._params = Array.from(paramsSet);
+    return Array.from(paramsSet);
   }
-
 }
 
-
+/**
+ * Main configuration container
+ */
 export class Config {
-  public static get ENV_NAME_PARAM(): string { return "env_name" };
+  public static readonly ENV_NAME_PARAM = 'env_name';
 
   public envs: Env[] = [];
   public template: ConfigTemplate = ConfigTemplate.Empty;
 
-  addEnvs(envs: Env[]) {
+  /**
+   * Sets environments (backward compatibility)
+   */
+  public addEnvs(envs: Env[]): void {
     this.envs = envs;
   }
 
-  addTemplate(text: string) {
-    this.template = new ConfigTemplate(text);
+  /**
+   * Sets environments
+   */
+  public setEnvs(envs: Env[]): void {
+    this.envs = envs;
   }
 
-  getTemplateAsJson(): string {
+  /**
+   * Sets template content (backward compatibility)
+   */
+  public addTemplate(content: string): void {
+    this.setTemplate(content);
+  }
+
+  /**
+   * Sets template content
+   */
+  public setTemplate(content: string): void {
+    this.template = new ConfigTemplate(content);
+  }
+
+  /**
+   * Gets template as JSON string
+   */
+  public getTemplateAsJson(): string {
     try {
-      return this.template.content ;
-    } catch (error) {
-      console.error("Error converting template content to JSON:", error);
-      return "{}";
+      return this.template.content;
+    } catch {
+      return '{}';
     }
   }
 
   /**
-   * Updates the template JSON by adding/updating params from the given environment.
-   * Params are added as "!!! paramName": "@paramName@" placeholder pairs.
-   * If a param's @placeholder@ already exists in template, it won't be added.
-   * Existing template content is preserved.
+   * Updates template by adding placeholders for environment params
    */
-  updateTemplateFromEnv(env: Env) {
+  public updateTemplateFromEnv(env: Env): void {
     let templateObj: Record<string, any> = {};
 
-    // Try to parse existing template as JSON
+    // Try to parse existing template
     try {
       if (this.template.content.trim()) {
         templateObj = JSON.parse(this.template.content);
       }
-    } catch (e) {
-      // If parsing fails, start with empty object
-      console.warn("Template is not valid JSON, starting fresh");
+    } catch {
+      // Start fresh if invalid JSON
     }
 
-    // Add/update params from the environment as placeholders
+    // Add placeholders for params that don't exist yet
     for (const param of env.params) {
-      if (param.name && param.name.trim() !== "") {
-        const placeholderValue = `@${param.name}@`;
-        
-        // Check if this placeholder already exists anywhere in the template
-        const placeholderAlreadyExists = this.template.content.includes(placeholderValue);
-        
-        if (!placeholderAlreadyExists) {
-          const placeholderKey = `!!! ${param.name}`;
-          templateObj[placeholderKey] = placeholderValue;
+      if (param.name && param.name.trim()) {
+        const placeholder = `@${param.name}@`;
+
+        if (!this.template.content.includes(placeholder)) {
+          templateObj[`!!! ${param.name}`] = placeholder;
         }
       }
     }
 
-    // Convert back to formatted JSON string
-    const newTemplateContent = JSON.stringify(templateObj, null, 4);
-    this.template = new ConfigTemplate(newTemplateContent);
+    this.template = new ConfigTemplate(JSON.stringify(templateObj, null, 4));
   }
 
-  validateParams(): string[] {
-    const envKeys = this.envs.map(env => env.params.map(param => param.name)).flat();
-    const missingParams = this.template.Params.filter(param => param != Config.ENV_NAME_PARAM && !envKeys.includes(param));
+  /**
+   * Validates that all template placeholders have corresponding params (backward compatibility)
+   */
+  public validateParams(): string[] {
+    return this.validatePlaceholders();
+  }
 
-    if (missingParams.length > 0) {
-      console.error("Template: missing parameters in environments:", missingParams);
+  /**
+   * Validates that all template placeholders have corresponding params
+   */
+  public validatePlaceholders(): string[] {
+    const defaultEnv = this.envs.find(e => e.name === 'DEFAULT');
+    const customEnvs = this.envs.filter(e => e.name !== 'DEFAULT');
+
+    // Collect param names from DEFAULT
+    const defaultParamNames = new Set(
+      defaultEnv?.getParamNames() || []
+    );
+
+    // Collect param names from all custom envs
+    const customParamNames = new Set(
+      customEnvs.flatMap(e => e.getParamNames())
+    );
+
+    // Find missing placeholders
+    const missingParams: string[] = [];
+    for (const placeholder of this.template.params) {
+      if (placeholder === Config.ENV_NAME_PARAM) continue;
+
+      const inDefault = defaultParamNames.has(placeholder);
+      const inCustom = customParamNames.has(placeholder);
+
+      if (!inDefault && !inCustom) {
+        missingParams.push(placeholder);
+      }
     }
 
     return missingParams;
   }
 
   /**
-   * Validates that all @placeholders@ in template have corresponding params.
-   * Checks DEFAULT env first, then all custom envs.
-   * Returns array of placeholder names that are not defined.
+   * Creates a deep copy of the config
    */
-  validatePlaceholders(): string[] {
-    const defaultEnv = this.envs.find(e => e.name === "DEFAULT");
-    const customEnvs = this.envs.filter(e => e.name !== "DEFAULT");
-    
-    // Collect all param names from DEFAULT
-    const defaultParamNames = new Set(
-      defaultEnv?.params.map(p => p.name).filter(n => n && n.trim() !== "") || []
-    );
-    
-    // Collect all param names from all custom envs
-    const customParamNames = new Set(
-      customEnvs.flatMap(e => e.params.map(p => p.name).filter(n => n && n.trim() !== ""))
-    );
-    
-    // Extract all @placeholders@ from template
-    const placeholderRegex = /@(\w+)@/g;
-    const placeholdersInTemplate = new Set<string>();
-    let match;
-    while ((match = placeholderRegex.exec(this.template.content)) !== null) {
-      placeholdersInTemplate.add(match[1]);
-    }
-    
-    // Find placeholders that don't have matching params
-    const missingParams: string[] = [];
-    for (const placeholder of placeholdersInTemplate) {
-      if (placeholder === Config.ENV_NAME_PARAM) continue; // Skip built-in
-      
-      // Check if exists in DEFAULT or in ANY custom env
-      const inDefault = defaultParamNames.has(placeholder);
-      const inCustom = customParamNames.has(placeholder);
-      
-      // Valid if: in DEFAULT, or in at least one custom env
-      if (!inDefault && !inCustom) {
-        missingParams.push(placeholder);
-      }
-    }
-    
-    return missingParams;
+  public clone(): Config {
+    const cloned = new Config();
+    cloned.envs = [...this.envs];
+    cloned.template = this.template;
+    return cloned;
   }
 }
-
diff --git a/src/models/ConfigReader.tsx b/src/models/ConfigReader.tsx
index f261f12..49ddfe6 100644
--- a/src/models/ConfigReader.tsx
+++ b/src/models/ConfigReader.tsx
@@ -1,135 +1,115 @@
-import { Env } from "./Env";
-import { EnvParam } from "./EnvParam";
-import { Config } from "./Config";
-
+import { Env } from './Env';
+import { EnvParam } from './EnvParam';
+import { Config } from './Config';
 
 /**
- * A utility class for parsing XML configuration files into a structured Config object.
- * 
- * Supports both string-based and file-based parsing, extracting environment definitions
- * and their associated parameters. The expected XML format includes:
- * - Root element with tag "engine"
- * - Child elements "environment" with a "name" attribute
- * - Nested "parameter" elements with "name" and "value" attributes
- * 
- * Provides validation and error handling for missing attributes.
- * Includes utility method to check if a file is in the supported XML format.
+ * XML Configuration Parser
+ * Parses XML files into Config objects
  */
 export class ConfigReader {
-  private readonly rootTag = "engine";
-
-  private readonly envTag = "environment";
-  private readonly envNameAttr = "name";
-
-  private readonly paramTag = "parameter";
-  private readonly paramNameAttr = "name";
-  private readonly paramValAttr = "value";
-
-  private readonly templateTag = "template";
+  private readonly rootTag = 'engine';
+  private readonly envTag = 'environment';
+  private readonly envNameAttr = 'name';
+  private readonly paramTag = 'parameter';
+  private readonly paramNameAttr = 'name';
+  private readonly paramValAttr = 'value';
+  private readonly templateTag = 'template';
 
   /**
-   * Parses an XML string into a Config object.
-   * 
-   * @param xmlString - The XML content as a string
-   * @param fileType - The MIME type of the XML (default: 'application/xml')
-   * @returns A Config object containing parsed environments and parameters, or null if parsing fails
+   * Parses XML string into Config
    */
   public parseFromString(xmlString: string, fileType: DOMParserSupportedType = 'application/xml'): Config | null {
-    let parser = new DOMParser();
-    let xml = parser.parseFromString(xmlString, fileType);
-    this.checkTemplate(xml);
-    let config = new Config();
+    const parser = new DOMParser();
+    const xml = parser.parseFromString(xmlString, fileType);
+    this.validateTemplate(xml);
+    
+    const config = new Config();
+    const envs = this.parseEnvs(xml.querySelectorAll(`${this.rootTag}>${this.envTag}`));
+    config.setEnvs(envs);
 
-    let envs = this.parseEnvs(xml.querySelectorAll(`${this.rootTag}>${this.envTag}`));
-    config.addEnvs(envs);
-
-    let tmplElement = xml.getElementsByTagName(this.templateTag)[0];
-    let tmplText = tmplElement?.textContent?.trim();
+    const tmplElement = xml.getElementsByTagName(this.templateTag)[0];
+    const tmplText = tmplElement?.textContent?.trim();
     if (!tmplText) {
-      throw new Error(`Template content is missing or empty in <${this.templateTag}> element.`);
+      throw new Error(`Template content is missing in <${this.templateTag}> element.`);
     }
+    config.setTemplate(tmplText);
 
-    config.addTemplate(tmplText);
-
-    console.log("parsed from string res:", config);
     return config;
   }
 
-    /**
-   * Parses an XML file into a Config object asynchronously.
-   * 
-   * @param file - The File object representing the XML file
-   * @returns A Promise resolving to a Config object or null if parsing fails
+  /**
+   * Parses XML file into Config
    */
   public async parseFromFile(file: File): Promise<Config | null> {
-    let srcText = await file.text();        
-    return this.parseFromString(srcText, file.type as DOMParserSupportedType);    
-  }
-
-  private parseEnvs(xmlEnvs: NodeListOf<Element>): Env[] {
-    let res: Env[] = [];
-    let i = 0;
-    for (let xml of xmlEnvs) {
-      res.push(this.xmlToEnv(xml, i++));
-    }
-
-    return res;
-  }
-
-  private throwError(text: string): string {
-    throw new Error(text);
-  }
-
-  private xmlToEnv(xml: Element, id: number): Env {
-    let name = xml.getAttribute(this.envNameAttr) ?? this.throwError(`no attr '${this.envNameAttr}' in '${xml.tagName}'`);
-    let params = this.parseParams(xml);
-
-    return new Env(id, name, params);
-  }
-
-  private parseParams(xml: Element): EnvParam[] {
-    let paramElements = xml.getElementsByTagName(this.paramTag);
-    let params: EnvParam[] = [];
-    let id = 0;
-    for (let p of paramElements) {
-      params.push(this.xmlToParam(p, id++));
-    }
-
-    return params;
-  }
-
-  private xmlToParam(xmlParam: Element, id: number): EnvParam {
-    let name = xmlParam.getAttribute(this.paramNameAttr) ?? this.throwError(`no attr '${this.paramNameAttr}' in '${this.paramTag}'`);
-    let val = xmlParam.getAttribute(this.paramValAttr) ?? this.throwError(`no attr '${this.paramValAttr}' in '${this.paramTag}'`);
-
-    return new EnvParam(id, name, val);
+    const srcText = await file.text();
+    return this.parseFromString(srcText, file.type as DOMParserSupportedType);
   }
 
   /**
-   * Checks if the given file is in a supported format (text/xml).
-   * 
-   * @param file - The File object to check
-   * @returns True if the file is of type 'text/xml', otherwise returns an error message string
+   * Checks if file format is supported
    */
-  public static isSupportedFormat(file: File): (boolean | string) {
-    if (file.type !== "text/xml") {
-      return `file format ${file.type} not supported (or extension is't .xml)`;
+  public static isSupportedFormat(file: File): boolean | string {
+    if (file.type !== 'text/xml') {
+      return `File format '${file.type}' not supported (expected text/xml)`;
     }
-
     return true;
   }
 
-  public checkTemplate(xml: Document) {
-    const templateElements = xml.getElementsByTagName(this.templateTag);
-  
-    if (templateElements.length === 0) {
-      this.throwError(`Missing required <${this.templateTag}> element in the XML.`);
+  /**
+   * Parses environment elements
+   */
+  private parseEnvs(xmlEnvs: NodeListOf<Element>): Env[] {
+    return Array.from(xmlEnvs).map((xml, index) => this.xmlToEnv(xml, index));
+  }
+
+  /**
+   * Converts XML element to Env
+   */
+  private xmlToEnv(xml: Element, id: number): Env {
+    const name = xml.getAttribute(this.envNameAttr);
+    if (!name) {
+      throw new Error(`Missing '${this.envNameAttr}' attribute in '${xml.tagName}'`);
     }
-  
-    if(templateElements.length > 1) {
-      this.throwError(`Multiple <${this.templateTag}> elements found. Only one is allowed.`);
+    const params = this.parseParams(xml);
+    return new Env(id, name, params);
+  }
+
+  /**
+   * Parses parameter elements
+   */
+  private parseParams(xml: Element): EnvParam[] {
+    return Array.from(xml.getElementsByTagName(this.paramTag))
+      .map((p, index) => this.xmlToParam(p, index));
+  }
+
+  /**
+   * Converts XML element to EnvParam
+   */
+  private xmlToParam(xmlParam: Element, id: number): EnvParam {
+    const name = xmlParam.getAttribute(this.paramNameAttr);
+    const value = xmlParam.getAttribute(this.paramValAttr);
+    
+    if (!name) {
+      throw new Error(`Missing '${this.paramNameAttr}' attribute in parameter`);
+    }
+    if (value === null) {
+      throw new Error(`Missing '${this.paramValAttr}' attribute in parameter`);
+    }
+    
+    return new EnvParam(id, name, value);
+  }
+
+  /**
+   * Validates template element exists
+   */
+  private validateTemplate(xml: Document): void {
+    const templates = xml.getElementsByTagName(this.templateTag);
+    
+    if (templates.length === 0) {
+      throw new Error(`Missing required <${this.templateTag}> element`);
+    }
+    if (templates.length > 1) {
+      throw new Error(`Multiple <${this.templateTag}> elements found. Only one allowed.`);
     }
   }
 }
-
-
diff --git a/src/models/Env.ts b/src/models/Env.ts
index 132e41d..f434e45 100644
--- a/src/models/Env.ts
+++ b/src/models/Env.ts
@@ -1,60 +1,151 @@
-import { EnvParam } from "./EnvParam";
-import { NamedId } from "./NamedId";
+import { EnvParam } from './EnvParam';
+import { NamedEntity } from './types';
 
+/**
+ * Environment configuration containing parameters
+ */
+export class Env implements NamedEntity {
+  constructor(
+    public id?: number,
+    public name?: string,
+    public params: EnvParam[] = []
+  ) {}
 
-export class Env implements NamedId {
-    constructor(
-        public id?: number,
-        public name?: string,
-        public params: EnvParam[] = []
-    ) { }
+  /**
+   * Checks if this is the DEFAULT environment
+   */
+  public isDefault(): boolean {
+    return this.name === 'DEFAULT';
+  }
 
-    public isDefault() {
-        return this.name === "DEFAULT";
+  /**
+   * Adds a new parameter to the environment (backward compatibility)
+   */
+  public addParams(param: EnvParam): Env {
+    return this.addParam(param);
+  }
+
+  /**
+   * Adds a new parameter to the environment
+   */
+  public addParam(param: EnvParam): Env {
+    const newParam = new EnvParam(
+      param.id ?? this.generateId(),
+      param.name,
+      param.value,
+      param.isChanged
+    );
+    return new Env(this.id, this.name, [...this.params, newParam]);
+  }
+
+  /**
+   * Removes a parameter by ID
+   */
+  public delParam(paramIdOrParam: number | EnvParam): Env {
+    const paramId = typeof paramIdOrParam === 'number' ? paramIdOrParam : paramIdOrParam.id;
+    return this.removeParam(paramId!);
+  }
+
+  /**
+   * Removes a parameter by ID
+   */
+  public removeParam(paramId: number): Env {
+    return new Env(
+      this.id,
+      this.name,
+      this.params.filter(p => p.id !== paramId)
+    );
+  }
+
+  /**
+   * Updates an existing parameter (backward compatibility)
+   */
+  public updateParams(updatedParam: EnvParam): Env {
+    return this.updateParam(updatedParam);
+  }
+
+  /**
+   * Updates an existing parameter
+   */
+  public updateParam(updatedParam: EnvParam): Env {
+    const index = this.params.findIndex(p => p.id === updatedParam.id);
+    if (index === -1) {
+      return this;
     }
 
-    addParams(payload: EnvParam): Env {
-        payload.id = Math.random() * 10000;
-        this.params.push(payload);
-        return new Env(this.id, this.name, [...this.params]);
-    }
+    const newParams = [...this.params];
+    newParams[index] = updatedParam;
+    return new Env(this.id, this.name, newParams);
+  }
 
-    delParam(param: EnvParam): Env {
-        let idx = this.params.findIndex(el => el.id === param.id);
-        if (idx > -1) {
-            const newP = this.params.filter(el => el.id !== param.id);
-            return new Env(this.id, this.name, newP);
-        }
+  /**
+   * Gets a parameter by name
+   */
+  public getParamByName(name: string): EnvParam | undefined {
+    return this.params.find(p => p.name === name);
+  }
 
-        return this;
-    }
+  /**
+   * Gets all parameter names
+   */
+  public getParamNames(): string[] {
+    return this.params.map(p => p.name).filter((n): n is string => !!n);
+  }
 
-    public updateParams(param: EnvParam): Env {
-        let idx = this.params.findIndex(el => el.id === param.id);
-        if (idx > -1) {
-            let newP = [...this.params];
-            newP[idx] = param;
-            return new Env(this.id, this.name, newP);
-        }
+  /**
+   * Creates a copy with updated values
+   */
+  public update(updates: Partial<Env>): Env {
+    return new Env(
+      updates.id ?? this.id,
+      updates.name ?? this.name,
+      updates.params ?? this.params
+    );
+  }
 
-        return this;
-    }
+  /**
+   * Generates a unique ID for new parameters
+   */
+  private generateId(): number {
+    return Date.now() % 100000 + Math.floor(Math.random() * 10000);
+  }
 }
 
+/**
+ * Base class for environment events (backward compatibility)
+ */
 export class AppEvent<T> {
-    protected constructor(public payload: T) { }
+  constructor(public payload: T) {}
 
-    public static add<T>(payload: T): AppEvent<T> {
-        return new AddEvent(payload);
-    }
-    public static del<T>(payload: T): AppEvent<T> {
-        return new DelEvent(payload);
-    }
-    public static update<T>(payload: T): AppEvent<T> {
-        return new UpdateEvent(payload);
-    }
+  public static add<T>(payload: T): AppEvent<T> {
+    return new AddEvent(payload);
+  }
+
+  public static del<T>(payload: T): AppEvent<T> {
+    return new RemoveEvent(payload);
+  }
+
+  public static update<T>(payload: T): AppEvent<T> {
+    return new UpdateEvent(payload);
+  }
 }
 
-export class AddEvent<T> extends AppEvent<T> { }
-export class UpdateEvent<T> extends AppEvent<T> { }
-export class DelEvent<T> extends AppEvent<T> { }
\ No newline at end of file
+/**
+ * Event for adding a parameter
+ */
+export class AddEvent<T> extends AppEvent<T> {}
+
+/**
+ * Event for updating a parameter
+ */
+export class UpdateEvent<T> extends AppEvent<T> {}
+
+/**
+ * Event for removing a parameter (backward compatibility)
+ */
+export class DelEvent<T> extends AppEvent<T> {}
+
+/**
+ * Event for removing a parameter
+ */
+export class RemoveEvent<T> extends AppEvent<T> {}
diff --git a/src/models/EnvParam.ts b/src/models/EnvParam.ts
index a754555..7f6387c 100644
--- a/src/models/EnvParam.ts
+++ b/src/models/EnvParam.ts
@@ -1,32 +1,73 @@
-import { NamedId } from "./NamedId";
+import { NamedEntity } from './types';
 
-export class EnvParam implements NamedId {
-    constructor(
-        public id?: number,
-        public name?: string,
-        public value?: string,
-        public isChanged: boolean = false
-    ) { }
+/**
+ * Environment parameter representing a key-value configuration pair
+ */
+export class EnvParam implements NamedEntity {
+  constructor(
+    public id?: number,
+    public name?: string,
+    public value?: string,
+    public isChanged: boolean = false
+  ) {}
 
-    public Changed(v: boolean = true): EnvParam {
-        return new EnvParam(
-            this.id,
-            this.name,
-            this.value,
-            v);
-    }
+  /**
+   * Marks the parameter as changed (backward compatibility)
+   */
+  public Changed(changed: boolean = true): EnvParam {
+    return this.markChanged(changed);
+  }
 
-    public sanitize(v?: string): string {
-        return v?.replace(/&/g, "&amp")
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&apos;')            
-            ?? "";
-    }
+  /**
+   * Marks the parameter as changed
+   */
+  public markChanged(changed: boolean = true): EnvParam {
+    return new EnvParam(this.id, this.name, this.value, changed);
+  }
 
-    public humanize(v?: string): string {
-        return v ?? "";
-    }
+  /**
+   * Creates a copy of this parameter with updated values
+   */
+  public update(updates: Partial<EnvParam>): EnvParam {
+    return new EnvParam(
+      updates.id ?? this.id,
+      updates.name ?? this.name,
+      updates.value ?? this.value,
+      updates.isChanged ?? this.isChanged
+    );
+  }
+
+  /**
+   * Sanitizes HTML special characters (instance method for backward compatibility)
+   */
+  public sanitize(value?: string): string {
+    const v = value ?? this.value ?? '';
+    return EnvParam.sanitize(v);
+  }
+
+  /**
+   * Sanitizes HTML special characters (static method)
+   */
+  public static sanitize(value: string): string {
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&apos;');
+  }
+
+  /**
+   * Humanizes the value (backward compatibility)
+   */
+  public humanize(value?: string): string {
+    return value ?? this.value ?? '';
+  }
+
+  /**
+   * Validates that the parameter has required fields
+   */
+  public isValid(): boolean {
+    return !!(this.name && this.name.trim() !== '');
+  }
 }
-
diff --git a/src/models/types.ts b/src/models/types.ts
new file mode 100644
index 0000000..4d66915
--- /dev/null
+++ b/src/models/types.ts
@@ -0,0 +1,13 @@
+/**
+ * Base interface for entities with optional ID
+ */
+export interface Entity {
+  id?: number;
+}
+
+/**
+ * Named entity with optional ID
+ */
+export interface NamedEntity extends Entity {
+  name?: string;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..83132b5
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        success: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+        },
+        danger: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        },
+        warning: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        },
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-in-out',
+        'slide-in': 'slideIn 0.3s ease-out',
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}