commit f2f64384a10e72a3fb60a9a7667276aa2f2b4051
Author: JaiPandey425 <jai.p@hicglobalsolutions.com>
Date:   Tue Jul 7 14:08:20 2026 +0530

    sme v1 setup

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..948c489
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+.env.development
+.env.production
+private
+*.zip
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7059a96
--- /dev/null
+++ b/README.md
@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..cee1e2c
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4aa80a8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SME</title>
+  <link rel="preload" href="/fonts/great-vibes/great-vibes-regular.woff2"   as="font" type="font/woff2" crossorigin="anonymous" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..0be816d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,4308 @@
+{
+  "name": "sme-client",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "sme-client",
+      "version": "0.0.0",
+      "dependencies": {
+        "@tabler/icons-react": "^3.44.0",
+        "@tailwindcss/vite": "^4.1.10",
+        "axios": "^1.11.0",
+        "canvas-confetti": "^1.9.3",
+        "i18next": "^26.0.6",
+        "i18next-browser-languagedetector": "^8.2.1",
+        "i18next-http-backend": "^4.0.0",
+        "immer": "^11.1.8",
+        "lodash": "^4.17.21",
+        "lucide-react": "^0.523.0",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "react-i18next": "^17.0.4",
+        "react-router-dom": "^7.9.4",
+        "tailwindcss": "^4.1.10",
+        "vite": "^6.3.5",
+        "vite-plugin-svgr": "^4.5.0",
+        "zustand": "^5.0.12"
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.29.0",
+        "@types/react": "^19.1.8",
+        "@types/react-dom": "^19.1.6",
+        "@vitejs/plugin-react": "^4.5.2",
+        "daisyui": "^5.1.29",
+        "eslint": "^9.29.0",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.20",
+        "globals": "^16.2.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.27.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.5.tgz",
+      "integrity": "sha512-KiRAp/VoJaWkkte84TvUd9qjdbZAdiqyvMxrGl1N6vzFogKmaLgoM3L1kgtLicp2HP5fBJS8JrZKLVIZGVJAVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.4.tgz",
+      "integrity": "sha512-bXYxrXFubeYdvB0NhD/NBB3Qi6aZeV20GOWVI47t2dkecCEoneR4NPVcb7abpXDEvejgrUfFtG6vG/zxAKmg+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.27.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.27.3",
+        "@babel/helpers": "^7.27.4",
+        "@babel/parser": "^7.27.4",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.27.4",
+        "@babel/types": "^7.27.3",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.27.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz",
+      "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.27.5",
+        "@babel/types": "^7.27.3",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.3.tgz",
+      "integrity": "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.6.tgz",
+      "integrity": "sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.27.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.27.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
+      "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
+      "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.27.3",
+        "@babel/parser": "^7.27.4",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.27.3",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
+      "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
+      "integrity": "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.5.tgz",
+      "integrity": "sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.5.tgz",
+      "integrity": "sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.5.tgz",
+      "integrity": "sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.5.tgz",
+      "integrity": "sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.5.tgz",
+      "integrity": "sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.5.tgz",
+      "integrity": "sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.5.tgz",
+      "integrity": "sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.5.tgz",
+      "integrity": "sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.5.tgz",
+      "integrity": "sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.5.tgz",
+      "integrity": "sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.5.tgz",
+      "integrity": "sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.5.tgz",
+      "integrity": "sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.5.tgz",
+      "integrity": "sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.5.tgz",
+      "integrity": "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.5.tgz",
+      "integrity": "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.5.tgz",
+      "integrity": "sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.5.tgz",
+      "integrity": "sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.5.tgz",
+      "integrity": "sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.5.tgz",
+      "integrity": "sha512-TXv6YnJ8ZMVdX+SXWVBo/0p8LTcrUYngpWjvm91TMjjBQii7Oz11Lw5lbDV5Y0TzuhSJHwiH4hEtC1I42mMS0g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.1.tgz",
+      "integrity": "sha512-OL0RJzC/CBzli0DrrR31qzj6d6i6Mm3HByuhflhl4LOBiWxN+3i6/t/ZQQNii4tjksXi8r2CRW1wMpWA2ULUEw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.3.tgz",
+      "integrity": "sha512-u180qk2Um1le4yf0ruXH3PYFeEZeYC3p/4wCTKrr2U1CmGdzGi3KtY0nuPDH48UJxlKCC5RDzbcbh4X0XlqgHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz",
+      "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.29.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.29.0.tgz",
+      "integrity": "sha512-3PIF4cBw/y+1u2EazflInpV+lYsSG0aByVIQzAgb1m1MhHFSbqTyNqtBKHgWf/9Ykud+DhILS9EGkmekVhbKoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.3.tgz",
+      "integrity": "sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.15.1",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
+      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.19",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
+      "integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
+      "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.44.1.tgz",
+      "integrity": "sha512-JAcBr1+fgqx20m7Fwe1DxPUl/hPkee6jA6Pl7n1v2EFiktAHenTaXl5aIFjUIEsfn9w3HE4gK1lEgNGMzBDs1w==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.44.1.tgz",
+      "integrity": "sha512-RurZetXqTu4p+G0ChbnkwBuAtwAbIwJkycw1n6GvlGlBuS4u5qlr5opix8cBAYFJgaY05TWtM+LaoFggUmbZEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.1.tgz",
+      "integrity": "sha512-fM/xPesi7g2M7chk37LOnmnSTHLG/v2ggWqKj3CCA1rMA4mm5KVBT1fNoswbo1JhPuNNZrVwpTvlCVggv8A2zg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.1.tgz",
+      "integrity": "sha512-gDnWk57urJrkrHQ2WVx9TSVTH7lSlU7E3AFqiko+bgjlh78aJ88/3nycMax52VIVjIm3ObXnDL2H00e/xzoipw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.44.1.tgz",
+      "integrity": "sha512-wnFQmJ/zPThM5zEGcnDcCJeYJgtSLjh1d//WuHzhf6zT3Md1BvvhJnWoy+HECKu2bMxaIcfWiu3bJgx6z4g2XA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.44.1.tgz",
+      "integrity": "sha512-uBmIxoJ4493YATvU2c0upGz87f99e3wop7TJgOA/bXMFd2SvKCI7xkxY/5k50bv7J6dw1SXT4MQBQSLn8Bb/Uw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.44.1.tgz",
+      "integrity": "sha512-n0edDmSHlXFhrlmTK7XBuwKlG5MbS7yleS1cQ9nn4kIeW+dJH+ExqNgQ0RrFRew8Y+0V/x6C5IjsHrJmiHtkxQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.44.1.tgz",
+      "integrity": "sha512-8WVUPy3FtAsKSpyk21kV52HCxB+me6YkbkFHATzC2Yd3yuqHwy2lbFL4alJOLXKljoRw08Zk8/xEj89cLQ/4Nw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.1.tgz",
+      "integrity": "sha512-yuktAOaeOgorWDeFJggjuCkMGeITfqvPgkIXhDqsfKX8J3jGyxdDZgBV/2kj/2DyPaLiX6bPdjJDTu9RB8lUPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.1.tgz",
+      "integrity": "sha512-W+GBM4ifET1Plw8pdVaecwUgxmiH23CfAUj32u8knq0JPFyK4weRy6H7ooxYFD19YxBulL0Ktsflg5XS7+7u9g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.44.1.tgz",
+      "integrity": "sha512-1zqnUEMWp9WrGVuVak6jWTl4fEtrVKfZY7CvcBmUUpxAJ7WcSowPSAWIKa/0o5mBL/Ij50SIf9tuirGx63Ovew==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.44.1.tgz",
+      "integrity": "sha512-Rl3JKaRu0LHIx7ExBAAnf0JcOQetQffaw34T8vLlg9b1IhzcBgaIdnvEbbsZq9uZp3uAH+JkHd20Nwn0h9zPjA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.44.1.tgz",
+      "integrity": "sha512-j5akelU3snyL6K3N/iX7otLBIl347fGwmd95U5gS/7z6T4ftK288jKq3A5lcFKcx7wwzb5rgNvAg3ZbV4BqUSw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.44.1.tgz",
+      "integrity": "sha512-ppn5llVGgrZw7yxbIm8TTvtj1EoPgYUAbfw0uDjIOzzoqlZlZrLJ/KuiE7uf5EpTpCTrNt1EdtzF0naMm0wGYg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.44.1.tgz",
+      "integrity": "sha512-Hu6hEdix0oxtUma99jSP7xbvjkUM/ycke/AQQ4EC5g7jNRLLIwjcNwaUy95ZKBJJwg1ZowsclNnjYqzN4zwkAw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.1.tgz",
+      "integrity": "sha512-EtnsrmZGomz9WxK1bR5079zee3+7a+AdFlghyd6VbAjgRJDbTANJ9dcPIPAi76uG05micpEL+gPGmAKYTschQw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.1.tgz",
+      "integrity": "sha512-iAS4p+J1az6Usn0f8xhgL4PaU878KEtutP4hqw52I4IO6AGoyOkHCxcc4bqufv1tQLdDWFx8lR9YlwxKuv3/3g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.1.tgz",
+      "integrity": "sha512-NtSJVKcXwcqozOl+FwI41OH3OApDyLk3kqTJgx8+gp6On9ZEt5mYhIsKNPGuaZr3p9T6NWPKGU/03Vw4CNU9qg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.44.1.tgz",
+      "integrity": "sha512-JYA3qvCOLXSsnTR3oiyGws1Dm0YTuxAAeaYGVlGpUsHqloPcFjPg+X0Fj2qODGLNwQOAcCiQmHub/V007kiH5A==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.1.tgz",
+      "integrity": "sha512-J8o22LuF0kTe7m+8PvW9wk3/bRq5+mRo5Dqo6+vXb7otCm3TPhYOJqOaQtGU9YMWQSL3krMnoOxMr0+9E6F3Ug==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/@tabler/icons": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.44.0.tgz",
+      "integrity": "sha512-Wn0AOZG9sg0L+bjfMqq4eNhC6pQjIrk94LvvWYNYkY8KH8wC3YILRzQlrnVJc4FUeMxH/AK97QsYCX35H3LndA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.44.0.tgz",
+      "integrity": "sha512-8+rvzBbVm/1Z3sG3x7GUNAaxIKxwgz8xaMhRs23nrCnMTKRFAhEC+82zAIFeAA0seXdrAGX5HFCkaLpGK2rVHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.44.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.10.tgz",
+      "integrity": "sha512-2ACf1znY5fpRBwRhMgj9ZXvb2XZW8qs+oTfotJ2C5xR0/WNL7UHZ7zXl6s+rUqedL1mNi+0O+WQr5awGowS3PQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.10.tgz",
+      "integrity": "sha512-v0C43s7Pjw+B9w21htrQwuFObSkio2aV/qPx/mhrRldbqxbWJK6KizM+q7BF1/1CmuLqZqX3CeYF7s7P9fbA8Q==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.10",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.10",
+        "@tailwindcss/oxide-darwin-x64": "4.1.10",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.10",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.10",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.10",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.10",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.10",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.10",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.10",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.10",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.10.tgz",
+      "integrity": "sha512-VGLazCoRQ7rtsCzThaI1UyDu/XRYVyH4/EWiaSX6tFglE+xZB5cvtC5Omt0OQ+FfiIVP98su16jDVHDEIuH4iQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.10.tgz",
+      "integrity": "sha512-ZIFqvR1irX2yNjWJzKCqTCcHZbgkSkSkZKbRM3BPzhDL/18idA8uWCoopYA2CSDdSGFlDAxYdU2yBHwAwx8euQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.10.tgz",
+      "integrity": "sha512-eCA4zbIhWUFDXoamNztmS0MjXHSEJYlvATzWnRiTqJkcUteSjO94PoRHJy1Xbwp9bptjeIxxBHh+zBWFhttbrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.10.tgz",
+      "integrity": "sha512-8/392Xu12R0cc93DpiJvNpJ4wYVSiciUlkiOHOSOQNH3adq9Gi/dtySK7dVQjXIOzlpSHjeCL89RUUI8/GTI6g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.10.tgz",
+      "integrity": "sha512-t9rhmLT6EqeuPT+MXhWhlRYIMSfh5LZ6kBrC4FS6/+M1yXwfCtp24UumgCWOAJVyjQwG+lYva6wWZxrfvB+NhQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.10.tgz",
+      "integrity": "sha512-3oWrlNlxLRxXejQ8zImzrVLuZ/9Z2SeKoLhtCu0hpo38hTO2iL86eFOu4sVR8cZc6n3z7eRXXqtHJECa6mFOvA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.10.tgz",
+      "integrity": "sha512-saScU0cmWvg/Ez4gUmQWr9pvY9Kssxt+Xenfx1LG7LmqjcrvBnw4r9VjkFcqmbBb7GCBwYNcZi9X3/oMda9sqQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.10.tgz",
+      "integrity": "sha512-/G3ao/ybV9YEEgAXeEg28dyH6gs1QG8tvdN9c2MNZdUXYBaIY/Gx0N6RlJzfLy/7Nkdok4kaxKPHKJUlAaoTdA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.10.tgz",
+      "integrity": "sha512-LNr7X8fTiKGRtQGOerSayc2pWJp/9ptRYAa4G+U+cjw9kJZvkopav1AQc5HHD+U364f71tZv6XamaHKgrIoVzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.10.tgz",
+      "integrity": "sha512-d6ekQpopFQJAcIK2i7ZzWOYGZ+A6NzzvQ3ozBvWFdeyqfOZdYHU66g5yr+/HC4ipP1ZgWsqa80+ISNILk+ae/Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.10",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.10.tgz",
+      "integrity": "sha512-i1Iwg9gRbwNVOCYmnigWCCgow8nDWSFmeTUU5nbNx3rqbe4p0kRbEqLwLJbYZKmSSp23g4N6rCDmm7OuPBXhDA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.10.tgz",
+      "integrity": "sha512-sGiJTjcBSfGq2DVRtaSljq5ZgZS2SDHSIfhOylkBvHVjwOsodBhnb3HdmiKkVuUGKD0I7G63abMOVaskj1KpOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.10.tgz",
+      "integrity": "sha512-QWnD5HDY2IADv+vYR82lOhqOlS1jSCUUAmfem52cXAhRTKxpDh3ARX8TTXJTCCO7Rv7cD2Nlekabv02bwP3a2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.10",
+        "@tailwindcss/oxide": "4.1.10",
+        "tailwindcss": "4.1.10"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.7.tgz",
+      "integrity": "sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
+      "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
+      "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.6.0.tgz",
+      "integrity": "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.19",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.25.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
+      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001726",
+        "electron-to-chromium": "^1.5.173",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001726",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001726.tgz",
+      "integrity": "sha512-VQAUIUzBiZ/UnlM28fSp2CRF3ivUn1BWEvxMcVTNwpw91Py1pGbPIyIKtd+tzct9C3ouceCVdGAXxZOpZAsgdw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
+      "integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/daisyui": {
+      "version": "5.1.29",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.1.29.tgz",
+      "integrity": "sha512-4eZhqCXO7CJVNGytTZEIQYJz3fah2gPleuqp4qUD4fD8WoEQIYzKwlOewi8nPaz6NX7vvSLZ+YSjt5Z5zqacGw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.176",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.176.tgz",
+      "integrity": "sha512-2nDK9orkm7M9ZZkjO3PjbEd3VUulQLyg5T9O3enJdFvUg46Hzd4DUvTvAuEgbdHYXyFsiG4A5sO9IzToMH1cDg==",
+      "license": "ISC"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.2",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
+      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
+      "integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.5",
+        "@esbuild/android-arm": "0.25.5",
+        "@esbuild/android-arm64": "0.25.5",
+        "@esbuild/android-x64": "0.25.5",
+        "@esbuild/darwin-arm64": "0.25.5",
+        "@esbuild/darwin-x64": "0.25.5",
+        "@esbuild/freebsd-arm64": "0.25.5",
+        "@esbuild/freebsd-x64": "0.25.5",
+        "@esbuild/linux-arm": "0.25.5",
+        "@esbuild/linux-arm64": "0.25.5",
+        "@esbuild/linux-ia32": "0.25.5",
+        "@esbuild/linux-loong64": "0.25.5",
+        "@esbuild/linux-mips64el": "0.25.5",
+        "@esbuild/linux-ppc64": "0.25.5",
+        "@esbuild/linux-riscv64": "0.25.5",
+        "@esbuild/linux-s390x": "0.25.5",
+        "@esbuild/linux-x64": "0.25.5",
+        "@esbuild/netbsd-arm64": "0.25.5",
+        "@esbuild/netbsd-x64": "0.25.5",
+        "@esbuild/openbsd-arm64": "0.25.5",
+        "@esbuild/openbsd-x64": "0.25.5",
+        "@esbuild/sunos-x64": "0.25.5",
+        "@esbuild/win32-arm64": "0.25.5",
+        "@esbuild/win32-ia32": "0.25.5",
+        "@esbuild/win32-x64": "0.25.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.29.0.tgz",
+      "integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.20.1",
+        "@eslint/config-helpers": "^0.2.1",
+        "@eslint/core": "^0.14.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.29.0",
+        "@eslint/plugin-kit": "^0.3.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.20",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.20.tgz",
+      "integrity": "sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=8.40"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "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",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "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==",
+      "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",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.2.0.tgz",
+      "integrity": "sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "26.0.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.0.6.tgz",
+      "integrity": "sha512-A4U6eCXodIbrhf8EarRurB9/4ebyaurH4+fu4gig9bqxmpSt+fCAFm/GpRQDcN1Xzu/LdFCx4nYHsnM1edIIbg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "peerDependencies": {
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
+      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-http-backend": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-4.0.0.tgz",
+      "integrity": "sha512-EgSjO3Q1G6f2Q5oy7u9mmxuesE0oSfzAD97NFBjC8EmkK4guBSYLljM0Fng3DarMWIIkU70jfo4+mUzmyVISTA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
+      "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "license": "MIT",
+      "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",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "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==",
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.523.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.523.0.tgz",
+      "integrity": "sha512-rUjQoy7egZT9XYVXBK1je9ckBnNp7qzRZOhLQx5RcEp2dCGlXo+mv6vf7Am4LimEcFBJIIZzSGfgTqc9QCrPSw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "license": "MIT"
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-i18next": {
+      "version": "17.0.4",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.4.tgz",
+      "integrity": "sha512-hQipmK4EF0y6RO6tt6WuqnmWpWYEXmQUUzecmMBuNsIgYd3smXcG4GtYPWhvgxn0pqMOItKlEO8H24HCs5hc3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.0.1",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
+      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.9.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.44.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.44.1.tgz",
+      "integrity": "sha512-x8H8aPvD+xbl0Do8oez5f5o8eMS3trfCghc4HhLAnCkj7Vl0d1JWGs0UF/D886zLW2rOj2QymV/JcSSsw+XDNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.44.1",
+        "@rollup/rollup-android-arm64": "4.44.1",
+        "@rollup/rollup-darwin-arm64": "4.44.1",
+        "@rollup/rollup-darwin-x64": "4.44.1",
+        "@rollup/rollup-freebsd-arm64": "4.44.1",
+        "@rollup/rollup-freebsd-x64": "4.44.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.44.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.44.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.1",
+        "@rollup/rollup-linux-arm64-musl": "4.44.1",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.44.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.44.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.44.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.44.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.44.1",
+        "@rollup/rollup-linux-x64-gnu": "4.44.1",
+        "@rollup/rollup-linux-x64-musl": "4.44.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.44.1",
+        "@rollup/rollup-win32-x64-msvc": "4.44.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "license": "MIT"
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.10.tgz",
+      "integrity": "sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-svgr": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.5.0.tgz",
+      "integrity": "sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.2.0",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.6.0"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.12.tgz",
+      "integrity": "sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d670c6e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "sme-client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite build && vite preview --host",
+    "deploy": "npm run build -- --mode development && pscp -i private\\SME-Test.ppk -r dist root@52.24.109.130:/var/www/sme"
+  },
+  "dependencies": {
+    "@tabler/icons-react": "^3.44.0",
+    "@tailwindcss/vite": "^4.1.10",
+    "axios": "^1.11.0",
+    "canvas-confetti": "^1.9.3",
+    "i18next": "^26.0.6",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "i18next-http-backend": "^4.0.0",
+    "immer": "^11.1.8",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.523.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-i18next": "^17.0.4",
+    "react-router-dom": "^7.9.4",
+    "tailwindcss": "^4.1.10",
+    "vite": "^6.3.5",
+    "vite-plugin-svgr": "^4.5.0",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.29.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "daisyui": "^5.1.29",
+    "eslint": "^9.29.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.2.0"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..02d8f6a
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/fonts/albert-sans/albert-sans-700.woff2 b/public/fonts/albert-sans/albert-sans-700.woff2
new file mode 100644
index 0000000..cd30f90
Binary files /dev/null and b/public/fonts/albert-sans/albert-sans-700.woff2 differ
diff --git a/public/fonts/albert-sans/albert-sans-700italic.woff2 b/public/fonts/albert-sans/albert-sans-700italic.woff2
new file mode 100644
index 0000000..67631a2
Binary files /dev/null and b/public/fonts/albert-sans/albert-sans-700italic.woff2 differ
diff --git a/public/fonts/albert-sans/albert-sans-italic.woff2 b/public/fonts/albert-sans/albert-sans-italic.woff2
new file mode 100644
index 0000000..caf48d6
Binary files /dev/null and b/public/fonts/albert-sans/albert-sans-italic.woff2 differ
diff --git a/public/fonts/albert-sans/albert-sans-regular.woff2 b/public/fonts/albert-sans/albert-sans-regular.woff2
new file mode 100644
index 0000000..b688c4d
Binary files /dev/null and b/public/fonts/albert-sans/albert-sans-regular.woff2 differ
diff --git a/public/fonts/comic-neue/comic-neue-700italic.woff2 b/public/fonts/comic-neue/comic-neue-700italic.woff2
new file mode 100644
index 0000000..24410cd
Binary files /dev/null and b/public/fonts/comic-neue/comic-neue-700italic.woff2 differ
diff --git a/public/fonts/comic-neue/comic-neue-bold.woff2 b/public/fonts/comic-neue/comic-neue-bold.woff2
new file mode 100644
index 0000000..e25f252
Binary files /dev/null and b/public/fonts/comic-neue/comic-neue-bold.woff2 differ
diff --git a/public/fonts/comic-neue/comic-neue-italic.woff2 b/public/fonts/comic-neue/comic-neue-italic.woff2
new file mode 100644
index 0000000..2ef5b7d
Binary files /dev/null and b/public/fonts/comic-neue/comic-neue-italic.woff2 differ
diff --git a/public/fonts/comic-neue/comic-neue-regular.woff2 b/public/fonts/comic-neue/comic-neue-regular.woff2
new file mode 100644
index 0000000..4f73b72
Binary files /dev/null and b/public/fonts/comic-neue/comic-neue-regular.woff2 differ
diff --git a/public/fonts/great-vibes/great-vibes-regular.woff2 b/public/fonts/great-vibes/great-vibes-regular.woff2
new file mode 100644
index 0000000..3dc01f4
Binary files /dev/null and b/public/fonts/great-vibes/great-vibes-regular.woff2 differ
diff --git a/public/fonts/noto-serif/noto-serif-700italic.woff2 b/public/fonts/noto-serif/noto-serif-700italic.woff2
new file mode 100644
index 0000000..b826f83
Binary files /dev/null and b/public/fonts/noto-serif/noto-serif-700italic.woff2 differ
diff --git a/public/fonts/noto-serif/noto-serif-bold.woff2 b/public/fonts/noto-serif/noto-serif-bold.woff2
new file mode 100644
index 0000000..e250137
Binary files /dev/null and b/public/fonts/noto-serif/noto-serif-bold.woff2 differ
diff --git a/public/fonts/noto-serif/noto-serif-italic.woff2 b/public/fonts/noto-serif/noto-serif-italic.woff2
new file mode 100644
index 0000000..ea5b4de
Binary files /dev/null and b/public/fonts/noto-serif/noto-serif-italic.woff2 differ
diff --git a/public/fonts/noto-serif/noto-serif-regular.woff2 b/public/fonts/noto-serif/noto-serif-regular.woff2
new file mode 100644
index 0000000..c8f0c13
Binary files /dev/null and b/public/fonts/noto-serif/noto-serif-regular.woff2 differ
diff --git a/public/fonts/open-sans/open-sans-700italic.woff2 b/public/fonts/open-sans/open-sans-700italic.woff2
new file mode 100644
index 0000000..6056a4f
Binary files /dev/null and b/public/fonts/open-sans/open-sans-700italic.woff2 differ
diff --git a/public/fonts/open-sans/open-sans-bold.woff2 b/public/fonts/open-sans/open-sans-bold.woff2
new file mode 100644
index 0000000..f5977a4
Binary files /dev/null and b/public/fonts/open-sans/open-sans-bold.woff2 differ
diff --git a/public/fonts/open-sans/open-sans-italic.woff2 b/public/fonts/open-sans/open-sans-italic.woff2
new file mode 100644
index 0000000..bb2166e
Binary files /dev/null and b/public/fonts/open-sans/open-sans-italic.woff2 differ
diff --git a/public/fonts/open-sans/open-sans-regular.woff2 b/public/fonts/open-sans/open-sans-regular.woff2
new file mode 100644
index 0000000..e2d3fa4
Binary files /dev/null and b/public/fonts/open-sans/open-sans-regular.woff2 differ
diff --git a/public/fonts/roboto/roboto-700.woff2 b/public/fonts/roboto/roboto-700.woff2
new file mode 100644
index 0000000..85b8ace
Binary files /dev/null and b/public/fonts/roboto/roboto-700.woff2 differ
diff --git a/public/fonts/roboto/roboto-700italic.woff2 b/public/fonts/roboto/roboto-700italic.woff2
new file mode 100644
index 0000000..859feb5
Binary files /dev/null and b/public/fonts/roboto/roboto-700italic.woff2 differ
diff --git a/public/fonts/roboto/roboto-italic.woff2 b/public/fonts/roboto/roboto-italic.woff2
new file mode 100644
index 0000000..04367ca
Binary files /dev/null and b/public/fonts/roboto/roboto-italic.woff2 differ
diff --git a/public/fonts/roboto/roboto-regular.woff2 b/public/fonts/roboto/roboto-regular.woff2
new file mode 100644
index 0000000..77e4259
Binary files /dev/null and b/public/fonts/roboto/roboto-regular.woff2 differ
diff --git a/public/fonts/space-mono/space-mono-v17-latin-700.woff2 b/public/fonts/space-mono/space-mono-v17-latin-700.woff2
new file mode 100644
index 0000000..6563bad
Binary files /dev/null and b/public/fonts/space-mono/space-mono-v17-latin-700.woff2 differ
diff --git a/public/fonts/space-mono/space-mono-v17-latin-700italic.woff2 b/public/fonts/space-mono/space-mono-v17-latin-700italic.woff2
new file mode 100644
index 0000000..263487c
Binary files /dev/null and b/public/fonts/space-mono/space-mono-v17-latin-700italic.woff2 differ
diff --git a/public/fonts/space-mono/space-mono-v17-latin-italic.woff2 b/public/fonts/space-mono/space-mono-v17-latin-italic.woff2
new file mode 100644
index 0000000..d9b2583
Binary files /dev/null and b/public/fonts/space-mono/space-mono-v17-latin-italic.woff2 differ
diff --git a/public/fonts/space-mono/space-mono-v17-latin-regular.woff2 b/public/fonts/space-mono/space-mono-v17-latin-regular.woff2
new file mode 100644
index 0000000..2752f60
Binary files /dev/null and b/public/fonts/space-mono/space-mono-v17-latin-regular.woff2 differ
diff --git a/public/locales/da/translation.json b/public/locales/da/translation.json
new file mode 100644
index 0000000..5dc3c3f
--- /dev/null
+++ b/public/locales/da/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Ved at klikke på <0>Jeg accepterer</0> bekræfter du, at du har gennemgået <1>Elektronisk registrering og signaturdisclosure</1>, og giver samtykke til brugen af elektroniske registreringer og signaturer ved gennemgang og underskrivelse af dette dokument.",
+        "note": "Bemærk:",
+        "noteText": "At acceptere dette betyder ikke, at du underskriver dokumentet med det samme. Det giver dig kun mulighed for at gennemgå det elektronisk. Du får mulighed for at gennemgå dokumentet fuldt ud, før du underskriver."
+    },
+    "buttons": {
+        "agree": "Jeg accepterer",
+        "processing": "Behandler...",
+        "close": "Luk",
+        "downloadPdf": "Download PDF",
+        "downloading": "Downloader..."
+    },
+    "header": {
+        "aiSummary": "AI-resumé",
+        "completeSign": "Fuldfør underskrift",
+        "sign": "Underskriv",
+        "processing": "Behandler...",
+        "options": "Download"
+    },
+    "menu": {
+        "downloadPdf": "Download PDF",
+        "auditTrail": "Revisionsspor",
+        "reassignSigner": "Omfordel underskriver",
+        "cancelTransaction": "Annuller transaktion",
+        "viewTerms": "Se vilkår og betingelser",
+        "helpSupport": "Hjælp og support",
+        "about": "Om SME"
+    },
+    "sidebar": {
+        "documents": "Dokumenter",
+        "pages": "Sider: {{count}}",
+        "noDocuments": "Ingen dokumenter tilgængelige."
+    },
+    "footer": {
+        "readyTitle": "Klar til at afslutte?",
+        "readyDesc": "Du har udfyldt de påkrævede felter. Gennemgå dit arbejde, og vælg derefter Fuldfør.",
+        "finish": "Fuldfør",
+        "submitting": "Sender...",
+        "start": "Start",
+        "next": "Næste",
+        "agreementText": "Ved at underskrive accepterer jeg Sign Made Easy's <0>vilkår og betingelser.</0>"
+    },
+    "completion": {
+        "complete": {
+            "hit": "Helt færdig!",
+            "title": "Tak for din underskrift",
+            "message": "Dit dokument er nu fuldført og sikkert opbevaret. Vi har sendt dig en kopi på e-mail."
+        },
+        "declined": {
+            "hit": "Handling annulleret!",
+            "title": "Måske næste gang!",
+            "message": "Din anmodning er blevet afvist."
+        },
+        "cancelled": {
+            "hit": "Handling annulleret!",
+            "title": "Måske næste gang!",
+            "message": "Din anmodning er blevet annulleret."
+        },
+        "download": "Download",
+        "downloading": "Downloader...",
+        "downloadSuccess": "Filen blev downloadet.",
+        "downloadOptions": {
+            "pdf": "PDF-dokument",
+            "audit": "Revisionsspor",
+            "selectFormat": "Vælg format"
+        },
+        "downloadError": "Download mislykkedes. Prøv igen.",
+        "appsTitle": "Øg effektiviteten med vores apps",
+        "formsTitle": "Generer formularer nemt",
+        "docsTitle": "Generer dokumenter (fakturaer, rapporter, tilbud)",
+        "tryNow": "Prøv nu",
+        "footerText": "Ophavsret 2026 Sign Made Easy. Alle rettigheder forbeholdes.<0>Privatlivspolitik</0> | <1>Politik for rimelig brug</1>"
+    },
+    "reassign": {
+        "title": "Omfordel underskriver",
+        "successSubtitle": "Dokumentet er blevet omfordelt",
+        "successTitle": "Tak!",
+        "successMessage": "Dokumentet er blevet omfordelt til den nye underskriver.",
+        "fields": {
+            "firstName": "Fornavn",
+            "lastName": "Efternavn",
+            "email": "E-mail",
+            "language": "Sprog",
+            "message": "Valgfri besked"
+        },
+        "placeholders": {
+            "firstName": "Indtast dit fornavn",
+            "lastName": "Indtast dit efternavn",
+            "email": "your.email@example.com",
+            "message": "Skriv din besked her..."
+        },
+        "buttons": {
+            "submit": "Indsend",
+            "submitting": "Indsender...",
+            "cancel": "Annuller"
+        },
+        "errors": {
+            "firstNameRequired": "Fornavn er påkrævet",
+            "firstNameMin": "Fornavn skal være mindst 2 tegn",
+            "lastNameRequired": "Efternavn er påkrævet",
+            "lastNameMin": "Efternavn skal være mindst 2 tegn",
+            "emailRequired": "E-mail er påkrævet",
+            "emailInvalid": "Ugyldig e-mailadresse"
+        }
+    },
+    "cancelModal": {
+        "title": "Annuller transaktion",
+        "description": "Er du sikker på, at du vil annullere denne transaktion? Angiv din grund til annullering nedenfor.",
+        "placeholder": "Angiv venligst din grund til annullering...",
+        "buttons": {
+            "no": "Nej, annuller ikke",
+            "yes": "Ja, annuller den"
+        },
+        "errors": {
+            "reasonRequired": "Annulleringsgrund er påkrævet"
+        },
+        "inPersonSuccess": {
+            "title": "Annuller transaktion",
+            "message": "Transaktionen blev annulleret. Bekræftelsesemails blev sendt.",
+            "passBackDevice": "Du kan nu give enheden tilbage til {{senderName}}.",
+            "continueButton": "Fortsæt"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Transaktionsrevision",
+        "meta.transaction_id": "Transaktions-id",
+        "meta.transaction_status": "Transaktionsstatus",
+        "meta.files": "Filer",
+        "audit.title": "Fuldt revisionsspor",
+        "audit.description": "Opdater venligst emne og besked nedenfor for en tilpasset besked.",
+        "table.header.actions": "Handlinger",
+        "table.header.language": "Sprog",
+        "table.header.ip_address": "IP-adresse",
+        "table.header.date": "Dato",
+        "status.completed": "Fuldført",
+        "status.pending": "Afventer",
+        "status.failed": "Mislykkedes",
+        "action.created": "Oprettet",
+        "action.updated": "Opdateret",
+        "action.deleted": "Slettet",
+        "action.viewed": "Vist",
+        "action.signed": "Underskrevet",
+        "action.uploaded": "Uploadet",
+        "action.downloaded": "Downloadet",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Transaktionsrevision",
+        "meta": {
+            "transactionId": "Transaktions-id",
+            "transactionStatus": "Transaktionsstatus",
+            "files": "Filer"
+        },
+        "audit": {
+            "title": "Fuldt revisionsspor",
+            "description": "Opdater venligst emne og besked nedenfor for en tilpasset besked."
+        },
+        "table": {
+            "actions": "Handlinger",
+            "language": "Sprog",
+            "ipAddress": "IP-adresse",
+            "date": "Dato"
+        },
+        "status": {
+            "completed": "Fuldført",
+            "pending": "Afventer",
+            "failed": "Mislykkedes"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transaktion blev oprettet af {{userName}} <{{userEmail}}>",
+            "sent": "Transaktion blev sendt af {{userName}} <{{userEmail}}>",
+            "cancelled": "Transaktion blev annulleret af {{userName}} <{{userEmail}}>",
+            "edited": "Transaktion blev redigeret af {{userName}} <{{userEmail}}>",
+            "viewed": "Transaktion blev set af {{userName}} <{{userEmail}}>",
+            "signed": "Transaktion blev underskrevet af {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Transaktionssignatur blev afvist af {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Elektronisk registrering og signaturerklæring blev accepteret af {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> opdaterede deres sprog til {{language}}"
+        },
+        "invitation": {
+            "sent": "Invitationsmail sendt til {{userName}} <{{userEmail}}>",
+            "view": "Invitation til at se dokumentet er sendt til {{userName}} <{{userEmail}}>",
+            "resent": "Invitationsmail genSendt til {{recipientName}} <{{recipientEmail}}> af {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Underskriver blev omfordelt af {{fromName}} <{{fromEmail}}> til {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> blev omfordelt af {{fromName}} <{{fromEmail}}> til {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Personlig transaktion blev startet af {{userName}} <{{userEmail}}>",
+            "verification": "Personlig signaturverifikation blev accepteret af {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Facilitatorproces blev accepteret af {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Underskrift",
+            "initial": "Initialer",
+            "edit": "Rediger",
+            "styleSelection": "Stilvalg"
+        },
+        "subtitle": "Opret dine digitale underskrifter",
+        "tabs": {
+            "select": "Vælg",
+            "draw": "Tegn",
+            "upload": "Upload"
+        },
+        "selectTab": {
+            "description": "Bekræft dit navn og vælg en underskriftsstil.",
+            "requiredFields": "Påkrævede felter.",
+            "fullName": {
+                "label": "Fulde navn",
+                "required": "*",
+                "placeholder": "Indtast fulde navn"
+            },
+            "initials": {
+                "label": "Initialer",
+                "required": "*",
+                "placeholder": "Indtast initialer"
+            }
+        },
+        "drawTab": {
+            "description": "Tegn din underskrift.",
+            "required": "*",
+            "requiredFields": "Er påkrævede felter.",
+            "signature": "Underskrift",
+            "initials": "Initialer",
+            "clearSignature": "Ryd underskrift",
+            "fullNameBox": {
+                "label": "Fuld underskrift",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Initialer",
+                "required": "*",
+                "placeholder": "Indtast initialer"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Både underskrift og initialer er påkrævet.",
+            "requirements": "Brug billeder på 300×100px til underskrifter og 100×100px til initialer. Max 300KB. Understøttet: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Upload underskrift",
+                "uploadHint": "JPG, PNG (300×100px, max 300KB)",
+                "browseButton": "Gennemse",
+                "uploadedLabel": "Underskrift ✓",
+                "changeButton": "Skift underskrift",
+                "altText": "Uploadet underskriftbillede"
+            },
+            "initials": {
+                "uploadLabel": "Upload initialer",
+                "uploadHint": "JPG, PNG (100×100px, max 300KB)",
+                "browseButton": "Gennemse",
+                "uploadedLabel": "Initialer ✓",
+                "changeButton": "Skift initialer",
+                "altText": "Uploadet initialbillede"
+            }
+        },
+        "footer": {
+            "agreementText": "Jeg forstår, at jeg underskriver dette dokument.",
+            "cancelButton": "Annuller",
+            "adoptButton": "Adopter underskrift og underskriv"
+        },
+        "errors": {
+            "requiredField": "Dette felt er påkrævet",
+            "fileTooLarge": "Filstørrelsen skal være under 300KB",
+            "invalidFileType": "Kun .png, .jpg og .jpeg filer understøttes",
+            "signatureRequired": "Tilføj venligst en underskrift",
+            "initialsRequired": "Tilføj venligst initialer"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Tilføj stempel",
+            "edit": "Rediger stempel"
+        },
+        "closeButton": "Luk modal",
+        "fileRequirements": "Maksimal størrelse = 400Kb | Understøttede filtyper = .png, .jpg, .jpeg",
+        "dragDropLabel": "Træk og slip et billede, eller klik for at uploade",
+        "previewAltText": "Stempel forhåndsvisning",
+        "changeImageButton": "Skift billede",
+        "clearButton": "Luk",
+        "saveButton": "Gem",
+        "updateButton": "Opdater",
+        "errors": {
+            "fileTooLarge": "Filstørrelsen overstiger grænsen på 400KB",
+            "invalidFileType": "Kun .png, .jpg og .jpeg filer understøttes",
+            "uploadFailed": "Kunne ikke uploade billedet. Prøv igen."
+        }
+    },
+    "attachmentModal": {
+        "title": "Vedhæftning",
+        "subtitle": {
+            "hasFile": "Administrer din vedhæftning",
+            "noFile": "Upload vedhæftning"
+        },
+        "uploading": {
+            "status": "Uploader fil...",
+            "shimmerText": "Uploader fil..."
+        },
+        "uploadArea": {
+            "dragging": "Slip din fil her",
+            "default": "Upload eller træk og slip fil",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (max 10MB)",
+            "browseButton": "Gennemse filer"
+        },
+        "uploadedFile": {
+            "status": "Uploadet succesfuldt",
+            "deleteButton": "Slet fil"
+        },
+        "buttons": {
+            "close": "Luk",
+            "uploading": "Uploader...",
+            "deleting": "Sletter...",
+            "saved": "Fil gemt!",
+            "done": "Udført",
+            "uploadFile": "Upload fil"
+        },
+        "errors": {
+            "fileTooLarge": "Filstørrelsen overstiger grænsen på 10MB",
+            "invalidFileType": "Kun PDF, DOCX, JPG, PNG og TXT filer understøttes",
+            "uploadFailed": "Kunne ikke uploade filen. Prøv igen.",
+            "deleteFailed": "Kunne ikke slette filen. Prøv igen.",
+            "noFileSelected": "Vælg venligst en fil før du fortsætter"
+        },
+        "accessibility": {
+            "fileUpload": "Filupload",
+            "deleteFile": "Slet fil"
+        }
+    },
+    "languages": {
+        "zh_CN": "Kinesisk (Simplificeret)",
+        "zh_TW": "Kinesisk (Traditionel)",
+        "da": "Dansk",
+        "nl_NL": "Hollandsk",
+        "en": "Engelsk",
+        "fi": "Finsk",
+        "fr": "Fransk",
+        "de": "Tysk",
+        "it": "Italiensk",
+        "ja": "Japansk",
+        "ko": "Koreansk",
+        "no": "Norsk",
+        "pt_BR": "Portugisisk (Brasilien)",
+        "ru": "Russisk",
+        "es": "Spansk",
+        "es_MX": "Spansk (Mexico)",
+        "sv": "Svensk",
+        "th": "Thai",
+        "he": "Hebraisk"
+    },
+    "session-expired": {
+        "title": "Session udløbet",
+        "description": "Dette dokumentunderskriftslink er udløbet på grund af inaktivitet eller sessionstimeout. Vend tilbage til din e-mail og klik på linket igen for at fortsætte med at underskrive."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Underskrivning fuldført!",
+        "subtitle": "Dokumentet er blevet underskrevet",
+        "thankYou": "Tak for din underskrift!",
+        "message": "Du vil modtage en bekræftelsesmail, når dokumentet er underskrevet af alle parter.",
+        "passDevice": "Du kan nu give enheden tilbage til <strong>{{senderName}}</strong>",
+        "continueButton": "Fortsæt"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
new file mode 100644
index 0000000..cfda53a
--- /dev/null
+++ b/public/locales/de/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Mit Klick auf <0>Ich stimme zu</0> bestätigen Sie, dass Sie die <1>Offenlegung von elektronischen Aufzeichnungen und Signaturen</1> gelesen haben und der Verwendung von elektronischen Aufzeichnungen und Signaturen bei der Prüfung und Ausführung dieses Dokuments zustimmen.",
+        "note": "Hinweis:",
+        "noteText": "Die Zustimmung hierzu bedeutet nicht, dass Sie das Dokument sofort unterzeichnen. Es erlaubt Ihnen lediglich, es elektronisch zu prüfen. Sie haben die Möglichkeit, das Dokument vollständig zu prüfen, bevor Sie es unterzeichnen."
+    },
+    "buttons": {
+        "agree": "Ich stimme zu",
+        "processing": "Wird verarbeitet...",
+        "close": "Schließen",
+        "downloadPdf": "PDF herunterladen",
+        "downloading": "Wird heruntergeladen..."
+    },
+    "header": {
+        "aiSummary": "KI-Zusammenfassung",
+        "completeSign": "Signatur abschließen",
+        "sign": "Unterschreiben",
+        "processing": "Wird verarbeitet...",
+        "options": "Herunterladen"
+    },
+    "menu": {
+        "downloadPdf": "PDF herunterladen",
+        "auditTrail": "Prüfpfad",
+        "reassignSigner": "Unterzeichner neu zuweisen",
+        "cancelTransaction": "Transaktion abbrechen",
+        "viewTerms": "Allgemeine Geschäftsbedingungen anzeigen",
+        "helpSupport": "Hilfe & Support",
+        "about": "Über SME"
+    },
+    "sidebar": {
+        "documents": "Dokumente",
+        "pages": "Seiten: {{count}}",
+        "noDocuments": "Keine Dokumente verfügbar."
+    },
+    "footer": {
+        "readyTitle": "Bereit zum Abschluss?",
+        "readyDesc": "Sie haben die erforderlichen Felder ausgefüllt. Überprüfen Sie Ihre Arbeit und wählen Sie dann Abschließen.",
+        "finish": "Abschließen",
+        "submitting": "Wird gesendet...",
+        "start": "Start",
+        "next": "Weiter",
+        "agreementText": "Mit meiner Unterschrift stimme ich den <0>Allgemeinen Geschäftsbedingungen</0> von Sign Made Easy zu."
+    },
+    "completion": {
+        "complete": {
+            "hit": "Alles erledigt!",
+            "title": "Danke für Ihre Unterschrift",
+            "message": "Ihr Dokument ist nun abgeschlossen und sicher gespeichert. Wir haben Ihnen eine Kopie per E-Mail gesendet."
+        },
+        "declined": {
+            "hit": "Aktion abgebrochen!",
+            "title": "Vielleicht nächstes Mal!",
+            "message": "Ihre Anfrage wurde abgelehnt."
+        },
+        "cancelled": {
+            "hit": "Aktion abgebrochen!",
+            "title": "Vielleicht nächstes Mal!",
+            "message": "Ihre Anfrage wurde abgebrochen."
+        },
+        "download": "Herunterladen",
+        "downloading": "Wird heruntergeladen...",
+        "downloadSuccess": "Datei erfolgreich heruntergeladen.",
+        "downloadOptions": {
+            "pdf": "PDF-Dokument",
+            "audit": "Prüfpfad",
+            "selectFormat": "Format auswählen"
+        },
+        "downloadError": "Fehler beim Herunterladen der Datei. Bitte versuchen Sie es erneut.",
+        "appsTitle": "Steigern Sie die Effizienz mit unseren Apps",
+        "formsTitle": "Erstellen Sie mühelos Formulare",
+        "docsTitle": "Erstellen Sie Dokumente (Rechnungen, Berichte, Angebote)",
+        "tryNow": "Jetzt ausprobieren",
+        "footerText": "Urheberrecht 2026 Sign Made Easy. Alle Rechte vorbehalten.<0>Datenschutzbestimmungen</0> | <1>Richtlinie für angemessene Nutzung</1>"
+    },
+    "reassign": {
+        "title": "Unterzeichner neu zuweisen",
+        "successSubtitle": "Dokument wurde erfolgreich neu zugewiesen",
+        "successTitle": "Danke!",
+        "successMessage": "Das Dokument wurde erfolgreich dem neuen Unterzeichner zugewiesen.",
+        "fields": {
+            "firstName": "Vorname",
+            "lastName": "Nachname",
+            "email": "E-Mail",
+            "language": "Sprache",
+            "message": "Optionale Nachricht"
+        },
+        "placeholders": {
+            "firstName": "Geben Sie Ihren Vornamen ein",
+            "lastName": "Geben Sie Ihren Nachnamen ein",
+            "email": "your.email@example.com",
+            "message": "Schreiben Sie Ihre Nachricht hier..."
+        },
+        "buttons": {
+            "submit": "Absenden",
+            "submitting": "Wird gesendet...",
+            "cancel": "Abbrechen"
+        },
+        "errors": {
+            "firstNameRequired": "Vorname ist erforderlich",
+            "firstNameMin": "Vorname muss mindestens 2 Zeichen lang sein",
+            "lastNameRequired": "Nachname ist erforderlich",
+            "lastNameMin": "Nachname muss mindestens 2 Zeichen lang sein",
+            "emailRequired": "E-Mail ist erforderlich",
+            "emailInvalid": "Ungültige E-Mail-Adresse"
+        }
+    },
+    "cancelModal": {
+        "title": "Transaktion abbrechen",
+        "description": "Sind Sie sicher, dass Sie diese Transaktion abbrechen möchten? Geben Sie unten Ihren Grund für den Abbruch an.",
+        "placeholder": "Bitte geben Sie Ihren Grund für den Abbruch an...",
+        "buttons": {
+            "no": "Nein, nicht abbrechen",
+            "yes": "Ja, abbrechen"
+        },
+        "errors": {
+            "reasonRequired": "Abbruchgrund ist erforderlich"
+        },
+        "inPersonSuccess": {
+            "title": "Transaktion abbrechen",
+            "message": "Die Transaktion wurde erfolgreich abgebrochen. Bestätigungs-E-Mails wurden gesendet.",
+            "passBackDevice": "Sie können das Gerät jetzt an {{senderName}} zurückgeben.",
+            "continueButton": "Fortfahren"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Transaktionsprüfung",
+        "meta.transaction_id": "Transaktions-ID",
+        "meta.transaction_status": "Transaktionsstatus",
+        "meta.files": "Dateien",
+        "audit.title": "Vollständiger Prüfpfad",
+        "audit.description": "Bitte aktualisieren Sie Betreff und Nachricht unten für eine benutzerdefinierte Nachricht.",
+        "table.header.actions": "Aktionen",
+        "table.header.language": "Sprache",
+        "table.header.ip_address": "IP-Adresse",
+        "table.header.date": "Datum",
+        "status.completed": "Abgeschlossen",
+        "status.pending": "Ausstehend",
+        "status.failed": "Fehlgeschlagen",
+        "action.created": "Erstellt",
+        "action.updated": "Aktualisiert",
+        "action.deleted": "Gelöscht",
+        "action.viewed": "Angesehen",
+        "action.signed": "Unterschrieben",
+        "action.uploaded": "Hochgeladen",
+        "action.downloaded": "Heruntergeladen",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Transaktionsprüfung",
+        "meta": {
+            "transactionId": "Transaktions-ID",
+            "transactionStatus": "Transaktionsstatus",
+            "files": "Dateien"
+        },
+        "audit": {
+            "title": "Vollständiger Prüfpfad",
+            "description": "Bitte aktualisieren Sie Betreff und Nachricht unten für eine benutzerdefinierte Nachricht."
+        },
+        "table": {
+            "actions": "Aktionen",
+            "language": "Sprache",
+            "ipAddress": "IP-Adresse",
+            "date": "Datum"
+        },
+        "status": {
+            "completed": "Abgeschlossen",
+            "pending": "Ausstehend",
+            "failed": "Fehlgeschlagen"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transaktion wurde erstellt von {{userName}} <{{userEmail}}>",
+            "sent": "Transaktion wurde gesendet von {{userName}} <{{userEmail}}>",
+            "cancelled": "Transaktion wurde abgebrochen von {{userName}} <{{userEmail}}>",
+            "edited": "Transaktion wurde bearbeitet von {{userName}} <{{userEmail}}>",
+            "viewed": "Transaktion wurde angesehen von {{userName}} <{{userEmail}}>",
+            "signed": "Transaktion wurde unterschrieben von {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Transaktionssignatur wurde abgelehnt von {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Elektronische Aufzeichnungs- und Signaturoffenlegung wurde akzeptiert von {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> hat ihre Sprache aktualisiert auf {{language}}"
+        },
+        "invitation": {
+            "sent": "Einladungs-E-Mail gesendet an {{userName}} <{{userEmail}}>",
+            "view": "Einladung zum Anzeigen des Dokuments wurde an {{userName}} <{{userEmail}}> gesendet",
+            "resent": "Einladungs-E-Mail erneut gesendet an {{recipientName}} <{{recipientEmail}}> von {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Unterzeichner wurde neu zugewiesen von {{fromName}} <{{fromEmail}}> an {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> wurde neu zugewiesen von {{fromName}} <{{fromEmail}}> an {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Persönliche Transaktion wurde gestartet von {{userName}} <{{userEmail}}>",
+            "verification": "Persönliche Signaturverifizierung wurde akzeptiert von {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Facilitator-Prozess wurde akzeptiert von {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Unterschrift",
+            "initial": "Initiale",
+            "edit": "Bearbeiten",
+            "styleSelection": "Stilauswahl"
+        },
+        "subtitle": "Erstellen Sie Ihre digitalen Unterschriften",
+        "tabs": {
+            "select": "Auswählen",
+            "draw": "Zeichnen",
+            "upload": "Hochladen"
+        },
+        "selectTab": {
+            "description": "Bestätigen Sie Ihren Namen und wählen Sie einen Unterschriftsstil.",
+            "requiredFields": "Pflichtfelder.",
+            "fullName": {
+                "label": "Vollständiger Name",
+                "required": "*",
+                "placeholder": "Vollständigen Namen eingeben"
+            },
+            "initials": {
+                "label": "Initialen",
+                "required": "*",
+                "placeholder": "Initialen eingeben"
+            }
+        },
+        "drawTab": {
+            "description": "Zeichnen Sie Ihre Unterschrift.",
+            "required": "*",
+            "requiredFields": "Sind Pflichtfelder.",
+            "signature": "Unterschrift",
+            "initials": "Initialen",
+            "clearSignature": "Unterschrift löschen",
+            "fullNameBox": {
+                "label": "Vollständige Unterschrift",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Initialen",
+                "required": "*",
+                "placeholder": "Initialen eingeben"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Sowohl Unterschrift als auch Initialen sind erforderlich.",
+            "requirements": "Verwenden Sie Bilder von 300×100px für Unterschriften und 100×100px für Initialen. Max. 300KB. Unterstützt: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Unterschrift hochladen",
+                "uploadHint": "JPG, PNG (300×100px, max. 300KB)",
+                "browseButton": "Durchsuchen",
+                "uploadedLabel": "Unterschrift ✓",
+                "changeButton": "Unterschrift ändern",
+                "altText": "Hochgeladenes Unterschriftsbild"
+            },
+            "initials": {
+                "uploadLabel": "Initialen hochladen",
+                "uploadHint": "JPG, PNG (100×100px, max. 300KB)",
+                "browseButton": "Durchsuchen",
+                "uploadedLabel": "Initialen ✓",
+                "changeButton": "Initialen ändern",
+                "altText": "Hochgeladenes Initialenbild"
+            }
+        },
+        "footer": {
+            "agreementText": "Ich verstehe, dass ich dieses Dokument unterschreibe.",
+            "cancelButton": "Abbrechen",
+            "adoptButton": "Unterschrift übernehmen & unterschreiben"
+        },
+        "errors": {
+            "requiredField": "Dieses Feld ist erforderlich",
+            "fileTooLarge": "Die Dateigröße muss unter 300KB liegen",
+            "invalidFileType": "Nur .png, .jpg und .jpeg Dateien werden unterstützt",
+            "signatureRequired": "Bitte fügen Sie eine Unterschrift hinzu",
+            "initialsRequired": "Bitte fügen Sie Initialen hinzu"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Stempel hinzufügen",
+            "edit": "Stempel bearbeiten"
+        },
+        "closeButton": "Modal schließen",
+        "fileRequirements": "Maximale Größe = 400Kb | Unterstützte Dateitypen = .png, .jpg, .jpeg",
+        "dragDropLabel": "Bild per Drag & Drop ablegen oder zum Hochladen klicken",
+        "previewAltText": "Stempelvorschau",
+        "changeImageButton": "Bild ändern",
+        "clearButton": "Schließen",
+        "saveButton": "Speichern",
+        "updateButton": "Aktualisieren",
+        "errors": {
+            "fileTooLarge": "Die Dateigröße überschreitet das 400KB-Limit",
+            "invalidFileType": "Nur .png, .jpg und .jpeg Dateien werden unterstützt",
+            "uploadFailed": "Bild konnte nicht hochgeladen werden. Bitte versuchen Sie es erneut."
+        }
+    },
+    "attachmentModal": {
+        "title": "Anhang",
+        "subtitle": {
+            "hasFile": "Ihren Anhang verwalten",
+            "noFile": "Anhang hochladen"
+        },
+        "uploading": {
+            "status": "Datei wird hochgeladen...",
+            "shimmerText": "Datei wird hochgeladen..."
+        },
+        "uploadArea": {
+            "dragging": "Datei hier ablegen",
+            "default": "Datei hochladen oder per Drag & Drop ablegen",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (max. 10MB)",
+            "browseButton": "Dateien durchsuchen"
+        },
+        "uploadedFile": {
+            "status": "Erfolgreich hochgeladen",
+            "deleteButton": "Datei löschen"
+        },
+        "buttons": {
+            "close": "Schließen",
+            "uploading": "Wird hochgeladen...",
+            "deleting": "Wird gelöscht...",
+            "saved": "Datei gespeichert!",
+            "done": "Fertig",
+            "uploadFile": "Datei hochladen"
+        },
+        "errors": {
+            "fileTooLarge": "Die Dateigröße überschreitet das 10MB-Limit",
+            "invalidFileType": "Nur PDF, DOCX, JPG, PNG und TXT Dateien werden unterstützt",
+            "uploadFailed": "Datei konnte nicht hochgeladen werden. Bitte versuchen Sie es erneut.",
+            "deleteFailed": "Datei konnte nicht gelöscht werden. Bitte versuchen Sie es erneut.",
+            "noFileSelected": "Bitte wählen Sie eine Datei aus, bevor Sie fortfahren"
+        },
+        "accessibility": {
+            "fileUpload": "Datei-Upload",
+            "deleteFile": "Datei löschen"
+        }
+    },
+    "languages": {
+        "zh_CN": "Chinesisch (Vereinfacht)",
+        "zh_TW": "Chinesisch (Traditionell)",
+        "da": "Dänisch",
+        "nl_NL": "Niederländisch",
+        "en": "Englisch",
+        "fi": "Finnisch",
+        "fr": "Französisch",
+        "de": "Deutsch",
+        "it": "Italienisch",
+        "ja": "Japanisch",
+        "ko": "Koreanisch",
+        "no": "Norwegisch",
+        "pt_BR": "Portugiesisch (Brasilien)",
+        "ru": "Russisch",
+        "es": "Spanisch",
+        "es_MX": "Spanisch (Mexiko)",
+        "sv": "Schwedisch",
+        "th": "Thailändisch",
+        "he": "Hebräisch"
+    },
+    "session-expired": {
+        "title": "Sitzung abgelaufen",
+        "description": "Dieser Link zum Unterzeichnen des Dokuments ist aufgrund von Inaktivität oder Sitzungszeitüberschreitung abgelaufen. Bitte kehren Sie zu Ihrer E-Mail zurück und klicken Sie erneut auf den Link, um mit der Unterzeichnung fortzufahren."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Signatur abgeschlossen!",
+        "subtitle": "Dokument wurde erfolgreich unterschrieben",
+        "thankYou": "Vielen Dank für Ihre Unterschrift!",
+        "message": "Sie erhalten eine Bestätigungs-E-Mail, sobald das Dokument von allen Parteien unterschrieben wurde.",
+        "passDevice": "Sie können das Gerät jetzt an <strong>{{senderName}}</strong> zurückgeben",
+        "continueButton": "Weiter"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
new file mode 100644
index 0000000..348cd6b
--- /dev/null
+++ b/public/locales/en/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "By clicking <0>I Agree</0>, you confirm that you have reviewed the <1>Electronic Record and Signature Disclosure</1>, and consent to the use of electronic records and signatures in reviewing and executing this document.",
+        "note": "Note:",
+        "noteText": "Agreeing to this does not mean you are signing the document immediately. It only allows you to review it electronically. You will have a chance to review the document in full before signing."
+    },
+    "buttons": {
+        "agree": "I Agree",
+        "processing": "Processing...",
+        "close": "Close",
+        "downloadPdf": "Download PDF",
+        "downloading": "Downloading..."
+    },
+    "header": {
+        "aiSummary": "AI Summary",
+        "completeSign": "Complete Sign",
+        "sign": "Sign",
+        "processing": "Processing...",
+        "options": "Download"
+    },
+    "menu": {
+        "downloadPdf": "Download PDF",
+        "auditTrail": "Audit Trail",
+        "reassignSigner": "Reassign Signer",
+        "cancelTransaction": "Cancel Transaction",
+        "viewTerms": "View Terms And Conditions",
+        "helpSupport": "Help & Support",
+        "about": "About SME"
+    },
+    "sidebar": {
+        "documents": "Documents",
+        "pages": "Pages: {{count}}",
+        "noDocuments": "No documents available."
+    },
+    "footer": {
+        "readyTitle": "All Set to Wrap This Up?",
+        "readyDesc": "You've completed the required fields. Review your work, then select Finish.",
+        "finish": "Finish",
+        "submitting": "Submitting...",
+        "start": "Start",
+        "next": "Next",
+        "agreementText": "By signing, I agree to the Sign Made Easy <0>Terms & Conditions.</0>"
+    },
+    "completion": {
+        "complete": {
+            "hit": "All Done!",
+            "title": "Thanks for signing",
+            "message": "Your document is now complete and securely stored. We've emailed you a copy."
+        },
+        "declined": {
+            "hit": "Action Canceled!",
+            "title": "Maybe Next Time!",
+            "message": "Your request has been declined successfully."
+        },
+        "cancelled": {
+            "hit": "Action Canceled!",
+            "title": "Maybe Next Time!",
+            "message": "Your request has been declined successfully."
+        },
+        "download": "Download",
+        "downloading": "Downloading...",
+        "downloadSuccess": "File downloaded successfully.",
+        "downloadOptions": {
+            "pdf": "PDF Document",
+            "audit": "Audit Trails",
+            "selectFormat": "Select format"
+        },
+        "downloadError": "File download failed. Please try again.",
+        "appsTitle": "Boost Efficiency with Our Apps",
+        "formsTitle": "Generate Forms with Ease",
+        "docsTitle": "Generate Documents (Invoices, Reports, Quotes)",
+        "tryNow": "Try Now",
+        "footerText": "Copyright 2026 Sign Made Easy. All Rights Reserved. <0>Privacy Policy</0> | <1>Reasonable Use Policy</1>"
+    },
+    "reassign": {
+        "title": "Reassign Signer",
+        "successSubtitle": "Document has been successfully reassigned",
+        "successTitle": "Thank You!",
+        "successMessage": "The document has been successfully reassigned to the new signer.",
+        "fields": {
+            "firstName": "First Name",
+            "lastName": "Last Name",
+            "email": "Email",
+            "language": "Language",
+            "message": "Optional Message"
+        },
+        "placeholders": {
+            "firstName": "Enter your first name",
+            "lastName": "Enter your last name",
+            "email": "your.email@example.com",
+            "message": "Write your message here..."
+        },
+        "buttons": {
+            "submit": "Submit",
+            "submitting": "Submitting...",
+            "cancel": "Cancel"
+        },
+        "errors": {
+            "firstNameRequired": "First name is required",
+            "firstNameMin": "First name must be at least 2 characters",
+            "lastNameRequired": "Last name is required",
+            "lastNameMin": "Last name must be at least 2 characters",
+            "emailRequired": "Email is required",
+            "emailInvalid": "Invalid email address"
+        }
+    },
+    "cancelModal": {
+        "title": "Cancel Transaction",
+        "description": "Are you sure you want to cancel this transaction? Provide your reason for cancelling below.",
+        "placeholder": "Please provide your reason for cancellation...",
+        "buttons": {
+            "no": "No, do not cancel",
+            "yes": "Yes, cancel it"
+        },
+        "errors": {
+            "reasonRequired": "Cancellation reason is required"
+        },
+        "inPersonSuccess": {
+            "title": "Cancel Transaction",
+            "message": "The transaction was successfully cancelled. Confirmation emails were sent.",
+            "passBackDevice": "You can now pass the device back to {{senderName}}.",
+            "continueButton": "Continue"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Transaction Audit",
+        "meta.transaction_id": "Transaction ID",
+        "meta.transaction_status": "Transaction Status",
+        "meta.files": "Files",
+        "audit.title": "Full Audit Trail",
+        "audit.description": "Please update the Subject and Message below for a custom message.",
+        "table.header.actions": "Actions",
+        "table.header.language": "Language",
+        "table.header.ip_address": "IP Address",
+        "table.header.date": "Date",
+        "status.completed": "Completed",
+        "status.pending": "Pending",
+        "status.failed": "Failed",
+        "action.created": "Created",
+        "action.updated": "Updated",
+        "action.deleted": "Deleted",
+        "action.viewed": "Viewed",
+        "action.signed": "Signed",
+        "action.uploaded": "Uploaded",
+        "action.downloaded": "Downloaded",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Transaction Audit",
+        "meta": {
+            "transactionId": "Transaction ID",
+            "transactionStatus": "Transaction Status",
+            "files": "Files"
+        },
+        "audit": {
+            "title": "Full Audit Trail",
+            "description": "Please update the Subject and Message below for a custom message."
+        },
+        "table": {
+            "actions": "Actions",
+            "language": "Language",
+            "ipAddress": "IP Address",
+            "date": "Date"
+        },
+        "status": {
+            "completed": "Completed",
+            "pending": "Pending",
+            "failed": "Failed"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transaction was created by {{userName}} <{{userEmail}}>",
+            "sent": "Transaction was sent by {{userName}} <{{userEmail}}>",
+            "cancelled": "Transaction was cancelled by {{userName}} <{{userEmail}}>",
+            "edited": "Transaction was edited by {{userName}} <{{userEmail}}>",
+            "viewed": "Transaction was viewed by {{userName}} <{{userEmail}}>",
+            "signed": "Transaction was Signed by {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Transaction signature was declined by {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Electronic Record and Signature Disclosure was accepted by {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> updated their language to {{language}}"
+        },
+        "invitation": {
+            "sent": "Invitation email sent to {{userName}} <{{userEmail}}>",
+            "view": "Invitation to view document is sent to {{userName}} <{{userEmail}}>",
+            "resent": "Invitation email re-sent to {{recipientName}} <{{recipientEmail}}> by {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Signer was reassigned by {{fromName}} <{{fromEmail}}> to {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> was reassigned by {{fromName}} <{{fromEmail}}> to {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "In Person transaction was started by {{userName}} <{{userEmail}}>",
+            "verification": "In Person Signing Verification was accepted by {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Facilitator Process was accepted by {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Signature",
+            "initial": "Initial",
+            "edit": "Edit",
+            "styleSelection": "Style Selection"
+        },
+        "subtitle": "Create your digital signatures",
+        "tabs": {
+            "select": "Select",
+            "draw": "Draw",
+            "upload": "Upload"
+        },
+        "selectTab": {
+            "description": "Confirm your name and choose a signature style.",
+            "requiredFields": "Required fields.",
+            "fullName": {
+                "label": "Full Name",
+                "required": "*",
+                "placeholder": "Enter full name"
+            },
+            "initials": {
+                "label": "Initials",
+                "required": "*",
+                "placeholder": "Enter initials"
+            }
+        },
+        "drawTab": {
+            "description": "Draw your signature.",
+            "required": "*",
+            "requiredFields": "Are required fields.",
+            "signature": "Signature",
+            "initials": "Initials",
+            "clearSignature": "Clear Signature",
+            "fullNameBox": {
+                "label": "Full Signature",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Initials",
+                "required": "*",
+                "placeholder": "Enter initials"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Both signature and initials are required.",
+            "requirements": "Use images of 300×100px for signatures and 100×100px for initials. Max 300KB. Supported: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Upload Signature",
+                "uploadHint": "JPG, PNG (300×100px, max 300KB)",
+                "browseButton": "Browse",
+                "uploadedLabel": "Signature ✓",
+                "changeButton": "Change Signature",
+                "altText": "Uploaded signature image"
+            },
+            "initials": {
+                "uploadLabel": "Upload Initials",
+                "uploadHint": "JPG, PNG (100×100px, max 300KB)",
+                "browseButton": "Browse",
+                "uploadedLabel": "Initials ✓",
+                "changeButton": "Change Initials",
+                "altText": "Uploaded initials image"
+            }
+        },
+        "footer": {
+            "agreementText": "I understand that, I am signing this document.",
+            "cancelButton": "Cancel",
+            "adoptButton": "Adopt Signature & Sign"
+        },
+        "errors": {
+            "requiredField": "This field is required",
+            "fileTooLarge": "File size must be under 300KB",
+            "invalidFileType": "Only .png, .jpg, and .jpeg files are supported",
+            "signatureRequired": "Please add a signature",
+            "initialsRequired": "Please add initials"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Add Stamp",
+            "edit": "Edit Stamp"
+        },
+        "closeButton": "Close modal",
+        "fileRequirements": "Maximum size = 400Kb | Supported file types = .png, .jpg, .jpeg",
+        "dragDropLabel": "Drag & drop an image, or click to upload",
+        "previewAltText": "Stamp Preview",
+        "changeImageButton": "Change image",
+        "clearButton": "Close",
+        "saveButton": "Save",
+        "updateButton": "Update",
+        "errors": {
+            "fileTooLarge": "File size exceeds 400KB limit",
+            "invalidFileType": "Only .png, .jpg, and .jpeg files are supported",
+            "uploadFailed": "Failed to upload image. Please try again."
+        }
+    },
+    "attachmentModal": {
+        "title": "Attachment",
+        "subtitle": {
+            "hasFile": "Manage your attachment",
+            "noFile": "Upload attachment"
+        },
+        "uploading": {
+            "status": "Uploading file...",
+            "shimmerText": "Uploading file..."
+        },
+        "uploadArea": {
+            "dragging": "Drop your file here",
+            "default": "Upload or drag & drop file",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (max 10MB)",
+            "browseButton": "Browse Files"
+        },
+        "uploadedFile": {
+            "status": "Uploaded successfully",
+            "deleteButton": "Delete file"
+        },
+        "buttons": {
+            "close": "Close",
+            "uploading": "Uploading...",
+            "deleting": "Deleting...",
+            "saved": "File Saved!",
+            "done": "Done",
+            "uploadFile": "Upload File"
+        },
+        "errors": {
+            "fileTooLarge": "File size exceeds 10MB limit",
+            "invalidFileType": "Only PDF, DOCX, JPG, PNG, and TXT files are supported",
+            "uploadFailed": "Failed to upload file. Please try again.",
+            "deleteFailed": "Failed to delete file. Please try again.",
+            "noFileSelected": "Please select a file before proceeding"
+        },
+        "accessibility": {
+            "fileUpload": "File upload",
+            "deleteFile": "Delete file"
+        }
+    },
+    "languages": {
+        "zh_CN": "Chinese (Simplified)",
+        "zh_TW": "Chinese (Traditional)",
+        "da": "Danish",
+        "nl_NL": "Dutch",
+        "en": "English",
+        "fi": "Finnish",
+        "fr": "French",
+        "de": "German",
+        "it": "Italian",
+        "ja": "Japanese",
+        "ko": "Korean",
+        "no": "Norwegian",
+        "pt_BR": "Portuguese (Brazil)",
+        "ru": "Russian",
+        "es": "Spanish",
+        "es_MX": "Spanish (Mexico)",
+        "sv": "Swedish",
+        "th": "Thai",
+        "he": "Hebrew"
+    },
+    "session-expired": {
+        "title": "Session Expired",
+        "description": "This document signing link has expired due to inactivity or session timeout. Please return to your email and click the link again to continue signing."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Signing Complete!",
+        "subtitle": "Document has been successfully signed",
+        "thankYou": "Thank You for Signing!",
+        "message": "You will receive a confirmation email once the document has been signed by all parties.",
+        "passDevice": "You can now pass the device back to <strong>{{senderName}}</strong>",
+        "continueButton": "Continue"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
new file mode 100644
index 0000000..59a0996
--- /dev/null
+++ b/public/locales/es/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Al hacer clic en <0>Acepto</0>, confirma que ha revisado la <1>Divulgación de registros electrónicos y firmas</1> y consiente el uso de registros y firmas electrónicas en la revisión y ejecución de este documento.",
+        "note": "Nota:",
+        "noteText": "Aceptar esto no significa que esté firmando el documento inmediatamente. Solo le permite revisarlo electrónicamente. Tendrá la oportunidad de revisar el documento completo antes de firmar."
+    },
+    "buttons": {
+        "agree": "Acepto",
+        "processing": "Procesando...",
+        "close": "Cerrar",
+        "downloadPdf": "Descargar PDF",
+        "downloading": "Descargando..."
+    },
+    "header": {
+        "aiSummary": "Resumen de IA",
+        "completeSign": "Completar firma",
+        "sign": "Firmar",
+        "processing": "Procesando...",
+        "options": "Descargar"
+    },
+    "menu": {
+        "downloadPdf": "Descargar PDF",
+        "auditTrail": "Pista de auditoría",
+        "reassignSigner": "Reasignar firmante",
+        "cancelTransaction": "Cancelar transacción",
+        "viewTerms": "Ver términos y condiciones",
+        "helpSupport": "Ayuda y soporte",
+        "about": "Acerca de SME"
+    },
+    "sidebar": {
+        "documents": "Documentos",
+        "pages": "Páginas: {{count}}",
+        "noDocuments": "No hay documentos disponibles."
+    },
+    "footer": {
+        "readyTitle": "¿Listo para finalizar?",
+        "readyDesc": "Ha completado los campos obligatorios. Revise su trabajo y luego seleccione Finalizar.",
+        "finish": "Finalizar",
+        "submitting": "Enviando...",
+        "start": "Comenzar",
+        "next": "Siguiente",
+        "agreementText": "Al firmar, acepto los <0>Términos y condiciones</0> de Sign Made Easy."
+    },
+    "completion": {
+        "complete": {
+            "hit": "¡Todo listo!",
+            "title": "Gracias por firmar",
+            "message": "Su documento ahora está completo y almacenado de forma segura. Le hemos enviado una copia por correo electrónico."
+        },
+        "declined": {
+            "hit": "¡Acción cancelada!",
+            "title": "¡Tal vez la próxima vez!",
+            "message": "Su solicitud ha sido rechazada."
+        },
+        "cancelled": {
+            "hit": "¡Acción cancelada!",
+            "title": "¡Tal vez la próxima vez!",
+            "message": "Su solicitud ha sido cancelada."
+        },
+        "download": "Descargar",
+        "downloading": "Descargando...",
+        "downloadSuccess": "Archivo descargado correctamente.",
+        "downloadOptions": {
+            "pdf": "Documento PDF",
+            "audit": "Pistas de auditoría",
+            "selectFormat": "Seleccionar formato"
+        },
+        "downloadError": "Error al descargar el archivo. Por favor, inténtelo de nuevo.",
+        "appsTitle": "Aumente la eficiencia con nuestras aplicaciones",
+        "formsTitle": "Genere formularios con facilidad",
+        "docsTitle": "Genere documentos (facturas, informes, cotizaciones)",
+        "tryNow": "Pruebe ahora",
+        "footerText": "Derechos de autor 2026 Sign Made Easy. Todos los derechos reservados.<0>Política de privacidad</0> | <1>Política de uso razonable</1>"
+    },
+    "reassign": {
+        "title": "Reasignar firmante",
+        "successSubtitle": "El documento ha sido reasignado correctamente",
+        "successTitle": "¡Gracias!",
+        "successMessage": "El documento ha sido reasignado correctamente al nuevo firmante.",
+        "fields": {
+            "firstName": "Nombre",
+            "lastName": "Apellido",
+            "email": "Correo electrónico",
+            "language": "Idioma",
+            "message": "Mensaje opcional"
+        },
+        "placeholders": {
+            "firstName": "Ingrese su nombre",
+            "lastName": "Ingrese su apellido",
+            "email": "your.email@example.com",
+            "message": "Escriba su mensaje aquí..."
+        },
+        "buttons": {
+            "submit": "Enviar",
+            "submitting": "Enviando...",
+            "cancel": "Cancelar"
+        },
+        "errors": {
+            "firstNameRequired": "El nombre es obligatorio",
+            "firstNameMin": "El nombre debe tener al menos 2 caracteres",
+            "lastNameRequired": "El apellido es obligatorio",
+            "lastNameMin": "El apellido debe tener al menos 2 caracteres",
+            "emailRequired": "El correo electrónico es obligatorio",
+            "emailInvalid": "Dirección de correo electrónico inválida"
+        }
+    },
+    "cancelModal": {
+        "title": "Cancelar transacción",
+        "description": "¿Está seguro de que desea cancelar esta transacción? Proporcione el motivo de la cancelación a continuación.",
+        "placeholder": "Por favor, proporcione el motivo de la cancelación...",
+        "buttons": {
+            "no": "No, no cancelar",
+            "yes": "Sí, cancelarla"
+        },
+        "errors": {
+            "reasonRequired": "El motivo de cancelación es obligatorio"
+        },
+        "inPersonSuccess": {
+            "title": "Cancelar Transacción",
+            "message": "La transacción se canceló correctamente. Se enviaron correos de confirmación.",
+            "passBackDevice": "Ahora puede devolver el dispositivo a {{senderName}}.",
+            "continueButton": "Continuar"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Auditoría de transacciones",
+        "meta.transaction_id": "ID de transacción",
+        "meta.transaction_status": "Estado de la transacción",
+        "meta.files": "Archivos",
+        "audit.title": "Pista de auditoría completa",
+        "audit.description": "Actualice el Asunto y el Mensaje a continuación para un mensaje personalizado.",
+        "table.header.actions": "Acciones",
+        "table.header.language": "Idioma",
+        "table.header.ip_address": "Dirección IP",
+        "table.header.date": "Fecha",
+        "status.completed": "Completado",
+        "status.pending": "Pendiente",
+        "status.failed": "Fallido",
+        "action.created": "Creado",
+        "action.updated": "Actualizado",
+        "action.deleted": "Eliminado",
+        "action.viewed": "Visto",
+        "action.signed": "Firmado",
+        "action.uploaded": "Cargado",
+        "action.downloaded": "Descargado",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Auditoría de transacciones",
+        "meta": {
+            "transactionId": "ID de transacción",
+            "transactionStatus": "Estado de la transacción",
+            "files": "Archivos"
+        },
+        "audit": {
+            "title": "Pista de auditoría completa",
+            "description": "Actualice el Asunto y el Mensaje a continuación para un mensaje personalizado."
+        },
+        "table": {
+            "actions": "Acciones",
+            "language": "Idioma",
+            "ipAddress": "Dirección IP",
+            "date": "Fecha"
+        },
+        "status": {
+            "completed": "Completado",
+            "pending": "Pendiente",
+            "failed": "Fallido"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transacción creada por {{userName}} <{{userEmail}}>",
+            "sent": "Transacción enviada por {{userName}} <{{userEmail}}>",
+            "cancelled": "Transacción cancelada por {{userName}} <{{userEmail}}>",
+            "edited": "Transacción editada por {{userName}} <{{userEmail}}>",
+            "viewed": "Transacción vista por {{userName}} <{{userEmail}}>",
+            "signed": "Transacción firmada por {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Firma de transacción rechazada por {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Divulgación de Registro Electrónico y Firma aceptada por {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> actualizó su idioma a {{language}}"
+        },
+        "invitation": {
+            "sent": "Invitación por correo enviada a {{userName}} <{{userEmail}}>",
+            "view": "La invitación para ver el documento se envió a {{userName}} <{{userEmail}}>",
+            "resent": "Invitación reenviada a {{recipientName}} <{{recipientEmail}}> por {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Firmante reasignado por {{fromName}} <{{fromEmail}}> a {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> fue reasignado por {{fromName}} <{{fromEmail}}> a {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Transacción en persona iniciada por {{userName}} <{{userEmail}}>",
+            "verification": "Verificación de firma en persona aceptada por {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Proceso de Facilitador aceptado por {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Firma",
+            "initial": "Inicial",
+            "edit": "Editar",
+            "styleSelection": "Selección de Estilo"
+        },
+        "subtitle": "Crea tus firmas digitales",
+        "tabs": {
+            "select": "Seleccionar",
+            "draw": "Dibujar",
+            "upload": "Subir"
+        },
+        "selectTab": {
+            "description": "Confirma tu nombre y elige un estilo de firma.",
+            "requiredFields": "Campos requeridos.",
+            "fullName": {
+                "label": "Nombre Completo",
+                "required": "*",
+                "placeholder": "Ingresa el nombre completo"
+            },
+            "initials": {
+                "label": "Iniciales",
+                "required": "*",
+                "placeholder": "Ingresa las iniciales"
+            }
+        },
+        "drawTab": {
+            "description": "Dibuje su firma.",
+            "required": "*",
+            "requiredFields": "Son campos obligatorios.",
+            "signature": "Firma",
+            "initials": "Iniciales",
+            "clearSignature": "Borrar firma",
+            "fullNameBox": {
+                "label": "Firma completa",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Iniciales",
+                "required": "*",
+                "placeholder": "Ingrese las iniciales"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Tanto la firma como las iniciales son requeridas.",
+            "requirements": "Usa imágenes de 300×100px para firmas y 100×100px para iniciales. Máx. 300KB. Compatible: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Subir Firma",
+                "uploadHint": "JPG, PNG (300×100px, máx. 300KB)",
+                "browseButton": "Examinar",
+                "uploadedLabel": "Firma ✓",
+                "changeButton": "Cambiar Firma",
+                "altText": "Imagen de firma subida"
+            },
+            "initials": {
+                "uploadLabel": "Subir Iniciales",
+                "uploadHint": "JPG, PNG (100×100px, máx. 300KB)",
+                "browseButton": "Examinar",
+                "uploadedLabel": "Iniciales ✓",
+                "changeButton": "Cambiar Iniciales",
+                "altText": "Imagen de iniciales subida"
+            }
+        },
+        "footer": {
+            "agreementText": "Entiendo que estoy firmando este documento.",
+            "cancelButton": "Cancelar",
+            "adoptButton": "Adoptar Firma y Firmar"
+        },
+        "errors": {
+            "requiredField": "Este campo es requerido",
+            "fileTooLarge": "El tamaño del archivo debe ser menor a 300KB",
+            "invalidFileType": "Solo se admiten archivos .png, .jpg y .jpeg",
+            "signatureRequired": "Por favor agrega una firma",
+            "initialsRequired": "Por favor agrega iniciales"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Agregar Sello",
+            "edit": "Editar Sello"
+        },
+        "closeButton": "Cerrar modal",
+        "fileRequirements": "Tamaño máximo = 400Kb | Tipos de archivo admitidos = .png, .jpg, .jpeg",
+        "dragDropLabel": "Arrastra y suelta una imagen, o haz clic para subir",
+        "previewAltText": "Vista Previa del Sello",
+        "changeImageButton": "Cambiar imagen",
+        "clearButton": "Cerrar",
+        "saveButton": "Guardar",
+        "updateButton": "Actualizar",
+        "errors": {
+            "fileTooLarge": "El tamaño del archivo excede el límite de 400KB",
+            "invalidFileType": "Solo se admiten archivos .png, .jpg y .jpeg",
+            "uploadFailed": "Error al subir la imagen. Por favor, inténtalo de nuevo."
+        }
+    },
+    "attachmentModal": {
+        "title": "Adjunto",
+        "subtitle": {
+            "hasFile": "Gestionar tu adjunto",
+            "noFile": "Subir adjunto"
+        },
+        "uploading": {
+            "status": "Subiendo archivo...",
+            "shimmerText": "Subiendo archivo..."
+        },
+        "uploadArea": {
+            "dragging": "Suelta tu archivo aquí",
+            "default": "Subir o arrastrar y soltar archivo",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (máx. 10MB)",
+            "browseButton": "Examinar Archivos"
+        },
+        "uploadedFile": {
+            "status": "Subido exitosamente",
+            "deleteButton": "Eliminar archivo"
+        },
+        "buttons": {
+            "close": "Cerrar",
+            "uploading": "Subiendo...",
+            "deleting": "Eliminando...",
+            "saved": "¡Archivo Guardado!",
+            "done": "Hecho",
+            "uploadFile": "Subir Archivo"
+        },
+        "errors": {
+            "fileTooLarge": "El tamaño del archivo excede el límite de 10MB",
+            "invalidFileType": "Solo se admiten archivos PDF, DOCX, JPG, PNG y TXT",
+            "uploadFailed": "Error al subir el archivo. Por favor, inténtalo de nuevo.",
+            "deleteFailed": "Error al eliminar el archivo. Por favor, inténtalo de nuevo.",
+            "noFileSelected": "Por favor selecciona un archivo antes de continuar"
+        },
+        "accessibility": {
+            "fileUpload": "Subida de archivo",
+            "deleteFile": "Eliminar archivo"
+        }
+    },
+    "languages": {
+        "zh_CN": "Chino (Simplificado)",
+        "zh_TW": "Chino (Tradicional)",
+        "da": "Danés",
+        "nl_NL": "Neerlandés",
+        "en": "Inglés",
+        "fi": "Finlandés",
+        "fr": "Francés",
+        "de": "Alemán",
+        "it": "Italiano",
+        "ja": "Japonés",
+        "ko": "Coreano",
+        "no": "Noruego",
+        "pt_BR": "Portugués (Brasil)",
+        "ru": "Ruso",
+        "es": "Español",
+        "es_MX": "Español (México)",
+        "sv": "Sueco",
+        "th": "Tailandés",
+        "he": "Hebreo"
+    },
+    "session-expired": {
+        "title": "Sesión expirada",
+        "description": "Este enlace de firma de documento ha expirado debido a inactividad o tiempo de espera de la sesión. Vuelva a su correo electrónico y haga clic en el enlace nuevamente para continuar firmando."
+    },
+    "inPersonComplete": {
+        "title": "🎉 ¡Firma completada!",
+        "subtitle": "El documento ha sido firmado exitosamente",
+        "thankYou": "¡Gracias por firmar!",
+        "message": "Recibirá un correo electrónico de confirmación una vez que el documento haya sido firmado por todas las partes.",
+        "passDevice": "Ahora puede devolver el dispositivo a <strong>{{senderName}}</strong>",
+        "continueButton": "Continuar"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/es_MX/translation.json b/public/locales/es_MX/translation.json
new file mode 100644
index 0000000..e5bc487
--- /dev/null
+++ b/public/locales/es_MX/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Al hacer clic en <0>Acepto</0>, confirma que ha revisado la <1>Divulgación de registros electrónicos y firmas</1> y da su consentimiento para el uso de registros y firmas electrónicas en la revisión y ejecución de este documento.",
+        "note": "Nota:",
+        "noteText": "Aceptar esto no significa que esté firmando el documento de inmediato. Solo le permite revisarlo electrónicamente. Tendrá la oportunidad de revisar el documento completo antes de firmar."
+    },
+    "buttons": {
+        "agree": "Acepto",
+        "processing": "Procesando...",
+        "close": "Cerrar",
+        "downloadPdf": "Descargar PDF",
+        "downloading": "Descargando..."
+    },
+    "header": {
+        "aiSummary": "Resumen de IA",
+        "completeSign": "Completar firma",
+        "sign": "Firmar",
+        "processing": "Procesando...",
+        "options": "Descargar"
+    },
+    "menu": {
+        "downloadPdf": "Descargar PDF",
+        "auditTrail": "Pista de auditoría",
+        "reassignSigner": "Reasignar firmante",
+        "cancelTransaction": "Cancelar transacción",
+        "viewTerms": "Ver términos y condiciones",
+        "helpSupport": "Ayuda y soporte",
+        "about": "Acerca de SME"
+    },
+    "sidebar": {
+        "documents": "Documentos",
+        "pages": "Páginas: {{count}}",
+        "noDocuments": "No hay documentos disponibles."
+    },
+    "footer": {
+        "readyTitle": "¿Listo para finalizar?",
+        "readyDesc": "Ha completado los campos obligatorios. Revise su trabajo y luego seleccione Finalizar.",
+        "finish": "Finalizar",
+        "submitting": "Enviando...",
+        "start": "Comenzar",
+        "next": "Siguiente",
+        "agreementText": "Al firmar, acepto los <0>Términos y condiciones</0> de Sign Made Easy."
+    },
+    "completion": {
+        "complete": {
+            "hit": "¡Todo listo!",
+            "title": "Gracias por firmar",
+            "message": "Su documento ahora está completo y almacenado de forma segura. Le hemos enviado una copia por correo electrónico."
+        },
+        "declined": {
+            "hit": "¡Acción cancelada!",
+            "title": "¡Quizás la próxima vez!",
+            "message": "Su solicitud ha sido rechazada exitosamente."
+        },
+        "cancelled": {
+            "hit": "¡Acción cancelada!",
+            "title": "¡Quizás la próxima vez!",
+            "message": "Su solicitud ha sido cancelada exitosamente."
+        },
+        "download": "Descargar",
+        "downloading": "Descargando...",
+        "downloadSuccess": "Archivo descargado exitosamente.",
+        "downloadOptions": {
+            "pdf": "Documento PDF",
+            "audit": "Pistas de auditoría",
+            "selectFormat": "Seleccionar formato"
+        },
+        "downloadError": "Error al descargar el archivo. Por favor, inténtelo de nuevo.",
+        "appsTitle": "Aumente la eficiencia con nuestras aplicaciones",
+        "formsTitle": "Genere formularios con facilidad",
+        "docsTitle": "Genere documentos (facturas, informes, cotizaciones)",
+        "tryNow": "Probar ahora",
+        "footerText": "Derechos de autor 2026 Sign Made Easy. Todos los derechos reservados.<0>Política de privacidad</0> | <1>Política de uso razonable</1>"
+    },
+    "reassign": {
+        "title": "Reasignar firmante",
+        "successSubtitle": "El documento ha sido reasignado exitosamente",
+        "successTitle": "¡Gracias!",
+        "successMessage": "El documento ha sido reasignado exitosamente al nuevo firmante.",
+        "fields": {
+            "firstName": "Nombre",
+            "lastName": "Apellido",
+            "email": "Correo electrónico",
+            "language": "Idioma",
+            "message": "Mensaje opcional"
+        },
+        "placeholders": {
+            "firstName": "Ingrese su nombre",
+            "lastName": "Ingrese su apellido",
+            "email": "your.email@example.com",
+            "message": "Escriba su mensaje aquí..."
+        },
+        "buttons": {
+            "submit": "Enviar",
+            "submitting": "Enviando...",
+            "cancel": "Cancelar"
+        },
+        "errors": {
+            "firstNameRequired": "El nombre es obligatorio",
+            "firstNameMin": "El nombre debe tener al menos 2 caracteres",
+            "lastNameRequired": "El apellido es obligatorio",
+            "lastNameMin": "El apellido debe tener al menos 2 caracteres",
+            "emailRequired": "El correo electrónico es obligatorio",
+            "emailInvalid": "Dirección de correo electrónico inválida"
+        }
+    },
+    "cancelModal": {
+        "title": "Cancelar transacción",
+        "description": "¿Está seguro de que desea cancelar esta transacción? Proporcione el motivo de cancelación a continuación.",
+        "placeholder": "Por favor, proporcione el motivo de cancelación...",
+        "buttons": {
+            "no": "No, no cancelar",
+            "yes": "Sí, cancelarla"
+        },
+        "errors": {
+            "reasonRequired": "El motivo de cancelación es obligatorio"
+        },
+        "inPersonSuccess": {
+            "title": "Cancelar Transacción",
+            "message": "La transacción se canceló correctamente. Se enviaron correos de confirmación.",
+            "passBackDevice": "Ahora puede devolver el dispositivo a {{senderName}}.",
+            "continueButton": "Continuar"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Auditoría de transacciones",
+        "meta.transaction_id": "ID de transacción",
+        "meta.transaction_status": "Estado de la transacción",
+        "meta.files": "Archivos",
+        "audit.title": "Pista de auditoría completa",
+        "audit.description": "Actualice el Asunto y el Mensaje a continuación para un mensaje personalizado.",
+        "table.header.actions": "Acciones",
+        "table.header.language": "Idioma",
+        "table.header.ip_address": "Dirección IP",
+        "table.header.date": "Fecha",
+        "status.completed": "Completado",
+        "status.pending": "Pendiente",
+        "status.failed": "Fallido",
+        "action.created": "Creado",
+        "action.updated": "Actualizado",
+        "action.deleted": "Eliminado",
+        "action.viewed": "Visto",
+        "action.signed": "Firmado",
+        "action.uploaded": "Cargado",
+        "action.downloaded": "Descargado",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Auditoría de transacciones",
+        "meta": {
+            "transactionId": "ID de transacción",
+            "transactionStatus": "Estado de la transacción",
+            "files": "Archivos"
+        },
+        "audit": {
+            "title": "Pista de auditoría completa",
+            "description": "Actualice el Asunto y el Mensaje a continuación para un mensaje personalizado."
+        },
+        "table": {
+            "actions": "Acciones",
+            "language": "Idioma",
+            "ipAddress": "Dirección IP",
+            "date": "Fecha"
+        },
+        "status": {
+            "completed": "Completado",
+            "pending": "Pendiente",
+            "failed": "Fallido"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transacción creada por {{userName}} <{{userEmail}}>",
+            "sent": "Transacción enviada por {{userName}} <{{userEmail}}>",
+            "cancelled": "Transacción cancelada por {{userName}} <{{userEmail}}>",
+            "edited": "Transacción editada por {{userName}} <{{userEmail}}>",
+            "viewed": "Transacción vista por {{userName}} <{{userEmail}}>",
+            "signed": "Transacción firmada por {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Firma de transacción rechazada por {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Divulgación de Registro Electrónico y Firma aceptada por {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> actualizó su idioma a {{language}}"
+        },
+        "invitation": {
+            "sent": "Invitación por correo enviada a {{userName}} <{{userEmail}}>",
+            "view": "La invitación para ver el documento se envió a {{userName}} <{{userEmail}}>",
+            "resent": "Invitación reenviada a {{recipientName}} <{{recipientEmail}}> por {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Firmante reasignado por {{fromName}} <{{fromEmail}}> a {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> fue reasignado por {{fromName}} <{{fromEmail}}> a {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Transacción en persona iniciada por {{userName}} <{{userEmail}}>",
+            "verification": "Verificación de firma en persona aceptada por {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Proceso de Facilitador aceptado por {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Firma",
+            "initial": "Inicial",
+            "edit": "Editar",
+            "styleSelection": "Selección de estilo"
+        },
+        "subtitle": "Cree sus firmas digitales",
+        "tabs": {
+            "select": "Seleccionar",
+            "draw": "Dibujar",
+            "upload": "Subir"
+        },
+        "selectTab": {
+            "description": "Confirme su nombre y elija un estilo de firma.",
+            "requiredFields": "Campos obligatorios.",
+            "fullName": {
+                "label": "Nombre completo",
+                "required": "*",
+                "placeholder": "Ingrese el nombre completo"
+            },
+            "initials": {
+                "label": "Iniciales",
+                "required": "*",
+                "placeholder": "Ingrese las iniciales"
+            }
+        },
+        "drawTab": {
+            "description": "Dibuje su firma.",
+            "required": "*",
+            "requiredFields": "Son campos obligatorios.",
+            "signature": "Firma",
+            "initials": "Iniciales",
+            "clearSignature": "Borrar firma",
+            "fullNameBox": {
+                "label": "Firma completa",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Iniciales",
+                "required": "*",
+                "placeholder": "Ingrese las iniciales"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Tanto la firma como las iniciales son obligatorias.",
+            "requirements": "Use imágenes de 300×100px para firmas y de 100×100px para iniciales. Máx. 300KB. Compatibles: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Subir firma",
+                "uploadHint": "JPG, PNG (300×100px, máx. 300KB)",
+                "browseButton": "Examinar",
+                "uploadedLabel": "Firma ✓",
+                "changeButton": "Cambiar firma",
+                "altText": "Imagen de firma subida"
+            },
+            "initials": {
+                "uploadLabel": "Subir iniciales",
+                "uploadHint": "JPG, PNG (100×100px, máx. 300KB)",
+                "browseButton": "Examinar",
+                "uploadedLabel": "Iniciales ✓",
+                "changeButton": "Cambiar iniciales",
+                "altText": "Imagen de iniciales subida"
+            }
+        },
+        "footer": {
+            "agreementText": "Entiendo que estoy firmando este documento.",
+            "cancelButton": "Cancelar",
+            "adoptButton": "Adoptar firma y firmar"
+        },
+        "errors": {
+            "requiredField": "Este campo es obligatorio",
+            "fileTooLarge": "El tamaño del archivo debe ser menor a 300KB",
+            "invalidFileType": "Solo se admiten archivos .png, .jpg y .jpeg",
+            "signatureRequired": "Por favor agregue una firma",
+            "initialsRequired": "Por favor agregue las iniciales"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Agregar sello",
+            "edit": "Editar sello"
+        },
+        "closeButton": "Cerrar modal",
+        "fileRequirements": "Tamaño máximo = 400KB | Tipos de archivo compatibles = .png, .jpg, .jpeg",
+        "dragDropLabel": "Arrastre y suelte una imagen, o haga clic para subir",
+        "previewAltText": "Vista previa del sello",
+        "changeImageButton": "Cambiar imagen",
+        "clearButton": "Cerrar",
+        "saveButton": "Guardar",
+        "updateButton": "Actualizar",
+        "errors": {
+            "fileTooLarge": "El tamaño del archivo excede el límite de 400KB",
+            "invalidFileType": "Solo se admiten archivos .png, .jpg y .jpeg",
+            "uploadFailed": "Error al subir la imagen. Intente de nuevo."
+        }
+    },
+    "attachmentModal": {
+        "title": "Adjunto",
+        "subtitle": {
+            "hasFile": "Administre su adjunto",
+            "noFile": "Subir adjunto"
+        },
+        "uploading": {
+            "status": "Subiendo archivo...",
+            "shimmerText": "Subiendo archivo..."
+        },
+        "uploadArea": {
+            "dragging": "Suelte su archivo aquí",
+            "default": "Subir o arrastrar y soltar archivo",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (máx. 10MB)",
+            "browseButton": "Examinar archivos"
+        },
+        "uploadedFile": {
+            "status": "Subido exitosamente",
+            "deleteButton": "Eliminar archivo"
+        },
+        "buttons": {
+            "close": "Cerrar",
+            "uploading": "Subiendo...",
+            "deleting": "Eliminando...",
+            "saved": "¡Archivo guardado!",
+            "done": "Listo",
+            "uploadFile": "Subir archivo"
+        },
+        "errors": {
+            "fileTooLarge": "El tamaño del archivo excede el límite de 10MB",
+            "invalidFileType": "Solo se admiten archivos PDF, DOCX, JPG, PNG y TXT",
+            "uploadFailed": "Error al subir el archivo. Intente de nuevo.",
+            "deleteFailed": "Error al eliminar el archivo. Intente de nuevo.",
+            "noFileSelected": "Por favor seleccione un archivo antes de continuar"
+        },
+        "accessibility": {
+            "fileUpload": "Subida de archivo",
+            "deleteFile": "Eliminar archivo"
+        }
+    },
+    "languages": {
+        "zh_CN": "Chino (Simplificado)",
+        "zh_TW": "Chino (Tradicional)",
+        "da": "Danés",
+        "nl_NL": "Neerlandés",
+        "en": "Inglés",
+        "fi": "Finlandés",
+        "fr": "Francés",
+        "de": "Alemán",
+        "it": "Italiano",
+        "ja": "Japonés",
+        "ko": "Coreano",
+        "no": "Noruego",
+        "pt_BR": "Portugués (Brasil)",
+        "ru": "Ruso",
+        "es": "Español",
+        "es_MX": "Español (México)",
+        "sv": "Sueco",
+        "th": "Tailandés",
+        "he": "Hebreo"
+    },
+    "session-expired": {
+        "title": "Sesión expirada",
+        "description": "Este enlace de firma de documento ha expirado debido a inactividad o tiempo de espera de la sesión. Regrese a su correo electrónico y haga clic en el enlace nuevamente para continuar firmando."
+    },
+    "inPersonComplete": {
+        "title": "🎉 ¡Firma completada!",
+        "subtitle": "El documento ha sido firmado exitosamente",
+        "thankYou": "¡Gracias por firmar!",
+        "message": "Recibirá un correo electrónico de confirmación una vez que el documento haya sido firmado por todas las partes.",
+        "passDevice": "Ahora puede devolver el dispositivo a <strong>{{senderName}}</strong>",
+        "continueButton": "Continuar"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/fi/translation.json b/public/locales/fi/translation.json
new file mode 100644
index 0000000..025f610
--- /dev/null
+++ b/public/locales/fi/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Napsauttamalla <0>Hyväksyn</0> vahvistat, että olet tarkistanut <1>Sähköinen tallennus- ja allekirjoitusilmoitus</1> -asiakirjan ja annat suostumuksesi sähköisten tallenteiden ja allekirjoitusten käyttöön tämän asiakirjan tarkastelussa ja allekirjoittamisessa.",
+        "note": "Huomautus:",
+        "noteText": "Tämän hyväksyminen ei tarkoita, että allekirjoitat asiakirjan välittömästi. Se sallii sinun vain tarkastella sitä sähköisesti. Sinulla on mahdollisuus tarkastella asiakirjaa kokonaisuudessaan ennen allekirjoittamista."
+    },
+    "buttons": {
+        "agree": "Hyväksyn",
+        "processing": "Käsitellään...",
+        "close": "Sulje",
+        "downloadPdf": "Lataa PDF",
+        "downloading": "Ladataan..."
+    },
+    "header": {
+        "aiSummary": "AI-yhteenveto",
+        "completeSign": "Suorita allekirjoitus",
+        "sign": "Allekirjoita",
+        "processing": "Käsitellään...",
+        "options": "Lataa"
+    },
+    "menu": {
+        "downloadPdf": "Lataa PDF",
+        "auditTrail": "Tarkastusjälki",
+        "reassignSigner": "Määritä allekirjoittaja uudelleen",
+        "cancelTransaction": "Peruuta tapahtuma",
+        "viewTerms": "Näytä ehdot",
+        "helpSupport": "Apua ja tuki",
+        "about": "Tietoja SME:stä"
+    },
+    "sidebar": {
+        "documents": "Asiakirjat",
+        "pages": "Sivut: {{count}}",
+        "noDocuments": "Ei asiakirjoja saatavilla."
+    },
+    "footer": {
+        "readyTitle": "Valmis viimeistelemään?",
+        "readyDesc": "Olet täyttänyt vaaditut kentät. Tarkista työsi ja valitse sitten Viimeistele.",
+        "finish": "Viimeistele",
+        "submitting": "Lähetetään...",
+        "start": "Aloita",
+        "next": "Seuraava",
+        "agreementText": "Allekirjoittamalla hyväksyn Sign Made Easyn <0>käyttöehdot.</0>"
+    },
+    "completion": {
+        "complete": {
+            "hit": "Kaikki valmista!",
+            "title": "Kiitos allekirjoituksesta",
+            "message": "Asiakirjasi on nyt valmis ja tallennettu turvallisesti. Olemme lähettäneet sinulle kopion sähköpostitse."
+        },
+        "declined": {
+            "hit": "Toiminto peruttu!",
+            "title": "Ehkä ensi kerralla!",
+            "message": "Pyyntösi on hylätty."
+        },
+        "cancelled": {
+            "hit": "Toiminto peruttu!",
+            "title": "Ehkä ensi kerralla!",
+            "message": "Pyyntösi on peruttu."
+        },
+        "download": "Lataa",
+        "downloading": "Ladataan...",
+        "downloadSuccess": "Tiedosto ladattu onnistuneesti.",
+        "downloadOptions": {
+            "pdf": "PDF-asiakirja",
+            "audit": "Tarkastusjälki",
+            "selectFormat": "Valitse muoto"
+        },
+        "downloadError": "Tiedoston lataus epäonnistui. Yritä uudelleen.",
+        "appsTitle": "Tehosta toimintaamme sovelluksillamme",
+        "formsTitle": "Luo lomakkeita helposti",
+        "docsTitle": "Luo asiakirjoja (laskut, raportit, tarjoukset)",
+        "tryNow": "Kokeile nyt",
+        "footerText": "Tekijänoikeus 2026 Sign Made Easy. Kaikki oikeudet pidätetään.<0>Tietosuojakäytäntö</0> | <1>Kohtuullisen käytön käytäntö</1>"
+    },
+    "reassign": {
+        "title": "Määritä allekirjoittaja uudelleen",
+        "successSubtitle": "Asiakirja on määritetty uudelleen",
+        "successTitle": "Kiitos!",
+        "successMessage": "Asiakirja on määritetty uudelleen uudelle allekirjoittajalle.",
+        "fields": {
+            "firstName": "Etunimi",
+            "lastName": "Sukunimi",
+            "email": "Sähköposti",
+            "language": "Kieli",
+            "message": "Valinnainen viesti"
+        },
+        "placeholders": {
+            "firstName": "Syötä etunimesi",
+            "lastName": "Syötä sukunimesi",
+            "email": "your.email@example.com",
+            "message": "Kirjoita viestisi tähän..."
+        },
+        "buttons": {
+            "submit": "Lähetä",
+            "submitting": "Lähetetään...",
+            "cancel": "Peruuta"
+        },
+        "errors": {
+            "firstNameRequired": "Etunimi vaaditaan",
+            "firstNameMin": "Etunimen on oltava vähintään 2 merkkiä",
+            "lastNameRequired": "Sukunimi vaaditaan",
+            "lastNameMin": "Sukunimen on oltava vähintään 2 merkkiä",
+            "emailRequired": "Sähköposti vaaditaan",
+            "emailInvalid": "Virheellinen sähköpostiosoite"
+        }
+    },
+    "cancelModal": {
+        "title": "Peruuta tapahtuma",
+        "description": "Oletko varma, että haluat peruuttaa tämän tapahtuman? Anna peruutuksen syy alla.",
+        "placeholder": "Anna peruutuksen syy...",
+        "buttons": {
+            "no": "Ei, älä peruuta",
+            "yes": "Kyllä, peruuta se"
+        },
+        "errors": {
+            "reasonRequired": "Peruutuksen syy vaaditaan"
+        },
+        "inPersonSuccess": {
+            "title": "Peruuta tapahtuma",
+            "message": "Tapahtuma peruutettiin onnistuneesti. Vahvistussähköpostit on lähetetty.",
+            "passBackDevice": "Voit nyt antaa laitteen takaisin {{senderName}}.",
+            "continueButton": "Jatka"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Tapahtuman tarkastus",
+        "meta.transaction_id": "Tapahtumatunnus",
+        "meta.transaction_status": "Tapahtuman tila",
+        "meta.files": "Tiedostot",
+        "audit.title": "Täysi tarkastusjälki",
+        "audit.description": "Päivitä alla oleva aihe ja viesti mukautettua viestiä varten.",
+        "table.header.actions": "Toiminnot",
+        "table.header.language": "Kieli",
+        "table.header.ip_address": "IP-osoite",
+        "table.header.date": "Päivämäärä",
+        "status.completed": "Valmis",
+        "status.pending": "Odottaa",
+        "status.failed": "Epäonnistui",
+        "action.created": "Luotu",
+        "action.updated": "Päivitetty",
+        "action.deleted": "Poistettu",
+        "action.viewed": "Näytetty",
+        "action.signed": "Allekirjoitettu",
+        "action.uploaded": "Ladattu",
+        "action.downloaded": "Ladattu",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Tapahtuman tarkastus",
+        "meta": {
+            "transactionId": "Tapahtumatunnus",
+            "transactionStatus": "Tapahtuman tila",
+            "files": "Tiedostot"
+        },
+        "audit": {
+            "title": "Täysi tarkastusjälki",
+            "description": "Päivitä alla oleva aihe ja viesti mukautettua viestiä varten."
+        },
+        "table": {
+            "actions": "Toiminnot",
+            "language": "Kieli",
+            "ipAddress": "IP-osoite",
+            "date": "Päivämäärä"
+        },
+        "status": {
+            "completed": "Valmis",
+            "pending": "Odottaa",
+            "failed": "Epäonnistui"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Tapahtuman loi {{userName}} <{{userEmail}}>",
+            "sent": "Tapahtuman lähetti {{userName}} <{{userEmail}}>",
+            "cancelled": "Tapahtuman peruutti {{userName}} <{{userEmail}}>",
+            "edited": "Tapahtumaa muokkasi {{userName}} <{{userEmail}}>",
+            "viewed": "Tapahtuman katsoi {{userName}} <{{userEmail}}>",
+            "signed": "Tapahtuman allekirjoitti {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Tapahtuman allekirjoitus hylättiin käyttäjällä {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Sähköinen tietue- ja allekirjoitusilmoitus hyväksyttiin käyttäjällä {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> päivitti kielensä muotoon {{language}}"
+        },
+        "invitation": {
+            "sent": "Kutsusähköposti lähetettiin käyttäjälle {{userName}} <{{userEmail}}>",
+            "view": "Kutsu asiakirjan tarkasteluun on lähetetty käyttäjälle {{userName}} <{{userEmail}}>",
+            "resent": "Kutsusähköposti lähetettiin uudelleen käyttäjälle {{recipientName}} <{{recipientEmail}}> käyttäjän {{senderName}} <{{senderEmail}}> toimesta"
+        },
+        "reassigned": {
+            "to": "Allekirjoittaja siirrettiin käyttäjältä {{fromName}} <{{fromEmail}}> käyttäjälle {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> siirrettiin käyttäjältä {{fromName}} <{{fromEmail}}> käyttäjälle {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Henkilökohtainen tapahtuma aloitettiin käyttäjällä {{userName}} <{{userEmail}}>",
+            "verification": "Henkilökohtainen allekirjoituksen vahvistus hyväksyttiin käyttäjällä {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Fasilitaattoriprosessi hyväksyttiin käyttäjällä {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Allekirjoitus",
+            "initial": "Alkukirjaimet",
+            "edit": "Muokkaa",
+            "styleSelection": "Tyylin valinta"
+        },
+        "subtitle": "Luo digitaaliset allekirjoituksesi",
+        "tabs": {
+            "select": "Valitse",
+            "draw": "Piirrä",
+            "upload": "Lataa"
+        },
+        "selectTab": {
+            "description": "Vahvista nimesi ja valitse allekirjoitustyyli.",
+            "requiredFields": "Pakolliset kentät.",
+            "fullName": {
+                "label": "Koko nimi",
+                "required": "*",
+                "placeholder": "Kirjoita koko nimi"
+            },
+            "initials": {
+                "label": "Alkukirjaimet",
+                "required": "*",
+                "placeholder": "Kirjoita alkukirjaimet"
+            }
+        },
+        "drawTab": {
+            "description": "Piirrä allekirjoituksesi.",
+            "required": "*",
+            "requiredFields": "Ovat pakollisia kenttiä.",
+            "signature": "Allekirjoitus",
+            "initials": "Alkukirjaimet",
+            "clearSignature": "Tyhjennä allekirjoitus",
+            "fullNameBox": {
+                "label": "Koko allekirjoitus",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Alkukirjaimet",
+                "required": "*",
+                "placeholder": "Syötä alkukirjaimet"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Sekä allekirjoitus että alkukirjaimet vaaditaan.",
+            "requirements": "Käytä 300×100px kuvia allekirjoituksiin ja 100×100px kuvia alkukirjaimiin. Max 300KB. Tuetut: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Lataa allekirjoitus",
+                "uploadHint": "JPG, PNG (300×100px, max 300KB)",
+                "browseButton": "Selaa",
+                "uploadedLabel": "Allekirjoitus ✓",
+                "changeButton": "Vaihda allekirjoitus",
+                "altText": "Ladattu allekirjoituskuva"
+            },
+            "initials": {
+                "uploadLabel": "Lataa alkukirjaimet",
+                "uploadHint": "JPG, PNG (100×100px, max 300KB)",
+                "browseButton": "Selaa",
+                "uploadedLabel": "Alkukirjaimet ✓",
+                "changeButton": "Vaihda alkukirjaimet",
+                "altText": "Ladattu alkukirjainkuva"
+            }
+        },
+        "footer": {
+            "agreementText": "Ymmärrän, että allekirjoitan tämän asiakirjan.",
+            "cancelButton": "Peruuta",
+            "adoptButton": "Käytä allekirjoitusta ja allekirjoita"
+        },
+        "errors": {
+            "requiredField": "Tämä kenttä on pakollinen",
+            "fileTooLarge": "Tiedostokoon on oltava alle 300KB",
+            "invalidFileType": "Vain .png, .jpg ja .jpeg tiedostot tuetaan",
+            "signatureRequired": "Lisää allekirjoitus",
+            "initialsRequired": "Lisää alkukirjaimet"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Lisää leima",
+            "edit": "Muokkaa leimaa"
+        },
+        "closeButton": "Sulje modaali",
+        "fileRequirements": "Maksimikoko = 400Kb | Tuetut tiedostotyypit = .png, .jpg, .jpeg",
+        "dragDropLabel": "Vedä ja pudota kuva, tai klikkaa ladataksesi",
+        "previewAltText": "Leiman esikatselu",
+        "changeImageButton": "Vaihda kuva",
+        "clearButton": "Sulje",
+        "saveButton": "Tallenna",
+        "updateButton": "Päivitä",
+        "errors": {
+            "fileTooLarge": "Tiedostokoko ylittää 400KB rajan",
+            "invalidFileType": "Vain .png, .jpg ja .jpeg tiedostot tuetaan",
+            "uploadFailed": "Kuvan lataus epäonnistui. Yritä uudelleen."
+        }
+    },
+    "attachmentModal": {
+        "title": "Liite",
+        "subtitle": {
+            "hasFile": "Hallitse liitettäsi",
+            "noFile": "Lataa liite"
+        },
+        "uploading": {
+            "status": "Ladataan tiedostoa...",
+            "shimmerText": "Ladataan tiedostoa..."
+        },
+        "uploadArea": {
+            "dragging": "Pudota tiedosto tähän",
+            "default": "Lataa tai vedä ja pudota tiedosto",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (max 10MB)",
+            "browseButton": "Selaa tiedostoja"
+        },
+        "uploadedFile": {
+            "status": "Ladattu onnistuneesti",
+            "deleteButton": "Poista tiedosto"
+        },
+        "buttons": {
+            "close": "Sulje",
+            "uploading": "Ladataan...",
+            "deleting": "Poistetaan...",
+            "saved": "Tiedosto tallennettu!",
+            "done": "Valmis",
+            "uploadFile": "Lataa tiedosto"
+        },
+        "errors": {
+            "fileTooLarge": "Tiedostokoko ylittää 10MB rajan",
+            "invalidFileType": "Vain PDF, DOCX, JPG, PNG ja TXT tiedostot tuetaan",
+            "uploadFailed": "Tiedoston lataus epäonnistui. Yritä uudelleen.",
+            "deleteFailed": "Tiedoston poisto epäonnistui. Yritä uudelleen.",
+            "noFileSelected": "Valitse tiedosto ennen jatkamista"
+        },
+        "accessibility": {
+            "fileUpload": "Tiedoston lataus",
+            "deleteFile": "Poista tiedosto"
+        }
+    },
+    "languages": {
+        "zh_CN": "Kiina (yksinkertaistettu)",
+        "zh_TW": "Kiina (perinteinen)",
+        "da": "Tanska",
+        "nl_NL": "Hollanti",
+        "en": "Englanti",
+        "fi": "Suomi",
+        "fr": "Ranska",
+        "de": "Saksa",
+        "it": "Italia",
+        "ja": "Japani",
+        "ko": "Korea",
+        "no": "Norja",
+        "pt_BR": "Portugali (Brasilia)",
+        "ru": "Venäjä",
+        "es": "Espanja",
+        "es_MX": "Espanja (Meksiko)",
+        "sv": "Ruotsi",
+        "th": "Thai",
+        "he": "Heprea"
+    },
+    "session-expired": {
+        "title": "Istunto vanhentunut",
+        "description": "Tämä asiakirjan allekirjoituslinkki on vanhentunut käyttämättömyyden tai istunnon aikakatkaisun vuoksi. Palaa sähköpostiisi ja napsauta linkkiä uudelleen jatkaaksesi allekirjoittamista."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Allekirjoitus valmis!",
+        "subtitle": "Asiakirja on allekirjoitettu onnistuneesti",
+        "thankYou": "Kiitos allekirjoituksesta!",
+        "message": "Saat vahvistusviestin sähköpostiisi, kun kaikki osapuolet ovat allekirjoittaneet asiakirjan.",
+        "passDevice": "Voit nyt palauttaa laitteen <strong>{{senderName}}</strong>:lle",
+        "continueButton": "Jatka"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
new file mode 100644
index 0000000..635012e
--- /dev/null
+++ b/public/locales/fr/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "En cliquant sur <0>J'accepte</0>, vous confirmez avoir examiné la <1>Divulgation des registres électroniques et des signatures</1> et consentez à l'utilisation de registres et signatures électroniques pour l'examen et l'exécution de ce document.",
+        "note": "Remarque :",
+        "noteText": "Accepter cela ne signifie pas que vous signez le document immédiatement. Cela vous permet uniquement de le consulter électroniquement. Vous aurez la possibilité d'examiner le document dans son intégralité avant de signer."
+    },
+    "buttons": {
+        "agree": "J'accepte",
+        "processing": "Traitement en cours...",
+        "close": "Fermer",
+        "downloadPdf": "Télécharger le PDF",
+        "downloading": "Téléchargement..."
+    },
+    "header": {
+        "aiSummary": "Résumé IA",
+        "completeSign": "Signer complètement",
+        "sign": "Signer",
+        "processing": "Traitement en cours...",
+        "options": "Télécharger"
+    },
+    "menu": {
+        "downloadPdf": "Télécharger le PDF",
+        "auditTrail": "Piste d'audit",
+        "reassignSigner": "Réattribuer le signataire",
+        "cancelTransaction": "Annuler la transaction",
+        "viewTerms": "Voir les conditions générales",
+        "helpSupport": "Aide et assistance",
+        "about": "À propos de SME"
+    },
+    "sidebar": {
+        "documents": "Documents",
+        "pages": "Pages : {{count}}",
+        "noDocuments": "Aucun document disponible."
+    },
+    "footer": {
+        "readyTitle": "Prêt à finaliser ?",
+        "readyDesc": "Vous avez rempli les champs requis. Vérifiez votre travail, puis sélectionnez Terminer.",
+        "finish": "Terminer",
+        "submitting": "Soumission...",
+        "start": "Commencer",
+        "next": "Suivant",
+        "agreementText": "En signant, j'accepte les <0>conditions générales</0> de Sign Made Easy."
+    },
+    "completion": {
+        "complete": {
+            "hit": "Terminé !",
+            "title": "Merci d'avoir signé",
+            "message": "Votre document est maintenant complété et stocké en toute sécurité. Nous vous en avons envoyé une copie par e-mail."
+        },
+        "declined": {
+            "hit": "Action annulée !",
+            "title": "La prochaine fois peut-être !",
+            "message": "Votre demande a été refusée."
+        },
+        "cancelled": {
+            "hit": "Action annulée !",
+            "title": "La prochaine fois peut-être !",
+            "message": "Votre demande a été annulée."
+        },
+        "download": "Télécharger",
+        "downloading": "Téléchargement...",
+        "downloadSuccess": "Fichier téléchargé avec succès.",
+        "downloadOptions": {
+            "pdf": "Document PDF",
+            "audit": "Piste d'audit",
+            "selectFormat": "Sélectionner le format"
+        },
+        "downloadError": "Le téléchargement du fichier a échoué. Veuillez réessayer.",
+        "appsTitle": "Améliorez votre efficacité avec nos applications",
+        "formsTitle": "Générez facilement des formulaires",
+        "docsTitle": "Générez des documents (factures, rapports, devis)",
+        "tryNow": "Essayer maintenant",
+        "footerText": "Droits d'auteur 2026 Sign Made Easy. Tous droits réservés.<0>Politique de confidentialité</0> | <1>Politique d'utilisation raisonnable</1>"
+    },
+    "reassign": {
+        "title": "Réattribuer le signataire",
+        "successSubtitle": "Le document a été réattribué avec succès",
+        "successTitle": "Merci !",
+        "successMessage": "Le document a été réattribué avec succès au nouveau signataire.",
+        "fields": {
+            "firstName": "Prénom",
+            "lastName": "Nom",
+            "email": "E-mail",
+            "language": "Langue",
+            "message": "Message optionnel"
+        },
+        "placeholders": {
+            "firstName": "Entrez votre prénom",
+            "lastName": "Entrez votre nom",
+            "email": "your.email@example.com",
+            "message": "Écrivez votre message ici..."
+        },
+        "buttons": {
+            "submit": "Soumettre",
+            "submitting": "Soumission...",
+            "cancel": "Annuler"
+        },
+        "errors": {
+            "firstNameRequired": "Le prénom est requis",
+            "firstNameMin": "Le prénom doit contenir au moins 2 caractères",
+            "lastNameRequired": "Le nom est requis",
+            "lastNameMin": "Le nom doit contenir au moins 2 caractères",
+            "emailRequired": "L'e-mail est requis",
+            "emailInvalid": "Adresse e-mail invalide"
+        }
+    },
+    "cancelModal": {
+        "title": "Annuler la transaction",
+        "description": "Êtes-vous sûr de vouloir annuler cette transaction ? Fournissez votre raison d'annulation ci-dessous.",
+        "placeholder": "Veuillez indiquer votre raison d'annulation...",
+        "buttons": {
+            "no": "Non, ne pas annuler",
+            "yes": "Oui, annuler"
+        },
+        "errors": {
+            "reasonRequired": "La raison de l'annulation est requise"
+        },
+        "inPersonSuccess": {
+            "title": "Annuler la transaction",
+            "message": "La transaction a été annulée avec succès. Des e-mails de confirmation ont été envoyés.",
+            "passBackDevice": "Vous pouvez maintenant remettre l'appareil à {{senderName}}.",
+            "continueButton": "Continuer"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Audit de transaction",
+        "meta.transaction_id": "ID de transaction",
+        "meta.transaction_status": "Statut de la transaction",
+        "meta.files": "Fichiers",
+        "audit.title": "Piste d'audit complète",
+        "audit.description": "Veuillez mettre à jour le sujet et le message ci-dessous pour un message personnalisé.",
+        "table.header.actions": "Actions",
+        "table.header.language": "Langue",
+        "table.header.ip_address": "Adresse IP",
+        "table.header.date": "Date",
+        "status.completed": "Terminé",
+        "status.pending": "En attente",
+        "status.failed": "Échoué",
+        "action.created": "Créé",
+        "action.updated": "Mis à jour",
+        "action.deleted": "Supprimé",
+        "action.viewed": "Consulté",
+        "action.signed": "Signé",
+        "action.uploaded": "Téléchargé",
+        "action.downloaded": "Téléchargé",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Audit de transaction",
+        "meta": {
+            "transactionId": "ID de transaction",
+            "transactionStatus": "Statut de la transaction",
+            "files": "Fichiers"
+        },
+        "audit": {
+            "title": "Piste d'audit complète",
+            "description": "Veuillez mettre à jour le sujet et le message ci-dessous pour un message personnalisé."
+        },
+        "table": {
+            "actions": "Actions",
+            "language": "Langue",
+            "ipAddress": "Adresse IP",
+            "date": "Date"
+        },
+        "status": {
+            "completed": "Terminé",
+            "pending": "En attente",
+            "failed": "Échoué"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "La transaction a été créée par {{userName}} <{{userEmail}}>",
+            "sent": "La transaction a été envoyée par {{userName}} <{{userEmail}}>",
+            "cancelled": "La transaction a été annulée par {{userName}} <{{userEmail}}>",
+            "edited": "La transaction a été modifiée par {{userName}} <{{userEmail}}>",
+            "viewed": "La transaction a été consultée par {{userName}} <{{userEmail}}>",
+            "signed": "La transaction a été signée par {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "La signature de la transaction a été refusée par {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "La divulgation de l'enregistrement électronique et de la signature a été acceptée par {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> a mis à jour sa langue vers {{language}}"
+        },
+        "invitation": {
+            "sent": "E-mail d'invitation envoyé à {{userName}} <{{userEmail}}>",
+            "view": "L'invitation à consulter le document a été envoyée à {{userName}} <{{userEmail}}>",
+            "resent": "E-mail d'invitation renvoyé à {{recipientName}} <{{recipientEmail}}> par {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Le signataire a été réaffecté par {{fromName}} <{{fromEmail}}> à {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> a été réaffecté par {{fromName}} <{{fromEmail}}> à {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "La transaction en personne a été démarrée par {{userName}} <{{userEmail}}>",
+            "verification": "La vérification de signature en personne a été acceptée par {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Le processus de facilitateur a été accepté par {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Signature",
+            "initial": "Initiale",
+            "edit": "Modifier",
+            "styleSelection": "Sélection du Style"
+        },
+        "subtitle": "Créez vos signatures numériques",
+        "tabs": {
+            "select": "Sélectionner",
+            "draw": "Dessiner",
+            "upload": "Télécharger"
+        },
+        "selectTab": {
+            "description": "Confirmez votre nom et choisissez un style de signature.",
+            "requiredFields": "Champs obligatoires.",
+            "fullName": {
+                "label": "Nom Complet",
+                "required": "*",
+                "placeholder": "Entrez le nom complet"
+            },
+            "initials": {
+                "label": "Initiales",
+                "required": "*",
+                "placeholder": "Entrez les initiales"
+            }
+        },
+        "drawTab": {
+            "description": "Dessinez votre signature.",
+            "required": "*",
+            "requiredFields": "Sont des champs obligatoires.",
+            "signature": "Signature",
+            "initials": "Initiales",
+            "clearSignature": "Effacer la signature",
+            "fullNameBox": {
+                "label": "Signature complète",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Initiales",
+                "required": "*",
+                "placeholder": "Entrez les initiales"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "La signature et les initiales sont obligatoires.",
+            "requirements": "Utilisez des images de 300×100px pour les signatures et 100×100px pour les initiales. Max 300KB. Formats supportés : .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Télécharger la Signature",
+                "uploadHint": "JPG, PNG (300×100px, max 300KB)",
+                "browseButton": "Parcourir",
+                "uploadedLabel": "Signature ✓",
+                "changeButton": "Changer la Signature",
+                "altText": "Image de signature téléchargée"
+            },
+            "initials": {
+                "uploadLabel": "Télécharger les Initiales",
+                "uploadHint": "JPG, PNG (100×100px, max 300KB)",
+                "browseButton": "Parcourir",
+                "uploadedLabel": "Initiales ✓",
+                "changeButton": "Changer les Initiales",
+                "altText": "Image des initiales téléchargée"
+            }
+        },
+        "footer": {
+            "agreementText": "Je comprends que je signe ce document.",
+            "cancelButton": "Annuler",
+            "adoptButton": "Adopter la Signature et Signer"
+        },
+        "errors": {
+            "requiredField": "Ce champ est obligatoire",
+            "fileTooLarge": "La taille du fichier doit être inférieure à 300KB",
+            "invalidFileType": "Seuls les fichiers .png, .jpg et .jpeg sont supportés",
+            "signatureRequired": "Veuillez ajouter une signature",
+            "initialsRequired": "Veuillez ajouter des initiales"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Ajouter un Tampon",
+            "edit": "Modifier le Tampon"
+        },
+        "closeButton": "Fermer la modale",
+        "fileRequirements": "Taille maximale = 400Kb | Types de fichiers supportés = .png, .jpg, .jpeg",
+        "dragDropLabel": "Glissez-déposez une image, ou cliquez pour télécharger",
+        "previewAltText": "Aperçu du Tampon",
+        "changeImageButton": "Changer l'image",
+        "clearButton": "Fermer",
+        "saveButton": "Enregistrer",
+        "updateButton": "Mettre à jour",
+        "errors": {
+            "fileTooLarge": "La taille du fichier dépasse la limite de 400KB",
+            "invalidFileType": "Seuls les fichiers .png, .jpg et .jpeg sont supportés",
+            "uploadFailed": "Échec du téléchargement de l'image. Veuillez réessayer."
+        }
+    },
+    "attachmentModal": {
+        "title": "Pièce jointe",
+        "subtitle": {
+            "hasFile": "Gérer votre pièce jointe",
+            "noFile": "Télécharger une pièce jointe"
+        },
+        "uploading": {
+            "status": "Téléchargement du fichier...",
+            "shimmerText": "Téléchargement du fichier..."
+        },
+        "uploadArea": {
+            "dragging": "Déposez votre fichier ici",
+            "default": "Télécharger ou glisser-déposer un fichier",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (max 10MB)",
+            "browseButton": "Parcourir les fichiers"
+        },
+        "uploadedFile": {
+            "status": "Téléchargé avec succès",
+            "deleteButton": "Supprimer le fichier"
+        },
+        "buttons": {
+            "close": "Fermer",
+            "uploading": "Téléchargement...",
+            "deleting": "Suppression...",
+            "saved": "Fichier Enregistré !",
+            "done": "Terminé",
+            "uploadFile": "Télécharger le fichier"
+        },
+        "errors": {
+            "fileTooLarge": "La taille du fichier dépasse la limite de 10MB",
+            "invalidFileType": "Seuls les fichiers PDF, DOCX, JPG, PNG et TXT sont supportés",
+            "uploadFailed": "Échec du téléchargement du fichier. Veuillez réessayer.",
+            "deleteFailed": "Échec de la suppression du fichier. Veuillez réessayer.",
+            "noFileSelected": "Veuillez sélectionner un fichier avant de continuer"
+        },
+        "accessibility": {
+            "fileUpload": "Téléchargement de fichier",
+            "deleteFile": "Supprimer le fichier"
+        }
+    },
+    "languages": {
+        "zh_CN": "Chinois (Simplifié)",
+        "zh_TW": "Chinois (Traditionnel)",
+        "da": "Danois",
+        "nl_NL": "Néerlandais",
+        "en": "Anglais",
+        "fi": "Finnois",
+        "fr": "Français",
+        "de": "Allemand",
+        "it": "Italien",
+        "ja": "Japonais",
+        "ko": "Coréen",
+        "no": "Norvégien",
+        "pt_BR": "Portugais (Brésil)",
+        "ru": "Russe",
+        "es": "Espagnol",
+        "es_MX": "Espagnol (Mexique)",
+        "sv": "Suédois",
+        "th": "Thaïlandais",
+        "he": "Hébreu"
+    },
+    "session-expired": {
+        "title": "Session expirée",
+        "description": "Ce lien de signature de document a expiré en raison d'une inactivité ou d'un délai d'attente de session. Veuillez retourner dans votre courrier électronique et cliquer à nouveau sur le lien pour continuer à signer."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Signature terminée !",
+        "subtitle": "Le document a été signé avec succès",
+        "thankYou": "Merci d'avoir signé !",
+        "message": "Vous recevrez un e-mail de confirmation une fois que le document aura été signé par toutes les parties.",
+        "passDevice": "Vous pouvez maintenant rendre l'appareil à <strong>{{senderName}}</strong>",
+        "continueButton": "Continuer"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/he/translation.json b/public/locales/he/translation.json
new file mode 100644
index 0000000..3370e44
--- /dev/null
+++ b/public/locales/he/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "בלחיצה על <0>אני מסכים</0>, אתה מאשר כי עיינת ב-<1>הצהרת רשומה אלקטרונית וחתימה</1>, ונותן את הסכמתך לשימוש ברשומות ובחתימות אלקטרוניות בעת עיון וחתימה על מסמך זה.",
+        "note": "הערה:",
+        "noteText": "הסכמה לכך אינה משמעה שאתה חותם על המסמך באופן מיידי. זה רק מאפשר לך לעיין בו באופן אלקטרוני. תהיה לך הזדמנות לעיין במסמך במלואו לפני החתימה."
+    },
+    "buttons": {
+        "agree": "אני מסכים",
+        "processing": "מעבד...",
+        "close": "סגור",
+        "downloadPdf": "הורד PDF",
+        "downloading": "מוריד..."
+    },
+    "header": {
+        "aiSummary": "סיכום AI",
+        "completeSign": "השלם חתימה",
+        "sign": "חתום",
+        "processing": "מעבד...",
+        "options": "הורד"
+    },
+    "menu": {
+        "downloadPdf": "הורד PDF",
+        "auditTrail": "מסלול ביקורת",
+        "reassignSigner": "הקצה חותם מחדש",
+        "cancelTransaction": "בטל עסקה",
+        "viewTerms": "צפה בתנאים והגבלות",
+        "helpSupport": "עזרה ותמיכה",
+        "about": "אודות SME"
+    },
+    "sidebar": {
+        "documents": "מסמכים",
+        "pages": "עמודים: {{count}}",
+        "noDocuments": "אין מסמכים זמינים."
+    },
+    "footer": {
+        "readyTitle": "הכל מוכן לסיום?",
+        "readyDesc": "מילאת את כל השדות הנדרשים. עיין בעבודתך, ולאחר מכן בחר סיום.",
+        "finish": "סיים",
+        "submitting": "שולח...",
+        "start": "התחל",
+        "next": "הבא",
+        "agreementText": "בחתימתי, אני מסכים ל-<0>תנאים והגבלות</0> של Sign Made Easy."
+    },
+    "completion": {
+        "complete": {
+            "hit": "הכל הושלם!",
+            "title": "תודה על החתימה",
+            "message": "המסמך שלך הושלם ומאוחסן בצורה מאובטחת. שלחנו לך עותק במייל."
+        },
+        "declined": {
+            "hit": "הפעולה בוטלה!",
+            "title": "אולי בפעם הבאה!",
+            "message": "בקשתך נדחתה בהצלחה."
+        },
+        "cancelled": {
+            "hit": "הפעולה בוטלה!",
+            "title": "אולי בפעם הבאה!",
+            "message": "בקשתך בוטלה בהצלחה."
+        },
+        "download": "הורד",
+        "downloading": "מוריד...",
+        "downloadSuccess": "הקובץ הורד בהצלחה.",
+        "downloadOptions": {
+            "pdf": "מסמך PDF",
+            "audit": "מסלולי ביקורת",
+            "selectFormat": "בחר פורמט"
+        },
+        "downloadError": "הורדת הקובץ נכשלה. אנא נסה שוב.",
+        "appsTitle": "הגבר יעילות עם האפליקציות שלנו",
+        "formsTitle": "צור טפסים בקלות",
+        "docsTitle": "צור מסמכים (חשבוניות, דוחות, הצעות מחיר)",
+        "tryNow": "נסה עכשיו",
+        "footerText": "כל הזכויות שמורות 2026 Sign Made Easy. <0>מדיניות פרטיות</0> | <1>מדיניות שימוש סביר</1>"
+    },
+    "reassign": {
+        "title": "הקצאת חותם מחדש",
+        "successSubtitle": "המסמך הוקצה מחדש בהצלחה",
+        "successTitle": "תודה רבה!",
+        "successMessage": "המסמך הוקצה מחדש לחתום החדש בהצלחה.",
+        "fields": {
+            "firstName": "שם פרטי",
+            "lastName": "שם משפחה",
+            "email": "דוא\"ל",
+            "language": "שפה",
+            "message": "הודעה אופציונלית"
+        },
+        "placeholders": {
+            "firstName": "הכנס את שמך הפרטי",
+            "lastName": "הכנס את שם משפחתך",
+            "email": "your.email@example.com",
+            "message": "כתוב את הודעתך כאן..."
+        },
+        "buttons": {
+            "submit": "שלח",
+            "submitting": "שולח...",
+            "cancel": "בטל"
+        },
+        "errors": {
+            "firstNameRequired": "שם פרטי הוא שדה חובה",
+            "firstNameMin": "שם פרטי חייב להכיל לפחות 2 תווים",
+            "lastNameRequired": "שם משפחה הוא שדה חובה",
+            "lastNameMin": "שם משפחה חייב להכיל לפחות 2 תווים",
+            "emailRequired": "דוא\"ל הוא שדה חובה",
+            "emailInvalid": "כתובת דוא\"ל לא תקינה"
+        }
+    },
+    "cancelModal": {
+        "title": "בטל עסקה",
+        "description": "האם אתה בטוח שברצונך לבטל עסקה זו? ספק את סיבת הביטול להלן.",
+        "placeholder": "אנא ספק את סיבת הביטול שלך...",
+        "buttons": {
+            "no": "לא, אל תבטל",
+            "yes": "כן, בטל אותה"
+        },
+        "errors": {
+            "reasonRequired": "סיבת ביטול היא שדה חובה"
+        },
+        "inPersonSuccess": {
+            "title": "בטל עסקה",
+            "message": "העסקה בוטלה בהצלחה. מיילי אישור נשלחו.",
+            "passBackDevice": "כעת תוכל להעביר את המכשיר בחזרה ל-{{senderName}}.",
+            "continueButton": "המשך"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "ביקורת עסקה",
+        "meta.transaction_id": "מזהה עסקה",
+        "meta.transaction_status": "סטטוס עסקה",
+        "meta.files": "קבצים",
+        "audit.title": "מסלול ביקורת מלא",
+        "audit.description": "אנא עדכן את הנושא וההודעה להלן להודעה מותאמת אישית.",
+        "table.header.actions": "פעולות",
+        "table.header.language": "שפה",
+        "table.header.ip_address": "כתובת IP",
+        "table.header.date": "תאריך",
+        "status.completed": "הושלם",
+        "status.pending": "ממתין",
+        "status.failed": "נכשל",
+        "action.created": "נוצר",
+        "action.updated": "עודכן",
+        "action.deleted": "נמחק",
+        "action.viewed": "נצפה",
+        "action.signed": "נחתם",
+        "action.uploaded": "הועלה",
+        "action.downloaded": "הורד",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "ביקורת עסקה",
+        "meta": {
+            "transactionId": "מזהה עסקה",
+            "transactionStatus": "סטטוס עסקה",
+            "files": "קבצים"
+        },
+        "audit": {
+            "title": "מסלול ביקורת מלא",
+            "description": "אנא עדכן את הנושא וההודעה להלן להודעה מותאמת אישית."
+        },
+        "table": {
+            "actions": "פעולות",
+            "language": "שפה",
+            "ipAddress": "כתובת IP",
+            "date": "תאריך"
+        },
+        "status": {
+            "completed": "הושלם",
+            "pending": "ממתין",
+            "failed": "נכשל"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "העסקה נוצרה על ידי {{userName}} <{{userEmail}}>",
+            "sent": "העסקה נשלחה על ידי {{userName}} <{{userEmail}}>",
+            "cancelled": "העסקה בוטלה על ידי {{userName}} <{{userEmail}}>",
+            "edited": "העסקה נערכה על ידי {{userName}} <{{userEmail}}>",
+            "viewed": "העסקה נצפתה על ידי {{userName}} <{{userEmail}}>",
+            "signed": "העסקה נחתמה על ידי {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "חתימת העסקה נדחתה על ידי {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "הצהרת רשומה אלקטרונית וחתימה התקבלה על ידי {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> עדכן את השפה שלו ל-{{language}}"
+        },
+        "invitation": {
+            "sent": "מייל הזמנה נשלח ל-{{userName}} <{{userEmail}}>",
+            "view": "הזמנה לעיון במסמך נשלחה ל-{{userName}} <{{userEmail}}>",
+            "resent": "מייל הזמנה נשלח שוב ל-{{recipientName}} <{{recipientEmail}}> על ידי {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "החותם הוקצה מחדש על ידי {{fromName}} <{{fromEmail}}> ל-{{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> הוקצה מחדש על ידי {{fromName}} <{{fromEmail}}> ל-{{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "עסקה אישית החלה על ידי {{userName}} <{{userEmail}}>",
+            "verification": "אימות חתימה אישית התקבל על ידי {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "תהליך המנחה התקבל על ידי {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "חתימה",
+            "initial": "ראשי תיבות",
+            "edit": "עריכה",
+            "styleSelection": "בחירת סגנון"
+        },
+        "subtitle": "צור את החתימות הדיגיטליות שלך",
+        "tabs": {
+            "select": "בחירה",
+            "draw": "ציור",
+            "upload": "העלאה"
+        },
+        "selectTab": {
+            "description": "אשר את שמך ובחר סגנון חתימה.",
+            "requiredFields": "שדות חובה.",
+            "fullName": {
+                "label": "שם מלא",
+                "required": "*",
+                "placeholder": "הזן שם מלא"
+            },
+            "initials": {
+                "label": "ראשי תיבות",
+                "required": "*",
+                "placeholder": "הזן ראשי תיבות"
+            }
+        },
+        "drawTab": {
+            "description": "צייר את החתימה שלך.",
+            "required": "*",
+            "requiredFields": "הם שדות חובה.",
+            "signature": "חתימה",
+            "initials": "ראשי תיבות",
+            "clearSignature": "נקה חתימה",
+            "fullNameBox": {
+                "label": "חתימה מלאה",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "ראשי תיבות",
+                "required": "*",
+                "placeholder": "הזן ראשי תיבות"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "נדרשים גם חתימה וגם ראשי תיבות.",
+            "requirements": "השתמש בתמונות בגודל 300×100px לחתימות ו-100×100px לראשי תיבות. מקסימום 300KB. נתמך: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "העלאת חתימה",
+                "uploadHint": "JPG, PNG (300×100px, מקסימום 300KB)",
+                "browseButton": "עיון",
+                "uploadedLabel": "חתימה ✓",
+                "changeButton": "שינוי חתימה",
+                "altText": "תמונת חתימה שהועלתה"
+            },
+            "initials": {
+                "uploadLabel": "העלאת ראשי תיבות",
+                "uploadHint": "JPG, PNG (100×100px, מקסימום 300KB)",
+                "browseButton": "עיון",
+                "uploadedLabel": "ראשי תיבות ✓",
+                "changeButton": "שינוי ראשי תיבות",
+                "altText": "תמונת ראשי תיבות שהועלתה"
+            }
+        },
+        "footer": {
+            "agreementText": "אני מבין שאני חותם על מסמך זה.",
+            "cancelButton": "ביטול",
+            "adoptButton": "אימוץ חתימה וחתימה"
+        },
+        "errors": {
+            "requiredField": "שדה זה הוא חובה",
+            "fileTooLarge": "גודל הקובץ חייב להיות פחות מ-300KB",
+            "invalidFileType": "נתמכים רק קבצי .png, .jpg ו-.jpeg",
+            "signatureRequired": "נא להוסיף חתימה",
+            "initialsRequired": "נא להוסיף ראשי תיבות"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "הוספת חותמת",
+            "edit": "עריכת חותמת"
+        },
+        "closeButton": "סגירת חלון",
+        "fileRequirements": "גודל מקסימלי = 400Kb | סוגי קבצים נתמכים = .png, .jpg, .jpeg",
+        "dragDropLabel": "גרור ושחרר תמונה, או לחץ להעלאה",
+        "previewAltText": "תצוגה מקדימה של החותמת",
+        "changeImageButton": "שינוי תמונה",
+        "clearButton": "סגור",
+        "saveButton": "שמור",
+        "updateButton": "עדכן",
+        "errors": {
+            "fileTooLarge": "גודל הקובץ חורג ממגבלת 400KB",
+            "invalidFileType": "נתמכים רק קבצי .png, .jpg ו-.jpeg",
+            "uploadFailed": "העלאת התמונה נכשלה. אנא נסה שוב."
+        }
+    },
+    "attachmentModal": {
+        "title": "קובץ מצורף",
+        "subtitle": {
+            "hasFile": "ניהול הקובץ המצורף שלך",
+            "noFile": "העלאת קובץ מצורף"
+        },
+        "uploading": {
+            "status": "מעלה קובץ...",
+            "shimmerText": "מעלה קובץ..."
+        },
+        "uploadArea": {
+            "dragging": "שחרר את הקובץ שלך כאן",
+            "default": "העלה או גרור ושחרר קובץ",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (מקסימום 10MB)",
+            "browseButton": "עיון בקבצים"
+        },
+        "uploadedFile": {
+            "status": "הועלה בהצלחה",
+            "deleteButton": "מחיקת קובץ"
+        },
+        "buttons": {
+            "close": "סגור",
+            "uploading": "מעלה...",
+            "deleting": "מוחק...",
+            "saved": "הקובץ נשמר!",
+            "done": "בוצע",
+            "uploadFile": "העלאת קובץ"
+        },
+        "errors": {
+            "fileTooLarge": "גודל הקובץ חורג ממגבלת 10MB",
+            "invalidFileType": "נתמכים רק קבצי PDF, DOCX, JPG, PNG ו-TXT",
+            "uploadFailed": "העלאת הקובץ נכשלה. אנא נסה שוב.",
+            "deleteFailed": "מחיקת הקובץ נכשלה. אנא נסה שוב.",
+            "noFileSelected": "אנא בחר קובץ לפני ההמשך"
+        },
+        "accessibility": {
+            "fileUpload": "העלאת קובץ",
+            "deleteFile": "מחיקת קובץ"
+        }
+    },
+    "languages": {
+        "he": "עברית",
+        "zh_CN": "סינית (פשוטה)",
+        "zh_TW": "סינית (מסורתית)",
+        "da": "דנית",
+        "nl_NL": "הולנדית",
+        "en": "אנגלית",
+        "fi": "פינית",
+        "fr": "צרפתית",
+        "de": "גרמנית",
+        "it": "איטלקית",
+        "ja": "יפנית",
+        "ko": "קוריאנית",
+        "no": "נורווגית",
+        "pt_BR": "פורטוגזית (ברזיל)",
+        "ru": "רוסית",
+        "es": "ספרדית",
+        "es_MX": "ספרדית (מקסיקו)",
+        "sv": "שוודית",
+        "th": "תאית"
+    },
+    "session-expired": {
+        "title": "הפגישה פגה",
+        "description": "קישור החתימה על מסמך זה פג עקב חוסר פעילות או פקיעת זמן פגישה. אנא חזור לדוא\"ל שלך ולחץ שוב על הקישור כדי להמשיך בחתימה."
+    },
+    "inPersonComplete": {
+        "title": "🎉 ההחתמה הושלמה!",
+        "subtitle": "המסמך נחתם בהצלחה",
+        "thankYou": "תודה על החתימה!",
+        "message": "תקבל אישור בדוא\"ל לאחר שהמסמך ייחתם על ידי כל הצדדים.",
+        "passDevice": "כעת תוכל להחזיר את המכשיר ל<strong>{{senderName}}</strong>",
+        "continueButton": "המשך"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
new file mode 100644
index 0000000..e7407c0
--- /dev/null
+++ b/public/locales/hi/translation.json
@@ -0,0 +1,109 @@
+{
+  "terms": {
+    "agreementText": "<0>\"मैं सहमत हूँ\"</0> पर क्लिक करके, आप पुष्टि करते हैं कि आपने <1>इलेक्ट्रॉनिक रिकॉर्ड और हस्ताक्षर प्रकटीकरण</1> की समीक्षा कर ली है, और इस दस्तावेज़ की समीक्षा और निष्पादन के लिए इलेक्ट्रॉनिक रिकॉर्ड और हस्ताक्षरों के उपयोग के लिए अपनी सहमति देते हैं।",
+    "note": "नोट:",
+    "noteText": "इससे सहमत होने का मतलब यह नहीं है कि आप तुरंत दस्तावेज़ पर हस्ताक्षर कर रहे हैं। यह केवल आपको इसे इलेक्ट्रॉनिक रूप से देखने की अनुमति देता है। हस्ताक्षर करने से पहले आपको दस्तावेज़ को पूरी तरह से समीक्षा करने का अवसर मिलेगा।"
+  },
+  "buttons": {
+    "agree": "मैं सहमत हूँ",
+    "processing": "प्रोसेस हो रहा है...",
+    "close": "बंद करें",
+    "downloadPdf": "PDF डाउनलोड करें",
+    "downloading": "डाउनलोड हो रहा है..."
+  },
+  "header": {
+    "aiSummary": "AI सारांश",
+    "completeSign": "साइन पूरा करें",
+    "sign": "साइन करें",
+    "processing": "प्रोसेस हो रहा है..."
+  },
+  "menu": {
+    "downloadPdf": "PDF डाउनलोड करें",
+    "reassignSigner": "साइनर पुनः असाइन करें",
+    "cancelTransaction": "लेनदेन रद्द करें",
+    "viewTerms": "नियम और शर्तें देखें",
+    "helpSupport": "सहायता और समर्थन",
+    "about": "SME के बारे में"
+  },
+  "sidebar": {
+    "documents": "दस्तावेज़",
+    "pages": "पेज: {{count}}",
+    "noDocuments": "कोई दस्तावेज़ उपलब्ध नहीं है।"
+  },
+  "footer": {
+    "readyTitle": "क्या आप इसे पूरा करने के लिए तैयार हैं?",
+    "readyDesc": "आपने आवश्यक फ़ील्ड भर लिए हैं। अपने काम की समीक्षा करें, फिर समाप्त करें चुनें।",
+    "finish": "समाप्त करें",
+    "submitting": "सबमिट हो रहा है...",
+    "start": "शुरू करें",
+    "next": "अगला",
+    "agreementText": "हस्ताक्षर करके, मैं Sign Made Easy के <0>नियम और शर्तों</0> से सहमत हूँ।"
+  },
+  "completion": {
+    "complete": {
+      "hit": "सब पूरा हो गया!",
+      "title": "साइन करने के लिए धन्यवाद",
+      "message": "आपका दस्तावेज़ अब पूरा हो चुका है और सुरक्षित रूप से संग्रहीत है। हमने आपको इसकी एक कॉपी ईमेल कर दी है।"
+    },
+    "declined": {
+      "hit": "कार्रवाई रद्द की गई!",
+      "title": "शायद अगली बार!",
+      "message": "आपका अनुरोध सफलतापूर्वक अस्वीकार कर दिया गया है।"
+    },
+    "cancelled": {
+      "hit": "कार्रवाई रद्द की गई!",
+      "title": "शायद अगली बार!",
+      "message": "आपका अनुरोध सफलतापूर्वक अस्वीकार कर दिया गया है।"
+    },
+    "download": "डाउनलोड करें",
+    "downloading": "डाउनलोड हो रहा है...",
+    "downloadSuccess": "फ़ाइल सफलतापूर्वक डाउनलोड हो गई।",
+    "downloadError": "फ़ाइल डाउनलोड नहीं हो सकी। कृपया पुनः प्रयास करें।",
+    "appsTitle": "हमारे ऐप्स के साथ अपनी कार्यक्षमता बढ़ाएँ",
+    "formsTitle": "आसानी से फॉर्म बनाएं",
+    "docsTitle": "दस्तावेज़ बनाएं (इनवॉइस, रिपोर्ट, कोट्स)",
+    "tryNow": "अभी आज़माएं",
+    "footerText": "कॉपीराइट 2026 Sign Made Easy। सर्वाधिकार सुरक्षित। <0>गोपनीयता नीति</0> | <1>उचित उपयोग नीति</1>"
+  },
+  "reassign": {
+    "title": "हस्ताक्षरकर्ता पुनः असाइन करें",
+    "fields": {
+      "firstName": "पहला नाम",
+      "lastName": "अंतिम नाम",
+      "email": "ईमेल",
+      "language": "भाषा",
+      "message": "वैकल्पिक संदेश"
+    },
+    "placeholders": {
+      "firstName": "अपना पहला नाम दर्ज करें",
+      "lastName": "अपना अंतिम नाम दर्ज करें",
+      "email": "your.email@example.com",
+      "message": "अपना संदेश यहाँ लिखें..."
+    },
+    "buttons": {
+      "submit": "सबमिट करें",
+      "submitting": "सबमिट किया जा रहा है...",
+      "cancel": "रद्द करें"
+    },
+    "errors": {
+      "firstNameRequired": "पहला नाम आवश्यक है",
+      "firstNameMin": "पहला नाम कम से कम 2 अक्षरों का होना चाहिए",
+      "lastNameRequired": "अंतिम नाम आवश्यक है",
+      "lastNameMin": "अंतिम नाम कम से कम 2 अक्षरों का होना चाहिए",
+      "emailRequired": "ईमेल आवश्यक है",
+      "emailInvalid": "अमान्य ईमेल पता"
+    }
+  },
+  "cancelModal": {
+    "title": "लेनदेन रद्द करें",
+    "description": "क्या आप वाकई इस लेनदेन को रद्द करना चाहते हैं? कृपया नीचे रद्द करने का कारण बताएं।",
+    "placeholder": "कृपया रद्द करने का कारण लिखें...",
+    "buttons": {
+      "no": "नहीं, रद्द न करें",
+      "yes": "हाँ, इसे रद्द करें"
+    },
+    "errors": {
+      "reasonRequired": "रद्द करने का कारण आवश्यक है"
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
new file mode 100644
index 0000000..b82733d
--- /dev/null
+++ b/public/locales/it/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Facendo clic su <0>Accetto</0>, confermi di aver letto l'<1>Informativa sui registri elettronici e le firme</1> e acconsenti all'uso di registri e firme elettronici per la revisione e l'esecuzione di questo documento.",
+        "note": "Nota:",
+        "noteText": "Accettare questo non significa che firmi immediatamente il documento. Ti permette solo di visualizzarlo elettronicamente. Avrai la possibilità di rivedere il documento per intero prima di firmare."
+    },
+    "buttons": {
+        "agree": "Accetto",
+        "processing": "Elaborazione in corso...",
+        "close": "Chiudi",
+        "downloadPdf": "Scarica PDF",
+        "downloading": "Download in corso..."
+    },
+    "header": {
+        "aiSummary": "Riepilogo AI",
+        "completeSign": "Completa firma",
+        "sign": "Firma",
+        "processing": "Elaborazione in corso...",
+        "options": "Scarica"
+    },
+    "menu": {
+        "downloadPdf": "Scarica PDF",
+        "auditTrail": "Traccia di audit",
+        "reassignSigner": "Riassegna firmatario",
+        "cancelTransaction": "Annulla transazione",
+        "viewTerms": "Visualizza termini e condizioni",
+        "helpSupport": "Aiuto e supporto",
+        "about": "Informazioni su SME"
+    },
+    "sidebar": {
+        "documents": "Documenti",
+        "pages": "Pagine: {{count}}",
+        "noDocuments": "Nessun documento disponibile."
+    },
+    "footer": {
+        "readyTitle": "Pronto per concludere?",
+        "readyDesc": "Hai compilato i campi richiesti. Rivedi il tuo lavoro, quindi seleziona Fine.",
+        "finish": "Fine",
+        "submitting": "Invio in corso...",
+        "start": "Inizia",
+        "next": "Avanti",
+        "agreementText": "Firmando, accetto i <0>Termini e condizioni</0> di Sign Made Easy."
+    },
+    "completion": {
+        "complete": {
+            "hit": "Tutto fatto!",
+            "title": "Grazie per la firma",
+            "message": "Il tuo documento è ora completo e archiviato in modo sicuro. Ti abbiamo inviato una copia via email."
+        },
+        "declined": {
+            "hit": "Azione annullata!",
+            "title": "Forse la prossima volta!",
+            "message": "La tua richiesta è stata rifiutata."
+        },
+        "cancelled": {
+            "hit": "Azione annullata!",
+            "title": "Forse la prossima volta!",
+            "message": "La tua richiesta è stata annullata."
+        },
+        "download": "Scarica",
+        "downloading": "Download in corso...",
+        "downloadSuccess": "File scaricato con successo.",
+        "downloadOptions": {
+            "pdf": "Documento PDF",
+            "audit": "Traccia di audit",
+            "selectFormat": "Seleziona formato"
+        },
+        "downloadError": "Download del file fallito. Riprova.",
+        "appsTitle": "Aumenta l'efficienza con le nostre app",
+        "formsTitle": "Genera moduli facilmente",
+        "docsTitle": "Genera documenti (fatture, report, preventivi)",
+        "tryNow": "Prova ora",
+        "footerText": "Copyright 2026 Sign Made Easy. Tutti i diritti riservati.<0>Informativa sulla privacy</0> | <1>Politica di uso ragionevole</1>"
+    },
+    "reassign": {
+        "title": "Riassegna firmatario",
+        "successSubtitle": "Il documento è stato riassegnato con successo",
+        "successTitle": "Grazie!",
+        "successMessage": "Il documento è stato riassegnato con successo al nuovo firmatario.",
+        "fields": {
+            "firstName": "Nome",
+            "lastName": "Cognome",
+            "email": "Email",
+            "language": "Lingua",
+            "message": "Messaggio opzionale"
+        },
+        "placeholders": {
+            "firstName": "Inserisci il tuo nome",
+            "lastName": "Inserisci il tuo cognome",
+            "email": "your.email@example.com",
+            "message": "Scrivi il tuo messaggio qui..."
+        },
+        "buttons": {
+            "submit": "Invia",
+            "submitting": "Invio in corso...",
+            "cancel": "Annulla"
+        },
+        "errors": {
+            "firstNameRequired": "Il nome è obbligatorio",
+            "firstNameMin": "Il nome deve contenere almeno 2 caratteri",
+            "lastNameRequired": "Il cognome è obbligatorio",
+            "lastNameMin": "Il cognome deve contenere almeno 2 caratteri",
+            "emailRequired": "L'email è obbligatoria",
+            "emailInvalid": "Indirizzo email non valido"
+        }
+    },
+    "cancelModal": {
+        "title": "Annulla transazione",
+        "description": "Sei sicuro di voler annullare questa transazione? Fornisci il motivo dell'annullamento qui sotto.",
+        "placeholder": "Fornisci il motivo dell'annullamento...",
+        "buttons": {
+            "no": "No, non annullare",
+            "yes": "Sì, annulla"
+        },
+        "errors": {
+            "reasonRequired": "Il motivo dell'annullamento è obbligatorio"
+        },
+        "inPersonSuccess": {
+            "title": "Annulla transazione",
+            "message": "Transazione annullata con successo. Email di conferma inviate.",
+            "passBackDevice": "Ora puoi restituire il dispositivo a {{senderName}}.",
+            "continueButton": "Continua"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Audit di transazione",
+        "meta.transaction_id": "ID transazione",
+        "meta.transaction_status": "Stato transazione",
+        "meta.files": "File",
+        "audit.title": "Traccia di audit completa",
+        "audit.description": "Aggiorna l'oggetto e il messaggio qui sotto per un messaggio personalizzato.",
+        "table.header.actions": "Azioni",
+        "table.header.language": "Lingua",
+        "table.header.ip_address": "Indirizzo IP",
+        "table.header.date": "Data",
+        "status.completed": "Completato",
+        "status.pending": "In sospeso",
+        "status.failed": "Fallito",
+        "action.created": "Creato",
+        "action.updated": "Aggiornato",
+        "action.deleted": "Eliminato",
+        "action.viewed": "Visualizzato",
+        "action.signed": "Firmato",
+        "action.uploaded": "Caricato",
+        "action.downloaded": "Scaricato",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Audit di transazione",
+        "meta": {
+            "transactionId": "ID transazione",
+            "transactionStatus": "Stato transazione",
+            "files": "File"
+        },
+        "audit": {
+            "title": "Traccia di audit completa",
+            "description": "Aggiorna l'oggetto e il messaggio qui sotto per un messaggio personalizzato."
+        },
+        "table": {
+            "actions": "Azioni",
+            "language": "Lingua",
+            "ipAddress": "Indirizzo IP",
+            "date": "Data"
+        },
+        "status": {
+            "completed": "Completato",
+            "pending": "In sospeso",
+            "failed": "Fallito"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transazione creata da {{userName}} <{{userEmail}}>",
+            "sent": "Transazione inviata da {{userName}} <{{userEmail}}>",
+            "cancelled": "Transazione annullata da {{userName}} <{{userEmail}}>",
+            "edited": "Transazione modificata da {{userName}} <{{userEmail}}>",
+            "viewed": "Transazione visualizzata da {{userName}} <{{userEmail}}>",
+            "signed": "Transazione firmata da {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Firma della transazione rifiutata da {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Divulgazione di registro elettronico e firma accettata da {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> ha aggiornato la lingua a {{language}}"
+        },
+        "invitation": {
+            "sent": "Email di invito inviata a {{userName}} <{{userEmail}}>",
+            "view": "Invito a visualizzare il documento inviato a {{userName}} <{{userEmail}}>",
+            "resent": "Email di invito reinviata a {{recipientName}} <{{recipientEmail}}> da {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Firmatario riassegnato da {{fromName}} <{{fromEmail}}> a {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> è stato riassegnato da {{fromName}} <{{fromEmail}}> a {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Transazione di persona avviata da {{userName}} <{{userEmail}}>",
+            "verification": "Verifica firma di persona accettata da {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Processo del facilitatore accettato da {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Firma",
+            "initial": "Iniziale",
+            "edit": "Modifica",
+            "styleSelection": "Selezione Stile"
+        },
+        "subtitle": "Crea le tue firme digitali",
+        "tabs": {
+            "select": "Seleziona",
+            "draw": "Disegna",
+            "upload": "Carica"
+        },
+        "selectTab": {
+            "description": "Conferma il tuo nome e scegli uno stile di firma.",
+            "requiredFields": "Campi obbligatori.",
+            "fullName": {
+                "label": "Nome Completo",
+                "required": "*",
+                "placeholder": "Inserisci il nome completo"
+            },
+            "initials": {
+                "label": "Iniziali",
+                "required": "*",
+                "placeholder": "Inserisci le iniziali"
+            }
+        },
+        "drawTab": {
+            "description": "Disegna la tua firma.",
+            "required": "*",
+            "requiredFields": "Sono campi obbligatori.",
+            "signature": "Firma",
+            "initials": "Iniziali",
+            "clearSignature": "Cancella firma",
+            "fullNameBox": {
+                "label": "Firma completa",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Iniziali",
+                "required": "*",
+                "placeholder": "Inserisci le iniziali"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Sia la firma che le iniziali sono obbligatorie.",
+            "requirements": "Utilizza immagini di 300×100px per le firme e 100×100px per le iniziali. Max 300KB. Supportati: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Carica Firma",
+                "uploadHint": "JPG, PNG (300×100px, max 300KB)",
+                "browseButton": "Sfoglia",
+                "uploadedLabel": "Firma ✓",
+                "changeButton": "Cambia Firma",
+                "altText": "Immagine firma caricata"
+            },
+            "initials": {
+                "uploadLabel": "Carica Iniziali",
+                "uploadHint": "JPG, PNG (100×100px, max 300KB)",
+                "browseButton": "Sfoglia",
+                "uploadedLabel": "Iniziali ✓",
+                "changeButton": "Cambia Iniziali",
+                "altText": "Immagine iniziali caricata"
+            }
+        },
+        "footer": {
+            "agreementText": "Comprendo che sto firmando questo documento.",
+            "cancelButton": "Annulla",
+            "adoptButton": "Adotta Firma e Firma"
+        },
+        "errors": {
+            "requiredField": "Questo campo è obbligatorio",
+            "fileTooLarge": "La dimensione del file deve essere inferiore a 300KB",
+            "invalidFileType": "Sono supportati solo file .png, .jpg e .jpeg",
+            "signatureRequired": "Si prega di aggiungere una firma",
+            "initialsRequired": "Si prega di aggiungere le iniziali"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Aggiungi Timbro",
+            "edit": "Modifica Timbro"
+        },
+        "closeButton": "Chiudi modale",
+        "fileRequirements": "Dimensione massima = 400Kb | Tipi di file supportati = .png, .jpg, .jpeg",
+        "dragDropLabel": "Trascina e rilascia un'immagine, o clicca per caricare",
+        "previewAltText": "Anteprima Timbro",
+        "changeImageButton": "Cambia immagine",
+        "clearButton": "Chiudi",
+        "saveButton": "Salva",
+        "updateButton": "Aggiorna",
+        "errors": {
+            "fileTooLarge": "La dimensione del file supera il limite di 400KB",
+            "invalidFileType": "Sono supportati solo file .png, .jpg e .jpeg",
+            "uploadFailed": "Caricamento dell'immagine fallito. Si prega di riprovare."
+        }
+    },
+    "attachmentModal": {
+        "title": "Allegato",
+        "subtitle": {
+            "hasFile": "Gestisci il tuo allegato",
+            "noFile": "Carica allegato"
+        },
+        "uploading": {
+            "status": "Caricamento file...",
+            "shimmerText": "Caricamento file..."
+        },
+        "uploadArea": {
+            "dragging": "Rilascia il file qui",
+            "default": "Carica o trascina e rilascia il file",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (max 10MB)",
+            "browseButton": "Sfoglia File"
+        },
+        "uploadedFile": {
+            "status": "Caricato con successo",
+            "deleteButton": "Elimina file"
+        },
+        "buttons": {
+            "close": "Chiudi",
+            "uploading": "Caricamento...",
+            "deleting": "Eliminazione...",
+            "saved": "File Salvato!",
+            "done": "Fatto",
+            "uploadFile": "Carica File"
+        },
+        "errors": {
+            "fileTooLarge": "La dimensione del file supera il limite di 10MB",
+            "invalidFileType": "Sono supportati solo file PDF, DOCX, JPG, PNG e TXT",
+            "uploadFailed": "Caricamento del file fallito. Si prega di riprovare.",
+            "deleteFailed": "Eliminazione del file fallita. Si prega di riprovare.",
+            "noFileSelected": "Si prega di selezionare un file prima di procedere"
+        },
+        "accessibility": {
+            "fileUpload": "Caricamento file",
+            "deleteFile": "Elimina file"
+        }
+    },
+    "languages": {
+        "zh_CN": "Cinese (Semplificato)",
+        "zh_TW": "Cinese (Tradizionale)",
+        "da": "Danese",
+        "nl_NL": "Olandese",
+        "en": "Inglese",
+        "fi": "Finlandese",
+        "fr": "Francese",
+        "de": "Tedesco",
+        "it": "Italiano",
+        "ja": "Giapponese",
+        "ko": "Coreano",
+        "no": "Norvegese",
+        "pt_BR": "Portoghese (Brasile)",
+        "ru": "Russo",
+        "es": "Spagnolo",
+        "es_MX": "Spagnolo (Messico)",
+        "sv": "Svedese",
+        "th": "Tailandese",
+        "he": "Ebraico"
+    },
+    "session-expired": {
+        "title": "Sessione scaduta",
+        "description": "Questo link per la firma del documento è scaduto a causa di inattività o timeout della sessione. Torna alla tua email e fai di nuovo clic sul link per continuare a firmare."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Firma completata!",
+        "subtitle": "Il documento è stato firmato con successo",
+        "thankYou": "Grazie per aver firmato!",
+        "message": "Riceverai un'email di conferma una volta che il documento sarà stato firmato da tutte le parti.",
+        "passDevice": "Ora puoi restituire il dispositivo a <strong>{{senderName}}</strong>",
+        "continueButton": "Continua"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/ja/translation.json b/public/locales/ja/translation.json
new file mode 100644
index 0000000..873efdb
--- /dev/null
+++ b/public/locales/ja/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "<0>同意する</0>をクリックすると、<1>電子記録および署名の開示</1>を確認し、この文書の確認および実行における電子記録および署名の使用に同意することを確認します。",
+        "note": "注：",
+        "noteText": "これに同意しても、すぐに文書に署名するわけではありません。電子的に確認できるようになるだけです。署名する前に文書全体を確認する機会があります。"
+    },
+    "buttons": {
+        "agree": "同意する",
+        "processing": "処理中...",
+        "close": "閉じる",
+        "downloadPdf": "PDFをダウンロード",
+        "downloading": "ダウンロード中..."
+    },
+    "header": {
+        "aiSummary": "AIサマリー",
+        "completeSign": "署名完了",
+        "sign": "署名",
+        "processing": "処理中...",
+        "options": "ダウンロード"
+    },
+    "menu": {
+        "downloadPdf": "PDFをダウンロード",
+        "auditTrail": "監査証跡",
+        "reassignSigner": "署名者の再割り当て",
+        "cancelTransaction": "トランザクションをキャンセル",
+        "viewTerms": "利用規約を表示",
+        "helpSupport": "ヘルプとサポート",
+        "about": "SMEについて"
+    },
+    "sidebar": {
+        "documents": "ドキュメント",
+        "pages": "ページ：{{count}}",
+        "noDocuments": "利用可能なドキュメントはありません。"
+    },
+    "footer": {
+        "readyTitle": "完了する準備はできましたか？",
+        "readyDesc": "必須フィールドに入力しました。作業内容を確認し、「完了」を選択してください。",
+        "finish": "完了",
+        "submitting": "送信中...",
+        "start": "開始",
+        "next": "次へ",
+        "agreementText": "署名することにより、Sign Made Easyの<0>利用規約</0>に同意します。"
+    },
+    "completion": {
+        "complete": {
+            "hit": "すべて完了！",
+            "title": "ご署名ありがとうございます",
+            "message": "文書は完了し、安全に保管されました。コピーをメールで送信しました。"
+        },
+        "declined": {
+            "hit": "アクションがキャンセルされました！",
+            "title": "また次回！",
+            "message": "リクエストは拒否されました。"
+        },
+        "cancelled": {
+            "hit": "アクションがキャンセルされました！",
+            "title": "また次回！",
+            "message": "リクエストはキャンセルされました。"
+        },
+        "download": "ダウンロード",
+        "downloading": "ダウンロード中...",
+        "downloadSuccess": "ファイルのダウンロードに成功しました。",
+        "downloadOptions": {
+            "pdf": "PDFドキュメント",
+            "audit": "監査証跡",
+            "selectFormat": "形式を選択"
+        },
+        "downloadError": "ファイルのダウンロードに失敗しました。再試行してください。",
+        "appsTitle": "アプリで効率アップ",
+        "formsTitle": "フォームを簡単に生成",
+        "docsTitle": "ドキュメントを生成（請求書、レポート、見積書）",
+        "tryNow": "今すぐ試す",
+        "footerText": "Copyright 2026 Sign Made Easy. All Rights Reserved.<0>プライバシーポリシー</0> | <1>合理的利用ポリシー</1>"
+    },
+    "reassign": {
+        "title": "署名者の再割り当て",
+        "successSubtitle": "ドキュメントは正常に再割り当てされました",
+        "successTitle": "ありがとうございます！",
+        "successMessage": "ドキュメントは新しい署名者に正常に再割り当てされました。",
+        "fields": {
+            "firstName": "名",
+            "lastName": "姓",
+            "email": "メール",
+            "language": "言語",
+            "message": "オプションメッセージ"
+        },
+        "placeholders": {
+            "firstName": "名を入力してください",
+            "lastName": "姓を入力してください",
+            "email": "your.email@example.com",
+            "message": "ここにメッセージを書いてください..."
+        },
+        "buttons": {
+            "submit": "送信",
+            "submitting": "送信中...",
+            "cancel": "キャンセル"
+        },
+        "errors": {
+            "firstNameRequired": "名は必須です",
+            "firstNameMin": "名は2文字以上である必要があります",
+            "lastNameRequired": "姓は必須です",
+            "lastNameMin": "姓は2文字以上である必要があります",
+            "emailRequired": "メールは必須です",
+            "emailInvalid": "無効なメールアドレスです"
+        }
+    },
+    "cancelModal": {
+        "title": "トランザクションをキャンセル",
+        "description": "このトランザクションをキャンセルしてもよろしいですか？以下にキャンセル理由を記入してください。",
+        "placeholder": "キャンセル理由を記入してください...",
+        "buttons": {
+            "no": "いいえ、キャンセルしない",
+            "yes": "はい、キャンセルする"
+        },
+        "errors": {
+            "reasonRequired": "キャンセル理由は必須です"
+        },
+        "inPersonSuccess": {
+            "title": "取引をキャンセル",
+            "message": "取引は正常にキャンセルされました。確認メールが送信されました。",
+            "passBackDevice": "デバイスを{{senderName}}に戻すことができます。",
+            "continueButton": "続行"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "トランザクション監査",
+        "meta.transaction_id": "トランザクションID",
+        "meta.transaction_status": "トランザクションステータス",
+        "meta.files": "ファイル",
+        "audit.title": "完全な監査証跡",
+        "audit.description": "カスタムメッセージについては、以下の件名とメッセージを更新してください。",
+        "table.header.actions": "アクション",
+        "table.header.language": "言語",
+        "table.header.ip_address": "IPアドレス",
+        "table.header.date": "日付",
+        "status.completed": "完了",
+        "status.pending": "保留中",
+        "status.failed": "失敗",
+        "action.created": "作成済み",
+        "action.updated": "更新済み",
+        "action.deleted": "削除済み",
+        "action.viewed": "表示済み",
+        "action.signed": "署名済み",
+        "action.uploaded": "アップロード済み",
+        "action.downloaded": "ダウンロード済み",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "トランザクション監査",
+        "meta": {
+            "transactionId": "トランザクションID",
+            "transactionStatus": "トランザクションステータス",
+            "files": "ファイル"
+        },
+        "audit": {
+            "title": "完全な監査証跡",
+            "description": "カスタムメッセージについては、以下の件名とメッセージを更新してください。"
+        },
+        "table": {
+            "actions": "アクション",
+            "language": "言語",
+            "ipAddress": "IPアドレス",
+            "date": "日付"
+        },
+        "status": {
+            "completed": "完了",
+            "pending": "保留中",
+            "failed": "失敗"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "トランザクションが {{userName}} <{{userEmail}}> によって作成されました",
+            "sent": "トランザクションが {{userName}} <{{userEmail}}> によって送信されました",
+            "cancelled": "トランザクションが {{userName}} <{{userEmail}}> によってキャンセルされました",
+            "edited": "トランザクションが {{userName}} <{{userEmail}}> によって編集されました",
+            "viewed": "トランザクションが {{userName}} <{{userEmail}}> によって閲覧されました",
+            "signed": "トランザクションが {{userName}} <{{userEmail}}> によって署名されました"
+        },
+        "signature": {
+            "declined": "トランザクションの署名が {{userName}} <{{userEmail}}> によって拒否されました"
+        },
+        "ers": {
+            "accepted": "電子記録および署名開示が {{userName}} <{{userEmail}}> によって受け入れられました"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> が言語を {{language}} に更新しました"
+        },
+        "invitation": {
+            "sent": "招待メールが {{userName}} <{{userEmail}}> に送信されました",
+            "view": "ドキュメントを表示するための招待が {{userName}} <{{userEmail}}> に送信されました",
+            "resent": "招待メールが {{senderName}} <{{senderEmail}}> によって {{recipientName}} <{{recipientEmail}}> に再送信されました"
+        },
+        "reassigned": {
+            "to": "署名者が {{fromName}} <{{fromEmail}}> から {{toName}} <{{toEmail}}> に再割り当てされました",
+            "complex": "{{personName}} <{{personEmail}}> が {{fromName}} <{{fromEmail}}> から {{toName}} <{{toEmail}}> に再割り当てされました"
+        },
+        "inperson": {
+            "started": "対面トランザクションが {{userName}} <{{userEmail}}> によって開始されました",
+            "verification": "対面署名検証が {{userName}} <{{userEmail}}> によって受け入れられました"
+        },
+        "facilitator": {
+            "accepted": "ファシリテータープロセスが {{userName}} <{{userEmail}}> によって受け入れられました"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "署名",
+            "initial": "イニシャル",
+            "edit": "編集",
+            "styleSelection": "スタイル選択"
+        },
+        "subtitle": "デジタル署名を作成",
+        "tabs": {
+            "select": "選択",
+            "draw": "描画",
+            "upload": "アップロード"
+        },
+        "selectTab": {
+            "description": "名前を確認し、署名スタイルを選択してください。",
+            "requiredFields": "必須項目。",
+            "fullName": {
+                "label": "フルネーム",
+                "required": "*",
+                "placeholder": "フルネームを入力"
+            },
+            "initials": {
+                "label": "イニシャル",
+                "required": "*",
+                "placeholder": "イニシャルを入力"
+            }
+        },
+        "drawTab": {
+            "description": "署名を描いてください。",
+            "required": "*",
+            "requiredFields": "必須フィールドです。",
+            "signature": "署名",
+            "initials": "イニシャル",
+            "clearSignature": "署名をクリア",
+            "fullNameBox": {
+                "label": "完全な署名",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "イニシャル",
+                "required": "*",
+                "placeholder": "イニシャルを入力"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "署名とイニシャルの両方が必要です。",
+            "requirements": "署名には300×100px、イニシャルには100×100pxの画像を使用してください。最大300KB。対応形式：.png、.jpg。",
+            "signature": {
+                "uploadLabel": "署名をアップロード",
+                "uploadHint": "JPG、PNG（300×100px、最大300KB）",
+                "browseButton": "参照",
+                "uploadedLabel": "署名 ✓",
+                "changeButton": "署名を変更",
+                "altText": "アップロードされた署名画像"
+            },
+            "initials": {
+                "uploadLabel": "イニシャルをアップロード",
+                "uploadHint": "JPG、PNG（100×100px、最大300KB）",
+                "browseButton": "参照",
+                "uploadedLabel": "イニシャル ✓",
+                "changeButton": "イニシャルを変更",
+                "altText": "アップロードされたイニシャル画像"
+            }
+        },
+        "footer": {
+            "agreementText": "この文書に署名することを理解しています。",
+            "cancelButton": "キャンセル",
+            "adoptButton": "署名を採用して署名"
+        },
+        "errors": {
+            "requiredField": "この項目は必須です",
+            "fileTooLarge": "ファイルサイズは300KB未満である必要があります",
+            "invalidFileType": ".png、.jpg、.jpegファイルのみ対応しています",
+            "signatureRequired": "署名を追加してください",
+            "initialsRequired": "イニシャルを追加してください"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "スタンプを追加",
+            "edit": "スタンプを編集"
+        },
+        "closeButton": "モーダルを閉じる",
+        "fileRequirements": "最大サイズ = 400Kb | 対応ファイル形式 = .png、.jpg、.jpeg",
+        "dragDropLabel": "画像をドラッグ＆ドロップするか、クリックしてアップロード",
+        "previewAltText": "スタンププレビュー",
+        "changeImageButton": "画像を変更",
+        "clearButton": "閉じる",
+        "saveButton": "保存",
+        "updateButton": "更新",
+        "errors": {
+            "fileTooLarge": "ファイルサイズが400KBの制限を超えています",
+            "invalidFileType": ".png、.jpg、.jpegファイルのみ対応しています",
+            "uploadFailed": "画像のアップロードに失敗しました。もう一度お試しください。"
+        }
+    },
+    "attachmentModal": {
+        "title": "添付ファイル",
+        "subtitle": {
+            "hasFile": "添付ファイルを管理",
+            "noFile": "添付ファイルをアップロード"
+        },
+        "uploading": {
+            "status": "ファイルをアップロード中...",
+            "shimmerText": "ファイルをアップロード中..."
+        },
+        "uploadArea": {
+            "dragging": "ファイルをここにドロップ",
+            "default": "ファイルをアップロードまたはドラッグ＆ドロップ",
+            "fileTypes": "PDF、DOCX、JPG、PNG、TXT（最大10MB）",
+            "browseButton": "ファイルを参照"
+        },
+        "uploadedFile": {
+            "status": "アップロード成功",
+            "deleteButton": "ファイルを削除"
+        },
+        "buttons": {
+            "close": "閉じる",
+            "uploading": "アップロード中...",
+            "deleting": "削除中...",
+            "saved": "ファイル保存完了！",
+            "done": "完了",
+            "uploadFile": "ファイルをアップロード"
+        },
+        "errors": {
+            "fileTooLarge": "ファイルサイズが10MBの制限を超えています",
+            "invalidFileType": "PDF、DOCX、JPG、PNG、TXTファイルのみ対応しています",
+            "uploadFailed": "ファイルのアップロードに失敗しました。もう一度お試しください。",
+            "deleteFailed": "ファイルの削除に失敗しました。もう一度お試しください。",
+            "noFileSelected": "続行する前にファイルを選択してください"
+        },
+        "accessibility": {
+            "fileUpload": "ファイルアップロード",
+            "deleteFile": "ファイルを削除"
+        }
+    },
+    "languages": {
+        "zh_CN": "中国語（簡体字）",
+        "zh_TW": "中国語（繁体字）",
+        "da": "デンマーク語",
+        "nl_NL": "オランダ語",
+        "en": "英語",
+        "fi": "フィンランド語",
+        "fr": "フランス語",
+        "de": "ドイツ語",
+        "it": "イタリア語",
+        "ja": "日本語",
+        "ko": "韓国語",
+        "no": "ノルウェー語",
+        "pt_BR": "ポルトガル語（ブラジル）",
+        "ru": "ロシア語",
+        "es": "スペイン語",
+        "es_MX": "スペイン語（メキシコ）",
+        "sv": "スウェーデン語",
+        "th": "タイ語",
+        "he": "ヘブライ語"
+    },
+    "session-expired": {
+        "title": "セッションの有効期限が切れました",
+        "description": "この文書署名リンクは、操作がないかセッションタイムアウトにより期限切れになりました。メールに戻り、リンクをもう一度クリックして署名を続けてください。"
+    },
+    "inPersonComplete": {
+        "title": "🎉 署名が完了しました！",
+        "subtitle": "文書は正常に署名されました",
+        "thankYou": "ご署名ありがとうございます！",
+        "message": "すべての関係者が文書に署名すると、確認メールが届きます。",
+        "passDevice": "デバイスを <strong>{{senderName}}</strong> に戻すことができます",
+        "continueButton": "続行"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/ko/translation.json b/public/locales/ko/translation.json
new file mode 100644
index 0000000..17d0378
--- /dev/null
+++ b/public/locales/ko/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "<0>동의함</0>을 클릭하면 <1>전자 기록 및 서명 공개</1>를 검토했음을 확인하고 이 문서 검토 및 실행에 전자 기록 및 서명 사용에 동의합니다.",
+        "note": "참고:",
+        "noteText": "이에 동의한다고 해서 즉시 문서에 서명하는 것은 아닙니다. 전자적으로 검토할 수만 있습니다. 서명하기 전에 문서 전체를 검토할 기회가 있습니다."
+    },
+    "buttons": {
+        "agree": "동의함",
+        "processing": "처리 중...",
+        "close": "닫기",
+        "downloadPdf": "PDF 다운로드",
+        "downloading": "다운로드 중..."
+    },
+    "header": {
+        "aiSummary": "AI 요약",
+        "completeSign": "서명 완료",
+        "sign": "서명",
+        "processing": "처리 중...",
+        "options": "다운로드"
+    },
+    "menu": {
+        "downloadPdf": "PDF 다운로드",
+        "auditTrail": "감사 추적",
+        "reassignSigner": "서명자 재할당",
+        "cancelTransaction": "거래 취소",
+        "viewTerms": "이용약관 보기",
+        "helpSupport": "도움말 및 지원",
+        "about": "SME 정보"
+    },
+    "sidebar": {
+        "documents": "문서",
+        "pages": "페이지: {{count}}",
+        "noDocuments": "사용 가능한 문서가 없습니다."
+    },
+    "footer": {
+        "readyTitle": "완료할 준비가 되셨나요?",
+        "readyDesc": "필수 필드를 작성했습니다. 작업을 검토한 후 완료를 선택하세요.",
+        "finish": "완료",
+        "submitting": "제출 중...",
+        "start": "시작",
+        "next": "다음",
+        "agreementText": "서명함으로써 Sign Made Easy의 <0>이용약관</0>에 동의합니다."
+    },
+    "completion": {
+        "complete": {
+            "hit": "모두 완료!",
+            "title": "서명해 주셔서 감사합니다",
+            "message": "문서가 완료되어 안전하게 저장되었습니다. 사본을 이메일로 보내드렸습니다."
+        },
+        "declined": {
+            "hit": "작업이 취소되었습니다!",
+            "title": "다음에 다시 만나요!",
+            "message": "요청이 거부되었습니다."
+        },
+        "cancelled": {
+            "hit": "작업이 취소되었습니다!",
+            "title": "다음에 다시 만나요!",
+            "message": "요청이 취소되었습니다."
+        },
+        "download": "다운로드",
+        "downloading": "다운로드 중...",
+        "downloadSuccess": "파일이 성공적으로 다운로드되었습니다.",
+        "downloadOptions": {
+            "pdf": "PDF 문서",
+            "audit": "감사 추적",
+            "selectFormat": "형식 선택"
+        },
+        "downloadError": "파일 다운로드에 실패했습니다. 다시 시도하세요.",
+        "appsTitle": "앱으로 효율성 향상",
+        "formsTitle": "양식을 쉽게 생성",
+        "docsTitle": "문서 생성(송장, 보고서, 견적서)",
+        "tryNow": "지금 사용해보기",
+        "footerText": "Copyright 2026 Sign Made Easy. All Rights Reserved.<0>개인정보처리방침</0> | <1>합리적 이용 정책</1>"
+    },
+    "reassign": {
+        "title": "서명자 재할당",
+        "successSubtitle": "문서가 성공적으로 재할당되었습니다",
+        "successTitle": "감사합니다!",
+        "successMessage": "문서가 새 서명자에게 성공적으로 재할당되었습니다.",
+        "fields": {
+            "firstName": "이름",
+            "lastName": "성",
+            "email": "이메일",
+            "language": "언어",
+            "message": "선택 메시지"
+        },
+        "placeholders": {
+            "firstName": "이름을 입력하세요",
+            "lastName": "성을 입력하세요",
+            "email": "your.email@example.com",
+            "message": "여기에 메시지를 작성하세요..."
+        },
+        "buttons": {
+            "submit": "제출",
+            "submitting": "제출 중...",
+            "cancel": "취소"
+        },
+        "errors": {
+            "firstNameRequired": "이름은 필수입니다",
+            "firstNameMin": "이름은 최소 2자 이상이어야 합니다",
+            "lastNameRequired": "성은 필수입니다",
+            "lastNameMin": "성은 최소 2자 이상이어야 합니다",
+            "emailRequired": "이메일은 필수입니다",
+            "emailInvalid": "유효하지 않은 이메일 주소입니다"
+        }
+    },
+    "cancelModal": {
+        "title": "거래 취소",
+        "description": "이 거래를 취소하시겠습니까? 아래에 취소 사유를 제공하세요.",
+        "placeholder": "취소 사유를 제공하세요...",
+        "buttons": {
+            "no": "아니요, 취소하지 않음",
+            "yes": "예, 취소함"
+        },
+        "errors": {
+            "reasonRequired": "취소 사유는 필수입니다"
+        },
+        "inPersonSuccess": {
+            "title": "거래 취소",
+            "message": "거래가 성공적으로 취소되었습니다. 확인 이메일이 발송되었습니다.",
+            "passBackDevice": "이제 {{senderName}}에게 기기를 돌려줄 수 있습니다.",
+            "continueButton": "계속"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "거래 감사",
+        "meta.transaction_id": "거래 ID",
+        "meta.transaction_status": "거래 상태",
+        "meta.files": "파일",
+        "audit.title": "전체 감사 추적",
+        "audit.description": "사용자 정의 메시지를 위해 아래 제목과 메시지를 업데이트하세요.",
+        "table.header.actions": "작업",
+        "table.header.language": "언어",
+        "table.header.ip_address": "IP 주소",
+        "table.header.date": "날짜",
+        "status.completed": "완료됨",
+        "status.pending": "보류 중",
+        "status.failed": "실패함",
+        "action.created": "생성됨",
+        "action.updated": "업데이트됨",
+        "action.deleted": "삭제됨",
+        "action.viewed": "조회됨",
+        "action.signed": "서명됨",
+        "action.uploaded": "업로드됨",
+        "action.downloaded": "다운로드됨",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "거래 감사",
+        "meta": {
+            "transactionId": "거래 ID",
+            "transactionStatus": "거래 상태",
+            "files": "파일"
+        },
+        "audit": {
+            "title": "전체 감사 추적",
+            "description": "사용자 정의 메시지를 위해 아래 제목과 메시지를 업데이트하세요."
+        },
+        "table": {
+            "actions": "작업",
+            "language": "언어",
+            "ipAddress": "IP 주소",
+            "date": "날짜"
+        },
+        "status": {
+            "completed": "완료됨",
+            "pending": "보류 중",
+            "failed": "실패함"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "트랜잭션이 {{userName}} <{{userEmail}}>에 의해 생성되었습니다",
+            "sent": "트랜잭션이 {{userName}} <{{userEmail}}>에 의해 전송되었습니다",
+            "cancelled": "트랜잭션이 {{userName}} <{{userEmail}}>에 의해 취소되었습니다",
+            "edited": "트랜잭션이 {{userName}} <{{userEmail}}>에 의해 편집되었습니다",
+            "viewed": "트랜잭션이 {{userName}} <{{userEmail}}>에 의해 조회되었습니다",
+            "signed": "트랜잭션이 {{userName}} <{{userEmail}}>에 의해 서명되었습니다"
+        },
+        "signature": {
+            "declined": "트랜잭션 서명이 {{userName}} <{{userEmail}}>에 의해 거부되었습니다"
+        },
+        "ers": {
+            "accepted": "전자 기록 및 서명 공개가 {{userName}} <{{userEmail}}>에 의해 수락되었습니다"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}>님이 언어를 {{language}}(으)로 업데이트했습니다"
+        },
+        "invitation": {
+            "sent": "초대 이메일이 {{userName}} <{{userEmail}}>에게 전송되었습니다",
+            "view": "문서 보기 초대장이 {{userName}} <{{userEmail}}>(으)로 발송되었습니다",
+            "resent": "초대 이메일이 {{senderName}} <{{senderEmail}}>에 의해 {{recipientName}} <{{recipientEmail}}>에게 재전송되었습니다"
+        },
+        "reassigned": {
+            "to": "서명자가 {{fromName}} <{{fromEmail}}>에서 {{toName}} <{{toEmail}}>(으)로 재할당되었습니다",
+            "complex": "{{personName}} <{{personEmail}}>이(가) {{fromName}} <{{fromEmail}}>에서 {{toName}} <{{toEmail}}>(으)로 재할당되었습니다"
+        },
+        "inperson": {
+            "started": "대면 트랜잭션이 {{userName}} <{{userEmail}}>에 의해 시작되었습니다",
+            "verification": "대면 서명 확인이 {{userName}} <{{userEmail}}>에 의해 수락되었습니다"
+        },
+        "facilitator": {
+            "accepted": "조정자 프로세스가 {{userName}} <{{userEmail}}>에 의해 수락되었습니다"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "서명",
+            "initial": "이니셜",
+            "edit": "편집",
+            "styleSelection": "스타일 선택"
+        },
+        "subtitle": "디지털 서명 만들기",
+        "tabs": {
+            "select": "선택",
+            "draw": "그리기",
+            "upload": "업로드"
+        },
+        "selectTab": {
+            "description": "이름을 확인하고 서명 스타일을 선택하세요.",
+            "requiredFields": "필수 항목.",
+            "fullName": {
+                "label": "전체 이름",
+                "required": "*",
+                "placeholder": "전체 이름 입력"
+            },
+            "initials": {
+                "label": "이니셜",
+                "required": "*",
+                "placeholder": "이니셜 입력"
+            }
+        },
+        "drawTab": {
+            "description": "서명을 그려주세요.",
+            "required": "*",
+            "requiredFields": "필수 입력 필드입니다.",
+            "signature": "서명",
+            "initials": "이니셜",
+            "clearSignature": "서명 지우기",
+            "fullNameBox": {
+                "label": "전체 서명",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "이니셜",
+                "required": "*",
+                "placeholder": "이니셜 입력"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "서명과 이니셜이 모두 필요합니다.",
+            "requirements": "서명은 300×100px, 이니셜은 100×100px 이미지를 사용하세요. 최대 300KB. 지원: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "서명 업로드",
+                "uploadHint": "JPG, PNG (300×100px, 최대 300KB)",
+                "browseButton": "찾아보기",
+                "uploadedLabel": "서명 ✓",
+                "changeButton": "서명 변경",
+                "altText": "업로드된 서명 이미지"
+            },
+            "initials": {
+                "uploadLabel": "이니셜 업로드",
+                "uploadHint": "JPG, PNG (100×100px, 최대 300KB)",
+                "browseButton": "찾아보기",
+                "uploadedLabel": "이니셜 ✓",
+                "changeButton": "이니셜 변경",
+                "altText": "업로드된 이니셜 이미지"
+            }
+        },
+        "footer": {
+            "agreementText": "이 문서에 서명하고 있음을 이해합니다.",
+            "cancelButton": "취소",
+            "adoptButton": "서명 채택 및 서명"
+        },
+        "errors": {
+            "requiredField": "이 필드는 필수입니다",
+            "fileTooLarge": "파일 크기는 300KB 미만이어야 합니다",
+            "invalidFileType": ".png, .jpg, .jpeg 파일만 지원됩니다",
+            "signatureRequired": "서명을 추가해주세요",
+            "initialsRequired": "이니셜을 추가해주세요"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "스탬프 추가",
+            "edit": "스탬프 편집"
+        },
+        "closeButton": "모달 닫기",
+        "fileRequirements": "최대 크기 = 400Kb | 지원 파일 형식 = .png, .jpg, .jpeg",
+        "dragDropLabel": "이미지를 드래그 앤 드롭하거나 클릭하여 업로드",
+        "previewAltText": "스탬프 미리보기",
+        "changeImageButton": "이미지 변경",
+        "clearButton": "닫기",
+        "saveButton": "저장",
+        "updateButton": "업데이트",
+        "errors": {
+            "fileTooLarge": "파일 크기가 400KB 제한을 초과했습니다",
+            "invalidFileType": ".png, .jpg, .jpeg 파일만 지원됩니다",
+            "uploadFailed": "이미지 업로드에 실패했습니다. 다시 시도해주세요."
+        }
+    },
+    "attachmentModal": {
+        "title": "첨부파일",
+        "subtitle": {
+            "hasFile": "첨부파일 관리",
+            "noFile": "첨부파일 업로드"
+        },
+        "uploading": {
+            "status": "파일 업로드 중...",
+            "shimmerText": "파일 업로드 중..."
+        },
+        "uploadArea": {
+            "dragging": "파일을 여기에 드롭하세요",
+            "default": "파일 업로드 또는 드래그 앤 드롭",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (최대 10MB)",
+            "browseButton": "파일 찾아보기"
+        },
+        "uploadedFile": {
+            "status": "업로드 성공",
+            "deleteButton": "파일 삭제"
+        },
+        "buttons": {
+            "close": "닫기",
+            "uploading": "업로드 중...",
+            "deleting": "삭제 중...",
+            "saved": "파일 저장 완료!",
+            "done": "완료",
+            "uploadFile": "파일 업로드"
+        },
+        "errors": {
+            "fileTooLarge": "파일 크기가 10MB 제한을 초과했습니다",
+            "invalidFileType": "PDF, DOCX, JPG, PNG, TXT 파일만 지원됩니다",
+            "uploadFailed": "파일 업로드에 실패했습니다. 다시 시도해주세요.",
+            "deleteFailed": "파일 삭제에 실패했습니다. 다시 시도해주세요.",
+            "noFileSelected": "진행하기 전에 파일을 선택해주세요"
+        },
+        "accessibility": {
+            "fileUpload": "파일 업로드",
+            "deleteFile": "파일 삭제"
+        }
+    },
+    "languages": {
+        "zh_CN": "중국어(간체)",
+        "zh_TW": "중국어(번체)",
+        "da": "덴마크어",
+        "nl_NL": "네덜란드어",
+        "en": "영어",
+        "fi": "핀란드어",
+        "fr": "프랑스어",
+        "de": "독일어",
+        "it": "이탈리아어",
+        "ja": "일본어",
+        "ko": "한국어",
+        "no": "노르웨이어",
+        "pt_BR": "포르투갈어(브라질)",
+        "ru": "러시아어",
+        "es": "스페인어",
+        "es_MX": "스페인어(멕시코)",
+        "sv": "스웨덴어",
+        "th": "태국어",
+        "he": "히브리어"
+    },
+    "session-expired": {
+        "title": "세션이 만료되었습니다",
+        "description": "이 문서 서명 링크는 비활성 또는 세션 시간 초과로 인해 만료되었습니다. 이메일로 돌아가서 링크를 다시 클릭하여 서명을 계속하십시오."
+    },
+    "inPersonComplete": {
+        "title": "🎉 서명 완료!",
+        "subtitle": "문서가 성공적으로 서명되었습니다",
+        "thankYou": "서명해 주셔서 감사합니다!",
+        "message": "모든 당사자가 문서에 서명하면 확인 이메일을 받게 됩니다.",
+        "passDevice": "이제 기기를 <strong>{{senderName}}</strong>에게 다시 전달할 수 있습니다",
+        "continueButton": "계속"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/nl_NL/translation.json b/public/locales/nl_NL/translation.json
new file mode 100644
index 0000000..cd3277b
--- /dev/null
+++ b/public/locales/nl_NL/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Door op <0>Ik ga akkoord</0> te klikken, bevestigt u dat u de <1>Disclosure van elektronische registratie en handtekening</1> hebt bekeken en instemt met het gebruik van elektronische registraties en handtekeningen bij het bekijken en ondertekenen van dit document.",
+        "note": "Opmerking:",
+        "noteText": "Akkoord gaan hiermee betekent niet dat u het document onmiddellijk ondertekent. Het stelt u alleen in staat het elektronisch te bekijken. U krijgt de kans het document volledig te bekijken voordat u ondertekent."
+    },
+    "buttons": {
+        "agree": "Ik ga akkoord",
+        "processing": "Verwerken...",
+        "close": "Sluiten",
+        "downloadPdf": "PDF downloaden",
+        "downloading": "Downloaden..."
+    },
+    "header": {
+        "aiSummary": "AI-samenvatting",
+        "completeSign": "Ondertekening voltooien",
+        "sign": "Ondertekenen",
+        "processing": "Verwerken...",
+        "options": "Downloaden"
+    },
+    "menu": {
+        "downloadPdf": "PDF downloaden",
+        "auditTrail": "Audit trail",
+        "reassignSigner": "Ondertekenaar opnieuw toewijzen",
+        "cancelTransaction": "Transactie annuleren",
+        "viewTerms": "Algemene voorwaarden bekijken",
+        "helpSupport": "Help & ondersteuning",
+        "about": "Over SME"
+    },
+    "sidebar": {
+        "documents": "Documenten",
+        "pages": "Pagina's: {{count}}",
+        "noDocuments": "Geen documenten beschikbaar."
+    },
+    "footer": {
+        "readyTitle": "Klaar om af te ronden?",
+        "readyDesc": "U hebt de vereiste velden ingevuld. Bekijk uw werk en selecteer vervolgens Voltooien.",
+        "finish": "Voltooien",
+        "submitting": "Verzenden...",
+        "start": "Start",
+        "next": "Volgende",
+        "agreementText": "Door te ondertekenen ga ik akkoord met de <0>algemene voorwaarden</0> van Sign Made Easy."
+    },
+    "completion": {
+        "complete": {
+            "hit": "Helemaal klaar!",
+            "title": "Bedankt voor het ondertekenen",
+            "message": "Uw document is nu voltooid en veilig opgeslagen. We hebben u een kopie gemaild."
+        },
+        "declined": {
+            "hit": "Actie geannuleerd!",
+            "title": "Misschien volgende keer!",
+            "message": "Uw verzoek is succesvol afgewezen."
+        },
+        "cancelled": {
+            "hit": "Actie geannuleerd!",
+            "title": "Misschien volgende keer!",
+            "message": "Uw verzoek is succesvol geannuleerd."
+        },
+        "download": "Downloaden",
+        "downloading": "Downloaden...",
+        "downloadSuccess": "Bestand succesvol gedownload.",
+        "downloadOptions": {
+            "pdf": "PDF-document",
+            "audit": "Audit trail",
+            "selectFormat": "Selecteer formaat"
+        },
+        "downloadError": "Download mislukt. Probeer het opnieuw.",
+        "appsTitle": "Verhoog de efficiëntie met onze apps",
+        "formsTitle": "Genereer eenvoudig formulieren",
+        "docsTitle": "Genereer documenten (facturen, rapporten, offertes)",
+        "tryNow": "Probeer nu",
+        "footerText": "Auteursrecht 2026 Sign Made Easy. Alle rechten voorbehouden.<0>Privacybeleid</0> | <1>Beleid voor redelijk gebruik</1>"
+    },
+    "reassign": {
+        "title": "Ondertekenaar opnieuw toewijzen",
+        "successSubtitle": "Document is succesvol opnieuw toegewezen",
+        "successTitle": "Dank u!",
+        "successMessage": "Het document is succesvol opnieuw toegewezen aan de nieuwe ondertekenaar.",
+        "fields": {
+            "firstName": "Voornaam",
+            "lastName": "Achternaam",
+            "email": "E-mail",
+            "language": "Taal",
+            "message": "Optioneel bericht"
+        },
+        "placeholders": {
+            "firstName": "Voer uw voornaam in",
+            "lastName": "Voer uw achternaam in",
+            "email": "your.email@example.com",
+            "message": "Schrijf uw bericht hier..."
+        },
+        "buttons": {
+            "submit": "Verzenden",
+            "submitting": "Verzenden...",
+            "cancel": "Annuleren"
+        },
+        "errors": {
+            "firstNameRequired": "Voornaam is verplicht",
+            "firstNameMin": "Voornaam moet minimaal 2 tekens bevatten",
+            "lastNameRequired": "Achternaam is verplicht",
+            "lastNameMin": "Achternaam moet minimaal 2 tekens bevatten",
+            "emailRequired": "E-mail is verplicht",
+            "emailInvalid": "Ongeldig e-mailadres"
+        }
+    },
+    "cancelModal": {
+        "title": "Transactie annuleren",
+        "description": "Weet u zeker dat u deze transactie wilt annuleren? Geef hieronder uw reden voor annulering op.",
+        "placeholder": "Geef uw reden voor annulering...",
+        "buttons": {
+            "no": "Nee, niet annuleren",
+            "yes": "Ja, annuleer het"
+        },
+        "errors": {
+            "reasonRequired": "Annuleringsreden is verplicht"
+        },
+        "inPersonSuccess": {
+            "title": "Annuleer transactie",
+            "message": "De transactie is succesvol geannuleerd. Bevestigingsmails zijn verzonden.",
+            "passBackDevice": "U kunt het apparaat nu teruggeven aan {{senderName}}.",
+            "continueButton": "Doorgaan"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Transactie-audit",
+        "meta.transaction_id": "Transactie-ID",
+        "meta.transaction_status": "Transactiestatus",
+        "meta.files": "Bestanden",
+        "audit.title": "Volledige audit trail",
+        "audit.description": "Werk het onderwerp en bericht hieronder bij voor een aangepast bericht.",
+        "table.header.actions": "Acties",
+        "table.header.language": "Taal",
+        "table.header.ip_address": "IP-adres",
+        "table.header.date": "Datum",
+        "status.completed": "Voltooid",
+        "status.pending": "In behandeling",
+        "status.failed": "Mislukt",
+        "action.created": "Aangemaakt",
+        "action.updated": "Bijgewerkt",
+        "action.deleted": "Verwijderd",
+        "action.viewed": "Bekeken",
+        "action.signed": "Ondertekend",
+        "action.uploaded": "Geüpload",
+        "action.downloaded": "Gedownload",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Transactie-audit",
+        "meta": {
+            "transactionId": "Transactie-ID",
+            "transactionStatus": "Transactiestatus",
+            "files": "Bestanden"
+        },
+        "audit": {
+            "title": "Volledige audit trail",
+            "description": "Werk het onderwerp en bericht hieronder bij voor een aangepast bericht."
+        },
+        "table": {
+            "actions": "Acties",
+            "language": "Taal",
+            "ipAddress": "IP-adres",
+            "date": "Datum"
+        },
+        "status": {
+            "completed": "Voltooid",
+            "pending": "In behandeling",
+            "failed": "Mislukt"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transactie is gemaakt door {{userName}} <{{userEmail}}>",
+            "sent": "Transactie is verzonden door {{userName}} <{{userEmail}}>",
+            "cancelled": "Transactie is geannuleerd door {{userName}} <{{userEmail}}>",
+            "edited": "Transactie is bewerkt door {{userName}} <{{userEmail}}>",
+            "viewed": "Transactie is bekeken door {{userName}} <{{userEmail}}>",
+            "signed": "Transactie is ondertekend door {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Transactiehandtekening is geweigerd door {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Elektronische registratie en handtekeningopenbaarmaking is geaccepteerd door {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> heeft hun taal bijgewerkt naar {{language}}"
+        },
+        "invitation": {
+            "sent": "Uitnodigingsmail verzonden naar {{userName}} <{{userEmail}}>",
+            "view": "Uitnodiging om het document te bekijken is verzonden naar {{userName}} <{{userEmail}}>",
+            "resent": "Uitnodigingsmail opnieuw verzonden naar {{recipientName}} <{{recipientEmail}}> door {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Ondertekenaar is opnieuw toegewezen door {{fromName}} <{{fromEmail}}> aan {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> is opnieuw toegewezen door {{fromName}} <{{fromEmail}}> aan {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Persoonlijke transactie is gestart door {{userName}} <{{userEmail}}>",
+            "verification": "Persoonlijke handtekeningverificatie is geaccepteerd door {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Facilitatorproces is geaccepteerd door {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Handtekening",
+            "initial": "Initialen",
+            "edit": "Bewerken",
+            "styleSelection": "Stijlselectie"
+        },
+        "subtitle": "Maak uw digitale handtekeningen",
+        "tabs": {
+            "select": "Selecteren",
+            "draw": "Tekenen",
+            "upload": "Uploaden"
+        },
+        "selectTab": {
+            "description": "Bevestig uw naam en kies een handtekeningstijl.",
+            "requiredFields": "Verplichte velden.",
+            "fullName": {
+                "label": "Volledige naam",
+                "required": "*",
+                "placeholder": "Voer volledige naam in"
+            },
+            "initials": {
+                "label": "Initialen",
+                "required": "*",
+                "placeholder": "Voer initialen in"
+            }
+        },
+        "drawTab": {
+            "description": "Teken uw handtekening.",
+            "required": "*",
+            "requiredFields": "Zijn verplichte velden.",
+            "signature": "Handtekening",
+            "initials": "Initialen",
+            "clearSignature": "Wis handtekening",
+            "fullNameBox": {
+                "label": "Volledige handtekening",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Initialen",
+                "required": "*",
+                "placeholder": "Voer initialen in"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Zowel handtekening als initialen zijn vereist.",
+            "requirements": "Gebruik afbeeldingen van 300×100px voor handtekeningen en 100×100px voor initialen. Max. 300KB. Ondersteund: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Handtekening uploaden",
+                "uploadHint": "JPG, PNG (300×100px, max. 300KB)",
+                "browseButton": "Bladeren",
+                "uploadedLabel": "Handtekening ✓",
+                "changeButton": "Handtekening wijzigen",
+                "altText": "Geüploade handtekeningafbeelding"
+            },
+            "initials": {
+                "uploadLabel": "Initialen uploaden",
+                "uploadHint": "JPG, PNG (100×100px, max. 300KB)",
+                "browseButton": "Bladeren",
+                "uploadedLabel": "Initialen ✓",
+                "changeButton": "Initialen wijzigen",
+                "altText": "Geüploade initialenafbeelding"
+            }
+        },
+        "footer": {
+            "agreementText": "Ik begrijp dat ik dit document onderteken.",
+            "cancelButton": "Annuleren",
+            "adoptButton": "Handtekening overnemen en ondertekenen"
+        },
+        "errors": {
+            "requiredField": "Dit veld is verplicht",
+            "fileTooLarge": "Bestandsgrootte moet onder 300KB zijn",
+            "invalidFileType": "Alleen .png, .jpg en .jpeg bestanden worden ondersteund",
+            "signatureRequired": "Voeg een handtekening toe",
+            "initialsRequired": "Voeg initialen toe"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Stempel toevoegen",
+            "edit": "Stempel bewerken"
+        },
+        "closeButton": "Modal sluiten",
+        "fileRequirements": "Maximale grootte = 400Kb | Ondersteunde bestandstypen = .png, .jpg, .jpeg",
+        "dragDropLabel": "Sleep een afbeelding, of klik om te uploaden",
+        "previewAltText": "Stempelvoorbeeld",
+        "changeImageButton": "Afbeelding wijzigen",
+        "clearButton": "Sluiten",
+        "saveButton": "Opslaan",
+        "updateButton": "Bijwerken",
+        "errors": {
+            "fileTooLarge": "Bestandsgrootte overschrijdt de limiet van 400KB",
+            "invalidFileType": "Alleen .png, .jpg en .jpeg bestanden worden ondersteund",
+            "uploadFailed": "Afbeelding uploaden mislukt. Probeer het opnieuw."
+        }
+    },
+    "attachmentModal": {
+        "title": "Bijlage",
+        "subtitle": {
+            "hasFile": "Uw bijlage beheren",
+            "noFile": "Bijlage uploaden"
+        },
+        "uploading": {
+            "status": "Bestand uploaden...",
+            "shimmerText": "Bestand uploaden..."
+        },
+        "uploadArea": {
+            "dragging": "Zet uw bestand hier neer",
+            "default": "Upload of sleep een bestand",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (max. 10MB)",
+            "browseButton": "Bladeren door bestanden"
+        },
+        "uploadedFile": {
+            "status": "Succesvol geüpload",
+            "deleteButton": "Bestand verwijderen"
+        },
+        "buttons": {
+            "close": "Sluiten",
+            "uploading": "Uploaden...",
+            "deleting": "Verwijderen...",
+            "saved": "Bestand opgeslagen!",
+            "done": "Gereed",
+            "uploadFile": "Bestand uploaden"
+        },
+        "errors": {
+            "fileTooLarge": "Bestandsgrootte overschrijdt de limiet van 10MB",
+            "invalidFileType": "Alleen PDF, DOCX, JPG, PNG en TXT bestanden worden ondersteund",
+            "uploadFailed": "Bestand uploaden mislukt. Probeer het opnieuw.",
+            "deleteFailed": "Bestand verwijderen mislukt. Probeer het opnieuw.",
+            "noFileSelected": "Selecteer een bestand voordat u doorgaat"
+        },
+        "accessibility": {
+            "fileUpload": "Bestand uploaden",
+            "deleteFile": "Bestand verwijderen"
+        }
+    },
+    "languages": {
+        "zh_CN": "Chinees (Vereenvoudigd)",
+        "zh_TW": "Chinees (Traditioneel)",
+        "da": "Deens",
+        "nl_NL": "Nederlands",
+        "en": "Engels",
+        "fi": "Fins",
+        "fr": "Frans",
+        "de": "Duits",
+        "it": "Italiaans",
+        "ja": "Japans",
+        "ko": "Koreaans",
+        "no": "Noors",
+        "pt_BR": "Portugees (Brazilië)",
+        "ru": "Russisch",
+        "es": "Spaans",
+        "es_MX": "Spaans (Mexico)",
+        "sv": "Zweeds",
+        "th": "Thais",
+        "he": "Hebreeuws"
+    },
+    "session-expired": {
+        "title": "Sessie verlopen",
+        "description": "Deze link voor het ondertekenen van documenten is verlopen vanwege inactiviteit of een time-out van de sessie. Ga terug naar uw e-mail en klik opnieuw op de link om verder te gaan met ondertekenen."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Ondertekening voltooid!",
+        "subtitle": "Document is succesvol ondertekend",
+        "thankYou": "Bedankt voor het ondertekenen!",
+        "message": "U ontvangt een bevestigingsmail zodra het document door alle partijen is ondertekend.",
+        "passDevice": "U kunt het apparaat nu teruggeven aan <strong>{{senderName}}</strong>",
+        "continueButton": "Doorgaan"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/no/translation.json b/public/locales/no/translation.json
new file mode 100644
index 0000000..1a92f26
--- /dev/null
+++ b/public/locales/no/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Ved å klikke på <0>Jeg godtar</0> bekrefter du at du har gjennomgått <1>Opplysning om elektronisk registrering og signatur</1>, og samtykker til bruk av elektroniske registreringer og signaturer ved gjennomgang og utførelse av dette dokumentet.",
+        "note": "Merk:",
+        "noteText": "Å godta dette betyr ikke at du signerer dokumentet umiddelbart. Det tillater deg bare å gjennomgå det elektronisk. Du vil få muligheten til å gjennomgå dokumentet fullstendig før du signerer."
+    },
+    "buttons": {
+        "agree": "Jeg godtar",
+        "processing": "Behandler...",
+        "close": "Lukk",
+        "downloadPdf": "Last ned PDF",
+        "downloading": "Laster ned..."
+    },
+    "header": {
+        "aiSummary": "AI-sammendrag",
+        "completeSign": "Fullfør signering",
+        "sign": "Signer",
+        "processing": "Behandler...",
+        "options": "Last ned"
+    },
+    "menu": {
+        "downloadPdf": "Last ned PDF",
+        "auditTrail": "Revisjonsspor",
+        "reassignSigner": "Tilordne signatar på nytt",
+        "cancelTransaction": "Avbryt transaksjon",
+        "viewTerms": "Se vilkår og betingelser",
+        "helpSupport": "Hjelp og støtte",
+        "about": "Om SME"
+    },
+    "sidebar": {
+        "documents": "Dokumenter",
+        "pages": "Sider: {{count}}",
+        "noDocuments": "Ingen tilgjengelige dokumenter."
+    },
+    "footer": {
+        "readyTitle": "Klar til å fullføre?",
+        "readyDesc": "Du har fylt ut de obligatoriske feltene. Gå gjennom arbeidet ditt, og velg deretter Fullfør.",
+        "finish": "Fullfør",
+        "submitting": "Sender inn...",
+        "start": "Start",
+        "next": "Neste",
+        "agreementText": "Ved å signere godtar jeg Sign Made Easy's <0>vilkår og betingelser.</0>"
+    },
+    "completion": {
+        "complete": {
+            "hit": "Helt ferdig!",
+            "title": "Takk for at du signerte",
+            "message": "Dokumentet ditt er nå fullført og sikkert lagret. Vi har sendt deg en kopi på e-post."
+        },
+        "declined": {
+            "hit": "Handling avbrutt!",
+            "title": "Kanskje neste gang!",
+            "message": "Forespørselen din er avvist."
+        },
+        "cancelled": {
+            "hit": "Handling avbrutt!",
+            "title": "Kanskje neste gang!",
+            "message": "Forespørselen din er avbrutt."
+        },
+        "download": "Last ned",
+        "downloading": "Laster ned...",
+        "downloadSuccess": "Fil lastet ned.",
+        "downloadOptions": {
+            "pdf": "PDF-dokument",
+            "audit": "Revisjonsspor",
+            "selectFormat": "Velg format"
+        },
+        "downloadError": "Nedlasting mislyktes. Prøv igjen.",
+        "appsTitle": "Øk effektiviteten med appene våre",
+        "formsTitle": "Generer skjemaer enkelt",
+        "docsTitle": "Generer dokumenter (fakturaer, rapporter, tilbud)",
+        "tryNow": "Prøv nå",
+        "footerText": "Opphavsrett 2026 Sign Made Easy. Alle rettigheter forbeholdt.<0>Personvernerklæring</0> | <1>Retningslinjer for rimelig bruk</1>"
+    },
+    "reassign": {
+        "title": "Tilordne signatar på nytt",
+        "successSubtitle": "Dokumentet er blitt tilordnet på nytt",
+        "successTitle": "Takk!",
+        "successMessage": "Dokumentet er blitt tilordnet den nye signataren.",
+        "fields": {
+            "firstName": "Fornavn",
+            "lastName": "Etternavn",
+            "email": "E-post",
+            "language": "Språk",
+            "message": "Valgfri melding"
+        },
+        "placeholders": {
+            "firstName": "Skriv inn fornavnet ditt",
+            "lastName": "Skriv inn etternavnet ditt",
+            "email": "your.email@example.com",
+            "message": "Skriv meldingen din her..."
+        },
+        "buttons": {
+            "submit": "Send inn",
+            "submitting": "Sender inn...",
+            "cancel": "Avbryt"
+        },
+        "errors": {
+            "firstNameRequired": "Fornavn er påkrevd",
+            "firstNameMin": "Fornavn må være minst 2 tegn",
+            "lastNameRequired": "Etternavn er påkrevd",
+            "lastNameMin": "Etternavn må være minst 2 tegn",
+            "emailRequired": "E-post er påkrevd",
+            "emailInvalid": "Ugyldig e-postadresse"
+        }
+    },
+    "cancelModal": {
+        "title": "Avbryt transaksjon",
+        "description": "Er du sikker på at du vil avbryte denne transaksjonen? Oppgi årsaken til avbruddet nedenfor.",
+        "placeholder": "Vennligst oppgi årsaken til avbruddet...",
+        "buttons": {
+            "no": "Nei, ikke avbryt",
+            "yes": "Ja, avbryt den"
+        },
+        "errors": {
+            "reasonRequired": "Årsak til avbrudd er påkrevd"
+        },
+        "inPersonSuccess": {
+            "title": "Avbryt transaksjon",
+            "message": "Transaksjonen ble kansellert. Bekreftelses-e-poster ble sendt.",
+            "passBackDevice": "Du kan nå gi enheten tilbake til {{senderName}}.",
+            "continueButton": "Fortsett"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Transaksjonsrevisjon",
+        "meta.transaction_id": "Transaksjons-ID",
+        "meta.transaction_status": "Transaksjonsstatus",
+        "meta.files": "Filer",
+        "audit.title": "Fullt revisjonsspor",
+        "audit.description": "Oppdater emne og melding nedenfor for en egendefinert melding.",
+        "table.header.actions": "Handlinger",
+        "table.header.language": "Språk",
+        "table.header.ip_address": "IP-adresse",
+        "table.header.date": "Dato",
+        "status.completed": "Fullført",
+        "status.pending": "Venter",
+        "status.failed": "Mislyktes",
+        "action.created": "Opprettet",
+        "action.updated": "Oppdatert",
+        "action.deleted": "Slettet",
+        "action.viewed": "Vist",
+        "action.signed": "Signert",
+        "action.uploaded": "Lastet opp",
+        "action.downloaded": "Lastet ned",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Transaksjonsrevisjon",
+        "meta": {
+            "transactionId": "Transaksjons-ID",
+            "transactionStatus": "Transaksjonsstatus",
+            "files": "Filer"
+        },
+        "audit": {
+            "title": "Fullt revisjonsspor",
+            "description": "Oppdater emne og melding nedenfor for en egendefinert melding."
+        },
+        "table": {
+            "actions": "Handlinger",
+            "language": "Språk",
+            "ipAddress": "IP-adresse",
+            "date": "Dato"
+        },
+        "status": {
+            "completed": "Fullført",
+            "pending": "Venter",
+            "failed": "Mislyktes"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transaksjon ble opprettet av {{userName}} <{{userEmail}}>",
+            "sent": "Transaksjon ble sendt av {{userName}} <{{userEmail}}>",
+            "cancelled": "Transaksjon ble kansellert av {{userName}} <{{userEmail}}>",
+            "edited": "Transaksjon ble redigert av {{userName}} <{{userEmail}}>",
+            "viewed": "Transaksjon ble sett av {{userName}} <{{userEmail}}>",
+            "signed": "Transaksjon ble signert av {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Transaksjonssignatur ble avvist av {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Elektronisk opptak og signaturavsløring ble akseptert av {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> oppdaterte språket sitt til {{language}}"
+        },
+        "invitation": {
+            "sent": "Invitasjons-e-post sendt til {{userName}} <{{userEmail}}>",
+            "view": "Invitasjon til å vise dokumentet er sendt til {{userName}} <{{userEmail}}>",
+            "resent": "Invitasjons-e-post sendt på nytt til {{recipientName}} <{{recipientEmail}}> av {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Signatar ble tildelt på nytt av {{fromName}} <{{fromEmail}}> til {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> ble tildelt på nytt av {{fromName}} <{{fromEmail}}> til {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Personlig transaksjon ble startet av {{userName}} <{{userEmail}}>",
+            "verification": "Personlig signaturverifisering ble akseptert av {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Fasilitatorprosess ble akseptert av {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Signatur",
+            "initial": "Initialer",
+            "edit": "Rediger",
+            "styleSelection": "Stilvalg"
+        },
+        "subtitle": "Opprett dine digitale signaturer",
+        "tabs": {
+            "select": "Velg",
+            "draw": "Tegn",
+            "upload": "Last opp"
+        },
+        "selectTab": {
+            "description": "Bekreft navnet ditt og velg en signaturstil.",
+            "requiredFields": "Obligatoriske felt.",
+            "fullName": {
+                "label": "Fullt navn",
+                "required": "*",
+                "placeholder": "Skriv inn fullt navn"
+            },
+            "initials": {
+                "label": "Initialer",
+                "required": "*",
+                "placeholder": "Skriv inn initialer"
+            }
+        },
+        "drawTab": {
+            "description": "Tegn signaturen din.",
+            "required": "*",
+            "requiredFields": "Er obligatoriske felt.",
+            "signature": "Signatur",
+            "initials": "Initialer",
+            "clearSignature": "Tøm signatur",
+            "fullNameBox": {
+                "label": "Full signatur",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Initialer",
+                "required": "*",
+                "placeholder": "Skriv inn initialer"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Både signatur og initialer er påkrevd.",
+            "requirements": "Bruk bilder på 300×100px for signaturer og 100×100px for initialer. Maks 300KB. Støttet: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Last opp signatur",
+                "uploadHint": "JPG, PNG (300×100px, maks 300KB)",
+                "browseButton": "Bla gjennom",
+                "uploadedLabel": "Signatur ✓",
+                "changeButton": "Endre signatur",
+                "altText": "Opplastet signaturbilde"
+            },
+            "initials": {
+                "uploadLabel": "Last opp initialer",
+                "uploadHint": "JPG, PNG (100×100px, maks 300KB)",
+                "browseButton": "Bla gjennom",
+                "uploadedLabel": "Initialer ✓",
+                "changeButton": "Endre initialer",
+                "altText": "Opplastet initialbilde"
+            }
+        },
+        "footer": {
+            "agreementText": "Jeg forstår at jeg signerer dette dokumentet.",
+            "cancelButton": "Avbryt",
+            "adoptButton": "Adopter signatur og signer"
+        },
+        "errors": {
+            "requiredField": "Dette feltet er påkrevd",
+            "fileTooLarge": "Filstørrelsen må være under 300KB",
+            "invalidFileType": "Kun .png, .jpg og .jpeg filer støttes",
+            "signatureRequired": "Vennligst legg til en signatur",
+            "initialsRequired": "Vennligst legg til initialer"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Legg til stempel",
+            "edit": "Rediger stempel"
+        },
+        "closeButton": "Lukk modal",
+        "fileRequirements": "Maksimal størrelse = 400Kb | Støttede filtyper = .png, .jpg, .jpeg",
+        "dragDropLabel": "Dra og slipp et bilde, eller klikk for å laste opp",
+        "previewAltText": "Stempelforvisning",
+        "changeImageButton": "Endre bilde",
+        "clearButton": "Lukk",
+        "saveButton": "Lagre",
+        "updateButton": "Oppdater",
+        "errors": {
+            "fileTooLarge": "Filstørrelsen overstiger grensen på 400KB",
+            "invalidFileType": "Kun .png, .jpg og .jpeg filer støttes",
+            "uploadFailed": "Kunne ikke laste opp bildet. Prøv igjen."
+        }
+    },
+    "attachmentModal": {
+        "title": "Vedlegg",
+        "subtitle": {
+            "hasFile": "Administrer vedlegget ditt",
+            "noFile": "Last opp vedlegg"
+        },
+        "uploading": {
+            "status": "Laster opp fil...",
+            "shimmerText": "Laster opp fil..."
+        },
+        "uploadArea": {
+            "dragging": "Slipp filen her",
+            "default": "Last opp eller dra og slipp fil",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (maks 10MB)",
+            "browseButton": "Bla gjennom filer"
+        },
+        "uploadedFile": {
+            "status": "Opplastet vellykket",
+            "deleteButton": "Slett fil"
+        },
+        "buttons": {
+            "close": "Lukk",
+            "uploading": "Laster opp...",
+            "deleting": "Sletter...",
+            "saved": "Fil lagret!",
+            "done": "Ferdig",
+            "uploadFile": "Last opp fil"
+        },
+        "errors": {
+            "fileTooLarge": "Filstørrelsen overstiger grensen på 10MB",
+            "invalidFileType": "Kun PDF, DOCX, JPG, PNG og TXT filer støttes",
+            "uploadFailed": "Kunne ikke laste opp filen. Prøv igjen.",
+            "deleteFailed": "Kunne ikke slette filen. Prøv igjen.",
+            "noFileSelected": "Vennligst velg en fil før du fortsetter"
+        },
+        "accessibility": {
+            "fileUpload": "Filopplasting",
+            "deleteFile": "Slett fil"
+        }
+    },
+    "languages": {
+        "zh_CN": "Kinesisk (Forenklet)",
+        "zh_TW": "Kinesisk (Tradisjonell)",
+        "da": "Dansk",
+        "nl_NL": "Nederlandsk",
+        "en": "Engelsk",
+        "fi": "Finsk",
+        "fr": "Fransk",
+        "de": "Tysk",
+        "it": "Italiensk",
+        "ja": "Japansk",
+        "ko": "Koreansk",
+        "no": "Norsk",
+        "pt_BR": "Portugisisk (Brasil)",
+        "ru": "Russisk",
+        "es": "Spansk",
+        "es_MX": "Spansk (Mexico)",
+        "sv": "Svensk",
+        "th": "Thai",
+        "he": "Hebraisk"
+    },
+    "session-expired": {
+        "title": "Økten har utløpt",
+        "description": "Denne dokumentunderskriftslenken har utløpt på grunn av inaktivitet eller tidsavbrudd for økten. Vennligst gå tilbake til e-posten din og klikk på lenken igjen for å fortsette å underskrive."
+    },
+    "inPersonComplete": {
+    "title": "🎉 Signering fullført!",
+    "subtitle": "Dokumentet er signert",
+    "thankYou": "Takk for at du signerte!",
+    "message": "Du vil motta en bekreftelses-e-post når dokumentet er signert av alle parter.",
+    "passDevice": "Du kan nå gi enheten tilbake til <strong>{{senderName}}</strong>",
+    "continueButton": "Fortsett"
+  }
+}
\ No newline at end of file
diff --git a/public/locales/pt_BR/translation.json b/public/locales/pt_BR/translation.json
new file mode 100644
index 0000000..2987af3
--- /dev/null
+++ b/public/locales/pt_BR/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Ao clicar em <0>Eu concordo</0>, você confirma que revisou a <1>Divulgação de Registro Eletrônico e Assinatura</1> e consente com o uso de registros e assinaturas eletrônicas na revisão e execução deste documento.",
+        "note": "Observação:",
+        "noteText": "Concordar com isso não significa que você está assinando o documento imediatamente. Apenas permite que você o revise eletronicamente. Você terá a chance de revisar o documento por completo antes de assinar."
+    },
+    "buttons": {
+        "agree": "Eu concordo",
+        "processing": "Processando...",
+        "close": "Fechar",
+        "downloadPdf": "Baixar PDF",
+        "downloading": "Baixando..."
+    },
+    "header": {
+        "aiSummary": "Resumo de IA",
+        "completeSign": "Assinar completamente",
+        "sign": "Assinar",
+        "processing": "Processando...",
+        "options": "Baixar"
+    },
+    "menu": {
+        "downloadPdf": "Baixar PDF",
+        "auditTrail": "Trilha de Auditoria",
+        "reassignSigner": "Reatribuir Signatário",
+        "cancelTransaction": "Cancelar Transação",
+        "viewTerms": "Ver Termos e Condições",
+        "helpSupport": "Ajuda e Suporte",
+        "about": "Sobre a SME"
+    },
+    "sidebar": {
+        "documents": "Documentos",
+        "pages": "Páginas: {{count}}",
+        "noDocuments": "Nenhum documento disponível."
+    },
+    "footer": {
+        "readyTitle": "Pronto para finalizar?",
+        "readyDesc": "Você preencheu os campos obrigatórios. Revise seu trabalho e selecione Finalizar.",
+        "finish": "Finalizar",
+        "submitting": "Enviando...",
+        "start": "Iniciar",
+        "next": "Próximo",
+        "agreementText": "Ao assinar, concordo com os <0>Termos e Condições</0> do Sign Made Easy."
+    },
+    "completion": {
+        "complete": {
+            "hit": "Tudo pronto!",
+            "title": "Obrigado por assinar",
+            "message": "Seu documento agora está completo e armazenado com segurança. Enviamos uma cópia para seu e-mail."
+        },
+        "declined": {
+            "hit": "Ação cancelada!",
+            "title": "Talvez na próxima!",
+            "message": "Sua solicitação foi recusada."
+        },
+        "cancelled": {
+            "hit": "Ação cancelada!",
+            "title": "Talvez na próxima!",
+            "message": "Sua solicitação foi cancelada."
+        },
+        "download": "Baixar",
+        "downloading": "Baixando...",
+        "downloadSuccess": "Arquivo baixado com sucesso.",
+        "downloadOptions": {
+            "pdf": "Documento PDF",
+            "audit": "Trilhas de Auditoria",
+            "selectFormat": "Selecionar formato"
+        },
+        "downloadError": "Falha no download do arquivo. Tente novamente.",
+        "appsTitle": "Aumente a eficiência com nossos aplicativos",
+        "formsTitle": "Gere formulários com facilidade",
+        "docsTitle": "Gere documentos (faturas, relatórios, cotações)",
+        "tryNow": "Experimente agora",
+        "footerText": "Copyright 2026 Sign Made Easy. Todos os direitos reservados.<0>Política de Privacidade</0> | <1>Política de Uso Razoável</1>"
+    },
+    "reassign": {
+        "title": "Reatribuir Signatário",
+        "successSubtitle": "Documento foi reatribuído com sucesso",
+        "successTitle": "Obrigado!",
+        "successMessage": "O documento foi reatribuído com sucesso ao novo signatário.",
+        "fields": {
+            "firstName": "Nome",
+            "lastName": "Sobrenome",
+            "email": "E-mail",
+            "language": "Idioma",
+            "message": "Mensagem Opcional"
+        },
+        "placeholders": {
+            "firstName": "Digite seu nome",
+            "lastName": "Digite seu sobrenome",
+            "email": "your.email@example.com",
+            "message": "Escreva sua mensagem aqui..."
+        },
+        "buttons": {
+            "submit": "Enviar",
+            "submitting": "Enviando...",
+            "cancel": "Cancelar"
+        },
+        "errors": {
+            "firstNameRequired": "O nome é obrigatório",
+            "firstNameMin": "O nome deve ter pelo menos 2 caracteres",
+            "lastNameRequired": "O sobrenome é obrigatório",
+            "lastNameMin": "O sobrenome deve ter pelo menos 2 caracteres",
+            "emailRequired": "O e-mail é obrigatório",
+            "emailInvalid": "Endereço de e-mail inválido"
+        }
+    },
+    "cancelModal": {
+        "title": "Cancelar Transação",
+        "description": "Tem certeza de que deseja cancelar esta transação? Forneça o motivo do cancelamento abaixo.",
+        "placeholder": "Forneça o motivo do cancelamento...",
+        "buttons": {
+            "no": "Não, não cancelar",
+            "yes": "Sim, cancelar"
+        },
+        "errors": {
+            "reasonRequired": "O motivo do cancelamento é obrigatório"
+        },
+        "inPersonSuccess": {
+            "title": "Cancelar Transação",
+            "message": "A transação foi cancelada com sucesso. E-mails de confirmação foram enviados.",
+            "passBackDevice": "Agora você pode devolver o dispositivo para {{senderName}}.",
+            "continueButton": "Continuar"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Auditoria de Transação",
+        "meta.transaction_id": "ID da Transação",
+        "meta.transaction_status": "Status da Transação",
+        "meta.files": "Arquivos",
+        "audit.title": "Trilha de Auditoria Completa",
+        "audit.description": "Atualize o Assunto e a Mensagem abaixo para uma mensagem personalizada.",
+        "table.header.actions": "Ações",
+        "table.header.language": "Idioma",
+        "table.header.ip_address": "Endereço IP",
+        "table.header.date": "Data",
+        "status.completed": "Concluído",
+        "status.pending": "Pendente",
+        "status.failed": "Falhou",
+        "action.created": "Criado",
+        "action.updated": "Atualizado",
+        "action.deleted": "Excluído",
+        "action.viewed": "Visualizado",
+        "action.signed": "Assinado",
+        "action.uploaded": "Enviado",
+        "action.downloaded": "Baixado",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Auditoria de Transação",
+        "meta": {
+            "transactionId": "ID da Transação",
+            "transactionStatus": "Status da Transação",
+            "files": "Arquivos"
+        },
+        "audit": {
+            "title": "Trilha de Auditoria Completa",
+            "description": "Atualize o Assunto e a Mensagem abaixo para uma mensagem personalizada."
+        },
+        "table": {
+            "actions": "Ações",
+            "language": "Idioma",
+            "ipAddress": "Endereço IP",
+            "date": "Data"
+        },
+        "status": {
+            "completed": "Concluído",
+            "pending": "Pendente",
+            "failed": "Falhou"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transação foi criada por {{userName}} <{{userEmail}}>",
+            "sent": "Transação foi enviada por {{userName}} <{{userEmail}}>",
+            "cancelled": "Transação foi cancelada por {{userName}} <{{userEmail}}>",
+            "edited": "Transação foi editada por {{userName}} <{{userEmail}}>",
+            "viewed": "Transação foi visualizada por {{userName}} <{{userEmail}}>",
+            "signed": "Transação foi assinada por {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Assinatura da transação foi recusada por {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Divulgação de Registro Eletrônico e Assinatura foi aceita por {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> atualizou seu idioma para {{language}}"
+        },
+        "invitation": {
+            "sent": "E-mail de convite enviado para {{userName}} <{{userEmail}}>",
+            "view": "Convite para visualizar o documento enviado para {{userName}} <{{userEmail}}>",
+            "resent": "E-mail de convite reenviado para {{recipientName}} <{{recipientEmail}}> por {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Signatário foi reatribuído por {{fromName}} <{{fromEmail}}> para {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> foi reatribuído por {{fromName}} <{{fromEmail}}> para {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Transação presencial foi iniciada por {{userName}} <{{userEmail}}>",
+            "verification": "Verificação de assinatura presencial foi aceita por {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Processo do Facilitador foi aceito por {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Assinatura",
+            "initial": "Inicial",
+            "edit": "Editar",
+            "styleSelection": "Seleção de Estilo"
+        },
+        "subtitle": "Crie suas assinaturas digitais",
+        "tabs": {
+            "select": "Selecionar",
+            "draw": "Desenhar",
+            "upload": "Enviar"
+        },
+        "selectTab": {
+            "description": "Confirme seu nome e escolha um estilo de assinatura.",
+            "requiredFields": "Campos obrigatórios.",
+            "fullName": {
+                "label": "Nome Completo",
+                "required": "*",
+                "placeholder": "Digite o nome completo"
+            },
+            "initials": {
+                "label": "Iniciais",
+                "required": "*",
+                "placeholder": "Digite as iniciais"
+            }
+        },
+        "drawTab": {
+            "description": "Desenhe sua assinatura.",
+            "required": "*",
+            "requiredFields": "São campos obrigatórios.",
+            "signature": "Assinatura",
+            "initials": "Iniciais",
+            "clearSignature": "Limpar assinatura",
+            "fullNameBox": {
+                "label": "Assinatura completa",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Iniciais",
+                "required": "*",
+                "placeholder": "Digite as iniciais"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Tanto a assinatura quanto as iniciais são obrigatórias.",
+            "requirements": "Use imagens de 300×100px para assinaturas e 100×100px para iniciais. Máx. 300KB. Suportado: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Enviar Assinatura",
+                "uploadHint": "JPG, PNG (300×100px, máx. 300KB)",
+                "browseButton": "Procurar",
+                "uploadedLabel": "Assinatura ✓",
+                "changeButton": "Alterar Assinatura",
+                "altText": "Imagem de assinatura enviada"
+            },
+            "initials": {
+                "uploadLabel": "Enviar Iniciais",
+                "uploadHint": "JPG, PNG (100×100px, máx. 300KB)",
+                "browseButton": "Procurar",
+                "uploadedLabel": "Iniciais ✓",
+                "changeButton": "Alterar Iniciais",
+                "altText": "Imagem de iniciais enviada"
+            }
+        },
+        "footer": {
+            "agreementText": "Entendo que estou assinando este documento.",
+            "cancelButton": "Cancelar",
+            "adoptButton": "Adotar Assinatura e Assinar"
+        },
+        "errors": {
+            "requiredField": "Este campo é obrigatório",
+            "fileTooLarge": "O tamanho do arquivo deve ser inferior a 300KB",
+            "invalidFileType": "Apenas arquivos .png, .jpg e .jpeg são suportados",
+            "signatureRequired": "Por favor, adicione uma assinatura",
+            "initialsRequired": "Por favor, adicione iniciais"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Adicionar Carimbo",
+            "edit": "Editar Carimbo"
+        },
+        "closeButton": "Fechar modal",
+        "fileRequirements": "Tamanho máximo = 400Kb | Tipos de arquivo suportados = .png, .jpg, .jpeg",
+        "dragDropLabel": "Arraste e solte uma imagem, ou clique para enviar",
+        "previewAltText": "Prévia do Carimbo",
+        "changeImageButton": "Alterar imagem",
+        "clearButton": "Fechar",
+        "saveButton": "Salvar",
+        "updateButton": "Atualizar",
+        "errors": {
+            "fileTooLarge": "O tamanho do arquivo excede o limite de 400KB",
+            "invalidFileType": "Apenas arquivos .png, .jpg e .jpeg são suportados",
+            "uploadFailed": "Falha ao enviar a imagem. Por favor, tente novamente."
+        }
+    },
+    "attachmentModal": {
+        "title": "Anexo",
+        "subtitle": {
+            "hasFile": "Gerenciar seu anexo",
+            "noFile": "Enviar anexo"
+        },
+        "uploading": {
+            "status": "Enviando arquivo...",
+            "shimmerText": "Enviando arquivo..."
+        },
+        "uploadArea": {
+            "dragging": "Solte seu arquivo aqui",
+            "default": "Enviar ou arrastar e soltar arquivo",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (máx. 10MB)",
+            "browseButton": "Procurar Arquivos"
+        },
+        "uploadedFile": {
+            "status": "Enviado com sucesso",
+            "deleteButton": "Excluir arquivo"
+        },
+        "buttons": {
+            "close": "Fechar",
+            "uploading": "Enviando...",
+            "deleting": "Excluindo...",
+            "saved": "Arquivo Salvo!",
+            "done": "Concluído",
+            "uploadFile": "Enviar Arquivo"
+        },
+        "errors": {
+            "fileTooLarge": "O tamanho do arquivo excede o limite de 10MB",
+            "invalidFileType": "Apenas arquivos PDF, DOCX, JPG, PNG e TXT são suportados",
+            "uploadFailed": "Falha ao enviar o arquivo. Por favor, tente novamente.",
+            "deleteFailed": "Falha ao excluir o arquivo. Por favor, tente novamente.",
+            "noFileSelected": "Por favor, selecione um arquivo antes de prosseguir"
+        },
+        "accessibility": {
+            "fileUpload": "Envio de arquivo",
+            "deleteFile": "Excluir arquivo"
+        }
+    },
+    "languages": {
+        "zh_CN": "Chinês (Simplificado)",
+        "zh_TW": "Chinês (Tradicional)",
+        "da": "Dinamarquês",
+        "nl_NL": "Holandês",
+        "en": "Inglês",
+        "fi": "Finlandês",
+        "fr": "Francês",
+        "de": "Alemão",
+        "it": "Italiano",
+        "ja": "Japonês",
+        "ko": "Coreano",
+        "no": "Norueguês",
+        "pt_BR": "Português (Brasil)",
+        "ru": "Russo",
+        "es": "Espanhol",
+        "es_MX": "Espanhol (México)",
+        "sv": "Sueco",
+        "th": "Tailandês",
+        "he": "Hebraico"
+    },
+    "session-expired": {
+        "title": "Sessão expirada",
+        "description": "Este link de assinatura de documento expirou devido à inatividade ou tempo limite da sessão. Por favor, volte ao seu e-mail e clique no link novamente para continuar assinando."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Assinatura concluída!",
+        "subtitle": "Documento foi assinado com sucesso",
+        "thankYou": "Obrigado por assinar!",
+        "message": "Você receberá um e-mail de confirmação assim que o documento for assinado por todas as partes.",
+        "passDevice": "Agora você pode devolver o dispositivo para <strong>{{senderName}}</strong>",
+        "continueButton": "Continuar"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
new file mode 100644
index 0000000..3dd896a
--- /dev/null
+++ b/public/locales/ru/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Нажимая <0>Я соглашаюсь</0>, вы подтверждаете, что ознакомились с <1>Раскрытием информации об электронных записях и подписях</1> и соглашаетесь на использование электронных записей и подписей при просмотре и подписании этого документа.",
+        "note": "Примечание:",
+        "noteText": "Согласие с этим не означает, что вы немедленно подписываете документ. Это позволяет вам только просмотреть его в электронном виде. У вас будет возможность полностью ознакомиться с документом перед подписанием."
+    },
+    "buttons": {
+        "agree": "Я соглашаюсь",
+        "processing": "Обработка...",
+        "close": "Закрыть",
+        "downloadPdf": "Скачать PDF",
+        "downloading": "Загрузка..."
+    },
+    "header": {
+        "aiSummary": "Резюме ИИ",
+        "completeSign": "Завершить подписание",
+        "sign": "Подписать",
+        "processing": "Обработка...",
+        "options": "Скачать"
+    },
+    "menu": {
+        "downloadPdf": "Скачать PDF",
+        "auditTrail": "Журнал аудита",
+        "reassignSigner": "Переназначить подписанта",
+        "cancelTransaction": "Отменить транзакцию",
+        "viewTerms": "Просмотреть условия",
+        "helpSupport": "Помощь и поддержка",
+        "about": "О SME"
+    },
+    "sidebar": {
+        "documents": "Документы",
+        "pages": "Страниц: {{count}}",
+        "noDocuments": "Нет доступных документов."
+    },
+    "footer": {
+        "readyTitle": "Готовы завершить?",
+        "readyDesc": "Вы заполнили обязательные поля. Проверьте свою работу и выберите Завершить.",
+        "finish": "Завершить",
+        "submitting": "Отправка...",
+        "start": "Начать",
+        "next": "Далее",
+        "agreementText": "Подписывая, я соглашаюсь с <0>Условиями</0> Sign Made Easy."
+    },
+    "completion": {
+        "complete": {
+            "hit": "Готово!",
+            "title": "Спасибо за подписание",
+            "message": "Ваш документ теперь завершен и надежно сохранен. Мы отправили вам копию по электронной почте."
+        },
+        "declined": {
+            "hit": "Действие отменено!",
+            "title": "Может быть, в следующий раз!",
+            "message": "Ваш запрос был отклонен."
+        },
+        "cancelled": {
+            "hit": "Действие отменено!",
+            "title": "Может быть, в следующий раз!",
+            "message": "Ваш запрос был отменен."
+        },
+        "download": "Скачать",
+        "downloading": "Загрузка...",
+        "downloadSuccess": "Файл успешно загружен.",
+        "downloadOptions": {
+            "pdf": "PDF документ",
+            "audit": "Журналы аудита",
+            "selectFormat": "Выбрать формат"
+        },
+        "downloadError": "Не удалось загрузить файл. Пожалуйста, попробуйте снова.",
+        "appsTitle": "Повысьте эффективность с нашими приложениями",
+        "formsTitle": "Легко создавайте формы",
+        "docsTitle": "Создавайте документы (счета, отчеты, предложения)",
+        "tryNow": "Попробовать сейчас",
+        "footerText": "Авторские права 2026 Sign Made Easy. Все права защищены.<0>Политика конфиденциальности</0> | <1>Политика добросовестного использования</1>"
+    },
+    "reassign": {
+        "title": "Переназначить подписанта",
+        "successSubtitle": "Документ успешно переназначен",
+        "successTitle": "Спасибо!",
+        "successMessage": "Документ успешно переназначен новому подписанту.",
+        "fields": {
+            "firstName": "Имя",
+            "lastName": "Фамилия",
+            "email": "Электронная почта",
+            "language": "Язык",
+            "message": "Дополнительное сообщение"
+        },
+        "placeholders": {
+            "firstName": "Введите ваше имя",
+            "lastName": "Введите вашу фамилию",
+            "email": "your.email@example.com",
+            "message": "Напишите ваше сообщение здесь..."
+        },
+        "buttons": {
+            "submit": "Отправить",
+            "submitting": "Отправка...",
+            "cancel": "Отмена"
+        },
+        "errors": {
+            "firstNameRequired": "Имя обязательно",
+            "firstNameMin": "Имя должно содержать не менее 2 символов",
+            "lastNameRequired": "Фамилия обязательна",
+            "lastNameMin": "Фамилия должна содержать не менее 2 символов",
+            "emailRequired": "Электронная почта обязательна",
+            "emailInvalid": "Неверный адрес электронной почты"
+        }
+    },
+    "cancelModal": {
+        "title": "Отменить транзакцию",
+        "description": "Вы уверены, что хотите отменить эту транзакцию? Укажите причину отмены ниже.",
+        "placeholder": "Пожалуйста, укажите причину отмены...",
+        "buttons": {
+            "no": "Нет, не отменять",
+            "yes": "Да, отменить"
+        },
+        "errors": {
+            "reasonRequired": "Необходимо указать причину отмены"
+        },
+        "inPersonSuccess": {
+            "title": "Отменить транзакцию",
+            "message": "Транзакция успешно отменена. Письма с подтверждением отправлены.",
+            "passBackDevice": "Теперь вы можете вернуть устройство {{senderName}}.",
+            "continueButton": "Продолжить"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Аудит транзакций",
+        "meta.transaction_id": "ID транзакции",
+        "meta.transaction_status": "Статус транзакции",
+        "meta.files": "Файлы",
+        "audit.title": "Полный журнал аудита",
+        "audit.description": "Обновите тему и сообщение ниже для настраиваемого сообщения.",
+        "table.header.actions": "Действия",
+        "table.header.language": "Язык",
+        "table.header.ip_address": "IP-адрес",
+        "table.header.date": "Дата",
+        "status.completed": "Завершено",
+        "status.pending": "Ожидает",
+        "status.failed": "Ошибка",
+        "action.created": "Создано",
+        "action.updated": "Обновлено",
+        "action.deleted": "Удалено",
+        "action.viewed": "Просмотрено",
+        "action.signed": "Подписано",
+        "action.uploaded": "Загружено",
+        "action.downloaded": "Скачано",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Аудит транзакций",
+        "meta": {
+            "transactionId": "ID транзакции",
+            "transactionStatus": "Статус транзакции",
+            "files": "Файлы"
+        },
+        "audit": {
+            "title": "Полный журнал аудита",
+            "description": "Обновите тему и сообщение ниже для настраиваемого сообщения."
+        },
+        "table": {
+            "actions": "Действия",
+            "language": "Язык",
+            "ipAddress": "IP-адрес",
+            "date": "Дата"
+        },
+        "status": {
+            "completed": "Завершено",
+            "pending": "Ожидает",
+            "failed": "Ошибка"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Транзакция создана {{userName}} <{{userEmail}}>",
+            "sent": "Транзакция отправлена {{userName}} <{{userEmail}}>",
+            "cancelled": "Транзакция отменена {{userName}} <{{userEmail}}>",
+            "edited": "Транзакция отредактирована {{userName}} <{{userEmail}}>",
+            "viewed": "Транзакция просмотрена {{userName}} <{{userEmail}}>",
+            "signed": "Транзакция подписана {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Подпись транзакции отклонена {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Раскрытие электронной записи и подписи принято {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> обновил язык на {{language}}"
+        },
+        "invitation": {
+            "sent": "Приглашение по электронной почте отправлено {{userName}} <{{userEmail}}>",
+            "view": "Приглашение просмотреть документ отправлено {{userName}} <{{userEmail}}>",
+            "resent": "Приглашение по электронной почте повторно отправлено {{recipientName}} <{{recipientEmail}}> от {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Подписывающий переназначен {{fromName}} <{{fromEmail}}> на {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> был переназначен {{fromName}} <{{fromEmail}}> на {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Личная транзакция начата {{userName}} <{{userEmail}}>",
+            "verification": "Проверка личной подписи принята {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Процесс фасилитатора принят {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Подпись",
+            "initial": "Инициалы",
+            "edit": "Редактировать",
+            "styleSelection": "Выбор стиля"
+        },
+        "subtitle": "Создайте свои цифровые подписи",
+        "tabs": {
+            "select": "Выбрать",
+            "draw": "Рисовать",
+            "upload": "Загрузить"
+        },
+        "selectTab": {
+            "description": "Подтвердите свое имя и выберите стиль подписи.",
+            "requiredFields": "Обязательные поля.",
+            "fullName": {
+                "label": "Полное имя",
+                "required": "*",
+                "placeholder": "Введите полное имя"
+            },
+            "initials": {
+                "label": "Инициалы",
+                "required": "*",
+                "placeholder": "Введите инициалы"
+            }
+        },
+        "drawTab": {
+            "description": "Нарисуйте свою подпись.",
+            "required": "*",
+            "requiredFields": "Являются обязательными полями.",
+            "signature": "Подпись",
+            "initials": "Инициалы",
+            "clearSignature": "Очистить подпись",
+            "fullNameBox": {
+                "label": "Полная подпись",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Инициалы",
+                "required": "*",
+                "placeholder": "Введите инициалы"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Требуются как подпись, так и инициалы.",
+            "requirements": "Используйте изображения 300×100px для подписей и 100×100px для инициалов. Макс. 300KB. Поддерживается: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Загрузить подпись",
+                "uploadHint": "JPG, PNG (300×100px, макс. 300KB)",
+                "browseButton": "Обзор",
+                "uploadedLabel": "Подпись ✓",
+                "changeButton": "Изменить подпись",
+                "altText": "Загруженное изображение подписи"
+            },
+            "initials": {
+                "uploadLabel": "Загрузить инициалы",
+                "uploadHint": "JPG, PNG (100×100px, макс. 300KB)",
+                "browseButton": "Обзор",
+                "uploadedLabel": "Инициалы ✓",
+                "changeButton": "Изменить инициалы",
+                "altText": "Загруженное изображение инициалов"
+            }
+        },
+        "footer": {
+            "agreementText": "Я понимаю, что подписываю этот документ.",
+            "cancelButton": "Отмена",
+            "adoptButton": "Принять подпись и подписать"
+        },
+        "errors": {
+            "requiredField": "Это поле обязательно",
+            "fileTooLarge": "Размер файла должен быть менее 300KB",
+            "invalidFileType": "Поддерживаются только файлы .png, .jpg и .jpeg",
+            "signatureRequired": "Пожалуйста, добавьте подпись",
+            "initialsRequired": "Пожалуйста, добавьте инициалы"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Добавить штамп",
+            "edit": "Редактировать штамп"
+        },
+        "closeButton": "Закрыть модальное окно",
+        "fileRequirements": "Максимальный размер = 400Kb | Поддерживаемые типы файлов = .png, .jpg, .jpeg",
+        "dragDropLabel": "Перетащите изображение или нажмите для загрузки",
+        "previewAltText": "Предпросмотр штампа",
+        "changeImageButton": "Изменить изображение",
+        "clearButton": "Закрыть",
+        "saveButton": "Сохранить",
+        "updateButton": "Обновить",
+        "errors": {
+            "fileTooLarge": "Размер файла превышает лимит 400KB",
+            "invalidFileType": "Поддерживаются только файлы .png, .jpg и .jpeg",
+            "uploadFailed": "Не удалось загрузить изображение. Пожалуйста, попробуйте снова."
+        }
+    },
+    "attachmentModal": {
+        "title": "Вложение",
+        "subtitle": {
+            "hasFile": "Управление вложением",
+            "noFile": "Загрузить вложение"
+        },
+        "uploading": {
+            "status": "Загрузка файла...",
+            "shimmerText": "Загрузка файла..."
+        },
+        "uploadArea": {
+            "dragging": "Перетащите файл сюда",
+            "default": "Загрузить или перетащить файл",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (макс. 10MB)",
+            "browseButton": "Обзор файлов"
+        },
+        "uploadedFile": {
+            "status": "Загружено успешно",
+            "deleteButton": "Удалить файл"
+        },
+        "buttons": {
+            "close": "Закрыть",
+            "uploading": "Загрузка...",
+            "deleting": "Удаление...",
+            "saved": "Файл сохранен!",
+            "done": "Готово",
+            "uploadFile": "Загрузить файл"
+        },
+        "errors": {
+            "fileTooLarge": "Размер файла превышает лимит 10MB",
+            "invalidFileType": "Поддерживаются только файлы PDF, DOCX, JPG, PNG и TXT",
+            "uploadFailed": "Не удалось загрузить файл. Пожалуйста, попробуйте снова.",
+            "deleteFailed": "Не удалось удалить файл. Пожалуйста, попробуйте снова.",
+            "noFileSelected": "Пожалуйста, выберите файл перед продолжением"
+        },
+        "accessibility": {
+            "fileUpload": "Загрузка файла",
+            "deleteFile": "Удалить файл"
+        }
+    },
+    "languages": {
+        "zh_CN": "Китайский (упрощенный)",
+        "zh_TW": "Китайский (традиционный)",
+        "da": "Датский",
+        "nl_NL": "Голландский",
+        "en": "Английский",
+        "fi": "Финский",
+        "fr": "Французский",
+        "de": "Немецкий",
+        "it": "Итальянский",
+        "ja": "Японский",
+        "ko": "Корейский",
+        "no": "Норвежский",
+        "pt_BR": "Португальский (Бразилия)",
+        "ru": "Русский",
+        "es": "Испанский",
+        "es_MX": "Испанский (Мексика)",
+        "sv": "Шведский",
+        "th": "Тайский",
+        "he": "Иврит"
+    },
+    "session-expired": {
+        "title": "Сессия истекла",
+        "description": "Срок действия ссылки для подписания документа истек из-за бездействия или тайм-аута сеанса. Пожалуйста, вернитесь к своему электронному письму и нажмите на ссылку еще раз, чтобы продолжить подписание."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Подписание завершено!",
+        "subtitle": "Документ успешно подписан",
+        "thankYou": "Спасибо за подписание!",
+        "message": "Вы получите подтверждение по электронной почте, когда документ будет подписан всеми сторонами.",
+        "passDevice": "Теперь вы можете передать устройство обратно <strong>{{senderName}}</strong>",
+        "continueButton": "Продолжить"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/sv/translation.json b/public/locales/sv/translation.json
new file mode 100644
index 0000000..2ce82c4
--- /dev/null
+++ b/public/locales/sv/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "Genom att klicka på <0>Jag godkänner</0> bekräftar du att du har granskat <1>Information om elektroniska register och signaturer</1> och samtycker till användningen av elektroniska register och signaturer vid granskning och utförande av detta dokument.",
+        "note": "Observera:",
+        "noteText": "Att godkänna detta innebär inte att du omedelbart undertecknar dokumentet. Det tillåter dig bara att granska det elektroniskt. Du kommer att ha möjlighet att granska dokumentet fullständigt innan du undertecknar."
+    },
+    "buttons": {
+        "agree": "Jag godkänner",
+        "processing": "Bearbetar...",
+        "close": "Stäng",
+        "downloadPdf": "Ladda ner PDF",
+        "downloading": "Laddar ner..."
+    },
+    "header": {
+        "aiSummary": "AI-sammanfattning",
+        "completeSign": "Slutför signering",
+        "sign": "Signera",
+        "processing": "Bearbetar...",
+        "options": "Ladda ner"
+    },
+    "menu": {
+        "downloadPdf": "Ladda ner PDF",
+        "auditTrail": "Revisionsspår",
+        "reassignSigner": "Omfördelad undertecknare",
+        "cancelTransaction": "Avbryt transaktion",
+        "viewTerms": "Visa villkor",
+        "helpSupport": "Hjälp och support",
+        "about": "Om SME"
+    },
+    "sidebar": {
+        "documents": "Dokument",
+        "pages": "Sidor: {{count}}",
+        "noDocuments": "Inga dokument tillgängliga."
+    },
+    "footer": {
+        "readyTitle": "Redo att avsluta?",
+        "readyDesc": "Du har fyllt i de obligatoriska fälten. Granska ditt arbete och välj sedan Slutför.",
+        "finish": "Slutför",
+        "submitting": "Skickar...",
+        "start": "Starta",
+        "next": "Nästa",
+        "agreementText": "Genom att underteckna godkänner jag Sign Made Easy's <0>villkor.</0>"
+    },
+    "completion": {
+        "complete": {
+            "hit": "Helt klart!",
+            "title": "Tack för din underskrift",
+            "message": "Ditt dokument är nu slutfört och säkert lagrat. Vi har skickat en kopia till dig via e-post."
+        },
+        "declined": {
+            "hit": "Åtgärd avbruten!",
+            "title": "Kanske nästa gång!",
+            "message": "Din begäran har avvisats."
+        },
+        "cancelled": {
+            "hit": "Åtgärd avbruten!",
+            "title": "Kanske nästa gång!",
+            "message": "Din begäran har avbrutits."
+        },
+        "download": "Ladda ner",
+        "downloading": "Laddar ner...",
+        "downloadSuccess": "Fil nedladdad.",
+        "downloadOptions": {
+            "pdf": "PDF-dokument",
+            "audit": "Revisionsspår",
+            "selectFormat": "Välj format"
+        },
+        "downloadError": "Nedladdning misslyckades. Försök igen.",
+        "appsTitle": "Öka effektiviteten med våra appar",
+        "formsTitle": "Skapa formulär enkelt",
+        "docsTitle": "Skapa dokument (fakturor, rapporter, offerter)",
+        "tryNow": "Prova nu",
+        "footerText": "Upphovsrätt 2026 Sign Made Easy. Alla rättigheter förbehållna.<0>Sekretesspolicy</0> | <1>Policy för rimlig användning</1>"
+    },
+    "reassign": {
+        "title": "Omfördelad undertecknare",
+        "successSubtitle": "Dokumentet har omfördelats",
+        "successTitle": "Tack!",
+        "successMessage": "Dokumentet har omfördelats till den nya undertecknaren.",
+        "fields": {
+            "firstName": "Förnamn",
+            "lastName": "Efternamn",
+            "email": "E-post",
+            "language": "Språk",
+            "message": "Valfritt meddelande"
+        },
+        "placeholders": {
+            "firstName": "Ange ditt förnamn",
+            "lastName": "Ange ditt efternamn",
+            "email": "your.email@example.com",
+            "message": "Skriv ditt meddelande här..."
+        },
+        "buttons": {
+            "submit": "Skicka",
+            "submitting": "Skickar...",
+            "cancel": "Avbryt"
+        },
+        "errors": {
+            "firstNameRequired": "Förnamn krävs",
+            "firstNameMin": "Förnamn måste vara minst 2 tecken",
+            "lastNameRequired": "Efternamn krävs",
+            "lastNameMin": "Efternamn måste vara minst 2 tecken",
+            "emailRequired": "E-post krävs",
+            "emailInvalid": "Ogiltig e-postadress"
+        }
+    },
+    "cancelModal": {
+        "title": "Avbryt transaktion",
+        "description": "Är du säker på att du vill avbryta denna transaktion? Ange din anledning till avbokning nedan.",
+        "placeholder": "Vänligen ange din anledning till avbokning...",
+        "buttons": {
+            "no": "Nej, avbryt inte",
+            "yes": "Ja, avbryt den"
+        },
+        "errors": {
+            "reasonRequired": "Avbokningsorsak krävs"
+        },
+        "inPersonSuccess": {
+            "title": "Avbryt transaktion",
+            "message": "Transaktionen avbröts. Bekräftelsemeddelanden skickades.",
+            "passBackDevice": "Du kan nu lämna tillbaka enheten till {{senderName}}.",
+            "continueButton": "Fortsätt"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "Transaktionsrevision",
+        "meta.transaction_id": "Transaktions-ID",
+        "meta.transaction_status": "Transaktionsstatus",
+        "meta.files": "Filer",
+        "audit.title": "Fullt revisionsspår",
+        "audit.description": "Uppdatera ämne och meddelande nedan för ett anpassat meddelande.",
+        "table.header.actions": "Åtgärder",
+        "table.header.language": "Språk",
+        "table.header.ip_address": "IP-adress",
+        "table.header.date": "Datum",
+        "status.completed": "Slutförd",
+        "status.pending": "Väntande",
+        "status.failed": "Misslyckades",
+        "action.created": "Skapad",
+        "action.updated": "Uppdaterad",
+        "action.deleted": "Raderad",
+        "action.viewed": "Visad",
+        "action.signed": "Signerad",
+        "action.uploaded": "Uppladdad",
+        "action.downloaded": "Nerladdad",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "Transaktionsrevision",
+        "meta": {
+            "transactionId": "Transaktions-ID",
+            "transactionStatus": "Transaktionsstatus",
+            "files": "Filer"
+        },
+        "audit": {
+            "title": "Fullt revisionsspår",
+            "description": "Uppdatera ämne och meddelande nedan för ett anpassat meddelande."
+        },
+        "table": {
+            "actions": "Åtgärder",
+            "language": "Språk",
+            "ipAddress": "IP-adress",
+            "date": "Datum"
+        },
+        "status": {
+            "completed": "Slutförd",
+            "pending": "Väntande",
+            "failed": "Misslyckades"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "Transaktion skapades av {{userName}} <{{userEmail}}>",
+            "sent": "Transaktion skickades av {{userName}} <{{userEmail}}>",
+            "cancelled": "Transaktion avbröts av {{userName}} <{{userEmail}}>",
+            "edited": "Transaktion redigerades av {{userName}} <{{userEmail}}>",
+            "viewed": "Transaktion visades av {{userName}} <{{userEmail}}>",
+            "signed": "Transaktion signerades av {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "Transaktionssignatur avvisades av {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "Elektronisk registrering och signaturavsöjning accepterades av {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> uppdaterade sitt språk till {{language}}"
+        },
+        "invitation": {
+            "sent": "Inbjudningsmejl skickat till {{userName}} <{{userEmail}}>",
+            "view": "Inbjudan att visa dokumentet har skickats till {{userName}} <{{userEmail}}>",
+            "resent": "Inbjudningsmejl skickades igen till {{recipientName}} <{{recipientEmail}}> av {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "Undertecknare omtilldelades av {{fromName}} <{{fromEmail}}> till {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> omtilldelades av {{fromName}} <{{fromEmail}}> till {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "Personlig transaktion startades av {{userName}} <{{userEmail}}>",
+            "verification": "Personlig signaturverifiering accepterades av {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "Facilitatorprocess accepterades av {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "Signatur",
+            "initial": "Initialer",
+            "edit": "Redigera",
+            "styleSelection": "Stilval"
+        },
+        "subtitle": "Skapa dina digitala signaturer",
+        "tabs": {
+            "select": "Välj",
+            "draw": "Rita",
+            "upload": "Ladda upp"
+        },
+        "selectTab": {
+            "description": "Bekräfta ditt namn och välj en signaturstil.",
+            "requiredFields": "Obligatoriska fält.",
+            "fullName": {
+                "label": "Fullständigt namn",
+                "required": "*",
+                "placeholder": "Ange fullständigt namn"
+            },
+            "initials": {
+                "label": "Initialer",
+                "required": "*",
+                "placeholder": "Ange initialer"
+            }
+        },
+        "drawTab": {
+            "description": "Rita din signatur.",
+            "required": "*",
+            "requiredFields": "Är obligatoriska fält.",
+            "signature": "Signatur",
+            "initials": "Initialer",
+            "clearSignature": "Rensa signatur",
+            "fullNameBox": {
+                "label": "Fullständig signatur",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "Initialer",
+                "required": "*",
+                "placeholder": "Ange initialer"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "Både signatur och initialer krävs.",
+            "requirements": "Använd bilder på 300×100px för signaturer och 100×100px för initialer. Max 300KB. Stödjer: .png, .jpg.",
+            "signature": {
+                "uploadLabel": "Ladda upp signatur",
+                "uploadHint": "JPG, PNG (300×100px, max 300KB)",
+                "browseButton": "Bläddra",
+                "uploadedLabel": "Signatur ✓",
+                "changeButton": "Ändra signatur",
+                "altText": "Uppladdad signaturbild"
+            },
+            "initials": {
+                "uploadLabel": "Ladda upp initialer",
+                "uploadHint": "JPG, PNG (100×100px, max 300KB)",
+                "browseButton": "Bläddra",
+                "uploadedLabel": "Initialer ✓",
+                "changeButton": "Ändra initialer",
+                "altText": "Uppladdad initialbild"
+            }
+        },
+        "footer": {
+            "agreementText": "Jag förstår att jag signerar detta dokument.",
+            "cancelButton": "Avbryt",
+            "adoptButton": "Adoptera signatur och signera"
+        },
+        "errors": {
+            "requiredField": "Detta fält är obligatoriskt",
+            "fileTooLarge": "Filstorleken måste vara under 300KB",
+            "invalidFileType": "Endast .png, .jpg och .jpeg filer stöds",
+            "signatureRequired": "Lägg till en signatur",
+            "initialsRequired": "Lägg till initialer"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "Lägg till stämpel",
+            "edit": "Redigera stämpel"
+        },
+        "closeButton": "Stäng modal",
+        "fileRequirements": "Maximal storlek = 400Kb | Filtyper som stöds = .png, .jpg, .jpeg",
+        "dragDropLabel": "Dra och släpp en bild, eller klicka för att ladda upp",
+        "previewAltText": "Förhandsgranskning av stämpel",
+        "changeImageButton": "Ändra bild",
+        "clearButton": "Stäng",
+        "saveButton": "Spara",
+        "updateButton": "Uppdatera",
+        "errors": {
+            "fileTooLarge": "Filstorleken överstiger gränsen på 400KB",
+            "invalidFileType": "Endast .png, .jpg och .jpeg filer stöds",
+            "uploadFailed": "Misslyckades att ladda upp bilden. Försök igen."
+        }
+    },
+    "attachmentModal": {
+        "title": "Bilaga",
+        "subtitle": {
+            "hasFile": "Hantera din bilaga",
+            "noFile": "Ladda upp bilaga"
+        },
+        "uploading": {
+            "status": "Laddar upp fil...",
+            "shimmerText": "Laddar upp fil..."
+        },
+        "uploadArea": {
+            "dragging": "Släpp din fil här",
+            "default": "Ladda upp eller dra och släpp fil",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (max 10MB)",
+            "browseButton": "Bläddra bland filer"
+        },
+        "uploadedFile": {
+            "status": "Uppladdad framgångsrikt",
+            "deleteButton": "Ta bort fil"
+        },
+        "buttons": {
+            "close": "Stäng",
+            "uploading": "Laddar upp...",
+            "deleting": "Tar bort...",
+            "saved": "Fil sparad!",
+            "done": "Klart",
+            "uploadFile": "Ladda upp fil"
+        },
+        "errors": {
+            "fileTooLarge": "Filstorleken överstiger gränsen på 10MB",
+            "invalidFileType": "Endast PDF, DOCX, JPG, PNG och TXT filer stöds",
+            "uploadFailed": "Misslyckades att ladda upp filen. Försök igen.",
+            "deleteFailed": "Misslyckades att ta bort filen. Försök igen.",
+            "noFileSelected": "Välj en fil innan du fortsätter"
+        },
+        "accessibility": {
+            "fileUpload": "Filuppladdning",
+            "deleteFile": "Ta bort fil"
+        }
+    },
+    "languages": {
+        "zh_CN": "Kinesiska (Förenklad)",
+        "zh_TW": "Kinesiska (Traditionell)",
+        "da": "Danska",
+        "nl_NL": "Holländska",
+        "en": "Engelska",
+        "fi": "Finska",
+        "fr": "Franska",
+        "de": "Tyska",
+        "it": "Italienska",
+        "ja": "Japanska",
+        "ko": "Koreanska",
+        "no": "Norska",
+        "pt_BR": "Portugisiska (Brasilien)",
+        "ru": "Ryska",
+        "es": "Spanska",
+        "es_MX": "Spanska (Mexiko)",
+        "sv": "Svenska",
+        "th": "Thai",
+        "he": "Hebreiska"
+    },
+    "session-expired": {
+        "title": "Sessionen har upphört",
+        "description": "Denna dokumentunderskriftslänk har upphört på grund av inaktivitet eller tidsgräns för sessionen. Gå tillbaka till din e-post och klicka på länken igen för att fortsätta skriva under."
+    },
+    "inPersonComplete": {
+        "title": "🎉 Signering slutförd!",
+        "subtitle": "Dokumentet har signerats",
+        "thankYou": "Tack för din underskrift!",
+        "message": "Du kommer att få ett bekräftelsemail när dokumentet har signerats av alla parter.",
+        "passDevice": "Du kan nu lämna tillbaka enheten till <strong>{{senderName}}</strong>",
+        "continueButton": "Fortsätt"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/th/translation.json b/public/locales/th/translation.json
new file mode 100644
index 0000000..75131c7
--- /dev/null
+++ b/public/locales/th/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "การคลิก <0>ฉันยอมรับ</0> แสดงว่าคุณยืนยันว่าได้ตรวจสอบ <1>การเปิดเผยบันทึกอิเล็กทรอนิกส์และลายมือชื่อ</1> แล้ว และยินยอมให้ใช้บันทึกอิเล็กทรอนิกส์และลายมือชื่อในการตรวจสอบและดำเนินการตามเอกสารนี้",
+        "note": "หมายเหตุ:",
+        "noteText": "การยอมรับนี้ไม่ได้หมายความว่าคุณกำลังลงนามในเอกสารทันที เป็นเพียงการอนุญาตให้คุณตรวจสอบด้วยวิธีอิเล็กทรอนิกส์เท่านั้น คุณจะมีโอกาสตรวจสอบเอกสารทั้งหมดก่อนลงนาม"
+    },
+    "buttons": {
+        "agree": "ฉันยอมรับ",
+        "processing": "กำลังดำเนินการ...",
+        "close": "ปิด",
+        "downloadPdf": "ดาวน์โหลด PDF",
+        "downloading": "กำลังดาวน์โหลด..."
+    },
+    "header": {
+        "aiSummary": "สรุปผลจาก AI",
+        "completeSign": "ลงนามเสร็จสมบูรณ์",
+        "sign": "ลงนาม",
+        "processing": "กำลังดำเนินการ...",
+        "options": "ดาวน์โหลด"
+    },
+    "menu": {
+        "downloadPdf": "ดาวน์โหลด PDF",
+        "auditTrail": "เส้นทางการตรวจสอบ",
+        "reassignSigner": "กำหนดผู้ลงนามใหม่",
+        "cancelTransaction": "ยกเลิกรายการ",
+        "viewTerms": "ดูข้อกำหนดและเงื่อนไข",
+        "helpSupport": "ความช่วยเหลือและการสนับสนุน",
+        "about": "เกี่ยวกับ SME"
+    },
+    "sidebar": {
+        "documents": "เอกสาร",
+        "pages": "หน้า: {{count}}",
+        "noDocuments": "ไม่มีเอกสาร"
+    },
+    "footer": {
+        "readyTitle": "พร้อมที่จะเสร็จสิ้นหรือยัง?",
+        "readyDesc": "คุณกรอกข้อมูลในช่องที่จำเป็นเรียบร้อยแล้ว ตรวจสอบงานของคุณ จากนั้นเลือกเสร็จสิ้น",
+        "finish": "เสร็จสิ้น",
+        "submitting": "กำลังส่ง...",
+        "start": "เริ่มต้น",
+        "next": "ถัดไป",
+        "agreementText": "การลงนามแสดงว่าฉันยอมรับ <0>ข้อกำหนดและเงื่อนไข</0> ของ Sign Made Easy"
+    },
+    "completion": {
+        "complete": {
+            "hit": "เสร็จเรียบร้อย!",
+            "title": "ขอบคุณที่ลงนาม",
+            "message": "เอกสารของคุณเสร็จสมบูรณ์และถูกจัดเก็บอย่างปลอดภัยแล้ว เราได้ส่งสำเนาทางอีเมลถึงคุณแล้ว"
+        },
+        "declined": {
+            "hit": "ยกเลิกการดำเนินการ!",
+            "title": "โอกาสหน้า!",
+            "message": "คำขอของคุณถูกปฏิเสธเรียบร้อยแล้ว"
+        },
+        "cancelled": {
+            "hit": "ยกเลิกการดำเนินการ!",
+            "title": "โอกาสหน้า!",
+            "message": "คำขอของคุณถูกยกเลิกเรียบร้อยแล้ว"
+        },
+        "download": "ดาวน์โหลด",
+        "downloading": "กำลังดาวน์โหลด...",
+        "downloadSuccess": "ดาวน์โหลดไฟล์สำเร็จ",
+        "downloadOptions": {
+            "pdf": "เอกสาร PDF",
+            "audit": "เส้นทางการตรวจสอบ",
+            "selectFormat": "เลือกรูปแบบ"
+        },
+        "downloadError": "การดาวน์โหลดไฟล์ล้มเหลว กรุณาลองอีกครั้ง",
+        "appsTitle": "เพิ่มประสิทธิภาพด้วยแอปของเรา",
+        "formsTitle": "สร้างแบบฟอร์มได้อย่างง่ายดาย",
+        "docsTitle": "สร้างเอกสาร (ใบแจ้งหนี้ รายงาน ใบเสนอราคา)",
+        "tryNow": "ลองใช้เลย",
+        "footerText": "ลิขสิทธิ์ 2026 Sign Made Easy สงวนลิขสิทธิ์ <0>นโยบายความเป็นส่วนตัว</0> | <1>นโยบายการใช้งานที่เหมาะสม</1>"
+    },
+    "reassign": {
+        "title": "กำหนดผู้ลงนามใหม่",
+        "successSubtitle": "เอกสารถูกกำหนดใหม่เรียบร้อยแล้ว",
+        "successTitle": "ขอบคุณ!",
+        "successMessage": "เอกสารถูกกำหนดให้กับผู้ลงนามใหม่เรียบร้อยแล้ว",
+        "fields": {
+            "firstName": "ชื่อ",
+            "lastName": "นามสกุล",
+            "email": "อีเมล",
+            "language": "ภาษา",
+            "message": "ข้อความเพิ่มเติม"
+        },
+        "placeholders": {
+            "firstName": "ป้อนชื่อของคุณ",
+            "lastName": "ป้อนนามสกุลของคุณ",
+            "email": "your.email@example.com",
+            "message": "เขียนข้อความของคุณที่นี่..."
+        },
+        "buttons": {
+            "submit": "ส่ง",
+            "submitting": "กำลังส่ง...",
+            "cancel": "ยกเลิก"
+        },
+        "errors": {
+            "firstNameRequired": "ต้องระบุชื่อ",
+            "firstNameMin": "ชื่อต้องมีอย่างน้อย 2 ตัวอักษร",
+            "lastNameRequired": "ต้องระบุนามสกุล",
+            "lastNameMin": "นามสกุลต้องมีอย่างน้อย 2 ตัวอักษร",
+            "emailRequired": "ต้องระบุอีเมล",
+            "emailInvalid": "ที่อยู่อีเมลไม่ถูกต้อง"
+        }
+    },
+    "cancelModal": {
+        "title": "ยกเลิกรายการ",
+        "description": "คุณแน่ใจหรือว่าต้องการยกเลิกรายการนี้? กรุณาระบุเหตุผลในการยกเลิกด้านล่าง",
+        "placeholder": "กรุณาระบุเหตุผลในการยกเลิก...",
+        "buttons": {
+            "no": "ไม่ ไม่ยกเลิก",
+            "yes": "ใช่ ยกเลิก"
+        },
+        "errors": {
+            "reasonRequired": "ต้องระบุเหตุผลในการยกเลิก"
+        },
+        "inPersonSuccess": {
+            "title": "ยกเลิกธุรกรรม",
+            "message": "ยกเลิกธุรกรรมเรียบร้อยแล้ว มีการส่งอีเมลยืนยันแล้ว",
+            "passBackDevice": "คุณสามารถส่งคืนอุปกรณ์ให้ {{senderName}} ได้แล้ว",
+            "continueButton": "ดำเนินการต่อ"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "การตรวจสอบรายการ",
+        "meta.transaction_id": "รหัสรายการ",
+        "meta.transaction_status": "สถานะรายการ",
+        "meta.files": "ไฟล์",
+        "audit.title": "เส้นทางการตรวจสอบแบบเต็ม",
+        "audit.description": "กรุณาอัปเดตหัวข้อและข้อความด้านล่างสำหรับข้อความที่กำหนดเอง",
+        "table.header.actions": "การดำเนินการ",
+        "table.header.language": "ภาษา",
+        "table.header.ip_address": "ที่อยู่ IP",
+        "table.header.date": "วันที่",
+        "status.completed": "เสร็จสมบูรณ์",
+        "status.pending": "รอดำเนินการ",
+        "status.failed": "ล้มเหลว",
+        "action.created": "สร้างแล้ว",
+        "action.updated": "อัปเดตแล้ว",
+        "action.deleted": "ลบแล้ว",
+        "action.viewed": "ดูแล้ว",
+        "action.signed": "ลงนามแล้ว",
+        "action.uploaded": "อัปโหลดแล้ว",
+        "action.downloaded": "ดาวน์โหลดแล้ว",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "การตรวจสอบรายการ",
+        "meta": {
+            "transactionId": "รหัสรายการ",
+            "transactionStatus": "สถานะรายการ",
+            "files": "ไฟล์"
+        },
+        "audit": {
+            "title": "เส้นทางการตรวจสอบแบบเต็ม",
+            "description": "กรุณาอัปเดตหัวข้อและข้อความด้านล่างสำหรับข้อความที่กำหนดเอง"
+        },
+        "table": {
+            "actions": "การดำเนินการ",
+            "language": "ภาษา",
+            "ipAddress": "ที่อยู่ IP",
+            "date": "วันที่"
+        },
+        "status": {
+            "completed": "เสร็จสมบูรณ์",
+            "pending": "รอดำเนินการ",
+            "failed": "ล้มเหลว"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "ธุรกรรมถูกสร้างโดย {{userName}} <{{userEmail}}>",
+            "sent": "ธุรกรรมถูกส่งโดย {{userName}} <{{userEmail}}>",
+            "cancelled": "ธุรกรรมถูกยกเลิกโดย {{userName}} <{{userEmail}}>",
+            "edited": "ธุรกรรมถูกแก้ไขโดย {{userName}} <{{userEmail}}>",
+            "viewed": "ธุรกรรมถูกดูโดย {{userName}} <{{userEmail}}>",
+            "signed": "ธุรกรรมถูกลงนามโดย {{userName}} <{{userEmail}}>"
+        },
+        "signature": {
+            "declined": "ลายเซ็นธุรกรรมถูกปฏิเสธโดย {{userName}} <{{userEmail}}>"
+        },
+        "ers": {
+            "accepted": "การเปิดเผยบันทึกอิเล็กทรอนิกส์และลายเซ็นถูกยอมรับโดย {{userName}} <{{userEmail}}>"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> อัปเดตภาษาเป็น {{language}}"
+        },
+        "invitation": {
+            "sent": "ส่งอีเมลเชิญไปยัง {{userName}} <{{userEmail}}>",
+            "view": "คำเชิญให้ดูเอกสารถูกส่งไปยัง {{userName}} <{{userEmail}}> แล้ว",
+            "resent": "ส่งอีเมลเชิญอีกครั้งไปยัง {{recipientName}} <{{recipientEmail}}> โดย {{senderName}} <{{senderEmail}}>"
+        },
+        "reassigned": {
+            "to": "ผู้ลงนามถูกมอบหมายใหม่โดย {{fromName}} <{{fromEmail}}> ไปยัง {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> ถูกมอบหมายใหม่โดย {{fromName}} <{{fromEmail}}> ไปยัง {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "ธุรกรรมแบบเผชิญหน้าเริ่มต้นโดย {{userName}} <{{userEmail}}>",
+            "verification": "การยืนยันลายเซ็นแบบเผชิญหน้าถูกยอมรับโดย {{userName}} <{{userEmail}}>"
+        },
+        "facilitator": {
+            "accepted": "กระบวนการผู้ช่วยถูกยอมรับโดย {{userName}} <{{userEmail}}>"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "ลายเซ็น",
+            "initial": "อักษรย่อ",
+            "edit": "แก้ไข",
+            "styleSelection": "เลือกรูปแบบ"
+        },
+        "subtitle": "สร้างลายเซ็นดิจิทัลของคุณ",
+        "tabs": {
+            "select": "เลือก",
+            "draw": "วาด",
+            "upload": "อัปโหลด"
+        },
+        "selectTab": {
+            "description": "ยืนยันชื่อของคุณและเลือกรูปแบบลายเซ็น",
+            "requiredFields": "กรุณากรอกข้อมูล",
+            "fullName": {
+                "label": "ชื่อเต็ม",
+                "required": "*",
+                "placeholder": "กรอกชื่อเต็ม"
+            },
+            "initials": {
+                "label": "อักษรย่อ",
+                "required": "*",
+                "placeholder": "กรอกอักษรย่อ"
+            }
+        },
+        "drawTab": {
+            "description": "วาดลายเซ็นของคุณ",
+            "required": "*",
+            "requiredFields": "เป็นช่องที่ต้องกรอก",
+            "signature": "ลายเซ็น",
+            "initials": "อักษรย่อ",
+            "clearSignature": "ล้างลายเซ็น",
+            "fullNameBox": {
+                "label": "ลายเซ็นเต็ม",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "อักษรย่อ",
+                "required": "*",
+                "placeholder": "ป้อนอักษรย่อ"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "ต้องมีทั้งลายเซ็นและอักษรย่อ",
+            "requirements": "ใช้รูปภาพขนาด 300×100px สำหรับลายเซ็น และ 100×100px สำหรับอักษรย่อ สูงสุด 300KB รองรับ: .png, .jpg",
+            "signature": {
+                "uploadLabel": "อัปโหลดลายเซ็น",
+                "uploadHint": "JPG, PNG (300×100px, สูงสุด 300KB)",
+                "browseButton": "เรียกดู",
+                "uploadedLabel": "ลายเซ็น ✓",
+                "changeButton": "เปลี่ยนลายเซ็น",
+                "altText": "รูปภาพลายเซ็นที่อัปโหลด"
+            },
+            "initials": {
+                "uploadLabel": "อัปโหลดอักษรย่อ",
+                "uploadHint": "JPG, PNG (100×100px, สูงสุด 300KB)",
+                "browseButton": "เรียกดู",
+                "uploadedLabel": "อักษรย่อ ✓",
+                "changeButton": "เปลี่ยนอักษรย่อ",
+                "altText": "รูปภาพอักษรย่อที่อัปโหลด"
+            }
+        },
+        "footer": {
+            "agreementText": "ฉันเข้าใจว่าฉันกำลังลงนามในเอกสารนี้",
+            "cancelButton": "ยกเลิก",
+            "adoptButton": "ใช้ลายเซ็นและลงนาม"
+        },
+        "errors": {
+            "requiredField": "กรุณากรอกข้อมูลในช่องนี้",
+            "fileTooLarge": "ขนาดไฟล์ต้องน้อยกว่า 300KB",
+            "invalidFileType": "รองรับเฉพาะไฟล์ .png, .jpg และ .jpeg",
+            "signatureRequired": "กรุณาเพิ่มลายเซ็น",
+            "initialsRequired": "กรุณาเพิ่มอักษรย่อ"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "เพิ่มตราประทับ",
+            "edit": "แก้ไขตราประทับ"
+        },
+        "closeButton": "ปิดหน้าต่าง",
+        "fileRequirements": "ขนาดสูงสุด = 400Kb | ประเภทไฟล์ที่รองรับ = .png, .jpg, .jpeg",
+        "dragDropLabel": "ลากและวางรูปภาพ หรือคลิกเพื่ออัปโหลด",
+        "previewAltText": "ตัวอย่างตราประทับ",
+        "changeImageButton": "เปลี่ยนรูปภาพ",
+        "clearButton": "ปิด",
+        "saveButton": "บันทึก",
+        "updateButton": "อัปเดต",
+        "errors": {
+            "fileTooLarge": "ขนาดไฟล์เกินขีดจำกัด 400KB",
+            "invalidFileType": "รองรับเฉพาะไฟล์ .png, .jpg และ .jpeg",
+            "uploadFailed": "อัปโหลดรูปภาพไม่สำเร็จ กรุณาลองอีกครั้ง"
+        }
+    },
+    "attachmentModal": {
+        "title": "ไฟล์แนบ",
+        "subtitle": {
+            "hasFile": "จัดการไฟล์แนบของคุณ",
+            "noFile": "อัปโหลดไฟล์แนบ"
+        },
+        "uploading": {
+            "status": "กำลังอัปโหลดไฟล์...",
+            "shimmerText": "กำลังอัปโหลดไฟล์..."
+        },
+        "uploadArea": {
+            "dragging": "วางไฟล์ของคุณที่นี่",
+            "default": "อัปโหลดหรือลากและวางไฟล์",
+            "fileTypes": "PDF, DOCX, JPG, PNG, TXT (สูงสุด 10MB)",
+            "browseButton": "เรียกดูไฟล์"
+        },
+        "uploadedFile": {
+            "status": "อัปโหลดสำเร็จ",
+            "deleteButton": "ลบไฟล์"
+        },
+        "buttons": {
+            "close": "ปิด",
+            "uploading": "กำลังอัปโหลด...",
+            "deleting": "กำลังลบ...",
+            "saved": "บันทึกไฟล์แล้ว!",
+            "done": "เสร็จสิ้น",
+            "uploadFile": "อัปโหลดไฟล์"
+        },
+        "errors": {
+            "fileTooLarge": "ขนาดไฟล์เกินขีดจำกัด 10MB",
+            "invalidFileType": "รองรับเฉพาะไฟล์ PDF, DOCX, JPG, PNG และ TXT",
+            "uploadFailed": "อัปโหลดไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง",
+            "deleteFailed": "ลบไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง",
+            "noFileSelected": "กรุณาเลือกไฟล์ก่อนดำเนินการต่อ"
+        },
+        "accessibility": {
+            "fileUpload": "การอัปโหลดไฟล์",
+            "deleteFile": "ลบไฟล์"
+        }
+    },
+    "languages": {
+        "zh_CN": "จีน (ตัวย่อ)",
+        "zh_TW": "จีน (ตัวเต็ม)",
+        "da": "เดนมาร์ก",
+        "nl_NL": "ดัตช์",
+        "en": "อังกฤษ",
+        "fi": "ฟินแลนด์",
+        "fr": "ฝรั่งเศส",
+        "de": "เยอรมัน",
+        "it": "อิตาลี",
+        "ja": "ญี่ปุ่น",
+        "ko": "เกาหลี",
+        "no": "นอร์เวย์",
+        "pt_BR": "โปรตุเกส (บราซิล)",
+        "ru": "รัสเซีย",
+        "es": "สเปน",
+        "es_MX": "สเปน (เม็กซิโก)",
+        "sv": "สวีเดน",
+        "th": "ไทย",
+        "he": "ฮีบรู"
+    },
+    "session-expired": {
+        "title": "เซสชันหมดอายุ",
+        "description": "ลิงก์เซ็นเอกสารนี้หมดอายุเนื่องจากการไม่มีการใช้งานหรือเซสชันหมดเวลา กรุณากลับไปที่อีเมลของคุณและคลิกลิงก์อีกครั้งเพื่อดำเนินการเซ็นชื่อต่อ"
+    },
+    "inPersonComplete": {
+        "title": "🎉 การลงนามเสร็จสมบูรณ์!",
+        "subtitle": "เอกสารได้รับการลงนามเรียบร้อยแล้ว",
+        "thankYou": "ขอบคุณที่ลงนาม!",
+        "message": "คุณจะได้รับอีเมลยืนยันเมื่อเอกสารได้รับการลงนามโดยทุกฝ่าย",
+        "passDevice": "ตอนนี้คุณสามารถส่งคืนอุปกรณ์ให้ <strong>{{senderName}}</strong>",
+        "continueButton": "ดำเนินการต่อ"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/zh_CN/translation.json b/public/locales/zh_CN/translation.json
new file mode 100644
index 0000000..acf0d77
--- /dev/null
+++ b/public/locales/zh_CN/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "点击<0>我同意</0>，即表示您确认已阅读 <1>电子记录和签名披露</1>，并同意在审查和执行本文档时使用电子记录和签名。",
+        "note": "注意：",
+        "noteText": "同意此条款并不意味着您立即签署文档。仅允许您以电子方式审阅文档。在签署之前，您将有机会完整审阅文档。"
+    },
+    "buttons": {
+        "agree": "我同意",
+        "processing": "处理中...",
+        "close": "关闭",
+        "downloadPdf": "下载 PDF",
+        "downloading": "下载中..."
+    },
+    "header": {
+        "aiSummary": "AI 摘要",
+        "completeSign": "完成签署",
+        "sign": "签署",
+        "processing": "处理中...",
+        "options": "下载"
+    },
+    "menu": {
+        "downloadPdf": "下载 PDF",
+        "auditTrail": "审计跟踪",
+        "reassignSigner": "重新分配签署人",
+        "cancelTransaction": "取消交易",
+        "viewTerms": "查看条款和条件",
+        "helpSupport": "帮助与支持",
+        "about": "关于 SME"
+    },
+    "sidebar": {
+        "documents": "文档",
+        "pages": "页数：{{count}}",
+        "noDocuments": "没有可用文档。"
+    },
+    "footer": {
+        "readyTitle": "准备好完成了吗？",
+        "readyDesc": "您已完成必填字段。请检查您的工作，然后选择完成。",
+        "finish": "完成",
+        "submitting": "提交中...",
+        "start": "开始",
+        "next": "下一步",
+        "agreementText": "签署即表示我同意 Sign Made Easy <0>条款和条件。</0>"
+    },
+    "completion": {
+        "complete": {
+            "hit": "全部完成！",
+            "title": "感谢您的签署",
+            "message": "您的文档现已完成并安全存储。我们已通过电子邮件发送了一份副本给您。"
+        },
+        "declined": {
+            "hit": "操作已取消！",
+            "title": "下次吧！",
+            "message": "您的请求已成功取消。"
+        },
+        "cancelled": {
+            "hit": "操作已取消！",
+            "title": "下次吧！",
+            "message": "您的请求已成功取消。"
+        },
+        "download": "下载",
+        "downloading": "下载中...",
+        "downloadSuccess": "文件下载成功。",
+        "downloadOptions": {
+            "pdf": "PDF 文档",
+            "audit": "审计跟踪",
+            "selectFormat": "选择格式"
+        },
+        "downloadError": "文件下载失败，请重试。",
+        "appsTitle": "使用我们的应用提高效率",
+        "formsTitle": "轻松生成表单",
+        "docsTitle": "生成文档（发票、报告、报价）",
+        "tryNow": "立即试用",
+        "footerText": "版权所有 2026 Sign Made Easy。保留所有权利。<0>隐私政策</0> | <1>合理使用政策</1>"
+    },
+    "reassign": {
+        "title": "重新分配签署人",
+        "successSubtitle": "文档已成功重新分配",
+        "successTitle": "谢谢您！",
+        "successMessage": "文档已成功重新分配给新的签署人。",
+        "fields": {
+            "firstName": "名字",
+            "lastName": "姓氏",
+            "email": "电子邮件",
+            "language": "语言",
+            "message": "可选消息"
+        },
+        "placeholders": {
+            "firstName": "请输入您的名字",
+            "lastName": "请输入您的姓氏",
+            "email": "your.email@example.com",
+            "message": "在此处撰写您的消息..."
+        },
+        "buttons": {
+            "submit": "提交",
+            "submitting": "提交中...",
+            "cancel": "取消"
+        },
+        "errors": {
+            "firstNameRequired": "名字为必填项",
+            "firstNameMin": "名字至少需要2个字符",
+            "lastNameRequired": "姓氏为必填项",
+            "lastNameMin": "姓氏至少需要2个字符",
+            "emailRequired": "电子邮件为必填项",
+            "emailInvalid": "电子邮件地址无效"
+        }
+    },
+    "cancelModal": {
+        "title": "取消交易",
+        "description": "您确定要取消此交易吗？请在下方提供取消原因。",
+        "placeholder": "请提供取消原因...",
+        "buttons": {
+            "no": "不，不要取消",
+            "yes": "是的，取消它"
+        },
+        "errors": {
+            "reasonRequired": "取消原因为必填项"
+        },
+        "inPersonSuccess": {
+            "title": "取消交易",
+            "message": "交易已成功取消。确认邮件已发送。",
+            "passBackDevice": "您现在可以将设备交还给{{senderName}}。",
+            "continueButton": "继续"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "交易审计",
+        "meta.transaction_id": "交易 ID",
+        "meta.transaction_status": "交易状态",
+        "meta.files": "文件",
+        "audit.title": "完整审计跟踪",
+        "audit.description": "请更新以下主题和消息以获得自定义消息。",
+        "table.header.actions": "操作",
+        "table.header.language": "语言",
+        "table.header.ip_address": "IP 地址",
+        "table.header.date": "日期",
+        "status.completed": "已完成",
+        "status.pending": "待处理",
+        "status.failed": "失败",
+        "action.created": "已创建",
+        "action.updated": "已更新",
+        "action.deleted": "已删除",
+        "action.viewed": "已查看",
+        "action.signed": "已签署",
+        "action.uploaded": "已上传",
+        "action.downloaded": "已下载",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "交易审计",
+        "meta": {
+            "transactionId": "交易 ID",
+            "transactionStatus": "交易状态",
+            "files": "文件"
+        },
+        "audit": {
+            "title": "完整审计跟踪",
+            "description": "请更新以下主题和消息以获得自定义消息。"
+        },
+        "table": {
+            "actions": "操作",
+            "language": "语言",
+            "ipAddress": "IP 地址",
+            "date": "日期"
+        },
+        "status": {
+            "completed": "已完成",
+            "pending": "待处理",
+            "failed": "失败"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "交易由 {{userName}} <{{userEmail}}> 创建",
+            "sent": "交易由 {{userName}} <{{userEmail}}> 发送",
+            "cancelled": "交易由 {{userName}} <{{userEmail}}> 取消",
+            "edited": "交易由 {{userName}} <{{userEmail}}> 编辑",
+            "viewed": "交易由 {{userName}} <{{userEmail}}> 查看",
+            "signed": "交易由 {{userName}} <{{userEmail}}> 签署"
+        },
+        "signature": {
+            "declined": "交易签名被 {{userName}} <{{userEmail}}> 拒绝"
+        },
+        "ers": {
+            "accepted": "电子记录和签名披露已被 {{userName}} <{{userEmail}}> 接受"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> 将语言更新为 {{language}}"
+        },
+        "invitation": {
+            "sent": "邀请邮件已发送至 {{userName}} <{{userEmail}}>",
+            "view": "查看文档的邀请已发送给 {{userName}} <{{userEmail}}>",
+            "resent": "邀请邮件由 {{senderName}} <{{senderEmail}}> 重新发送至 {{recipientName}} <{{recipientEmail}}>"
+        },
+        "reassigned": {
+            "to": "签署人由 {{fromName}} <{{fromEmail}}> 重新分配给 {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> 被 {{fromName}} <{{fromEmail}}> 重新分配给 {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "面对面交易由 {{userName}} <{{userEmail}}> 启动",
+            "verification": "面对面签名验证已被 {{userName}} <{{userEmail}}> 接受"
+        },
+        "facilitator": {
+            "accepted": "协调员流程已被 {{userName}} <{{userEmail}}> 接受"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "签名",
+            "initial": "首字母",
+            "edit": "编辑",
+            "styleSelection": "样式选择"
+        },
+        "subtitle": "创建您的数字签名",
+        "tabs": {
+            "select": "选择",
+            "draw": "绘制",
+            "upload": "上传"
+        },
+        "selectTab": {
+            "description": "确认您的姓名并选择签名样式。",
+            "requiredFields": "必填字段。",
+            "fullName": {
+                "label": "全名",
+                "required": "*",
+                "placeholder": "输入全名"
+            },
+            "initials": {
+                "label": "首字母缩写",
+                "required": "*",
+                "placeholder": "输入首字母缩写"
+            }
+        },
+        "drawTab": {
+            "description": "绘制您的签名。",
+            "required": "*",
+            "requiredFields": "为必填字段。",
+            "signature": "签名",
+            "initials": "首字母缩写",
+            "clearSignature": "清除签名",
+            "fullNameBox": {
+                "label": "完整签名",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "首字母缩写",
+                "required": "*",
+                "placeholder": "输入首字母缩写"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "签名和首字母缩写均为必填。",
+            "requirements": "签名使用300×100px图片，首字母缩写使用100×100px图片。最大300KB。支持：.png、.jpg。",
+            "signature": {
+                "uploadLabel": "上传签名",
+                "uploadHint": "JPG、PNG（300×100px，最大300KB）",
+                "browseButton": "浏览",
+                "uploadedLabel": "签名 ✓",
+                "changeButton": "更换签名",
+                "altText": "已上传的签名图片"
+            },
+            "initials": {
+                "uploadLabel": "上传首字母缩写",
+                "uploadHint": "JPG、PNG（100×100px，最大300KB）",
+                "browseButton": "浏览",
+                "uploadedLabel": "首字母缩写 ✓",
+                "changeButton": "更换首字母缩写",
+                "altText": "已上传的首字母缩写图片"
+            }
+        },
+        "footer": {
+            "agreementText": "我理解，我正在签署此文件。",
+            "cancelButton": "取消",
+            "adoptButton": "采用签名并签署"
+        },
+        "errors": {
+            "requiredField": "此字段为必填",
+            "fileTooLarge": "文件大小必须小于300KB",
+            "invalidFileType": "仅支持.png、.jpg和.jpeg文件",
+            "signatureRequired": "请添加签名",
+            "initialsRequired": "请添加首字母缩写"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "添加印章",
+            "edit": "编辑印章"
+        },
+        "closeButton": "关闭弹窗",
+        "fileRequirements": "最大尺寸 = 400KB | 支持的文件类型 = .png、.jpg、.jpeg",
+        "dragDropLabel": "拖放图片，或点击上传",
+        "previewAltText": "印章预览",
+        "changeImageButton": "更换图片",
+        "clearButton": "关闭",
+        "saveButton": "保存",
+        "updateButton": "更新",
+        "errors": {
+            "fileTooLarge": "文件大小超过400KB限制",
+            "invalidFileType": "仅支持.png、.jpg和.jpeg文件",
+            "uploadFailed": "上传图片失败，请重试。"
+        }
+    },
+    "attachmentModal": {
+        "title": "附件",
+        "subtitle": {
+            "hasFile": "管理您的附件",
+            "noFile": "上传附件"
+        },
+        "uploading": {
+            "status": "正在上传文件...",
+            "shimmerText": "正在上传文件..."
+        },
+        "uploadArea": {
+            "dragging": "将文件拖放到此处",
+            "default": "上传或拖放文件",
+            "fileTypes": "PDF、DOCX、JPG、PNG、TXT（最大10MB）",
+            "browseButton": "浏览文件"
+        },
+        "uploadedFile": {
+            "status": "上传成功",
+            "deleteButton": "删除文件"
+        },
+        "buttons": {
+            "close": "关闭",
+            "uploading": "上传中...",
+            "deleting": "删除中...",
+            "saved": "文件已保存！",
+            "done": "完成",
+            "uploadFile": "上传文件"
+        },
+        "errors": {
+            "fileTooLarge": "文件大小超过10MB限制",
+            "invalidFileType": "仅支持PDF、DOCX、JPG、PNG和TXT文件",
+            "uploadFailed": "上传文件失败，请重试。",
+            "deleteFailed": "删除文件失败，请重试。",
+            "noFileSelected": "请先选择文件"
+        },
+        "accessibility": {
+            "fileUpload": "文件上传",
+            "deleteFile": "删除文件"
+        }
+    },
+    "languages": {
+        "zh_CN": "中文（简体）",
+        "zh_TW": "中文（繁体）",
+        "da": "丹麦语",
+        "nl_NL": "荷兰语",
+        "en": "英语",
+        "fi": "芬兰语",
+        "fr": "法语",
+        "de": "德语",
+        "it": "意大利语",
+        "ja": "日语",
+        "ko": "韩语",
+        "no": "挪威语",
+        "pt_BR": "葡萄牙语（巴西）",
+        "ru": "俄语",
+        "es": "西班牙语",
+        "es_MX": "西班牙语（墨西哥）",
+        "sv": "瑞典语",
+        "th": "泰语",
+        "he": "希伯来语"
+    },
+    "session-expired": {
+        "title": "会话已过期",
+        "description": "由于不活动或会话超时，此文档签署链接已过期。请返回您的电子邮件，再次点击链接以继续签署。"
+    },
+    "inPersonComplete": {
+        "title": "🎉 签署完成！",
+        "subtitle": "文档已成功签署",
+        "thankYou": "感谢您的签署！",
+        "message": "文档经所有相关方签署后，您将收到一封确认电子邮件。",
+        "passDevice": "您现在可以将设备交还给 <strong>{{senderName}}</strong>",
+        "continueButton": "继续"
+    }
+}
\ No newline at end of file
diff --git a/public/locales/zh_TW/translation.json b/public/locales/zh_TW/translation.json
new file mode 100644
index 0000000..1c8971b
--- /dev/null
+++ b/public/locales/zh_TW/translation.json
@@ -0,0 +1,380 @@
+{
+    "terms": {
+        "agreementText": "點擊<0>我同意</0>，即表示您確認已閱讀 <1>電子記錄和簽名披露</1>，並同意在審查和執行本文檔時使用電子記錄和簽名。",
+        "note": "注意：",
+        "noteText": "同意此條款並不意味著您立即簽署文檔。僅允許您以電子方式審閱文檔。在簽署之前，您將有機會完整審閱文檔。"
+    },
+    "buttons": {
+        "agree": "我同意",
+        "processing": "處理中...",
+        "close": "關閉",
+        "downloadPdf": "下載 PDF",
+        "downloading": "下載中..."
+    },
+    "header": {
+        "aiSummary": "AI 摘要",
+        "completeSign": "完成簽署",
+        "sign": "簽署",
+        "processing": "處理中...",
+        "options": "下載"
+    },
+    "menu": {
+        "downloadPdf": "下載 PDF",
+        "auditTrail": "審計追蹤",
+        "reassignSigner": "重新分配簽署人",
+        "cancelTransaction": "取消交易",
+        "viewTerms": "查看條款和條件",
+        "helpSupport": "幫助與支援",
+        "about": "關於 SME"
+    },
+    "sidebar": {
+        "documents": "文件",
+        "pages": "頁數：{{count}}",
+        "noDocuments": "沒有可用文件。"
+    },
+    "footer": {
+        "readyTitle": "準備好完成了嗎？",
+        "readyDesc": "您已完成必填欄位。請檢查您的工作，然後選擇完成。",
+        "finish": "完成",
+        "submitting": "提交中...",
+        "start": "開始",
+        "next": "下一步",
+        "agreementText": "簽署即表示我同意 Sign Made Easy <0>條款和條件。</0>"
+    },
+    "completion": {
+        "complete": {
+            "hit": "全部完成！",
+            "title": "感謝您的簽署",
+            "message": "您的文件現已完成並安全存儲。我們已通過電子郵件發送了一份副本給您。"
+        },
+        "declined": {
+            "hit": "操作已取消！",
+            "title": "下次吧！",
+            "message": "您的請求已成功取消。"
+        },
+        "cancelled": {
+            "hit": "操作已取消！",
+            "title": "下次吧！",
+            "message": "您的請求已成功取消。"
+        },
+        "download": "下載",
+        "downloading": "下載中...",
+        "downloadSuccess": "文件下載成功。",
+        "downloadOptions": {
+            "pdf": "PDF 文件",
+            "audit": "審計追蹤",
+            "selectFormat": "選擇格式"
+        },
+        "downloadError": "文件下載失敗，請重試。",
+        "appsTitle": "使用我們的應用提高效率",
+        "formsTitle": "輕鬆生成表單",
+        "docsTitle": "生成文件（發票、報告、報價）",
+        "tryNow": "立即試用",
+        "footerText": "版權所有 2026 Sign Made Easy。保留所有權利。<0>隱私政策</0> | <1>合理使用政策</1>"
+    },
+    "reassign": {
+        "title": "重新分配簽署人",
+        "successSubtitle": "文件已成功重新分配",
+        "successTitle": "謝謝您！",
+        "successMessage": "文件已成功重新分配給新的簽署人。",
+        "fields": {
+            "firstName": "名字",
+            "lastName": "姓氏",
+            "email": "電子郵件",
+            "language": "語言",
+            "message": "可選訊息"
+        },
+        "placeholders": {
+            "firstName": "請輸入您的名字",
+            "lastName": "請輸入您的姓氏",
+            "email": "your.email@example.com",
+            "message": "在此處撰寫您的訊息..."
+        },
+        "buttons": {
+            "submit": "提交",
+            "submitting": "提交中...",
+            "cancel": "取消"
+        },
+        "errors": {
+            "firstNameRequired": "名字為必填項",
+            "firstNameMin": "名字至少需要2個字符",
+            "lastNameRequired": "姓氏為必填項",
+            "lastNameMin": "姓氏至少需要2個字符",
+            "emailRequired": "電子郵件為必填項",
+            "emailInvalid": "電子郵件地址無效"
+        }
+    },
+    "cancelModal": {
+        "title": "取消交易",
+        "description": "您確定要取消此交易嗎？請在下方提供取消原因。",
+        "placeholder": "請提供取消原因...",
+        "buttons": {
+            "no": "不，不要取消",
+            "yes": "是的，取消它"
+        },
+        "errors": {
+            "reasonRequired": "取消原因為必填項"
+        },
+        "inPersonSuccess": {
+            "title": "取消交易",
+            "message": "交易已成功取消。確認郵件已發送。",
+            "passBackDevice": "您現在可以將設備交還給{{senderName}}。",
+            "continueButton": "繼續"
+        }
+    },
+    "enTranslations": {
+        "app.name": "Sign Made Easy",
+        "app.subtitle": "交易審計",
+        "meta.transaction_id": "交易 ID",
+        "meta.transaction_status": "交易狀態",
+        "meta.files": "文件",
+        "audit.title": "完整審計追蹤",
+        "audit.description": "請更新以下主題和訊息以獲得自定義訊息。",
+        "table.header.actions": "操作",
+        "table.header.language": "語言",
+        "table.header.ip_address": "IP 地址",
+        "table.header.date": "日期",
+        "status.completed": "已完成",
+        "status.pending": "待處理",
+        "status.failed": "失敗",
+        "action.created": "已創建",
+        "action.updated": "已更新",
+        "action.deleted": "已刪除",
+        "action.viewed": "已查看",
+        "action.signed": "已簽署",
+        "action.uploaded": "已上傳",
+        "action.downloaded": "已下載",
+        "placeholder.not_available": "—"
+    },
+    "auditPage": {
+        "appName": "Sign Made Easy",
+        "subtitle": "交易審計",
+        "meta": {
+            "transactionId": "交易 ID",
+            "transactionStatus": "交易狀態",
+            "files": "文件"
+        },
+        "audit": {
+            "title": "完整審計追蹤",
+            "description": "請更新以下主題和訊息以獲得自定義訊息。"
+        },
+        "table": {
+            "actions": "操作",
+            "language": "語言",
+            "ipAddress": "IP 地址",
+            "date": "日期"
+        },
+        "status": {
+            "completed": "已完成",
+            "pending": "待處理",
+            "failed": "失敗"
+        },
+        "fallback": {
+            "notAvailable": "—"
+        }
+    },
+    "audit": {
+        "transaction": {
+            "created": "交易由 {{userName}} <{{userEmail}}> 建立",
+            "sent": "交易由 {{userName}} <{{userEmail}}> 發送",
+            "cancelled": "交易由 {{userName}} <{{userEmail}}> 取消",
+            "edited": "交易由 {{userName}} <{{userEmail}}> 編輯",
+            "viewed": "交易由 {{userName}} <{{userEmail}}> 檢視",
+            "signed": "交易由 {{userName}} <{{userEmail}}> 簽署"
+        },
+        "signature": {
+            "declined": "交易簽名被 {{userName}} <{{userEmail}}> 拒絕"
+        },
+        "ers": {
+            "accepted": "電子記錄和簽名披露已被 {{userName}} <{{userEmail}}> 接受"
+        },
+        "language": {
+            "updated": "{{userName}} <{{userEmail}}> 將語言更新為 {{language}}"
+        },
+        "invitation": {
+            "sent": "邀請郵件已發送至 {{userName}} <{{userEmail}}>",
+            "view": "檢視文件的邀請已發送給 {{userName}} <{{userEmail}}>",
+            "resent": "邀請郵件由 {{senderName}} <{{senderEmail}}> 重新發送至 {{recipientName}} <{{recipientEmail}}>"
+        },
+        "reassigned": {
+            "to": "簽署人由 {{fromName}} <{{fromEmail}}> 重新分配給 {{toName}} <{{toEmail}}>",
+            "complex": "{{personName}} <{{personEmail}}> 被 {{fromName}} <{{fromEmail}}> 重新分配給 {{toName}} <{{toEmail}}>"
+        },
+        "inperson": {
+            "started": "面對面交易由 {{userName}} <{{userEmail}}> 啟動",
+            "verification": "面對面簽名驗證已被 {{userName}} <{{userEmail}}> 接受"
+        },
+        "facilitator": {
+            "accepted": "協調員流程已被 {{userName}} <{{userEmail}}> 接受"
+        }
+    },
+    "signatureModal": {
+        "title": {
+            "signature": "簽名",
+            "initial": "縮寫",
+            "edit": "編輯",
+            "styleSelection": "樣式選擇"
+        },
+        "subtitle": "創建您的數位簽名",
+        "tabs": {
+            "select": "選擇",
+            "draw": "繪製",
+            "upload": "上傳"
+        },
+        "selectTab": {
+            "description": "確認您的姓名並選擇簽名樣式。",
+            "requiredFields": "必填欄位。",
+            "fullName": {
+                "label": "全名",
+                "required": "*",
+                "placeholder": "輸入全名"
+            },
+            "initials": {
+                "label": "縮寫",
+                "required": "*",
+                "placeholder": "輸入縮寫"
+            }
+        },
+        "drawTab": {
+            "description": "繪製您的簽名。",
+            "required": "*",
+            "requiredFields": "為必填欄位。",
+            "signature": "簽名",
+            "initials": "姓名縮寫",
+            "clearSignature": "清除簽名",
+            "fullNameBox": {
+                "label": "完整簽名",
+                "required": "*"
+            },
+            "initialsBox": {
+                "label": "姓名縮寫",
+                "required": "*",
+                "placeholder": "輸入姓名縮寫"
+            }
+        },
+        "uploadTab": {
+            "requiredMessage": "簽名和縮寫均為必填。",
+            "requirements": "簽名使用300×100px圖片，縮寫使用100×100px圖片。最大300KB。支援格式：.png、.jpg。",
+            "signature": {
+                "uploadLabel": "上傳簽名",
+                "uploadHint": "JPG、PNG（300×100px，最大300KB）",
+                "browseButton": "瀏覽",
+                "uploadedLabel": "簽名 ✓",
+                "changeButton": "更改簽名",
+                "altText": "已上傳的簽名圖片"
+            },
+            "initials": {
+                "uploadLabel": "上傳縮寫",
+                "uploadHint": "JPG、PNG（100×100px，最大300KB）",
+                "browseButton": "瀏覽",
+                "uploadedLabel": "縮寫 ✓",
+                "changeButton": "更改縮寫",
+                "altText": "已上傳的縮寫圖片"
+            }
+        },
+        "footer": {
+            "agreementText": "我理解我正在簽署此文件。",
+            "cancelButton": "取消",
+            "adoptButton": "採用簽名並簽署"
+        },
+        "errors": {
+            "requiredField": "此欄位為必填",
+            "fileTooLarge": "檔案大小必須小於300KB",
+            "invalidFileType": "僅支援.png、.jpg和.jpeg檔案",
+            "signatureRequired": "請添加簽名",
+            "initialsRequired": "請添加縮寫"
+        }
+    },
+    "stampModal": {
+        "title": {
+            "add": "添加印章",
+            "edit": "編輯印章"
+        },
+        "closeButton": "關閉模態框",
+        "fileRequirements": "最大尺寸 = 400Kb | 支援的檔案類型 = .png、.jpg、.jpeg",
+        "dragDropLabel": "拖放圖片，或點擊上傳",
+        "previewAltText": "印章預覽",
+        "changeImageButton": "更改圖片",
+        "clearButton": "關閉",
+        "saveButton": "儲存",
+        "updateButton": "更新",
+        "errors": {
+            "fileTooLarge": "檔案大小超過400KB限制",
+            "invalidFileType": "僅支援.png、.jpg和.jpeg檔案",
+            "uploadFailed": "上傳圖片失敗。請重試。"
+        }
+    },
+    "attachmentModal": {
+        "title": "附件",
+        "subtitle": {
+            "hasFile": "管理您的附件",
+            "noFile": "上傳附件"
+        },
+        "uploading": {
+            "status": "正在上傳檔案...",
+            "shimmerText": "正在上傳檔案..."
+        },
+        "uploadArea": {
+            "dragging": "將檔案拖放到此處",
+            "default": "上傳或拖放檔案",
+            "fileTypes": "PDF、DOCX、JPG、PNG、TXT（最大10MB）",
+            "browseButton": "瀏覽檔案"
+        },
+        "uploadedFile": {
+            "status": "上傳成功",
+            "deleteButton": "刪除檔案"
+        },
+        "buttons": {
+            "close": "關閉",
+            "uploading": "上傳中...",
+            "deleting": "刪除中...",
+            "saved": "檔案已儲存！",
+            "done": "完成",
+            "uploadFile": "上傳檔案"
+        },
+        "errors": {
+            "fileTooLarge": "檔案大小超過10MB限制",
+            "invalidFileType": "僅支援PDF、DOCX、JPG、PNG和TXT檔案",
+            "uploadFailed": "上傳檔案失敗。請重試。",
+            "deleteFailed": "刪除檔案失敗。請重試。",
+            "noFileSelected": "請先選擇檔案再繼續"
+        },
+        "accessibility": {
+            "fileUpload": "檔案上傳",
+            "deleteFile": "刪除檔案"
+        }
+    },
+    "languages": {
+        "zh_CN": "中文（簡體）",
+        "zh_TW": "中文（繁體）",
+        "da": "丹麥語",
+        "nl_NL": "荷蘭語",
+        "en": "英語",
+        "fi": "芬蘭語",
+        "fr": "法語",
+        "de": "德語",
+        "it": "義大利語",
+        "ja": "日語",
+        "ko": "韓語",
+        "no": "挪威語",
+        "pt_BR": "葡萄牙語（巴西）",
+        "ru": "俄語",
+        "es": "西班牙語",
+        "es_MX": "西班牙語（墨西哥）",
+        "sv": "瑞典語",
+        "th": "泰語",
+        "he": "希伯來語"
+    },
+    "session-expired": {
+        "title": "會話已過期",
+        "description": "由於不活動或會話超時，此文件簽署連結已過期。請返回您的電子郵件，再次點擊連結以繼續簽署。"
+    },
+    "inPersonComplete": {
+        "title": "🎉 簽署完成！",
+        "subtitle": "文件已成功簽署",
+        "thankYou": "感謝您的簽署！",
+        "message": "文件經所有相關方簽署後，您將收到一封確認電子郵件。",
+        "passDevice": "您現在可以將設備交還給 <strong>{{senderName}}</strong>",
+        "continueButton": "繼續"
+    }
+}
\ No newline at end of file
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..8665a0f
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,73 @@
+
+import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { Suspense, lazy, useEffect } from "react";
+
+import Loader from "./helper/Loader.jsx";
+import AppLayout from "./layout/AppLayout";
+
+//  Lazy loaded pages
+const Home = lazy(() => import("./pages/Home"));
+const ErrorPage = lazy(() => import("./pages/ErrorPage"));
+const AccessDenied = lazy(() => import("./pages/AccessDenied"));
+const CompletionScreen = lazy(() => import("./pages/CompletionScreen"));
+const ReassignPage = lazy(() => import("./pages/ReassignPage"));
+const ReassignInfoPage = lazy(() => import("./pages/ReassignInfoPage.jsx"))
+const AuditTrails = lazy(() => import("./pages/AuditTrails.jsx"))
+const SessionExpired = lazy(() => import("./pages/SessionExpired.jsx"))
+const ExpiredPage = lazy(() => import("./pages/ExpiredPage.jsx"))
+const EmailTemplateEditorPage = lazy(() => import("./pages/EmailTemplateEditorPage.jsx"));
+
+const titles = {
+  '/': 'Sign',
+  '/sign': 'Sign',
+  '/preview': 'Preview',
+  '/error': 'Error',
+  '/expired': "Sign",
+  '/access-denied': 'Access Denied',
+  '/session-expired': 'Session Expired',
+  '/status': 'Sign',
+  '/reassign': 'Reassign',
+  '/reassign-info': 'Reassign',
+  '/audit-trails-info': 'Audit Trails'
+};
+
+
+const AppRoutes = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    document.title = titles[location.pathname] || 'Sign';
+  }, [location.pathname]);
+
+  return (
+    <Routes>
+      <Route element={<AppLayout />}>
+        <Route path="/" element={<Navigate to="/sign" replace />} />
+        <Route path="/sign" element={<Home />} />
+        <Route path="/preview" element={<Home />} />
+        <Route path="/error" element={<ErrorPage />} />
+        <Route path="/expired" element={<ExpiredPage />} />
+        <Route path="/access-denied" element={<AccessDenied />} />
+        <Route path="/session-expired" element={<SessionExpired />} />
+        <Route path="/status" element={<CompletionScreen />} />
+        <Route path="/reassign" element={<ReassignPage />} />
+        <Route path="/reassign-info" element={<ReassignInfoPage />} />
+        <Route path="/audit-trails-info" element={<AuditTrails />} />
+        <Route path="*" element={<div />} />
+      </Route>
+      <Route path="/email-template-editor" element={<EmailTemplateEditorPage />} />
+    </Routes>
+  );
+};
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Suspense fallback={<Loader transparentbg={false} />}>
+        <AppRoutes />
+      </Suspense>
+    </BrowserRouter>
+  );
+};
+
+export default App;
\ No newline at end of file
diff --git a/src/ShimmerUI/CompletionScreenShimmerUI.jsx b/src/ShimmerUI/CompletionScreenShimmerUI.jsx
new file mode 100644
index 0000000..c8bc811
--- /dev/null
+++ b/src/ShimmerUI/CompletionScreenShimmerUI.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+const CompletionScreenShimmerUI = () => {
+  return (
+      <div className="min-h-screen bg-gradient-to-b from-white to-blue-50 flex flex-col">
+        {/* Header Skeleton */}
+        <header className="px-4 py-2 flex justify-center sm:justify-start items-center bg-white shadow-md">
+          <div className="w-40 h-8 bg-gray-200 animate-pulse rounded"></div>
+        </header>
+
+        {/* Main Content Skeleton */}
+        <main className="flex flex-col items-center text-center px-4 flex-grow mt-6">
+          <div className="w-3/4 max-w-2xl h-8 bg-gray-200 animate-pulse rounded mb-2"></div>
+          <div className="w-1/2 max-w-md h-4 bg-gray-200 animate-pulse rounded mb-4"></div>
+          <div className="w-32 h-10 bg-gray-300 animate-pulse rounded-lg mb-6"></div>
+
+          {/* Image Placeholder */}
+          <div className="w-64 h-64 bg-gray-200 animate-pulse rounded-lg mb-8"></div>
+
+          {/* Apps Section Skeleton */}
+          <div className="w-full max-w-4xl">
+            <div className="w-48 h-6 bg-gray-200 animate-pulse rounded mx-auto mb-4"></div>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <div className="bg-white rounded-lg shadow p-4 w-full sm:w-80 h-32 animate-pulse"></div>
+              <div className="bg-white rounded-lg shadow p-4 w-full sm:w-80 h-32 animate-pulse"></div>
+            </div>
+          </div>
+        </main>
+
+        {/* Footer Skeleton */}
+        <footer className="text-center py-2 bg-white">
+          <div className="w-2/3 h-3 bg-gray-200 animate-pulse rounded mx-auto"></div>
+        </footer>
+      </div>
+    );
+}
+
+export default CompletionScreenShimmerUI
\ No newline at end of file
diff --git a/src/ShimmerUI/DocFormOverlayShimmerUI.jsx b/src/ShimmerUI/DocFormOverlayShimmerUI.jsx
new file mode 100644
index 0000000..623704d
--- /dev/null
+++ b/src/ShimmerUI/DocFormOverlayShimmerUI.jsx
@@ -0,0 +1,99 @@
+const DocFormOverlayShimmerUI = () => {
+    return (
+        <>
+        <div className="flex flex-col  ">
+            <div className="skeleton h-15 w-full"></div>
+            <main className="flex w-full">
+                {/* Sidebar - Documents List with Skeleton */}
+                <section className="hidden max-h-[90vh] w-full min-w-[20vw] border-r border-slate-300 bg-base-100 md:flex flex-col">
+                    <div className="flex-1 overflow-y-auto no-scrollbar mx-3 my-4 p-2 space-y-3 max-w-[313px]">
+                        {/* Documents Header */}
+                        <div className="h-15 skeleton text-white text-center p-3 rounded-2xl font-semibold text-sm">
+                            
+                        </div>
+
+                        {/* Skeleton Document Items */}
+                        {Array.from({ length: 3 }).map((_, index) => (
+                            <div
+                                key={index}
+                                className="collapse border border-base-300 rounded-xl bg-base-100 shadow-sm"
+                            >
+                                <div className="collapse-title font-semibold flex flex-col">
+                                    {/* Document Name Skeleton */}
+                                    <div className="skeleton h-4 w-3/4 rounded"></div>
+                                    {/* Pages Count Skeleton */}
+                                    <div className="skeleton h-3 w-1/3 mt-2 rounded"></div>
+                                </div>
+
+                                <div className="collapse-content p-1 bg-base-200 rounded-b-xl">
+                                    <div className="max-h-[240px] overflow-y-auto no-scrollbar flex flex-col items-center gap-3">
+                                        {/* Thumbnail Skeletons */}
+                                        {Array.from({ length: 2 }).map((_, pageIndex) => (
+                                            <div
+                                                key={pageIndex}
+                                                className="relative border rounded-lg p-1 bg-white shadow-sm w-full"
+                                            >
+                                                <div className="skeleton w-[150px] h-[200px] rounded-md"></div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+
+                {/* Main Document Viewer Area with Skeleton */}
+                <section className="h-full w-full bg-docs-bg mt-3 md:mt-0">
+                    <div className="flex flex-col h-full">
+                        <div className="flex-1 flex flex-col">
+                            <div
+                                // ref={containerRef}
+                                className="bg-white min-w-[80vw] min-h-[80vh] max-h-[85vh] overflow-auto no-scrollbar p-0.5 sm:p-6 lg:p-8 flex flex-col items-center gap-6"
+                            >
+                                {Array.from({ length: 2 }).map((_, docIndex) => (
+                                    <div key={docIndex} className="flex flex-col w-full">
+                                        {/* Document Title Skeleton */}
+                                        <div className="skeleton h-6 w-80 mx-auto my-3 md:mb-4 rounded"></div>
+
+                                        <div className="w-full flex flex-col items-center gap-8">
+                                            {Array.from({ length: 3 }).map((_, pageIndex) => (
+                                                <div
+                                                    key={pageIndex}
+                                                    className="block w-full max-w-full relative"
+                                                >
+                                                    <div className="w-full md:max-w-[60vw] lg:max-w-[60vw] xl:max-w-[60vw] 2xl:max-w-[65vw] md:mx-auto">
+                                                        {/* Full Page Skeleton - A4-like aspect ratio */}
+                                                        <div className="skeleton w-full aspect-[8.5/11] rounded-2xl"></div>
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+
+            {/* Skeleton Footer */}
+            <footer className="fixed bottom-0 left-0 right-0 z-40 bg-white backdrop-blur-sm border-t border-gray-200 px-4 md:px-6 py-3">
+                <div className="flex flex-col items-center justify-between max-w-7xl mx-auto">
+                    {/* Mobile: Start/Next Button Skeleton */}
+                    <div className="flex sm:hidden items-center justify-center gap-2 w-full mb-2">
+                        <div className="skeleton h-9 w-28 rounded-xl"></div>
+                    </div>
+
+                    {/* Desktop: Terms & Conditions Skeleton */}
+                    <div className="sm:flex items-center justify-center w-full">
+                        <div className="skeleton h-4 w-96 rounded"></div>
+                    </div>
+                </div>
+            </footer>
+        </div>
+        </>
+    )
+}
+
+export default DocFormOverlayShimmerUI
\ No newline at end of file
diff --git a/src/ShimmerUI/ExpiredPageShimmerUI.jsx b/src/ShimmerUI/ExpiredPageShimmerUI.jsx
new file mode 100644
index 0000000..4863ed2
--- /dev/null
+++ b/src/ShimmerUI/ExpiredPageShimmerUI.jsx
@@ -0,0 +1,33 @@
+import bgComplete from "../assets/bgComplete.png";
+
+export default function ExpiredPageShimmerUI() {
+  return (
+    <div
+      className="relative min-h-[100dvh] flex flex-col overflow-hidden animate-pulse"
+      style={{
+        backgroundImage: `url(${bgComplete})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      {/* Header */}
+      <header className="px-4 py-2 bg-white/80 shadow-md">
+        <div className="w-40 h-8 bg-gray-200 rounded"></div>
+      </header>
+
+      {/* Main */}
+      <main className="flex flex-col items-center justify-center flex-grow px-4">
+        <div className="w-72 h-10 bg-gray-200 rounded mb-6"></div>
+
+        <div className="w-52 h-52 rounded-full bg-gray-200 mb-6"></div>
+
+        <div className="w-full max-w-xl space-y-3">
+          <div className="h-4 bg-gray-200 rounded"></div>
+          <div className="h-4 bg-gray-200 rounded w-11/12 mx-auto"></div>
+          <div className="h-4 bg-gray-200 rounded w-9/12 mx-auto"></div>
+        </div>
+      </main>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/api/Axios.jsx b/src/api/Axios.jsx
new file mode 100644
index 0000000..7613825
--- /dev/null
+++ b/src/api/Axios.jsx
@@ -0,0 +1,50 @@
+import axios from "axios";
+import { navigateTo } from "../helper/navigator";
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_BASE_API_URL,
+  headers: {
+    "X-AUTH-TYPE": "TRANSACTIONAL",
+    "ngrok-skip-browser-warning": "69420",
+  },
+});
+
+// Request Interceptor — auto attach uuid from URL
+api.interceptors.request.use(
+  (config) => {
+    const uuid = new URLSearchParams(window.location.search).get("uuid");
+    if (uuid) {
+      config.headers.Authorization = `${uuid}`;
+      // config.headers.Authorization = `Bearer ${uuid}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// Response Interceptor — global error routing
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const status = error?.response?.status;
+    const message = error?.response?.data?.message || "Something went wrong.";
+    const errorCode = error?.response?.data?.errorCode || null;
+    const uuid = new URLSearchParams(window.location.search).get("uuid");
+
+    if (status === 401) {
+      navigateTo("/session-expired", {
+        replace: true,
+        state: { status, message, errorCode, uuid },
+      });
+    } else {
+      navigateTo("/error", {
+        replace: true,
+        state: { status, message, errorCode },
+      });
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default api;
\ No newline at end of file
diff --git a/src/assets/AccessDeniedGif.gif b/src/assets/AccessDeniedGif.gif
new file mode 100644
index 0000000..eef5581
Binary files /dev/null and b/src/assets/AccessDeniedGif.gif differ
diff --git a/src/assets/AiIcon.png b/src/assets/AiIcon.png
new file mode 100644
index 0000000..3de28e4
Binary files /dev/null and b/src/assets/AiIcon.png differ
diff --git a/src/assets/CompleteGif.gif b/src/assets/CompleteGif.gif
new file mode 100644
index 0000000..813996f
Binary files /dev/null and b/src/assets/CompleteGif.gif differ
diff --git a/src/assets/DMELogo.png b/src/assets/DMELogo.png
new file mode 100644
index 0000000..4f4fdc9
Binary files /dev/null and b/src/assets/DMELogo.png differ
diff --git a/src/assets/DeniedGif.gif b/src/assets/DeniedGif.gif
new file mode 100644
index 0000000..3ec5930
Binary files /dev/null and b/src/assets/DeniedGif.gif differ
diff --git a/src/assets/FMELogo.png b/src/assets/FMELogo.png
new file mode 100644
index 0000000..235237a
Binary files /dev/null and b/src/assets/FMELogo.png differ
diff --git a/src/assets/Options.png b/src/assets/Options.png
new file mode 100644
index 0000000..e6ddaa6
Binary files /dev/null and b/src/assets/Options.png differ
diff --git a/src/assets/Print.png b/src/assets/Print.png
new file mode 100644
index 0000000..ea2b18b
Binary files /dev/null and b/src/assets/Print.png differ
diff --git a/src/assets/SMELoader.gif b/src/assets/SMELoader.gif
new file mode 100644
index 0000000..ebf79a9
Binary files /dev/null and b/src/assets/SMELoader.gif differ
diff --git a/src/assets/SMELogo.png b/src/assets/SMELogo.png
new file mode 100644
index 0000000..e6ddc10
Binary files /dev/null and b/src/assets/SMELogo.png differ
diff --git a/src/assets/SMELogoCompScreens.png b/src/assets/SMELogoCompScreens.png
new file mode 100644
index 0000000..4904121
Binary files /dev/null and b/src/assets/SMELogoCompScreens.png differ
diff --git a/src/assets/bgComplete.png b/src/assets/bgComplete.png
new file mode 100644
index 0000000..95eba66
Binary files /dev/null and b/src/assets/bgComplete.png differ
diff --git a/src/assets/icons/attachment.svg b/src/assets/icons/attachment.svg
new file mode 100644
index 0000000..1311c14
--- /dev/null
+++ b/src/assets/icons/attachment.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3334 19.6667L17.9834 22.0167C16.6834 23.3167 16.6834 25.4333 17.9834 26.7333C19.2834 28.0333 21.4001 28.0333 22.7001 26.7333L26.4001 23.0333C27.6487 21.7811 28.3498 20.085 28.3498 18.3167C28.3498 16.5484 27.6487 14.8522 26.4001 13.6C25.1479 12.3514 23.4517 11.6503 21.6834 11.6503C19.9151 11.6503 18.2189 12.3514 16.9668 13.6L12.9334 17.6333C12.4024 18.1639 11.9811 18.794 11.6937 19.4875C11.4062 20.181 11.2583 20.9243 11.2583 21.675C11.2583 22.4257 11.4062 23.169 11.6937 23.8625C11.9811 24.556 12.4024 25.1861 12.9334 25.7167" stroke="#FBC249" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9999 36.6666H24.9999C33.3333 36.6666 36.6666 33.3333 36.6666 25V15C36.6666 6.66665 33.3333 3.33331 24.9999 3.33331H14.9999C6.66659 3.33331 3.33325 6.66665 3.33325 15V25C3.33325 33.3333 6.66659 36.6666 14.9999 36.6666Z" stroke="#0D6EFD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/company.svg b/src/assets/icons/company.svg
new file mode 100644
index 0000000..c8b6951
--- /dev/null
+++ b/src/assets/icons/company.svg
@@ -0,0 +1,16 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.5 36.25H36.25V5C36.25 2.9375 34.5625 1.25 32.5 1.25H17.5C15.4375 1.25 13.75 2.9375 13.75 5V7.5H7.5C5.4375 7.5 3.75 9.1875 3.75 11.25V36.25H2.5C1.8125 36.25 1.25 36.8125 1.25 37.5C1.25 38.1875 1.8125 38.75 2.5 38.75H37.5C38.1875 38.75 38.75 38.1875 38.75 37.5C38.75 36.8125 38.1875 36.25 37.5 36.25ZM26.25 33.75H33.75V36.25H26.25V33.75ZM16.25 5C16.25 4.3125 16.8125 3.75 17.5 3.75H32.5C33.1875 3.75 33.75 4.3125 33.75 5V31.25H26.25V11.25C26.25 9.1875 24.5625 7.5 22.5 7.5H16.25V5ZM6.25 11.25C6.25 10.5625 6.8125 10 7.5 10H22.5C23.1875 10 23.75 10.5625 23.75 11.25V36.25H20V29.375C20.6875 29.375 21.25 28.8125 21.25 28.125C21.25 27.4375 20.6875 26.875 20 26.875H10C9.3125 26.875 8.75 27.4375 8.75 28.125C8.75 28.8125 9.3125 29.375 10 29.375V36.25H6.25V11.25ZM17.5 29.375V36.25H12.5V29.375H17.5Z" fill="#0D6EFD"/>
+<path d="M9.375 14.375H10.0375C10.725 14.375 11.2875 13.8125 11.2875 13.125C11.2875 12.4375 10.725 11.875 10.0375 11.875H9.375C8.6875 11.875 8.125 12.4375 8.125 13.125C8.125 13.8125 8.6875 14.375 9.375 14.375Z" fill="#FBC249"/>
+<path d="M14.6748 14.375H15.3373C16.0248 14.375 16.5873 13.8125 16.5873 13.125C16.5873 12.4375 16.0248 11.875 15.3373 11.875H14.6748C13.9873 11.875 13.4248 12.4375 13.4248 13.125C13.4248 13.8125 13.9873 14.375 14.6748 14.375Z" fill="#FBC249"/>
+<path d="M19.9624 14.375H20.6249C21.3124 14.375 21.8749 13.8125 21.8749 13.125C21.8749 12.4375 21.3124 11.875 20.6249 11.875H19.9624C19.2749 11.875 18.7124 12.4375 18.7124 13.125C18.7124 13.8125 19.2749 14.375 19.9624 14.375Z" fill="#FBC249"/>
+<path d="M9.375 19.375H10.0375C10.725 19.375 11.2875 18.8125 11.2875 18.125C11.2875 17.4375 10.725 16.875 10.0375 16.875H9.375C8.6875 16.875 8.125 17.4375 8.125 18.125C8.125 18.8125 8.6875 19.375 9.375 19.375Z" fill="#FBC249"/>
+<path d="M14.6748 19.375H15.3373C16.0248 19.375 16.5873 18.8125 16.5873 18.125C16.5873 17.4375 16.0248 16.875 15.3373 16.875H14.6748C13.9873 16.875 13.4248 17.4375 13.4248 18.125C13.4248 18.8125 13.9873 19.375 14.6748 19.375Z" fill="#FBC249"/>
+<path d="M19.9624 19.375H20.6249C21.3124 19.375 21.8749 18.8125 21.8749 18.125C21.8749 17.4375 21.3124 16.875 20.6249 16.875H19.9624C19.2749 16.875 18.7124 17.4375 18.7124 18.125C18.7124 18.8125 19.2749 19.375 19.9624 19.375Z" fill="#FBC249"/>
+<path d="M10.0375 24.375C10.725 24.375 11.2875 23.8125 11.2875 23.125C11.2875 22.4375 10.725 21.875 10.0375 21.875H9.375C8.6875 21.875 8.125 22.4375 8.125 23.125C8.125 23.8125 8.6875 24.375 9.375 24.375H10.0375Z" fill="#FBC249"/>
+<path d="M14.6748 24.375H15.3373C16.0248 24.375 16.5873 23.8125 16.5873 23.125C16.5873 22.4375 16.0248 21.875 15.3373 21.875H14.6748C13.9873 21.875 13.4248 22.4375 13.4248 23.125C13.4248 23.8125 13.9873 24.375 14.6748 24.375Z" fill="#FBC249"/>
+<path d="M19.9624 24.375H20.6249C21.3124 24.375 21.8749 23.8125 21.8749 23.125C21.8749 22.4375 21.3124 21.875 20.6249 21.875H19.9624C19.2749 21.875 18.7124 22.4375 18.7124 23.125C18.7124 23.8125 19.2749 24.375 19.9624 24.375Z" fill="#FBC249"/>
+<path d="M29.375 13.75H30.625C31.3125 13.75 31.875 13.1875 31.875 12.5C31.875 11.8125 31.3125 11.25 30.625 11.25H29.375C28.6875 11.25 28.125 11.8125 28.125 12.5C28.125 13.1875 28.6875 13.75 29.375 13.75Z" fill="#FBC249"/>
+<path d="M29.375 18.75H30.625C31.3125 18.75 31.875 18.1875 31.875 17.5C31.875 16.8125 31.3125 16.25 30.625 16.25H29.375C28.6875 16.25 28.125 16.8125 28.125 17.5C28.125 18.1875 28.6875 18.75 29.375 18.75Z" fill="#FBC249"/>
+<path d="M29.375 23.75H30.625C31.3125 23.75 31.875 23.1875 31.875 22.5C31.875 21.8125 31.3125 21.25 30.625 21.25H29.375C28.6875 21.25 28.125 21.8125 28.125 22.5C28.125 23.1875 28.6875 23.75 29.375 23.75Z" fill="#FBC249"/>
+<path d="M29.375 28.75H30.625C31.3125 28.75 31.875 28.1875 31.875 27.5C31.875 26.8125 31.3125 26.25 30.625 26.25H29.375C28.6875 26.25 28.125 26.8125 28.125 27.5C28.125 28.1875 28.6875 28.75 29.375 28.75Z" fill="#FBC249"/>
+</svg>
diff --git a/src/assets/icons/custom-tag.svg b/src/assets/icons/custom-tag.svg
new file mode 100644
index 0000000..f06c703
--- /dev/null
+++ b/src/assets/icons/custom-tag.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.4168 14.4347V29.9094H32.9168V14.4347H30.4168ZM25.0002 35.4167H15.0002V37.9167H25.0002V35.4167ZM9.5835 29.9094V14.4347H7.0835V29.9094H9.5835ZM11.4814 10.2478L16.4814 5.90377L14.8417 4.01654L9.84175 8.36052L11.4814 10.2478ZM23.519 5.90377L28.519 10.2478L30.1587 8.36052L25.1587 4.01654L23.519 5.90377ZM16.4814 5.90377C18.5078 4.14324 21.4925 4.14324 23.519 5.90377L25.1587 4.01654C22.1918 1.43899 17.8085 1.43899 14.8417 4.01654L16.4814 5.90377ZM15.0002 35.4167C12.0245 35.4167 9.5835 32.967 9.5835 29.9094H7.0835C7.0835 34.3157 10.612 37.9167 15.0002 37.9167V35.4167ZM30.4168 29.9094C30.4168 32.967 27.9758 35.4167 25.0002 35.4167V37.9167C29.3883 37.9167 32.9168 34.3157 32.9168 29.9094H30.4168ZM32.9168 14.4347C32.9168 12.1033 31.912 9.88382 30.1587 8.36052L28.519 10.2478C29.7208 11.292 30.4168 12.8208 30.4168 14.4347H32.9168ZM9.5835 14.4347C9.5835 12.8208 10.2794 11.292 11.4814 10.2478L9.84175 8.36052C8.0884 9.88382 7.0835 12.1033 7.0835 14.4347H9.5835Z" fill="#0D6EFD"/>
+<path d="M22.0837 13.3333C22.0837 14.4839 21.151 15.4167 20.0003 15.4167V17.9167C22.5317 17.9167 24.5837 15.8646 24.5837 13.3333H22.0837ZM20.0003 15.4167C18.8497 15.4167 17.917 14.4839 17.917 13.3333H15.417C15.417 15.8646 17.469 17.9167 20.0003 17.9167V15.4167ZM17.917 13.3333C17.917 12.1827 18.8497 11.25 20.0003 11.25V8.75C17.469 8.75 15.417 10.802 15.417 13.3333H17.917ZM20.0003 11.25C21.151 11.25 22.0837 12.1827 22.0837 13.3333H24.5837C24.5837 10.802 22.5317 8.75 20.0003 8.75V11.25Z" fill="#FBC249"/>
+</svg>
diff --git a/src/assets/icons/dropdown.svg b/src/assets/icons/dropdown.svg
new file mode 100644
index 0000000..da08821
--- /dev/null
+++ b/src/assets/icons/dropdown.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.9999 34.1666C19.6665 34.1666 19.3332 34 18.9999 33.8333L5.66654 23.8333C4.99987 23.3333 4.8332 22.1666 5.3332 21.5C5.8332 20.8333 6.99987 20.6666 7.66654 21.1666L19.9999 30.3333L32.3332 21.1666C32.9999 20.6666 34.1665 20.8333 34.6665 21.5C35.1665 22.1666 34.9999 23.3333 34.3332 23.8333L20.9999 33.8333C20.6665 34 20.3332 34.1666 19.9999 34.1666Z" fill="#0D6EFD"/>
+<path d="M33.3333 9.16665H6.66667C5.66667 9.16665 5 8.49998 5 7.49998C5 6.49998 5.66667 5.83331 6.66667 5.83331H33.3333C34.3333 5.83331 35 6.49998 35 7.49998C35 8.49998 34.3333 9.16665 33.3333 9.16665Z" fill="#FBC249"/>
+<path d="M33.3333 15.8333H6.66667C5.66667 15.8333 5 15.1667 5 14.1667C5 13.1667 5.66667 12.5 6.66667 12.5H33.3333C34.3333 12.5 35 13.1667 35 14.1667C35 15.1667 34.3333 15.8333 33.3333 15.8333Z" fill="#FBC249"/>
+</svg>
diff --git a/src/assets/icons/icons.js b/src/assets/icons/icons.js
new file mode 100644
index 0000000..1cd954b
--- /dev/null
+++ b/src/assets/icons/icons.js
@@ -0,0 +1,29 @@
+import SignatureIcon from "/src/assets/icons/signature.svg?react";
+import InitialIcon from "/src/assets/icons/initial.svg?react";
+import NameIcon from "/src/assets/icons/name.svg?react";
+import StampIcon from "/src/assets/icons/stamp.svg?react";
+import AttachmentIcon from "/src/assets/icons/attachment.svg?react";
+import CompanyIcon from "/src/assets/icons/company.svg?react";
+import TitleIcon from "/src/assets/icons/title.svg?react";
+import TextareaIcon from "/src/assets/icons/textarea.svg?react";
+import NumberIcon from "/src/assets/icons/number.svg?react";
+import TextIcon from "/src/assets/icons/text.svg?react";
+import CustomTagIcon from "/src/assets/icons/custom-tag.svg?react"
+import DropDownIcon from "/src/assets/icons/dropdown.svg?react"
+import WritebackIcon from "/src/assets/icons/writeback.svg?react"
+
+export const FieldIcons = {
+  signature: SignatureIcon,
+  initial: InitialIcon,
+  names: NameIcon,
+  stamp: StampIcon,
+  attachment: AttachmentIcon,
+  company: CompanyIcon,
+  titles: TitleIcon,
+  textarea: TextareaIcon,
+  number: NumberIcon,
+  text: TextIcon,
+  customtag: CustomTagIcon,
+  dropdown: DropDownIcon,
+  writeback: WritebackIcon,
+};
diff --git a/src/assets/icons/initial.svg b/src/assets/icons/initial.svg
new file mode 100644
index 0000000..52601cf
--- /dev/null
+++ b/src/assets/icons/initial.svg
@@ -0,0 +1,5 @@
+<svg width="39" height="36" viewBox="0 0 39 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.91844 27.3C4.31844 27.3 3.10844 26.85 2.28844 25.95C1.46844 25.03 1.05844 23.72 1.05844 22.02V20.82H4.17844V22.26C4.17844 23.62 4.74844 24.3 5.88844 24.3C6.44844 24.3 6.86844 24.14 7.14844 23.82C7.44844 23.48 7.59844 22.94 7.59844 22.2C7.59844 21.32 7.39844 20.55 6.99844 19.89C6.59844 19.21 5.85844 18.4 4.77844 17.46C3.41844 16.26 2.46844 15.18 1.92844 14.22C1.38844 13.24 1.11844 12.14 1.11844 10.92C1.11844 9.26 1.53844 7.98 2.37844 7.08C3.21844 6.16 4.43844 5.7 6.03844 5.7C7.61844 5.7 8.80844 6.16 9.60844 7.08C10.4284 7.98 10.8384 9.28 10.8384 10.98V11.85H7.71844V10.77C7.71844 10.05 7.57844 9.53 7.29844 9.21C7.01844 8.87 6.60844 8.7 6.06844 8.7C4.96844 8.7 4.41844 9.37 4.41844 10.71C4.41844 11.47 4.61844 12.18 5.01844 12.84C5.43844 13.5 6.18844 14.3 7.26844 15.24C8.64844 16.44 9.59844 17.53 10.1184 18.51C10.6384 19.49 10.8984 20.64 10.8984 21.96C10.8984 23.68 10.4684 25 9.60844 25.92C8.76844 26.84 7.53844 27.3 5.91844 27.3ZM12.7905 6H17.5005L19.6005 21.03H19.6605L21.7605 6H26.4705V27H23.3505V11.1H23.2905L20.8905 27H18.1305L15.7305 11.1H15.6705V27H12.7905V6ZM28.9331 6H37.9331V9H32.2331V14.55H36.7631V17.55H32.2331V24H37.9331V27H28.9331V6Z" fill="#0D6EFD"/>
+<path d="M0.398438 29.4H38.5931V31.8H0.398438V29.4Z" fill="#0D6EFD"/>
+<rect y="29" width="39" height="3" fill="#FBC249"/>
+</svg>
diff --git a/src/assets/icons/name.svg b/src/assets/icons/name.svg
new file mode 100644
index 0000000..0346577
--- /dev/null
+++ b/src/assets/icons/name.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.3167 36.6667C34.3167 30.2167 27.9 25 20 25C12.1 25 5.68335 30.2167 5.68335 36.6667" stroke="#0D6EFD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.8926 17.5592C24.3298 19.122 22.2102 20 20.0001 20C17.7899 20 15.6703 19.122 14.1075 17.5592C12.5447 15.9964 11.6667 13.8768 11.6667 11.6666C11.6667 9.45651 12.5447 7.33689 14.1075 5.77409C15.6703 4.21129 17.7899 3.33331 20.0001 3.33331C22.2102 3.33331 24.3298 4.21129 25.8926 5.77409C27.4554 7.33689 28.3334 9.45651 28.3334 11.6666C28.3334 13.8768 27.4554 15.9964 25.8926 17.5592Z" stroke="#FBC249" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/number.svg b/src/assets/icons/number.svg
new file mode 100644
index 0000000..07d4381
--- /dev/null
+++ b/src/assets/icons/number.svg
@@ -0,0 +1,6 @@
+<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.3076 1.69275L21.5786 34.2697" stroke="#FBC249" stroke-width="3.38462" stroke-linecap="round"/>
+<path d="M15.3442 1.69275L6.61523 34.2697" stroke="#FBC249" stroke-width="3.38462" stroke-linecap="round"/>
+<path d="M34.6925 12.6927H3.38477" stroke="#0D6EFD" stroke-width="3.38462" stroke-linecap="round"/>
+<path d="M33.0001 24.5389H1.69238" stroke="#0D6EFD" stroke-width="3.38462" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/signature.svg b/src/assets/icons/signature.svg
new file mode 100644
index 0000000..f8cefb5
--- /dev/null
+++ b/src/assets/icons/signature.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.0801 24.5987C21.5418 26.6325 18.4018 27.647 14.7059 27.647C13.0573 27.647 11.6623 27.2612 10.5509 26.6122C9.23383 27.2583 7.82453 27.647 6.47062 27.647C2.39344 27.647 0 25.453 0 21.7647C0 21.1149 0.52672 20.5882 1.17649 20.5882C1.82625 20.5882 2.35297 21.1149 2.35297 21.7647C2.35297 24.1057 3.64945 25.2941 6.47062 25.2941C7.1664 25.2941 7.89992 25.1431 8.62586 24.8792C7.57188 23.4205 7.22195 21.5556 7.68218 19.7146C8.42484 16.7438 10.361 14.7058 12.9412 14.7058C16.0278 14.7058 17.2912 18.6365 15.7581 21.7026C15.151 22.9167 14.1543 24.0938 12.9456 25.0758C13.4687 25.2168 14.0559 25.2941 14.7059 25.2941C17.8277 25.2941 20.4095 24.4789 22.4945 22.8528L24.1591 16.7493C24.2129 16.5518 24.3174 16.3717 24.4622 16.2269L33.2857 7.40343C33.7451 6.94397 34.49 6.94397 34.9495 7.40343C35.4089 7.86288 35.4089 8.6078 34.9495 9.06718L27.3366 16.6801C27.98 17.045 28.5577 17.4822 29.0671 17.9917C29.5766 18.5012 30.0138 19.0789 30.3787 19.7222L37.9916 12.1094C38.451 11.6499 39.1959 11.6499 39.6554 12.1094C40.1148 12.5687 40.1148 13.3137 39.6554 13.7731L30.8319 22.5966C30.6871 22.7414 30.507 22.8458 30.3095 22.8997L24.0801 24.5987ZM26.0741 18.6702L25.2062 21.8526L28.3886 20.9848C28.1148 20.4805 27.7864 20.0384 27.4034 19.6554C27.0204 19.2725 26.5784 18.9441 26.0741 18.6702ZM13.6536 20.6503C14.5119 18.9338 13.9092 17.0588 12.9412 17.0588C11.6096 17.0588 10.4722 18.2561 9.96492 20.2854C9.64672 21.5583 9.92117 22.831 10.7534 23.7749C12.0156 22.9148 13.0857 21.7862 13.6536 20.6503Z" fill="#0D6EFD"/>
+<path d="M0 33.1765C0 33.8262 0.52672 34.353 1.17649 34.353H21.1765C21.8263 34.353 22.353 33.8262 22.353 33.1765C22.353 32.5267 21.8263 32 21.1765 32H1.17649C0.52672 32 0 32.5267 0 33.1765Z" fill="#FBC249"/>
+</svg>
diff --git a/src/assets/icons/stamp.svg b/src/assets/icons/stamp.svg
new file mode 100644
index 0000000..611a5d4
--- /dev/null
+++ b/src/assets/icons/stamp.svg
@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_66_1285)">
+<mask id="mask0_66_1285" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<path d="M0 3.8147e-06H40V40H0V3.8147e-06Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_66_1285)">
+<path d="M32.8125 29.7656H7.1875C7.1875 26.3138 9.9857 23.5156 13.4375 23.5156H26.5625C30.0143 23.5156 32.8125 26.3138 32.8125 29.7656Z" stroke="#0D6EFD" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.2656 38.8281H2.73437C1.87141 38.8281 1.17188 38.1286 1.17188 37.2656V31.3281C1.17188 30.4652 1.87141 29.7656 2.73437 29.7656H37.2656C38.1286 29.7656 38.8281 30.4652 38.8281 31.3281V37.2656C38.8281 38.1286 38.1286 38.8281 37.2656 38.8281Z" stroke="#FBC249" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.8435 8.92406C27.358 4.80781 24.1484 1.17188 20 1.17188C15.8516 1.17188 12.642 4.80781 13.1566 8.92406L14.9805 23.5156H25.0195L26.8435 8.92406Z" stroke="#0D6EFD" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_66_1285">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/text.svg b/src/assets/icons/text.svg
new file mode 100644
index 0000000..ba4650e
--- /dev/null
+++ b/src/assets/icons/text.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.6668 18.8334H25.0002C24.5581 18.8334 24.1342 19.009 23.8217 19.3215C23.5091 19.6341 23.3335 20.058 23.3335 20.5V22.8334C23.3335 23.2754 23.5091 23.6993 23.8217 24.0119C24.1342 24.3244 24.5581 24.5 25.0002 24.5C25.4422 24.5 25.8661 24.3244 26.1787 24.0119C26.4912 23.6993 26.6668 23.2754 26.6668 22.8334V22.1667H29.1668V31.6667H27.3335C26.8915 31.6667 26.4675 31.8423 26.155 32.1549C25.8424 32.4674 25.6668 32.8913 25.6668 33.3334C25.6668 33.7754 25.8424 34.1993 26.155 34.5119C26.4675 34.8244 26.8915 35 27.3335 35H34.3335C34.7755 35 35.1994 34.8244 35.512 34.5119C35.8246 34.1993 36.0002 33.7754 36.0002 33.3334C36.0002 32.8913 35.8246 32.4674 35.512 32.1549C35.1994 31.8423 34.7755 31.6667 34.3335 31.6667H32.5002V22.1667H35.0002V22.8334C35.0002 23.2754 35.1758 23.6993 35.4883 24.0119C35.8009 24.3244 36.2248 24.5 36.6668 24.5C37.1089 24.5 37.5328 24.3244 37.8453 24.0119C38.1579 23.6993 38.3335 23.2754 38.3335 22.8334V20.5C38.3335 20.058 38.1579 19.6341 37.8453 19.3215C37.5328 19.009 37.1089 18.8334 36.6668 18.8334Z" fill="#FBC249"/>
+<path d="M22.5932 31.6667H18.3332V8.33333H28.3332V9.62833C28.3332 10.0704 28.5088 10.4943 28.8213 10.8068C29.1339 11.1194 29.5578 11.295 29.9998 11.295C30.4419 11.295 30.8658 11.1194 31.1783 10.8068C31.4909 10.4943 31.6665 10.0704 31.6665 9.62833V6.66667C31.6665 6.22464 31.4909 5.80072 31.1783 5.48816C30.8658 5.17559 30.4419 5 29.9998 5H3.33317C2.89114 5 2.46722 5.17559 2.15466 5.48816C1.8421 5.80072 1.6665 6.22464 1.6665 6.66667V9.62833C1.6665 10.0704 1.8421 10.4943 2.15466 10.8068C2.46722 11.1194 2.89114 11.295 3.33317 11.295C3.7752 11.295 4.19912 11.1194 4.51168 10.8068C4.82424 10.4943 4.99984 10.0704 4.99984 9.62833V8.33333H14.9998V31.6667H10.7398C10.2978 31.6667 9.87389 31.8423 9.56133 32.1548C9.24876 32.4674 9.07317 32.8913 9.07317 33.3333C9.07317 33.7754 9.24876 34.1993 9.56133 34.5118C9.87389 34.8244 10.2978 35 10.7398 35H22.5932C23.0352 35 23.4591 34.8244 23.7717 34.5118C24.0842 34.1993 24.2598 33.7754 24.2598 33.3333C24.2598 32.8913 24.0842 32.4674 23.7717 32.1548C23.4591 31.8423 23.0352 31.6667 22.5932 31.6667Z" fill="#0D6EFD"/>
+</svg>
diff --git a/src/assets/icons/textarea.svg b/src/assets/icons/textarea.svg
new file mode 100644
index 0000000..ece0934
--- /dev/null
+++ b/src/assets/icons/textarea.svg
@@ -0,0 +1,11 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_372_280)">
+<path d="M33.91 27.3225V10.6775C34.8386 10.4422 35.6883 9.96503 36.3726 9.29458C37.0569 8.62414 37.5513 7.78435 37.8056 6.86072C38.0598 5.93708 38.0648 4.96257 37.82 4.03639C37.5752 3.1102 37.0894 2.26541 36.412 1.58801C35.7346 0.910612 34.8898 0.424789 33.9636 0.179996C33.0374 -0.0647977 32.0629 -0.0598197 31.1393 0.194422C30.2156 0.448664 29.3759 0.943092 28.7054 1.62738C28.035 2.31166 27.5578 3.16137 27.3225 4.09001H10.6775C10.4422 3.16137 9.96503 2.31166 9.29458 1.62738C8.62414 0.943092 7.78435 0.448664 6.86072 0.194422C5.93708 -0.0598197 4.96257 -0.0647977 4.03639 0.179996C3.1102 0.424789 2.26541 0.910612 1.58801 1.58801C0.910612 2.26541 0.424789 3.1102 0.179996 4.03639C-0.0647977 4.96257 -0.0598197 5.93708 0.194422 6.86072C0.448664 7.78435 0.943092 8.62414 1.62738 9.29458C2.31166 9.96503 3.16137 10.4422 4.09001 10.6775V27.3225C3.16137 27.5578 2.31166 28.035 1.62738 28.7054C0.943092 29.3759 0.448664 30.2156 0.194422 31.1393C-0.0598197 32.0629 -0.0647977 33.0374 0.179996 33.9636C0.424789 34.8898 0.910612 35.7346 1.58801 36.412C2.26541 37.0894 3.1102 37.5752 4.03639 37.82C4.96257 38.0648 5.93708 38.0598 6.86072 37.8056C7.78435 37.5513 8.62414 37.0569 9.29458 36.3726C9.96503 35.6883 10.4422 34.8386 10.6775 33.91H27.3225C27.5578 34.8386 28.035 35.6883 28.7054 36.3726C29.3759 37.0569 30.2156 37.5513 31.1393 37.8056C32.0629 38.0598 33.0374 38.0648 33.9636 37.82C34.8898 37.5752 35.7346 37.0894 36.412 36.412C37.0894 35.7346 37.5752 34.8898 37.82 33.9636C38.0648 33.0374 38.0598 32.0629 37.8056 31.1393C37.5513 30.2156 37.0569 29.3759 36.3726 28.7054C35.6883 28.035 34.8386 27.5578 33.91 27.3225ZM32.5545 2.73455C33.0907 2.73455 33.6148 2.89355 34.0606 3.19143C34.5064 3.4893 34.8539 3.91269 35.0591 4.40804C35.2643 4.9034 35.318 5.44847 35.2134 5.97433C35.1088 6.5002 34.8506 6.98324 34.4714 7.36236C34.0923 7.74149 33.6093 7.99968 33.0834 8.10428C32.5575 8.20888 32.0125 8.1552 31.5171 7.95002C31.0218 7.74483 30.5984 7.39737 30.3005 6.95156C30.0026 6.50575 29.8436 5.98163 29.8436 5.44546C29.8436 4.72648 30.1292 4.03695 30.6376 3.52856C31.146 3.02017 31.8356 2.73455 32.5545 2.73455ZM2.73455 5.44546C2.73455 4.9093 2.89355 4.38517 3.19143 3.93936C3.4893 3.49356 3.91269 3.14609 4.40804 2.94091C4.9034 2.73573 5.44847 2.68204 5.97433 2.78664C6.5002 2.89124 6.98324 3.14943 7.36236 3.52856C7.74149 3.90769 7.99968 4.39073 8.10428 4.91659C8.20888 5.44246 8.1552 5.98753 7.95002 6.48288C7.74483 6.97824 7.39737 7.40162 6.95156 7.6995C6.50575 7.99738 5.98163 8.15637 5.44546 8.15637C4.72648 8.15637 4.03695 7.87076 3.52856 7.36236C3.02017 6.85397 2.73455 6.16444 2.73455 5.44546ZM5.44546 35.2654C4.9093 35.2654 4.38517 35.1065 3.93936 34.8086C3.49356 34.5107 3.14609 34.0873 2.94091 33.592C2.73573 33.0966 2.68204 32.5515 2.78664 32.0257C2.89124 31.4998 3.14943 31.0168 3.52856 30.6376C3.90769 30.2585 4.39073 30.0003 4.91659 29.8957C5.44246 29.7911 5.98753 29.8448 6.48288 30.05C6.97824 30.2552 7.40162 30.6026 7.6995 31.0484C7.99738 31.4942 8.15637 32.0184 8.15637 32.5545C8.15637 33.2735 7.87076 33.963 7.36236 34.4714C6.85397 34.9798 6.16444 35.2654 5.44546 35.2654ZM27.3225 31.1991H10.6775C10.4341 30.2667 9.94666 29.4161 9.26529 28.7347C8.58393 28.0533 7.73327 27.5659 6.80092 27.3225V10.6775C7.73327 10.4341 8.58393 9.94666 9.26529 9.26529C9.94666 8.58393 10.4341 7.73327 10.6775 6.80092H27.3225C27.5659 7.73327 28.0533 8.58393 28.7347 9.26529C29.4161 9.94666 30.2667 10.4341 31.1991 10.6775V27.3225C30.2667 27.5659 29.4161 28.0533 28.7347 28.7347C28.0533 29.4161 27.5659 30.2667 27.3225 31.1991ZM32.5545 35.2654C32.0184 35.2654 31.4942 35.1065 31.0484 34.8086C30.6026 34.5107 30.2552 34.0873 30.05 33.592C29.8448 33.0966 29.7911 32.5515 29.8957 32.0257C30.0003 31.4998 30.2585 31.0168 30.6376 30.6376C31.0168 30.2585 31.4998 30.0003 32.0257 29.8957C32.5515 29.7911 33.0966 29.8448 33.592 30.05C34.0873 30.2552 34.5107 30.6026 34.8086 31.0484C35.1065 31.4942 35.2654 32.0184 35.2654 32.5545C35.2654 33.2735 34.9798 33.963 34.4714 34.4714C33.963 34.9798 33.2735 35.2654 32.5545 35.2654Z" fill="#0D6EFD"/>
+<path d="M24.9375 13.0625H13.0625V15.4375H17.8125V26.125H20.1875V15.4375H24.9375V13.0625Z" fill="#FBC249"/>
+</g>
+<defs>
+<clipPath id="clip0_372_280">
+<rect width="38" height="38" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/title.svg b/src/assets/icons/title.svg
new file mode 100644
index 0000000..791879d
--- /dev/null
+++ b/src/assets/icons/title.svg
@@ -0,0 +1,20 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_372_188" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<path d="M0 3.8147e-06H40V40H0V3.8147e-06Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_372_188)">
+<path d="M38.8281 22.3438H1.17188V8.28125H38.8281V22.3438Z" stroke="#0D6EFD" stroke-width="2.26563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<path d="M5.85938 12.9688H10.5469" stroke="#FBC249" stroke-width="2.26563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.20312 17.6562V12.9688" stroke="#FBC249" stroke-width="2.26563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8906 27.0312H17.5781" stroke="#0D6EFD" stroke-width="2.26563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<mask id="mask1_372_188" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<path d="M0 3.8147e-06H40V40H0V3.8147e-06Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_372_188)">
+<path d="M15.2344 27.0312V3.59375" stroke="#0D6EFD" stroke-width="2.26563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8906 3.59375H17.5781" stroke="#0D6EFD" stroke-width="2.26563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.17188 31.7188H38.8281" stroke="#0D6EFD" stroke-width="2.26563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.17188 36.4062H38.8281" stroke="#0D6EFD" stroke-width="2.26563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/assets/icons/writeback.svg b/src/assets/icons/writeback.svg
new file mode 100644
index 0000000..d2dba03
--- /dev/null
+++ b/src/assets/icons/writeback.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.01636 31.3367C3.01636 35.3827 10.4083 37.5001 17.71 37.5001C25.0122 37.5001 32.4042 35.3827 32.4042 31.3367C32.4042 31.3293 32.4001 31.3231 32.3999 31.3156V25.7502C32.3999 25.0599 31.8402 24.5002 31.1499 24.5002C30.4596 24.5002 29.8999 25.0599 29.8999 25.7502V31.3373C29.8999 31.341 29.902 31.344 29.902 31.3476C29.8784 32.8059 25.0231 35.0001 17.71 35.0001C10.3796 35.0001 5.51636 32.7949 5.51636 31.3367V25.0982C8.29872 26.7965 13.0185 27.6752 17.7124 27.6752C19.3762 27.6752 21.0187 27.566 22.594 27.3511C23.2782 27.2577 23.7567 26.6279 23.6633 25.9437C23.5699 25.2588 22.9321 24.7797 22.2559 24.8743C20.7922 25.0739 19.2639 25.1752 17.7124 25.1752C10.4082 25.1752 5.55565 22.9889 5.51636 21.5307V15.2742C7.6358 16.5572 10.8035 17.3235 13.8574 17.6435C13.9014 17.6478 13.9453 17.6502 13.9886 17.6502C14.621 17.6502 15.1636 17.1729 15.2307 16.5302C15.3027 15.8436 14.8041 15.2289 14.1174 15.1569C8.52127 14.5711 5.53596 12.7769 5.51636 11.699V11.684C5.51636 11.6812 5.51476 11.6788 5.51476 11.676C5.53658 10.557 8.79784 8.66781 14.6832 8.15741C15.3711 8.0982 15.8801 7.49212 15.8203 6.80426C15.7611 6.117 15.1569 5.59515 14.4672 5.66717C9.18335 6.12494 3.0127 7.97674 3.0127 11.6877C3.0127 11.7003 3.0162 11.7119 3.01636 11.7246V31.3367Z" fill="#0D6EFD"/>
+<path d="M32.0069 7.01233L31.9172 7.06421C31.3105 6.5979 30.6427 6.21216 29.9372 5.9198V5.81787C29.9372 3.98865 28.4485 2.5 26.6193 2.5C24.7901 2.5 23.3014 3.98865 23.3014 5.81787V5.9198C22.5959 6.21216 21.9281 6.5979 21.3215 7.06421L21.2336 7.01355C20.4664 6.57043 19.5728 6.45264 18.7153 6.68152C17.8589 6.9104 17.143 7.45972 16.6999 8.22693C16.2568 8.99475 16.139 9.88892 16.3684 10.7446C16.5979 11.601 17.1473 12.3163 17.9145 12.7588L18.0024 12.8101C17.9493 13.1952 17.9224 13.5773 17.9224 13.9539C17.9224 14.3304 17.9493 14.7125 18.0024 15.0977L17.9145 15.1483C17.1466 15.592 16.5979 16.3074 16.3684 17.1637C16.139 18.0194 16.2568 18.9136 16.6999 19.6814C17.6142 21.264 19.646 21.8115 21.233 20.8954L21.3221 20.8441C21.9281 21.3104 22.5953 21.6962 23.3014 21.9885V22.0905C23.3014 23.9197 24.7901 25.4083 26.6193 25.4083C28.4485 25.4083 29.9372 23.9197 29.9372 22.0905V21.9885C30.6434 21.6962 31.3105 21.3104 31.9172 20.8441L32.0063 20.8954C33.592 21.8103 35.6244 21.2659 36.5393 19.6808C37.453 18.0969 36.9086 16.0638 35.3241 15.1483L35.2362 15.0977C35.2893 14.7125 35.3162 14.3298 35.3162 13.9539C35.3162 13.5779 35.2893 13.1958 35.2362 12.8101L35.3247 12.7594C36.9086 11.8451 37.4537 9.81201 36.5387 8.22632C36.0956 7.45911 35.3803 6.9104 34.5246 6.68091C33.6676 6.45203 32.7741 6.56921 32.0069 7.01233ZM33.2563 18.7305L32.4012 18.2367C31.9202 17.9578 31.3117 18.0316 30.9095 18.418C30.1874 19.1125 29.2987 19.6259 28.3399 19.9036C27.8052 20.058 27.4372 20.5475 27.4372 21.1041V22.0905C27.4372 22.5415 27.0704 22.9083 26.6193 22.9083C26.1683 22.9083 25.8014 22.5415 25.8014 22.0905V21.1041C25.8014 20.5475 25.4334 20.058 24.8987 19.9036C23.9392 19.6259 23.0512 19.1125 22.3298 18.418C22.0905 18.1879 21.778 18.0688 21.4624 18.0688C21.2482 18.0688 21.0328 18.1238 20.8374 18.2367L19.983 18.7305C19.5917 18.9569 19.0906 18.822 18.8654 18.4314C18.7555 18.2422 18.7268 18.0212 18.783 17.8107C18.8398 17.5995 18.9753 17.4231 19.1639 17.3138L20.0208 16.8195C20.503 16.5411 20.7434 15.9778 20.6098 15.4376C20.4853 14.9323 20.4224 14.433 20.4224 13.9539C20.4224 13.4747 20.4853 12.9761 20.6098 12.4707C20.7434 11.9305 20.5036 11.3678 20.0214 11.0895L19.1639 10.5939C18.9747 10.4846 18.8398 10.3088 18.783 10.0977C18.7268 9.88708 18.7555 9.66614 18.8654 9.47693C18.974 9.28772 19.1504 9.15283 19.3616 9.09607C19.5734 9.0387 19.7931 9.0686 19.983 9.17847L20.8393 9.67224C21.3221 9.94934 21.9288 9.87549 22.3298 9.48975C23.0518 8.79517 23.9405 8.28186 24.8981 8.00537C25.4334 7.85095 25.8014 7.36084 25.8014 6.8042V5.81787C25.8014 5.36682 26.1683 5 26.6193 5C27.0704 5 27.4372 5.36682 27.4372 5.81787V6.8042C27.4372 7.36084 27.8052 7.85095 28.3405 8.00537C29.2981 8.28186 30.1868 8.79517 30.9101 9.49036C31.3111 9.87427 31.9178 9.94934 32.4012 9.67163L33.2575 9.17725C33.6463 8.95325 34.148 9.0863 34.3738 9.47632C34.599 9.86755 34.4654 10.3687 34.0747 10.5945L33.2178 11.0895C32.7362 11.3672 32.4964 11.9299 32.6288 12.4695C32.7533 12.9761 32.8162 13.4753 32.8162 13.9539C32.8162 14.4324 32.7533 14.9323 32.6288 15.4388C32.4964 15.979 32.7362 16.5417 33.2184 16.8195L34.0741 17.3132C34.4648 17.5391 34.599 18.0408 34.3744 18.4308C34.1486 18.8208 33.6463 18.9539 33.2563 18.7305Z" fill="#FBC249"/>
+<path d="M26.6191 9.56421C24.1985 9.56421 22.2295 11.5332 22.2295 13.9539C22.2295 16.3745 24.1985 18.3441 26.6191 18.3441C29.0398 18.3441 31.0088 16.3745 31.0088 13.9539C31.0088 11.5332 29.0398 9.56421 26.6191 9.56421ZM26.6191 15.8441C25.5773 15.8441 24.7295 14.9963 24.7295 13.9539C24.7295 12.912 25.5773 12.0642 26.6191 12.0642C27.661 12.0642 28.5088 12.912 28.5088 13.9539C28.5088 14.9963 27.661 15.8441 26.6191 15.8441Z" fill="#FBC249"/>
+</svg>
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/server-down-image.svg b/src/assets/server-down-image.svg
new file mode 100644
index 0000000..bef5a96
--- /dev/null
+++ b/src/assets/server-down-image.svg
@@ -0,0 +1,1816 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 3710 3710" style="enable-background:new 0 0 3710 3710;" xml:space="preserve">
+<g id="Background">
+	<g>
+		<g>
+			<rect style="fill:#FFFFFF;" width="3710" height="3710"/>
+		</g>
+	</g>
+</g>
+<g id="Illustration">
+	<g>
+		<path style="fill:#F4F7FA;" d="M3217.87,1647.839c-76.119-498.235-388.207-1110.352-1004.771-1174.411
+			c0,0-468.125-56.94-929.592,29.358c-273.882,51.218-514.036,203.684-665.995,422.814
+			c-151.961,219.131-202.721,486.331-141.117,741.073c40.011,165.457,67.048,336.7,59.628,506.717
+			c-12.914,295.899-5.484,572.1,281.679,748.565c256.404,157.565,579.092,296.531,886.941,320.871
+			c209.212,16.541,443.83-10.226,645.471-64.695C3377.72,2900.544,3293.989,2146.074,3217.87,1647.839z"/>
+		<g>
+			<g>
+				<path style="fill:#D8DEE8;" d="M814.749,1872.776c0,35.157-30.315,65.762-67.644,68.228
+					c-37.394,2.47-67.868-24.216-67.868-59.493c0-35.28,30.474-65.895,67.868-68.246
+					C784.435,1810.917,814.749,1837.613,814.749,1872.776z M708.388,1879.633c0,20.124,17.379,35.36,38.717,33.965
+					c21.32-1.394,38.647-18.868,38.647-38.953c0-20.089-17.326-35.329-38.647-33.975
+					C725.766,1842.028,708.388,1859.505,708.388,1879.633z"/>
+				<path style="fill:#D8DEE8;" d="M872.548,1563.158c0,35.111-30.229,65.44-67.446,67.614
+					c-37.291,2.18-67.676-24.703-67.676-59.932c0-35.225,30.386-65.562,67.676-67.624
+					C842.32,1501.159,872.548,1528.05,872.548,1563.158z M766.491,1569.187c0,20.099,17.329,35.448,38.611,34.218
+					c21.255-1.227,38.532-18.542,38.532-38.603c0-20.057-17.277-35.408-38.532-34.218
+					C783.82,1531.774,766.491,1549.093,766.491,1569.187z"/>
+				<path style="fill:#D8DEE8;" d="M649.236,1271.71c0,35.307-30.564,65.583-68.197,67.499
+					c-37.708,1.921-68.432-25.333-68.432-60.759c0-35.425,30.724-65.71,68.432-67.511
+					C618.672,1209.143,649.236,1236.403,649.236,1271.71z M541.997,1277c0,20.211,17.521,35.77,39.041,34.69
+					c21.492-1.08,38.962-18.366,38.962-38.539c0-20.17-17.47-35.733-38.962-34.692C559.519,1239.501,541.997,1256.79,541.997,1277z"
+					/>
+				<path style="fill:#D8DEE8;" d="M1053.348,1222.292c0,34.949-29.957,64.885-66.84,66.736
+					c-36.957,1.854-67.068-25.162-67.068-60.229c0-35.071,30.111-65.015,67.068-66.752
+					C1023.391,1160.313,1053.348,1187.338,1053.348,1222.292z M948.245,1227.398c0,20.005,17.173,35.431,38.263,34.386
+					c21.064-1.042,38.185-18.134,38.185-38.1c0-19.971-17.121-35.399-38.185-34.394
+					C965.417,1190.297,948.245,1207.391,948.245,1227.398z"/>
+				<g>
+					<polygon style="fill:#D8DEE8;" points="1274.985,1679.497 1274.985,1706.544 1044.491,1720.612 783.169,1874.322 
+						769.078,1851.28 1037.076,1693.855 					"/>
+					<polygon style="fill:#D8DEE8;" points="1274.985,1518.999 1274.985,1546.047 858.096,1569.811 858.096,1542.48 					"/>
+					<polygon style="fill:#D8DEE8;" points="1274.985,1358.498 1274.985,1385.546 1001.502,1400.031 784.543,1278.724 
+						634.624,1286.172 634.624,1258.689 793.091,1250.926 1009.958,1372.356 					"/>
+					<polygon style="fill:#D8DEE8;" points="1274.985,1197.996 1274.985,1225.044 1034.413,1236.817 1034.413,1209.606 					"/>
+				</g>
+			</g>
+			<g>
+				<path style="fill:#D8DEE8;" d="M2919.092,996.16c0-33.432,27.372-61.813,60.967-63.267c33.533-1.45,60.77,24.485,60.77,57.811
+					c0,33.33-27.236,61.705-60.77,63.262C2946.464,1055.525,2919.092,1029.596,2919.092,996.16z M3014.776,991.872
+					c0-19.038-15.566-33.845-34.717-33.003c-19.174,0.841-34.784,17.045-34.784,36.117c0,19.077,15.61,33.88,34.784,33.004
+					C2999.209,1027.114,3014.776,1010.913,3014.776,991.872z"/>
+				<path style="fill:#D8DEE8;" d="M2866.682,1290.204c0-33.482,27.447-62.113,61.129-63.826c33.629-1.71,60.94,24.051,60.94,57.427
+					c0,33.371-27.312,61.996-60.94,63.812C2894.129,1349.436,2866.682,1323.683,2866.682,1290.204z M2962.626,1285.174
+					c0-19.068-15.608-33.774-34.815-32.784c-19.22,0.99-34.873,17.336-34.873,36.438c0,19.099,15.653,33.803,34.873,32.777
+					C2947.018,1320.58,2962.626,1304.238,2962.626,1285.174z"/>
+				<path style="fill:#D8DEE8;" d="M3067.566,1566.586c0-33.306,27.16-61.985,60.491-63.93
+					c33.278-1.943,60.304,23.488,60.304,56.688c0,33.201-27.026,61.872-60.304,63.92
+					C3094.726,1625.316,3067.566,1599.894,3067.566,1566.586z M3162.508,1560.895c0-18.968-15.446-33.485-34.451-32.364
+					c-19.021,1.123-34.51,17.496-34.51,36.498c0,19.003,15.489,33.518,34.51,32.36
+					C3147.062,1596.232,3162.508,1579.862,3162.508,1560.895z"/>
+				<path style="fill:#D8DEE8;" d="M2700.818,1616.937c0-33.622,27.684-62.612,61.659-64.621
+					c33.92-2.004,61.467,23.634,61.467,57.149c0,33.518-27.547,62.501-61.467,64.613
+					C2728.502,1676.193,2700.818,1650.564,2700.818,1616.937z M2797.594,1611.063c0-19.145-15.744-33.781-35.117-32.624
+					c-19.387,1.16-35.176,17.709-35.176,36.89c0,19.186,15.788,33.818,35.176,32.624
+					C2781.85,1646.761,2797.594,1630.215,2797.594,1611.063z"/>
+				<g>
+					<polygon style="fill:#D8DEE8;" points="2493.434,1174.367 2493.434,1148.06 2709.012,1137.657 2947.605,995.348 
+						2960.298,1017.502 2715.865,1163.483 					"/>
+					<polygon style="fill:#D8DEE8;" points="2493.434,1330.467 2493.434,1304.161 2879.814,1283.958 2879.814,1310.003 					"/>
+					<polygon style="fill:#D8DEE8;" points="2493.434,1486.571 2493.434,1460.266 2748.679,1445.891 2946.366,1560.853 
+						3080.561,1552.854 3080.561,1578.761 2938.657,1587.317 2740.89,1472.467 					"/>
+					<polygon style="fill:#D8DEE8;" points="2493.434,1642.677 2493.434,1616.37 2718.327,1602.797 2718.327,1628.952 					"/>
+				</g>
+			</g>
+		</g>
+		<g>
+			<path style="fill:#BFC8D6;" d="M1165.47,1036.568v1956.373c0,20.394,14.374,37.962,34.364,42l502.502,101.504l136.783-1295.362
+				L1706.56,928.111l-503.804,65.971C1181.423,996.876,1165.47,1015.054,1165.47,1036.568z"/>
+			<path style="fill:#D8DEE8;" d="M2595.04,963.3l-884.852-35.436c-34.882-1.397-63.238,23.39-63.238,55.366v2098.824
+				c0,31.976,28.356,56.273,63.238,54.276l884.852-50.679c32.117-1.84,58.084-28.103,58.084-58.665V1020.963
+				C2653.125,990.402,2627.158,964.586,2595.04,963.3z"/>
+			<g>
+				<path style="fill:#FFFFFF;" d="M1707.985,1173.166V1024.65c0-22.726,20.106-40.393,44.859-39.462l802.656,30.173
+					c22.981,0.864,41.574,19.264,41.574,41.099v142.699c0,21.835-18.594,39.026-41.574,38.396l-802.656-22.009
+					C1728.091,1214.866,1707.985,1195.892,1707.985,1173.166z"/>
+				<path style="fill:#D8DEE8;" d="M1791.599,1041.257c0,10.476-9.247,18.652-20.663,18.26c-11.428-0.393-20.702-9.22-20.702-19.715
+					c0-10.495,9.273-18.67,20.702-18.258C1782.352,1021.955,1791.599,1030.78,1791.599,1041.257z"/>
+				<path style="fill:#D8DEE8;" d="M1856.868,1043.553c0,10.446-9.193,18.599-20.544,18.209c-11.362-0.39-20.582-9.19-20.582-19.655
+					c0-10.466,9.22-18.617,20.582-18.208C1847.675,1024.307,1856.868,1033.107,1856.868,1043.553z"/>
+				<path style="fill:#D8DEE8;" d="M1921.762,1045.836c0,10.416-9.141,18.546-20.426,18.159
+					c-11.297-0.388-20.463-9.162-20.463-19.597c0-10.435,9.166-18.565,20.463-18.158
+					C1912.621,1026.646,1921.762,1035.42,1921.762,1045.836z"/>
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="2072.6931" y1="1013.7755" x2="2451.2019" y2="1225.8964">
+					<stop  offset="0" style="stop-color:#444B8C"/>
+					<stop  offset="0.9964" style="stop-color:#26264F"/>
+				</linearGradient>
+				<polygon style="fill:url(#SVGID_1_);" points="2551.667,1201.681 1962.503,1184.561 1962.503,1028.442 2551.667,1049.661 				
+					"/>
+				<g style="opacity:0.3;">
+					<polygon style="fill:#FFFFFF;" points="2019.885,1175.236 2002.108,1174.711 2002.108,1048.662 2019.885,1049.287 					"/>
+					<polygon style="fill:#FFFFFF;" points="2051.419,1176.168 2033.693,1175.644 2033.693,1049.773 2051.419,1050.397 					"/>
+					<polygon style="fill:#FFFFFF;" points="2082.864,1177.097 2065.187,1176.575 2065.187,1050.881 2082.864,1051.503 					"/>
+					<polygon style="fill:#FFFFFF;" points="2114.221,1178.024 2096.593,1177.503 2096.593,1051.985 2114.221,1052.605 					"/>
+					<polygon style="fill:#FFFFFF;" points="2145.489,1178.948 2127.911,1178.428 2127.911,1053.087 2145.489,1053.705 					"/>
+					<polygon style="fill:#FFFFFF;" points="2176.67,1179.869 2159.142,1179.351 2159.142,1054.185 2176.67,1054.802 					"/>
+					<polygon style="fill:#FFFFFF;" points="2207.764,1180.788 2190.284,1180.271 2190.284,1055.281 2207.764,1055.896 					"/>
+					<polygon style="fill:#FFFFFF;" points="2238.771,1181.704 2221.34,1181.189 2221.34,1056.373 2238.771,1056.986 					"/>
+					<polygon style="fill:#FFFFFF;" points="2269.691,1182.618 2252.309,1182.104 2252.309,1057.463 2269.691,1058.075 					"/>
+					<polygon style="fill:#FFFFFF;" points="2300.526,1183.529 2283.192,1183.016 2283.192,1058.549 2300.526,1059.159 					"/>
+					<polygon style="fill:#FFFFFF;" points="2331.274,1184.437 2313.989,1183.927 2313.989,1059.633 2331.274,1060.241 					"/>
+					<polygon style="fill:#FFFFFF;" points="2361.937,1185.344 2344.7,1184.834 2344.7,1060.713 2361.937,1061.319 					"/>
+					<polygon style="fill:#FFFFFF;" points="2392.515,1186.247 2375.325,1185.739 2375.325,1061.79 2392.515,1062.395 					"/>
+					<polygon style="fill:#FFFFFF;" points="2423.008,1187.148 2405.866,1186.642 2405.866,1062.864 2423.008,1063.467 					"/>
+					<polygon style="fill:#FFFFFF;" points="2453.417,1188.047 2436.322,1187.542 2436.322,1063.936 2453.417,1064.537 					"/>
+					<polygon style="fill:#FFFFFF;" points="2483.742,1188.943 2466.695,1188.439 2466.695,1065.004 2483.742,1065.604 					"/>
+					<polygon style="fill:#FFFFFF;" points="2513.983,1189.836 2496.983,1189.334 2496.983,1066.07 2513.983,1066.667 					"/>
+				</g>
+				<g style="opacity:0.69;">
+					
+						<linearGradient id="SVGID_00000103982590131557818650000006691898286352610213_" gradientUnits="userSpaceOnUse" x1="2007.8555" y1="1073.4846" x2="2017.2827" y2="1217.2498">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000103982590131557818650000006691898286352610213_);" points="2019.885,1175.236 
+						2002.108,1174.711 2002.108,1067.455 2019.885,1068.065 					"/>
+					
+						<linearGradient id="SVGID_00000176733722853873145300000012050085737579575177_" gradientUnits="userSpaceOnUse" x1="2042.1211" y1="1162.8341" x2="2043.3827" y2="1182.0743">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000176733722853873145300000012050085737579575177_);" points="2051.419,1176.168 
+						2033.693,1175.644 2033.693,1162.75 2051.419,1163.284 					"/>
+					
+						<linearGradient id="SVGID_00000043432472495294421150000015657561779580333488_" gradientUnits="userSpaceOnUse" x1="2071.7183" y1="1105.0752" x2="2078.1985" y2="1203.8995">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000043432472495294421150000015657561779580333488_);" points="2082.864,1177.097 
+						2065.187,1176.575 2065.187,1103.366 2082.864,1103.946 					"/>
+					
+						<linearGradient id="SVGID_00000105405754196485028570000018264823283382118811_" gradientUnits="userSpaceOnUse" x1="2104.3496" y1="1145.8691" x2="2107.2266" y2="1189.7427">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000105405754196485028570000018264823283382118811_);" points="2114.221,1178.024 
+						2096.593,1177.503 2096.593,1145.932 2114.221,1146.477 					"/>
+					
+						<linearGradient id="SVGID_00000056427636421809967000000010272166896484459653_" gradientUnits="userSpaceOnUse" x1="2133.9978" y1="1097.1355" x2="2141.1301" y2="1205.9009">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000056427636421809967000000010272166896484459653_);" points="2145.489,1178.948 
+						2127.911,1178.428 2127.911,1097.676 2145.489,1098.259 					"/>
+					
+						<linearGradient id="SVGID_00000179632297177842699880000008043497706393370500_" gradientUnits="userSpaceOnUse" x1="2165.9717" y1="1122.3329" x2="2170.9275" y2="1197.9094">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000179632297177842699880000008043497706393370500_);" points="2176.67,1179.869 
+						2159.142,1179.351 2159.142,1123.746 2176.67,1124.307 					"/>
+					
+						<linearGradient id="SVGID_00000056427990645996643030000015203579170561928073_" gradientUnits="userSpaceOnUse" x1="2195.6145" y1="1080.3513" x2="2204.1028" y2="1209.7976">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000056427990645996643030000015203579170561928073_);" points="2207.764,1180.788 
+						2190.284,1180.271 2190.284,1083.838 2207.764,1084.43 					"/>
+					
+						<linearGradient id="SVGID_00000176729979568470796900000006922660016126250646_" gradientUnits="userSpaceOnUse" x1="2226.1997" y1="1069.5823" x2="2235.5332" y2="1211.9187">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000176729979568470796900000006922660016126250646_);" points="2238.771,1181.704 
+						2221.34,1181.189 2221.34,1074.983 2238.771,1075.581 					"/>
+					
+						<linearGradient id="SVGID_00000111903267525261833590000009050344320493079214_" gradientUnits="userSpaceOnUse" x1="2258.9915" y1="1125.233" x2="2263.7231" y2="1197.3914">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000111903267525261833590000009050344320493079214_);" points="2269.691,1182.618 
+						2252.309,1182.104 2252.309,1129.075 2269.691,1129.63 					"/>
+					
+						<linearGradient id="SVGID_00000176045479024690164180000011490580450247635098_" gradientUnits="userSpaceOnUse" x1="2287.4229" y1="1057.6953" x2="2297.5984" y2="1212.871">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000176045479024690164180000011490580450247635098_);" points="2300.526,1183.529 
+						2283.192,1183.016 2283.192,1067.071 2300.526,1067.675 					"/>
+					
+						<linearGradient id="SVGID_00000014597799549953674090000006489789195381494914_" gradientUnits="userSpaceOnUse" x1="2318.7502" y1="1075.7318" x2="2327.425" y2="1208.0243">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000014597799549953674090000006489789195381494914_);" points="2331.274,1184.437 
+						2313.989,1183.927 2313.989,1085.318 2331.274,1085.906 					"/>
+					
+						<linearGradient id="SVGID_00000165235653240254967180000015109811847959380390_" gradientUnits="userSpaceOnUse" x1="2352.2053" y1="1154.9193" x2="2354.6318" y2="1191.9258">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000165235653240254967180000015109811847959380390_);" points="2361.937,1185.344 
+						2344.7,1184.834 2344.7,1158.43 2361.937,1158.96 					"/>
+					
+						<linearGradient id="SVGID_00000083802736384890573120000002489432153944564136_" gradientUnits="userSpaceOnUse" x1="2381.332" y1="1115.5618" x2="2386.8362" y2="1199.4996">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000083802736384890573120000002489432153944564136_);" points="2392.515,1186.247 
+						2375.325,1185.739 2375.325,1123.765 2392.515,1124.321 					"/>
+					
+						<linearGradient id="SVGID_00000030461548377701207620000004260355822528495803_" gradientUnits="userSpaceOnUse" x1="2410.6521" y1="1084.6066" x2="2418.5115" y2="1204.4606">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000030461548377701207620000004260355822528495803_);" points="2423.008,1187.148 
+						2405.866,1186.642 2405.866,1097.445 2423.008,1098.021 					"/>
+					
+						<linearGradient id="SVGID_00000182487509699016492110000012570101212815527338_" gradientUnits="userSpaceOnUse" x1="2442.0291" y1="1112.02" x2="2447.7905" y2="1199.8837">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000182487509699016492110000012570101212815527338_);" points="2453.417,1188.047 
+						2436.322,1187.542 2436.322,1122.583 2453.417,1123.139 					"/>
+					
+						<linearGradient id="SVGID_00000014634001375556774120000015470504129850794645_" gradientUnits="userSpaceOnUse" x1="2470.7554" y1="1070.3599" x2="2479.6023" y2="1205.2762">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000014634001375556774120000015470504129850794645_);" points="2483.742,1188.943 
+						2466.695,1188.439 2466.695,1087.819 2483.742,1088.401 					"/>
+					
+						<linearGradient id="SVGID_00000088844424059066939020000000482061612768588208_" gradientUnits="userSpaceOnUse" x1="2500.425" y1="1056.6544" x2="2510.2292" y2="1206.1682">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000088844424059066939020000000482061612768588208_);" points="2513.983,1189.836 
+						2496.983,1189.334 2496.983,1077.647 2513.983,1078.236 					"/>
+				</g>
+			</g>
+			<g>
+				<path style="fill:#FFFFFF;" d="M1707.985,1423.931v-148.517c0-22.726,20.106-40.615,44.859-39.958l802.656,21.303
+					c22.981,0.61,41.574,18.805,41.574,40.64v142.699c0,21.836-18.594,39.233-41.574,38.856l-802.656-13.141
+					C1728.091,1465.409,1707.985,1446.657,1707.985,1423.931z"/>
+				<path style="fill:#D8DEE8;" d="M1791.599,1291.098c0,10.476-9.247,18.754-20.663,18.488
+					c-11.428-0.266-20.702-8.99-20.702-19.486c0-10.496,9.273-18.773,20.702-18.488
+					C1782.352,1271.897,1791.599,1280.621,1791.599,1291.098z"/>
+				<path style="fill:#D8DEE8;" d="M1856.868,1292.672c0,10.446-9.193,18.701-20.544,18.436
+					c-11.362-0.264-20.582-8.963-20.582-19.428c0-10.466,9.22-18.719,20.582-18.435
+					C1847.675,1273.528,1856.868,1282.226,1856.868,1292.672z"/>
+				<path style="fill:#D8DEE8;" d="M1921.762,1294.238c0,10.416-9.141,18.647-20.426,18.385
+					c-11.297-0.263-20.463-8.936-20.463-19.371c0-10.435,9.166-18.665,20.463-18.383
+					C1912.621,1275.15,1921.762,1283.822,1921.762,1294.238z"/>
+				
+					<linearGradient id="SVGID_00000059283577996358268480000002241574519165485185_" gradientUnits="userSpaceOnUse" x1="2073.6692" y1="1259.0194" x2="2450.1653" y2="1470.0126">
+					<stop  offset="0" style="stop-color:#444B8C"/>
+					<stop  offset="0.9964" style="stop-color:#26264F"/>
+				</linearGradient>
+				<polygon style="fill:url(#SVGID_00000059283577996358268480000002241574519165485185_);" points="2551.667,1443.123 
+					1962.503,1432.513 1962.503,1276.395 2551.667,1291.104 				"/>
+				<g style="opacity:0.3;">
+					<polygon style="fill:#FFFFFF;" points="2019.885,1422.554 2002.108,1422.226 2002.108,1296.176 2019.885,1296.606 					"/>
+					<polygon style="fill:#FFFFFF;" points="2051.419,1423.137 2033.693,1422.81 2033.693,1296.938 2051.419,1297.366 					"/>
+					<polygon style="fill:#FFFFFF;" points="2082.864,1423.72 2065.187,1423.392 2065.187,1297.698 2082.864,1298.125 					"/>
+					<polygon style="fill:#FFFFFF;" points="2114.221,1424.3 2096.593,1423.974 2096.593,1298.456 2114.221,1298.881 					"/>
+					<polygon style="fill:#FFFFFF;" points="2145.489,1424.878 2127.911,1424.553 2127.911,1299.212 2145.489,1299.636 					"/>
+					<polygon style="fill:#FFFFFF;" points="2176.67,1425.455 2159.142,1425.131 2159.142,1299.965 2176.67,1300.388 					"/>
+					<polygon style="fill:#FFFFFF;" points="2207.764,1426.03 2190.284,1425.707 2190.284,1300.717 2207.764,1301.138 					"/>
+					<polygon style="fill:#FFFFFF;" points="2238.771,1426.604 2221.34,1426.281 2221.34,1301.466 2238.771,1301.886 					"/>
+					<polygon style="fill:#FFFFFF;" points="2269.691,1427.176 2252.309,1426.854 2252.309,1302.213 2269.691,1302.632 					"/>
+					<polygon style="fill:#FFFFFF;" points="2300.526,1427.746 2283.192,1427.426 2283.192,1302.958 2300.526,1303.376 					"/>
+					<polygon style="fill:#FFFFFF;" points="2331.274,1428.315 2313.989,1427.995 2313.989,1303.701 2331.274,1304.118 					"/>
+					<polygon style="fill:#FFFFFF;" points="2361.937,1428.882 2344.7,1428.563 2344.7,1304.442 2361.937,1304.858 					"/>
+					<polygon style="fill:#FFFFFF;" points="2392.515,1429.448 2375.325,1429.13 2375.325,1305.181 2392.515,1305.596 					"/>
+					<polygon style="fill:#FFFFFF;" points="2423.008,1430.012 2405.866,1429.695 2405.866,1305.917 2423.008,1306.331 					"/>
+					<polygon style="fill:#FFFFFF;" points="2453.417,1430.575 2436.322,1430.258 2436.322,1306.653 2453.417,1307.065 					"/>
+					<polygon style="fill:#FFFFFF;" points="2483.742,1431.135 2466.695,1430.82 2466.695,1307.385 2483.742,1307.796 					"/>
+					<polygon style="fill:#FFFFFF;" points="2513.983,1431.695 2496.983,1431.38 2496.983,1308.116 2513.983,1308.526 					"/>
+				</g>
+				<g style="opacity:0.69;">
+					
+						<linearGradient id="SVGID_00000029724223940512976420000007069486668918784669_" gradientUnits="userSpaceOnUse" x1="2007.8612" y1="1320.9869" x2="2017.2714" y2="1464.4935">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000029724223940512976420000007069486668918784669_);" points="2019.885,1422.554 
+						2002.108,1422.226 2002.108,1314.969 2019.885,1315.383 					"/>
+					
+						<linearGradient id="SVGID_00000098206945377611378950000007968257576601892253_" gradientUnits="userSpaceOnUse" x1="2042.127" y1="1409.9911" x2="2043.3716" y2="1428.9719">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000098206945377611378950000007968257576601892253_);" points="2051.419,1423.137 
+						2033.693,1422.81 2033.693,1409.916 2051.419,1410.254 					"/>
+					
+						<linearGradient id="SVGID_00000150788268647201488740000015294208779033969817_" gradientUnits="userSpaceOnUse" x1="2071.7241" y1="1351.8868" x2="2078.1875" y2="1450.4537">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000150788268647201488740000015294208779033969817_);" points="2082.864,1423.72 
+						2065.187,1423.392 2065.187,1350.183 2082.864,1350.568 					"/>
+					
+						<linearGradient id="SVGID_00000178884892789553821030000013415006709488163987_" gradientUnits="userSpaceOnUse" x1="2104.3557" y1="1392.3364" x2="2107.2158" y2="1435.9535">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000178884892789553821030000013415006709488163987_);" points="2114.221,1424.3 
+						2096.593,1423.974 2096.593,1392.402 2114.221,1392.753 					"/>
+					
+						<linearGradient id="SVGID_00000178897241777388819170000012754776849013158792_" gradientUnits="userSpaceOnUse" x1="2134.0042" y1="1343.2601" x2="2141.1196" y2="1451.7694">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000178897241777388819170000012754776849013158792_);" points="2145.489,1424.878 
+						2127.911,1424.553 2127.911,1343.801 2145.489,1344.189 					"/>
+					
+						<linearGradient id="SVGID_00000075857181409678940810000011796369522512910751_" gradientUnits="userSpaceOnUse" x1="2165.9783" y1="1368.115" x2="2170.9172" y2="1443.4359">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000075857181409678940810000011796369522512910751_);" points="2176.67,1425.455 
+						2159.142,1425.131 2159.142,1369.525 2176.67,1369.893 					"/>
+					
+						<linearGradient id="SVGID_00000111193305124695984080000014787470731304740790_" gradientUnits="userSpaceOnUse" x1="2195.6211" y1="1325.792" x2="2204.0928" y2="1454.9838">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000111193305124695984080000014787470731304740790_);" points="2207.764,1426.03 
+						2190.284,1425.707 2190.284,1329.273 2207.764,1329.672 					"/>
+					
+						<linearGradient id="SVGID_00000145056923197301041450000015830544877108902028_" gradientUnits="userSpaceOnUse" x1="2226.2065" y1="1314.683" x2="2235.5234" y2="1456.7656">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000145056923197301041450000015830544877108902028_);" points="2238.771,1426.604 
+						2221.34,1426.281 2221.34,1320.075 2238.771,1320.481 					"/>
+					
+						<linearGradient id="SVGID_00000098212655166630498670000003891303044684432313_" gradientUnits="userSpaceOnUse" x1="2258.9985" y1="1369.9949" x2="2263.7134" y2="1441.8994">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000098212655166630498670000003891303044684432313_);" points="2269.691,1427.176 
+						2252.309,1426.854 2252.309,1373.825 2269.691,1374.188 					"/>
+					
+						<linearGradient id="SVGID_00000000919913349431272420000011474449667058303163_" gradientUnits="userSpaceOnUse" x1="2287.4302" y1="1302.1191" x2="2297.5889" y2="1457.041">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000000919913349431272420000011474449667058303163_);" points="2300.526,1427.746 
+						2283.192,1427.426 2283.192,1311.481 2300.526,1311.892 					"/>
+					
+						<linearGradient id="SVGID_00000138574569438994306830000011871262572599273384_" gradientUnits="userSpaceOnUse" x1="2318.7578" y1="1319.8181" x2="2327.416" y2="1451.8578">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000138574569438994306830000011871262572599273384_);" points="2331.274,1428.315 
+						2313.989,1427.995 2313.989,1329.387 2331.274,1329.783 					"/>
+					
+						<linearGradient id="SVGID_00000165220556275830765300000006894670795288165527_" gradientUnits="userSpaceOnUse" x1="2352.2129" y1="1398.6685" x2="2354.623" y2="1435.4236">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000165220556275830765300000006894670795288165527_);" points="2361.937,1428.882 
+						2344.7,1428.563 2344.7,1402.159 2361.937,1402.499 					"/>
+					
+						<linearGradient id="SVGID_00000164497513963894558680000010712387960619976632_" gradientUnits="userSpaceOnUse" x1="2381.3398" y1="1358.9752" x2="2386.8274" y2="1442.6628">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000164497513963894558680000010712387960619976632_);" points="2392.515,1429.448 
+						2375.325,1429.13 2375.325,1367.155 2392.515,1367.522 					"/>
+					
+						<linearGradient id="SVGID_00000183940705761001869850000016302385851278389392_" gradientUnits="userSpaceOnUse" x1="2410.6602" y1="1327.6862" x2="2418.5029" y2="1447.2897">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000183940705761001869850000016302385851278389392_);" points="2423.008,1430.012 
+						2405.866,1429.695 2405.866,1340.499 2423.008,1340.885 					"/>
+					
+						<linearGradient id="SVGID_00000103952061235590740550000005581598615603420853_" gradientUnits="userSpaceOnUse" x1="2442.0371" y1="1354.765" x2="2447.7825" y2="1442.3796">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000103952061235590740550000005581598615603420853_);" points="2453.417,1430.575 
+						2436.322,1430.258 2436.322,1365.3 2453.417,1365.667 					"/>
+					
+						<linearGradient id="SVGID_00000141424582112722610030000003410217578998076338_" gradientUnits="userSpaceOnUse" x1="2470.7634" y1="1312.7725" x2="2479.594" y2="1447.4399">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000141424582112722610030000003410217578998076338_);" points="2483.742,1431.135 
+						2466.695,1430.82 2466.695,1330.2 2483.742,1330.594 					"/>
+					
+						<linearGradient id="SVGID_00000025417591826556208860000002069409723880168613_" gradientUnits="userSpaceOnUse" x1="2500.4336" y1="1298.7344" x2="2510.2214" y2="1448.0007">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000025417591826556208860000002069409723880168613_);" points="2513.983,1431.695 
+						2496.983,1431.38 2496.983,1319.694 2513.983,1320.095 					"/>
+				</g>
+			</g>
+			<g>
+				<path style="fill:#FFFFFF;" d="M1707.985,1674.696v-148.517c0-22.726,20.106-40.837,44.859-40.454l802.656,12.435
+					c22.981,0.356,41.574,18.345,41.574,40.181v142.699c0,21.835-18.594,39.438-41.574,39.315l-802.656-4.271
+					C1728.091,1715.951,1707.985,1697.422,1707.985,1674.696z"/>
+				<path style="fill:#D8DEE8;" d="M1791.599,1540.939c0,10.476-9.247,18.855-20.663,18.716
+					c-11.428-0.14-20.702-8.762-20.702-19.257c0-10.496,9.273-18.875,20.702-18.716
+					C1782.352,1521.84,1791.599,1530.462,1791.599,1540.939z"/>
+				<path style="fill:#D8DEE8;" d="M1856.868,1541.792c0,10.447-9.193,18.802-20.544,18.663
+					c-11.362-0.139-20.582-8.735-20.582-19.201c0-10.465,9.22-18.821,20.582-18.663
+					C1847.675,1522.75,1856.868,1531.346,1856.868,1541.792z"/>
+				<path style="fill:#D8DEE8;" d="M1921.762,1542.64c0,10.417-9.141,18.749-20.426,18.611c-11.297-0.138-20.463-8.71-20.463-19.145
+					c0-10.435,9.166-18.767,20.463-18.61C1912.621,1523.653,1921.762,1532.224,1921.762,1542.64z"/>
+				
+					<linearGradient id="SVGID_00000025415418560679054190000002583551728187063445_" gradientUnits="userSpaceOnUse" x1="2074.6445" y1="1504.2637" x2="2449.1287" y2="1714.129">
+					<stop  offset="0" style="stop-color:#444B8C"/>
+					<stop  offset="0.9964" style="stop-color:#26264F"/>
+				</linearGradient>
+				<polygon style="fill:url(#SVGID_00000025415418560679054190000002583551728187063445_);" points="2551.667,1684.565 
+					1962.503,1680.465 1962.503,1524.347 2551.667,1532.546 				"/>
+				<g style="opacity:0.3;">
+					<polygon style="fill:#FFFFFF;" points="2019.885,1669.873 2002.108,1669.741 2002.108,1543.691 2019.885,1543.924 					"/>
+					<polygon style="fill:#FFFFFF;" points="2051.419,1670.108 2033.693,1669.975 2033.693,1544.104 2051.419,1544.336 					"/>
+					<polygon style="fill:#FFFFFF;" points="2082.864,1670.342 2065.187,1670.21 2065.187,1544.516 2082.864,1544.747 					"/>
+					<polygon style="fill:#FFFFFF;" points="2114.221,1670.575 2096.593,1670.444 2096.593,1544.927 2114.221,1545.157 					"/>
+					<polygon style="fill:#FFFFFF;" points="2145.489,1670.809 2127.911,1670.677 2127.911,1545.337 2145.489,1545.566 					"/>
+					<polygon style="fill:#FFFFFF;" points="2176.67,1671.041 2159.142,1670.91 2159.142,1545.745 2176.67,1545.974 					"/>
+					<polygon style="fill:#FFFFFF;" points="2207.764,1671.273 2190.284,1671.142 2190.284,1546.152 2207.764,1546.38 					"/>
+					<polygon style="fill:#FFFFFF;" points="2238.771,1671.503 2221.34,1671.373 2221.34,1546.558 2238.771,1546.786 					"/>
+					<polygon style="fill:#FFFFFF;" points="2269.691,1671.734 2252.309,1671.604 2252.309,1546.963 2269.691,1547.19 					"/>
+					<polygon style="fill:#FFFFFF;" points="2300.526,1671.964 2283.192,1671.834 2283.192,1547.367 2300.526,1547.593 					"/>
+					<polygon style="fill:#FFFFFF;" points="2331.274,1672.193 2313.989,1672.064 2313.989,1547.77 2331.274,1547.996 					"/>
+					<polygon style="fill:#FFFFFF;" points="2361.937,1672.421 2344.7,1672.293 2344.7,1548.172 2361.937,1548.396 					"/>
+					<polygon style="fill:#FFFFFF;" points="2392.515,1672.649 2375.325,1672.521 2375.325,1548.572 2392.515,1548.797 					"/>
+					<polygon style="fill:#FFFFFF;" points="2423.008,1672.876 2405.866,1672.748 2405.866,1548.971 2423.008,1549.196 					"/>
+					<polygon style="fill:#FFFFFF;" points="2453.417,1673.102 2436.322,1672.975 2436.322,1549.369 2453.417,1549.593 					"/>
+					<polygon style="fill:#FFFFFF;" points="2483.742,1673.329 2466.695,1673.202 2466.695,1549.767 2483.742,1549.989 					"/>
+					<polygon style="fill:#FFFFFF;" points="2513.983,1673.554 2496.983,1673.427 2496.983,1550.163 2513.983,1550.385 					"/>
+				</g>
+				<g style="opacity:0.69;">
+					
+						<linearGradient id="SVGID_00000031926596909417759230000005111455076469887665_" gradientUnits="userSpaceOnUse" x1="2007.8668" y1="1568.4896" x2="2017.26" y2="1711.7371">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000031926596909417759230000005111455076469887665_);" points="2019.885,1669.873 
+						2002.108,1669.741 2002.108,1562.484 2019.885,1562.701 					"/>
+					
+						<linearGradient id="SVGID_00000180361248483866230010000016344733672908646535_" gradientUnits="userSpaceOnUse" x1="2042.1327" y1="1657.1475" x2="2043.3605" y2="1675.8706">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000180361248483866230010000016344733672908646535_);" points="2051.419,1670.108 
+						2033.693,1669.975 2033.693,1657.081 2051.419,1657.224 					"/>
+					
+						<linearGradient id="SVGID_00000040566207543741075710000009842628642636570003_" gradientUnits="userSpaceOnUse" x1="2071.7302" y1="1598.6987" x2="2078.1768" y2="1697.0074">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000040566207543741075710000009842628642636570003_);" points="2082.864,1670.342 
+						2065.187,1670.21 2065.187,1597.001 2082.864,1597.19 					"/>
+					
+						<linearGradient id="SVGID_00000153696384400484917990000005990603085295661743_" gradientUnits="userSpaceOnUse" x1="2104.3621" y1="1638.8041" x2="2107.2053" y2="1682.1637">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000153696384400484917990000005990603085295661743_);" points="2114.221,1670.575 
+						2096.593,1670.444 2096.593,1638.873 2114.221,1639.029 					"/>
+					
+						<linearGradient id="SVGID_00000157280771920463633670000011846523094188469414_" gradientUnits="userSpaceOnUse" x1="2134.0107" y1="1589.3846" x2="2141.1091" y2="1697.6378">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000157280771920463633670000011846523094188469414_);" points="2145.489,1670.809 
+						2127.911,1670.677 2127.911,1589.926 2145.489,1590.12 					"/>
+					
+						<linearGradient id="SVGID_00000142172256371159300160000013872858452576188298_" gradientUnits="userSpaceOnUse" x1="2165.9846" y1="1613.8972" x2="2170.907" y2="1688.9631">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000142172256371159300160000013872858452576188298_);" points="2176.67,1671.041 
+						2159.142,1670.91 2159.142,1615.304 2176.67,1615.479 					"/>
+					
+						<linearGradient id="SVGID_00000054960854954045448470000001057528560372855937_" gradientUnits="userSpaceOnUse" x1="2195.6279" y1="1571.2336" x2="2204.0828" y2="1700.1705">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000054960854954045448470000001057528560372855937_);" points="2207.764,1671.273 
+						2190.284,1671.142 2190.284,1574.709 2207.764,1574.914 					"/>
+					
+						<linearGradient id="SVGID_00000140700168920664045110000012657113735104049554_" gradientUnits="userSpaceOnUse" x1="2226.2136" y1="1559.7841" x2="2235.5137" y2="1701.6123">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000140700168920664045110000012657113735104049554_);" points="2238.771,1671.503 
+						2221.34,1671.373 2221.34,1565.167 2238.771,1565.38 					"/>
+					
+						<linearGradient id="SVGID_00000005259665672548705680000000360103633523870131_" gradientUnits="userSpaceOnUse" x1="2259.0056" y1="1614.7566" x2="2263.7039" y2="1686.4075">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000005259665672548705680000000360103633523870131_);" points="2269.691,1671.734 
+						2252.309,1671.604 2252.309,1618.575 2269.691,1618.746 					"/>
+					
+						<linearGradient id="SVGID_00000113347180761219426440000011261831207616446083_" gradientUnits="userSpaceOnUse" x1="2287.4373" y1="1546.5421" x2="2297.5796" y2="1701.212">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000113347180761219426440000011261831207616446083_);" points="2300.526,1671.964 
+						2283.192,1671.834 2283.192,1555.889 2300.526,1556.109 					"/>
+					
+						<linearGradient id="SVGID_00000093176232582940572780000005591892962584255932_" gradientUnits="userSpaceOnUse" x1="2318.7651" y1="1563.9041" x2="2327.4067" y2="1695.692">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000093176232582940572780000005591892962584255932_);" points="2331.274,1672.193 
+						2313.989,1672.064 2313.989,1573.456 2331.274,1573.661 					"/>
+					
+						<linearGradient id="SVGID_00000069368993148095525570000006670711518617697936_" gradientUnits="userSpaceOnUse" x1="2352.2205" y1="1642.4182" x2="2354.614" y2="1678.921">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000069368993148095525570000006670711518617697936_);" points="2361.937,1672.421 
+						2344.7,1672.293 2344.7,1645.889 2361.937,1646.038 					"/>
+					
+						<linearGradient id="SVGID_00000071523200577501094860000015906636029534100119_" gradientUnits="userSpaceOnUse" x1="2381.3474" y1="1602.3887" x2="2386.8188" y2="1685.8259">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000071523200577501094860000015906636029534100119_);" points="2392.515,1672.649 
+						2375.325,1672.521 2375.325,1610.546 2392.515,1610.722 					"/>
+					
+						<linearGradient id="SVGID_00000078037214316935985830000014571911858137936263_" gradientUnits="userSpaceOnUse" x1="2410.668" y1="1570.765" x2="2418.4944" y2="1690.1185">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000078037214316935985830000014571911858137936263_);" points="2423.008,1672.876 
+						2405.866,1672.748 2405.866,1583.552 2423.008,1583.749 					"/>
+					
+						<linearGradient id="SVGID_00000022549910916344685170000000088455632666953121_" gradientUnits="userSpaceOnUse" x1="2442.0452" y1="1597.511" x2="2447.7739" y2="1684.8751">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000022549910916344685170000000088455632666953121_);" points="2453.417,1673.102 
+						2436.322,1672.975 2436.322,1608.017 2453.417,1608.195 					"/>
+					
+						<linearGradient id="SVGID_00000024688047129898921690000007770362203259389348_" gradientUnits="userSpaceOnUse" x1="2470.7717" y1="1555.1851" x2="2479.5859" y2="1689.6042">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000024688047129898921690000007770362203259389348_);" points="2483.742,1673.329 
+						2466.695,1673.202 2466.695,1572.582 2483.742,1572.787 					"/>
+					
+						<linearGradient id="SVGID_00000047751085702820755350000012896153788144645787_" gradientUnits="userSpaceOnUse" x1="2500.4419" y1="1540.8148" x2="2510.2136" y2="1689.8337">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000047751085702820755350000012896153788144645787_);" points="2513.983,1673.554 
+						2496.983,1673.427 2496.983,1561.74 2513.983,1561.954 					"/>
+				</g>
+			</g>
+			<g>
+				<path style="fill:#FFFFFF;" d="M1707.985,1925.46v-148.517c0-22.726,20.106-41.059,44.859-40.949l802.656,3.566
+					c22.981,0.102,41.574,17.886,41.574,39.721v142.698c0,21.836-18.594,39.644-41.574,39.775l-802.656,4.597
+					C1728.091,1966.494,1707.985,1948.186,1707.985,1925.46z"/>
+				<path style="fill:#D8DEE8;" d="M1791.599,1790.779c0,10.476-9.247,18.958-20.663,18.945
+					c-11.428-0.013-20.702-8.533-20.702-19.028c0-10.496,9.273-18.978,20.702-18.945
+					C1782.352,1771.783,1791.599,1780.302,1791.599,1790.779z"/>
+				<path style="fill:#D8DEE8;" d="M1856.868,1790.911c0,10.446-9.193,18.904-20.544,18.89
+					c-11.362-0.013-20.582-8.508-20.582-18.973c0-10.465,9.22-18.923,20.582-18.89
+					C1847.675,1771.97,1856.868,1780.465,1856.868,1790.911z"/>
+				<path style="fill:#D8DEE8;" d="M1921.762,1791.043c0,10.416-9.141,18.849-20.426,18.836
+					c-11.297-0.013-20.463-8.484-20.463-18.919c0-10.435,9.166-18.868,20.463-18.836
+					C1912.621,1772.156,1921.762,1780.626,1921.762,1791.043z"/>
+				
+					<linearGradient id="SVGID_00000009563588019256621220000006424350390792630714_" gradientUnits="userSpaceOnUse" x1="2075.6201" y1="1749.5078" x2="2448.0918" y2="1958.2455">
+					<stop  offset="0" style="stop-color:#444B8C"/>
+					<stop  offset="0.9964" style="stop-color:#26264F"/>
+				</linearGradient>
+				<polygon style="fill:url(#SVGID_00000009563588019256621220000006424350390792630714_);" points="2551.667,1926.007 
+					1962.503,1928.418 1962.503,1772.3 2551.667,1773.989 				"/>
+				<g style="opacity:0.3;">
+					<polygon style="fill:#FFFFFF;" points="2019.885,1917.191 2002.108,1917.255 2002.108,1791.206 2019.885,1791.242 					"/>
+					<polygon style="fill:#FFFFFF;" points="2051.419,1917.077 2033.693,1917.141 2033.693,1791.27 2051.419,1791.306 					"/>
+					<polygon style="fill:#FFFFFF;" points="2082.864,1916.964 2065.187,1917.028 2065.187,1791.334 2082.864,1791.37 					"/>
+					<polygon style="fill:#FFFFFF;" points="2114.221,1916.851 2096.593,1916.915 2096.593,1791.397 2114.221,1791.433 					"/>
+					<polygon style="fill:#FFFFFF;" points="2145.489,1916.739 2127.911,1916.802 2127.911,1791.461 2145.489,1791.496 					"/>
+					<polygon style="fill:#FFFFFF;" points="2176.67,1916.626 2159.142,1916.69 2159.142,1791.524 2176.67,1791.56 					"/>
+					<polygon style="fill:#FFFFFF;" points="2207.764,1916.515 2190.284,1916.578 2190.284,1791.587 2207.764,1791.623 					"/>
+					<polygon style="fill:#FFFFFF;" points="2238.771,1916.403 2221.34,1916.466 2221.34,1791.651 2238.771,1791.686 					"/>
+					<polygon style="fill:#FFFFFF;" points="2269.691,1916.292 2252.309,1916.354 2252.309,1791.713 2269.691,1791.748 					"/>
+					<polygon style="fill:#FFFFFF;" points="2300.526,1916.181 2283.192,1916.243 2283.192,1791.776 2300.526,1791.811 					"/>
+					<polygon style="fill:#FFFFFF;" points="2331.274,1916.07 2313.989,1916.132 2313.989,1791.838 2331.274,1791.873 					"/>
+					<polygon style="fill:#FFFFFF;" points="2361.937,1915.96 2344.7,1916.022 2344.7,1791.901 2361.937,1791.935 					"/>
+					<polygon style="fill:#FFFFFF;" points="2392.515,1915.85 2375.325,1915.911 2375.325,1791.963 2392.515,1791.998 					"/>
+					<polygon style="fill:#FFFFFF;" points="2423.008,1915.74 2405.866,1915.802 2405.866,1792.024 2423.008,1792.059 					"/>
+					<polygon style="fill:#FFFFFF;" points="2453.417,1915.631 2436.322,1915.692 2436.322,1792.086 2453.417,1792.121 					"/>
+					<polygon style="fill:#FFFFFF;" points="2483.742,1915.522 2466.695,1915.583 2466.695,1792.148 2483.742,1792.182 					"/>
+					<polygon style="fill:#FFFFFF;" points="2513.983,1915.413 2496.983,1915.474 2496.983,1792.21 2513.983,1792.244 					"/>
+				</g>
+				<g style="opacity:0.69;">
+					
+						<linearGradient id="SVGID_00000085212324698530409110000009609943893926307775_" gradientUnits="userSpaceOnUse" x1="2007.8726" y1="1815.9929" x2="2017.2487" y2="1958.9803">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000085212324698530409110000009609943893926307775_);" points="2019.885,1917.191 
+						2002.108,1917.255 2002.108,1809.999 2019.885,1810.02 					"/>
+					
+						<linearGradient id="SVGID_00000003071962491163233940000013191352586596937344_" gradientUnits="userSpaceOnUse" x1="2042.1385" y1="1904.3044" x2="2043.3494" y2="1922.7688">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000003071962491163233940000013191352586596937344_);" points="2051.419,1917.077 
+						2033.693,1917.141 2033.693,1904.247 2051.419,1904.194 					"/>
+					
+						<linearGradient id="SVGID_00000088815222560449419530000010925213566235839409_" gradientUnits="userSpaceOnUse" x1="2071.7363" y1="1845.5106" x2="2078.1658" y2="1943.561">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000088815222560449419530000010925213566235839409_);" points="2082.864,1916.964 
+						2065.187,1917.028 2065.187,1843.819 2082.864,1843.813 					"/>
+					
+						<linearGradient id="SVGID_00000005983772472130764900000012068202922242762156_" gradientUnits="userSpaceOnUse" x1="2104.3682" y1="1885.2716" x2="2107.1946" y2="1928.3744">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000005983772472130764900000012068202922242762156_);" points="2114.221,1916.851 
+						2096.593,1916.915 2096.593,1885.343 2114.221,1885.305 					"/>
+					
+						<linearGradient id="SVGID_00000094612455913900548040000004589647721688230532_" gradientUnits="userSpaceOnUse" x1="2134.0171" y1="1835.5093" x2="2141.0986" y2="1943.5059">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000094612455913900548040000004589647721688230532_);" points="2145.489,1916.739 
+						2127.911,1916.802 2127.911,1836.05 2145.489,1836.05 					"/>
+					
+						<linearGradient id="SVGID_00000013166267927321640810000016333484955663309219_" gradientUnits="userSpaceOnUse" x1="2165.9912" y1="1859.6799" x2="2170.8967" y2="1934.4894">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000013166267927321640810000016333484955663309219_);" points="2176.67,1916.626 
+						2159.142,1916.69 2159.142,1861.084 2176.67,1861.065 					"/>
+					
+						<linearGradient id="SVGID_00000168804756756692207240000005059201944679208867_" gradientUnits="userSpaceOnUse" x1="2195.6345" y1="1816.6743" x2="2204.0728" y2="1945.3571">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000168804756756692207240000005059201944679208867_);" points="2207.764,1916.515 
+						2190.284,1916.578 2190.284,1820.144 2207.764,1820.157 					"/>
+					
+						<linearGradient id="SVGID_00000097473839405178624320000006872150935387983292_" gradientUnits="userSpaceOnUse" x1="2226.2205" y1="1804.8845" x2="2235.5039" y2="1946.4595">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000097473839405178624320000006872150935387983292_);" points="2238.771,1916.403 
+						2221.34,1916.466 2221.34,1810.259 2238.771,1810.28 					"/>
+					
+						<linearGradient id="SVGID_00000023273111426017785100000011974870766167950014_" gradientUnits="userSpaceOnUse" x1="2259.0125" y1="1859.5181" x2="2263.6943" y2="1930.9161">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000023273111426017785100000011974870766167950014_);" points="2269.691,1916.292 
+						2252.309,1916.354 2252.309,1863.325 2269.691,1863.304 					"/>
+					
+						<linearGradient id="SVGID_00000130631686086186323310000003700905876484220601_" gradientUnits="userSpaceOnUse" x1="2287.4446" y1="1790.9651" x2="2297.5703" y2="1945.3823">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000130631686086186323310000003700905876484220601_);" points="2300.526,1916.181 
+						2283.192,1916.243 2283.192,1800.298 2300.526,1800.326 					"/>
+					
+						<linearGradient id="SVGID_00000109727510332936412580000012095239269590155651_" gradientUnits="userSpaceOnUse" x1="2318.7725" y1="1807.9893" x2="2327.3977" y2="1939.5258">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000109727510332936412580000012095239269590155651_);" points="2331.274,1916.07 
+						2313.989,1916.132 2313.989,1817.524 2331.274,1817.539 					"/>
+					
+						<linearGradient id="SVGID_00000121978209298643615990000011480572039274132367_" gradientUnits="userSpaceOnUse" x1="2352.228" y1="1886.1674" x2="2354.6052" y2="1922.4193">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000121978209298643615990000011480572039274132367_);" points="2361.937,1915.96 
+						2344.7,1916.022 2344.7,1889.618 2361.937,1889.577 					"/>
+					
+						<linearGradient id="SVGID_00000031925476153058447020000007348013305023381139_" gradientUnits="userSpaceOnUse" x1="2381.3552" y1="1845.8027" x2="2386.8101" y2="1928.9894">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000031925476153058447020000007348013305023381139_);" points="2392.515,1915.85 
+						2375.325,1915.911 2375.325,1853.937 2392.515,1853.924 					"/>
+					
+						<linearGradient id="SVGID_00000121272994265852526950000007014943169749235625_" gradientUnits="userSpaceOnUse" x1="2410.6758" y1="1813.8439" x2="2418.4858" y2="1932.9475">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000121272994265852526950000007014943169749235625_);" points="2423.008,1915.74 
+						2405.866,1915.802 2405.866,1826.605 2423.008,1826.613 					"/>
+					
+						<linearGradient id="SVGID_00000143594000912082832380000014950527807569673359_" gradientUnits="userSpaceOnUse" x1="2442.0532" y1="1840.2556" x2="2447.7659" y2="1927.3716">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000143594000912082832380000014950527807569673359_);" points="2453.417,1915.631 
+						2436.322,1915.692 2436.322,1850.734 2453.417,1850.723 					"/>
+					
+						<linearGradient id="SVGID_00000070841125680067006490000015153982791839002551_" gradientUnits="userSpaceOnUse" x1="2470.78" y1="1797.597" x2="2479.5779" y2="1931.7683">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000070841125680067006490000015153982791839002551_);" points="2483.742,1915.522 
+						2466.695,1915.583 2466.695,1814.963 2483.742,1814.98 					"/>
+					
+						<linearGradient id="SVGID_00000056395962706664508750000005439309087050558891_" gradientUnits="userSpaceOnUse" x1="2500.4502" y1="1782.8956" x2="2510.2056" y2="1931.6663">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000056395962706664508750000005439309087050558891_);" points="2513.983,1915.413 
+						2496.983,1915.474 2496.983,1803.787 2513.983,1803.813 					"/>
+				</g>
+			</g>
+			<g>
+				<path style="fill:#FFFFFF;" d="M1707.985,2176.225v-148.517c0-22.727,20.106-41.282,44.859-41.445l802.656-5.303
+					c22.981-0.151,41.574,17.427,41.574,39.262v142.698c0,21.835-18.594,39.849-41.574,40.234l-802.656,13.466
+					C1728.091,2217.036,1707.985,2198.951,1707.985,2176.225z"/>
+				<path style="fill:#D8DEE8;" d="M1791.599,2040.62c0,10.476-9.247,19.06-20.663,19.173c-11.428,0.113-20.702-8.304-20.702-18.799
+					s9.273-19.081,20.702-19.174C1782.352,2021.726,1791.599,2030.143,1791.599,2040.62z"/>
+				<path style="fill:#D8DEE8;" d="M1856.868,2040.031c0,10.446-9.193,19.005-20.544,19.117
+					c-11.362,0.112-20.582-8.281-20.582-18.746c0-10.465,9.22-19.025,20.582-19.117
+					C1847.675,2021.192,1856.868,2029.584,1856.868,2040.031z"/>
+				<path style="fill:#D8DEE8;" d="M1921.762,2039.445c0,10.417-9.141,18.951-20.426,19.062
+					c-11.297,0.111-20.463-8.258-20.463-18.693s9.166-18.97,20.463-19.062C1912.621,2020.66,1921.762,2029.029,1921.762,2039.445z"
+					/>
+				
+					<linearGradient id="SVGID_00000083084741689945274680000012146588470125509521_" gradientUnits="userSpaceOnUse" x1="2076.5959" y1="1994.7516" x2="2447.0554" y2="2202.3616">
+					<stop  offset="0" style="stop-color:#444B8C"/>
+					<stop  offset="0.9964" style="stop-color:#26264F"/>
+				</linearGradient>
+				<polygon style="fill:url(#SVGID_00000083084741689945274680000012146588470125509521_);" points="2551.667,2167.45 
+					1962.503,2176.369 1962.503,2020.252 2551.667,2015.431 				"/>
+				<g style="opacity:0.3;">
+					<polygon style="fill:#FFFFFF;" points="2019.885,2164.509 2002.108,2164.769 2002.108,2038.721 2019.885,2038.56 					"/>
+					<polygon style="fill:#FFFFFF;" points="2051.419,2164.047 2033.693,2164.307 2033.693,2038.436 2051.419,2038.276 					"/>
+					<polygon style="fill:#FFFFFF;" points="2082.864,2163.587 2065.187,2163.846 2065.187,2038.151 2082.864,2037.992 					"/>
+					<polygon style="fill:#FFFFFF;" points="2114.221,2163.127 2096.593,2163.386 2096.593,2037.868 2114.221,2037.709 					"/>
+					<polygon style="fill:#FFFFFF;" points="2145.489,2162.669 2127.911,2162.927 2127.911,2037.585 2145.489,2037.427 					"/>
+					<polygon style="fill:#FFFFFF;" points="2176.67,2162.212 2159.142,2162.469 2159.142,2037.304 2176.67,2037.146 					"/>
+					<polygon style="fill:#FFFFFF;" points="2207.764,2161.757 2190.284,2162.013 2190.284,2037.023 2207.764,2036.865 					"/>
+					<polygon style="fill:#FFFFFF;" points="2238.771,2161.302 2221.34,2161.558 2221.34,2036.742 2238.771,2036.585 					"/>
+					<polygon style="fill:#FFFFFF;" points="2269.691,2160.85 2252.309,2161.104 2252.309,2036.463 2269.691,2036.307 					"/>
+					<polygon style="fill:#FFFFFF;" points="2300.526,2160.398 2283.192,2160.652 2283.192,2036.185 2300.526,2036.028 					"/>
+					<polygon style="fill:#FFFFFF;" points="2331.274,2159.948 2313.989,2160.201 2313.989,2035.907 2331.274,2035.751 					"/>
+					<polygon style="fill:#FFFFFF;" points="2361.937,2159.499 2344.7,2159.751 2344.7,2035.63 2361.937,2035.474 					"/>
+					<polygon style="fill:#FFFFFF;" points="2392.515,2159.051 2375.325,2159.302 2375.325,2035.353 2392.515,2035.198 					"/>
+					<polygon style="fill:#FFFFFF;" points="2423.008,2158.604 2405.866,2158.855 2405.866,2035.078 2423.008,2034.923 					"/>
+					<polygon style="fill:#FFFFFF;" points="2453.417,2158.158 2436.322,2158.409 2436.322,2034.803 2453.417,2034.649 					"/>
+					<polygon style="fill:#FFFFFF;" points="2483.742,2157.714 2466.695,2157.964 2466.695,2034.529 2483.742,2034.375 					"/>
+					<polygon style="fill:#FFFFFF;" points="2513.983,2157.271 2496.983,2157.521 2496.983,2034.256 2513.983,2034.103 					"/>
+				</g>
+				<g style="opacity:0.69;">
+					
+						<linearGradient id="SVGID_00000121961907434718761540000006627839975752312994_" gradientUnits="userSpaceOnUse" x1="2007.8782" y1="2063.4956" x2="2017.2373" y2="2206.2239">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000121961907434718761540000006627839975752312994_);" points="2019.885,2164.509 
+						2002.108,2164.769 2002.108,2057.513 2019.885,2057.338 					"/>
+					
+						<linearGradient id="SVGID_00000063595924678333654120000008208675096392684418_" gradientUnits="userSpaceOnUse" x1="2042.1444" y1="2151.4614" x2="2043.3383" y2="2169.6672">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000063595924678333654120000008208675096392684418_);" points="2051.419,2164.047 
+						2033.693,2164.307 2033.693,2151.413 2051.419,2151.163 					"/>
+					
+						<linearGradient id="SVGID_00000182514953607023958880000014984373332894729151_" gradientUnits="userSpaceOnUse" x1="2071.7422" y1="2092.3215" x2="2078.155" y2="2190.1165">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000182514953607023958880000014984373332894729151_);" points="2082.864,2163.587 
+						2065.187,2163.846 2065.187,2090.636 2082.864,2090.436 					"/>
+					
+						<linearGradient id="SVGID_00000110438718485916610770000004268365836322675870_" gradientUnits="userSpaceOnUse" x1="2104.3743" y1="2131.7393" x2="2107.1838" y2="2174.5854">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000110438718485916610770000004268365836322675870_);" points="2114.221,2163.127 
+						2096.593,2163.386 2096.593,2131.814 2114.221,2131.581 					"/>
+					
+						<linearGradient id="SVGID_00000097464850905123065720000003469349735308410556_" gradientUnits="userSpaceOnUse" x1="2134.0234" y1="2081.6343" x2="2141.0881" y2="2189.374">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000097464850905123065720000003469349735308410556_);" points="2145.489,2162.669 
+						2127.911,2162.927 2127.911,2082.175 2145.489,2081.981 					"/>
+					
+						<linearGradient id="SVGID_00000136383414477098781690000008934154643017523597_" gradientUnits="userSpaceOnUse" x1="2165.9978" y1="2105.4619" x2="2170.8865" y2="2180.0164">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000136383414477098781690000008934154643017523597_);" points="2176.67,2162.212 
+						2159.142,2162.469 2159.142,2106.863 2176.67,2106.651 					"/>
+					
+						<linearGradient id="SVGID_00000038391146957130818850000004819196002940062867_" gradientUnits="userSpaceOnUse" x1="2195.6414" y1="2062.116" x2="2204.0627" y2="2190.5425">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000038391146957130818850000004819196002940062867_);" points="2207.764,2161.757 
+						2190.284,2162.013 2190.284,2065.58 2207.764,2065.399 					"/>
+					
+						<linearGradient id="SVGID_00000095330303833910978530000004893189920784961449_" gradientUnits="userSpaceOnUse" x1="2226.2273" y1="2049.9858" x2="2235.4941" y2="2191.3057">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000095330303833910978530000004893189920784961449_);" points="2238.771,2161.302 
+						2221.34,2161.558 2221.34,2055.352 2238.771,2055.179 					"/>
+					
+						<linearGradient id="SVGID_00000141417083073320536940000015113785852498782129_" gradientUnits="userSpaceOnUse" x1="2259.0195" y1="2104.2793" x2="2263.6848" y2="2175.4246">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000141417083073320536940000015113785852498782129_);" points="2269.691,2160.85 
+						2252.309,2161.104 2252.309,2108.075 2269.691,2107.862 					"/>
+					
+						<linearGradient id="SVGID_00000040536456218240366600000015596996705448412827_" gradientUnits="userSpaceOnUse" x1="2287.4519" y1="2035.3888" x2="2297.5608" y2="2189.5527">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000040536456218240366600000015596996705448412827_);" points="2300.526,2160.398 
+						2283.192,2160.652 2283.192,2044.707 2300.526,2044.544 					"/>
+					
+						<linearGradient id="SVGID_00000029753180711290883880000010124684391589407403_" gradientUnits="userSpaceOnUse" x1="2318.7798" y1="2052.075" x2="2327.3887" y2="2183.3596">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000029753180711290883880000010124684391589407403_);" points="2331.274,2159.948 
+						2313.989,2160.201 2313.989,2061.592 2331.274,2061.416 					"/>
+					
+						<linearGradient id="SVGID_00000018940418517001250350000005077892934348999303_" gradientUnits="userSpaceOnUse" x1="2352.2356" y1="2129.9167" x2="2354.5962" y2="2165.9175">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000018940418517001250350000005077892934348999303_);" points="2361.937,2159.499 
+						2344.7,2159.751 2344.7,2133.347 2361.937,2133.115 					"/>
+					
+						<linearGradient id="SVGID_00000147932163906905751180000010510884928017443248_" gradientUnits="userSpaceOnUse" x1="2381.363" y1="2089.2163" x2="2386.8013" y2="2172.1523">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000147932163906905751180000010510884928017443248_);" points="2392.515,2159.051 
+						2375.325,2159.302 2375.325,2097.328 2392.515,2097.125 					"/>
+					
+						<linearGradient id="SVGID_00000078752221919244769930000017277827951056185021_" gradientUnits="userSpaceOnUse" x1="2410.6836" y1="2056.9229" x2="2418.4773" y2="2175.7766">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000078752221919244769930000017277827951056185021_);" points="2423.008,2158.604 
+						2405.866,2158.855 2405.866,2069.659 2423.008,2069.477 					"/>
+					
+						<linearGradient id="SVGID_00000028289116383901981910000004025142730595050431_" gradientUnits="userSpaceOnUse" x1="2442.0613" y1="2083.001" x2="2447.7576" y2="2169.8672">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000028289116383901981910000004025142730595050431_);" points="2453.417,2158.158 
+						2436.322,2158.409 2436.322,2093.451 2453.417,2093.251 					"/>
+					
+						<linearGradient id="SVGID_00000088855376537243127520000011785395280643449535_" gradientUnits="userSpaceOnUse" x1="2470.7881" y1="2040.0098" x2="2479.5698" y2="2173.9319">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000088855376537243127520000011785395280643449535_);" points="2483.742,2157.714 
+						2466.695,2157.964 2466.695,2057.344 2483.742,2057.172 					"/>
+					
+						<linearGradient id="SVGID_00000070816798881602132510000003937954495076025008_" gradientUnits="userSpaceOnUse" x1="2500.4585" y1="2024.9757" x2="2510.1978" y2="2173.499">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000070816798881602132510000003937954495076025008_);" points="2513.983,2157.271 
+						2496.983,2157.521 2496.983,2045.833 2513.983,2045.671 					"/>
+				</g>
+			</g>
+			<g>
+				<path style="fill:#FFFFFF;" d="M1707.985,2426.989v-148.517c0-22.726,20.106-41.504,44.859-41.941l802.656-14.171
+					c22.981-0.406,41.574,16.968,41.574,38.802v142.698c0,21.836-18.594,40.055-41.574,40.694l-802.656,22.335
+					C1728.091,2467.579,1707.985,2449.715,1707.985,2426.989z"/>
+				<path style="fill:#D8DEE8;" d="M1791.599,2290.46c0,10.476-9.247,19.163-20.663,19.402
+					c-11.428,0.239-20.702-8.075-20.702-18.571c0-10.496,9.273-19.182,20.702-19.403
+					C1782.352,2271.669,1791.599,2279.984,1791.599,2290.46z"/>
+				<path style="fill:#D8DEE8;" d="M1856.868,2289.15c0,10.447-9.193,19.107-20.544,19.344
+					c-11.362,0.238-20.582-8.053-20.582-18.519c0-10.466,9.22-19.126,20.582-19.345
+					C1847.675,2270.413,1856.868,2278.704,1856.868,2289.15z"/>
+				<path style="fill:#D8DEE8;" d="M1921.762,2287.848c0,10.416-9.141,19.051-20.426,19.287
+					c-11.297,0.236-20.463-8.031-20.463-18.467s9.166-19.071,20.463-19.288C1912.621,2269.164,1921.762,2277.431,1921.762,2287.848z
+					"/>
+				
+					<linearGradient id="SVGID_00000145756373798280317840000006722552414996450441_" gradientUnits="userSpaceOnUse" x1="2077.5715" y1="2239.9958" x2="2446.0188" y2="2446.4783">
+					<stop  offset="0" style="stop-color:#444B8C"/>
+					<stop  offset="0.9964" style="stop-color:#26264F"/>
+				</linearGradient>
+				<polygon style="fill:url(#SVGID_00000145756373798280317840000006722552414996450441_);" points="2551.667,2408.893 
+					1962.503,2424.322 1962.503,2268.204 2551.667,2256.873 				"/>
+				<g style="opacity:0.3;">
+					<polygon style="fill:#FFFFFF;" points="2019.885,2411.827 2002.108,2412.284 2002.108,2286.235 2019.885,2285.878 					"/>
+					<polygon style="fill:#FFFFFF;" points="2051.419,2411.017 2033.693,2411.473 2033.693,2285.601 2051.419,2285.245 					"/>
+					<polygon style="fill:#FFFFFF;" points="2082.864,2410.209 2065.187,2410.664 2065.187,2284.969 2082.864,2284.614 					"/>
+					<polygon style="fill:#FFFFFF;" points="2114.221,2409.403 2096.593,2409.856 2096.593,2284.339 2114.221,2283.985 					"/>
+					<polygon style="fill:#FFFFFF;" points="2145.489,2408.6 2127.911,2409.052 2127.911,2283.71 2145.489,2283.357 					"/>
+					<polygon style="fill:#FFFFFF;" points="2176.67,2407.799 2159.142,2408.249 2159.142,2283.083 2176.67,2282.732 					"/>
+					<polygon style="fill:#FFFFFF;" points="2207.764,2406.999 2190.284,2407.448 2190.284,2282.458 2207.764,2282.108 					"/>
+					<polygon style="fill:#FFFFFF;" points="2238.771,2406.202 2221.34,2406.65 2221.34,2281.835 2238.771,2281.485 					"/>
+					<polygon style="fill:#FFFFFF;" points="2269.691,2405.408 2252.309,2405.854 2252.309,2281.213 2269.691,2280.865 					"/>
+					<polygon style="fill:#FFFFFF;" points="2300.526,2404.615 2283.192,2405.061 2283.192,2280.593 2300.526,2280.246 					"/>
+					<polygon style="fill:#FFFFFF;" points="2331.274,2403.825 2313.989,2404.269 2313.989,2279.975 2331.274,2279.628 					"/>
+					<polygon style="fill:#FFFFFF;" points="2361.937,2403.037 2344.7,2403.48 2344.7,2279.359 2361.937,2279.013 					"/>
+					<polygon style="fill:#FFFFFF;" points="2392.515,2402.252 2375.325,2402.694 2375.325,2278.744 2392.515,2278.399 					"/>
+					<polygon style="fill:#FFFFFF;" points="2423.008,2401.469 2405.866,2401.908 2405.866,2278.131 2423.008,2277.787 					"/>
+					<polygon style="fill:#FFFFFF;" points="2453.417,2400.686 2436.322,2401.125 2436.322,2277.52 2453.417,2277.177 					"/>
+					<polygon style="fill:#FFFFFF;" points="2483.742,2399.907 2466.695,2400.346 2466.695,2276.91 2483.742,2276.569 					"/>
+					<polygon style="fill:#FFFFFF;" points="2513.983,2399.13 2496.983,2399.567 2496.983,2276.302 2513.983,2275.961 					"/>
+				</g>
+				<g style="opacity:0.69;">
+					
+						<linearGradient id="SVGID_00000100372156239898931360000017979472924971278509_" gradientUnits="userSpaceOnUse" x1="2007.8838" y1="2310.9985" x2="2017.226" y2="2453.4673">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000100372156239898931360000017979472924971278509_);" points="2019.885,2411.827 
+						2002.108,2412.284 2002.108,2305.028 2019.885,2304.656 					"/>
+					
+						<linearGradient id="SVGID_00000047754058165147379980000007856307832668823974_" gradientUnits="userSpaceOnUse" x1="2042.1503" y1="2398.6182" x2="2043.3271" y2="2416.5659">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000047754058165147379980000007856307832668823974_);" points="2051.419,2411.017 
+						2033.693,2411.473 2033.693,2398.579 2051.419,2398.133 					"/>
+					
+						<linearGradient id="SVGID_00000183929901492035962880000011461502175684794011_" gradientUnits="userSpaceOnUse" x1="2071.7483" y1="2339.1335" x2="2078.144" y2="2436.6694">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000183929901492035962880000011461502175684794011_);" points="2082.864,2410.209 
+						2065.187,2410.664 2065.187,2337.454 2082.864,2337.058 					"/>
+					
+						<linearGradient id="SVGID_00000010269082705438289240000000222770734400480942_" gradientUnits="userSpaceOnUse" x1="2104.3806" y1="2378.207" x2="2107.1733" y2="2420.7959">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000010269082705438289240000000222770734400480942_);" points="2114.221,2409.403 
+						2096.593,2409.856 2096.593,2378.285 2114.221,2377.857 					"/>
+					
+						<linearGradient id="SVGID_00000092451815095273401800000005474055081305057156_" gradientUnits="userSpaceOnUse" x1="2134.0298" y1="2327.7581" x2="2141.0779" y2="2435.2424">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000092451815095273401800000005474055081305057156_);" points="2145.489,2408.6 
+						2127.911,2409.052 2127.911,2328.299 2145.489,2327.912 					"/>
+					
+						<linearGradient id="SVGID_00000045585877398791049150000017245993068949578650_" gradientUnits="userSpaceOnUse" x1="2166.0042" y1="2351.2439" x2="2170.8762" y2="2425.5435">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000045585877398791049150000017245993068949578650_);" points="2176.67,2407.799 
+						2159.142,2408.249 2159.142,2352.643 2176.67,2352.237 					"/>
+					
+						<linearGradient id="SVGID_00000099648182860786807270000007646201376852071600_" gradientUnits="userSpaceOnUse" x1="2195.6479" y1="2307.5566" x2="2204.0527" y2="2435.729">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000099648182860786807270000007646201376852071600_);" points="2207.764,2406.999 
+						2190.284,2407.448 2190.284,2311.015 2207.764,2310.641 					"/>
+					
+						<linearGradient id="SVGID_00000157288264578808332030000011883869308726335923_" gradientUnits="userSpaceOnUse" x1="2226.2341" y1="2295.0867" x2="2235.4844" y2="2436.1526">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000157288264578808332030000011883869308726335923_);" points="2238.771,2406.202 
+						2221.34,2406.65 2221.34,2300.444 2238.771,2300.08 					"/>
+					
+						<linearGradient id="SVGID_00000075129670484990500550000002492439637547035566_" gradientUnits="userSpaceOnUse" x1="2259.0266" y1="2349.041" x2="2263.6753" y2="2419.9329">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000075129670484990500550000002492439637547035566_);" points="2269.691,2405.408 
+						2252.309,2405.854 2252.309,2352.825 2269.691,2352.42 					"/>
+					
+						<linearGradient id="SVGID_00000102506444057758531530000007645701651646412431_" gradientUnits="userSpaceOnUse" x1="2287.459" y1="2279.8118" x2="2297.5515" y2="2433.7229">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000102506444057758531530000007645701651646412431_);" points="2300.526,2404.615 
+						2283.192,2405.061 2283.192,2289.116 2300.526,2288.762 					"/>
+					
+						<linearGradient id="SVGID_00000156574823698020319560000009859714832973222543_" gradientUnits="userSpaceOnUse" x1="2318.7874" y1="2296.1611" x2="2327.3794" y2="2427.1931">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000156574823698020319560000009859714832973222543_);" points="2331.274,2403.825 
+						2313.989,2404.269 2313.989,2305.661 2331.274,2305.294 					"/>
+					
+						<linearGradient id="SVGID_00000107548305844959319380000003815291312664853640_" gradientUnits="userSpaceOnUse" x1="2352.2432" y1="2373.6655" x2="2354.5874" y2="2409.415">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000107548305844959319380000003815291312664853640_);" points="2361.937,2403.037 
+						2344.7,2403.48 2344.7,2377.076 2361.937,2376.654 					"/>
+					
+						<linearGradient id="SVGID_00000112599749203272205360000002184558551676508074_" gradientUnits="userSpaceOnUse" x1="2381.3706" y1="2332.6301" x2="2386.7925" y2="2415.3152">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000112599749203272205360000002184558551676508074_);" points="2392.515,2402.252 
+						2375.325,2402.694 2375.325,2340.719 2392.515,2340.325 					"/>
+					
+						<linearGradient id="SVGID_00000149367855329174595480000003373898538464123066_" gradientUnits="userSpaceOnUse" x1="2410.6917" y1="2300.001" x2="2418.469" y2="2418.6064">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000149367855329174595480000003373898538464123066_);" points="2423.008,2401.469 
+						2405.866,2401.908 2405.866,2312.712 2423.008,2312.341 					"/>
+					
+						<linearGradient id="SVGID_00000118382154902398845270000011104581610056414120_" gradientUnits="userSpaceOnUse" x1="2442.0693" y1="2325.7463" x2="2447.7493" y2="2412.3633">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000118382154902398845270000011104581610056414120_);" points="2453.417,2400.686 
+						2436.322,2401.125 2436.322,2336.168 2453.417,2335.779 					"/>
+					
+						<linearGradient id="SVGID_00000084503005403242588960000004810096334591358636_" gradientUnits="userSpaceOnUse" x1="2470.7964" y1="2282.4224" x2="2479.5618" y2="2416.0955">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000084503005403242588960000004810096334591358636_);" points="2483.742,2399.907 
+						2466.695,2400.346 2466.695,2299.726 2483.742,2299.365 					"/>
+					
+						<linearGradient id="SVGID_00000120544642129722119970000007193915012570171053_" gradientUnits="userSpaceOnUse" x1="2500.467" y1="2267.0566" x2="2510.1899" y2="2415.3311">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000120544642129722119970000007193915012570171053_);" points="2513.983,2399.13 
+						2496.983,2399.567 2496.983,2287.88 2513.983,2287.53 					"/>
+				</g>
+			</g>
+			<g>
+				<path style="fill:#FFFFFF;" d="M1707.985,2677.754v-148.517c0-22.726,20.106-41.726,44.859-42.437l802.656-23.04
+					c22.981-0.66,41.574,16.508,41.574,38.344v142.698c0,21.835-18.594,40.259-41.574,41.153l-802.656,31.204
+					C1728.091,2718.121,1707.985,2700.479,1707.985,2677.754z"/>
+				<path style="fill:#D8DEE8;" d="M1791.599,2540.301c0,10.476-9.247,19.265-20.663,19.63
+					c-11.428,0.365-20.702-7.846-20.702-18.342c0-10.495,9.273-19.285,20.702-19.631
+					C1782.352,2521.611,1791.599,2529.825,1791.599,2540.301z"/>
+				<path style="fill:#D8DEE8;" d="M1856.868,2538.27c0,10.446-9.193,19.208-20.544,19.571
+					c-11.362,0.363-20.582-7.826-20.582-18.292c0-10.465,9.22-19.228,20.582-19.572
+					C1847.675,2519.633,1856.868,2527.823,1856.868,2538.27z"/>
+				<path style="fill:#D8DEE8;" d="M1921.762,2536.25c0,10.416-9.141,19.153-20.426,19.513c-11.297,0.362-20.463-7.805-20.463-18.24
+					c0-10.435,9.166-19.172,20.463-19.514C1912.621,2517.667,1921.762,2525.834,1921.762,2536.25z"/>
+				
+					<linearGradient id="SVGID_00000065765589530874808240000011111233269519832489_" gradientUnits="userSpaceOnUse" x1="2078.5471" y1="2485.2397" x2="2444.9822" y2="2690.5945">
+					<stop  offset="0" style="stop-color:#444B8C"/>
+					<stop  offset="0.9964" style="stop-color:#26264F"/>
+				</linearGradient>
+				<polygon style="fill:url(#SVGID_00000065765589530874808240000011111233269519832489_);" points="2551.667,2650.335 
+					1962.503,2672.275 1962.503,2516.156 2551.667,2498.315 				"/>
+				<g style="opacity:0.3;">
+					<polygon style="fill:#FFFFFF;" points="2019.885,2659.146 2002.108,2659.799 2002.108,2533.75 2019.885,2533.197 					"/>
+					<polygon style="fill:#FFFFFF;" points="2051.419,2657.987 2033.693,2658.638 2033.693,2532.767 2051.419,2532.215 					"/>
+					<polygon style="fill:#FFFFFF;" points="2082.864,2656.831 2065.187,2657.481 2065.187,2531.787 2082.864,2531.237 					"/>
+					<polygon style="fill:#FFFFFF;" points="2114.221,2655.679 2096.593,2656.327 2096.593,2530.809 2114.221,2530.26 					"/>
+					<polygon style="fill:#FFFFFF;" points="2145.489,2654.53 2127.911,2655.176 2127.911,2529.835 2145.489,2529.288 					"/>
+					<polygon style="fill:#FFFFFF;" points="2176.67,2653.384 2159.142,2654.028 2159.142,2528.863 2176.67,2528.317 					"/>
+					<polygon style="fill:#FFFFFF;" points="2207.764,2652.242 2190.284,2652.884 2190.284,2527.894 2207.764,2527.349 					"/>
+					<polygon style="fill:#FFFFFF;" points="2238.771,2651.102 2221.34,2651.742 2221.34,2526.927 2238.771,2526.384 					"/>
+					<polygon style="fill:#FFFFFF;" points="2269.691,2649.966 2252.309,2650.604 2252.309,2525.963 2269.691,2525.423 					"/>
+					<polygon style="fill:#FFFFFF;" points="2300.526,2648.833 2283.192,2649.47 2283.192,2525.003 2300.526,2524.463 					"/>
+					<polygon style="fill:#FFFFFF;" points="2331.274,2647.703 2313.989,2648.338 2313.989,2524.044 2331.274,2523.506 					"/>
+					<polygon style="fill:#FFFFFF;" points="2361.937,2646.576 2344.7,2647.209 2344.7,2523.088 2361.937,2522.552 					"/>
+					<polygon style="fill:#FFFFFF;" points="2392.515,2645.452 2375.325,2646.084 2375.325,2522.135 2392.515,2521.6 					"/>
+					<polygon style="fill:#FFFFFF;" points="2423.008,2644.332 2405.866,2644.962 2405.866,2521.185 2423.008,2520.651 					"/>
+					<polygon style="fill:#FFFFFF;" points="2453.417,2643.214 2436.322,2643.843 2436.322,2520.237 2453.417,2519.705 					"/>
+					<polygon style="fill:#FFFFFF;" points="2483.742,2642.1 2466.695,2642.726 2466.695,2519.292 2483.742,2518.761 					"/>
+					<polygon style="fill:#FFFFFF;" points="2513.983,2640.989 2496.983,2641.613 2496.983,2518.349 2513.983,2517.82 					"/>
+				</g>
+				<g style="opacity:0.69;">
+					
+						<linearGradient id="SVGID_00000102517192462500334330000006752250020716187804_" gradientUnits="userSpaceOnUse" x1="2007.8894" y1="2558.5005" x2="2017.2147" y2="2700.7117">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000102517192462500334330000006752250020716187804_);" points="2019.885,2659.146 
+						2002.108,2659.799 2002.108,2552.542 2019.885,2551.975 					"/>
+					
+						<linearGradient id="SVGID_00000056395440528765977560000015626368996572381112_" gradientUnits="userSpaceOnUse" x1="2042.1561" y1="2645.7747" x2="2043.3159" y2="2663.4634">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000056395440528765977560000015626368996572381112_);" points="2051.419,2657.987 
+						2033.693,2658.638 2033.693,2645.744 2051.419,2645.103 					"/>
+					
+						<linearGradient id="SVGID_00000086690338742238382850000012108531822304193204_" gradientUnits="userSpaceOnUse" x1="2071.7542" y1="2585.9451" x2="2078.1331" y2="2683.2236">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000086690338742238382850000012108531822304193204_);" points="2082.864,2656.831 
+						2065.187,2657.481 2065.187,2584.271 2082.864,2583.68 					"/>
+					
+						<linearGradient id="SVGID_00000174566785442723431540000012519967781551465347_" gradientUnits="userSpaceOnUse" x1="2104.3867" y1="2624.6746" x2="2107.1626" y2="2667.0061">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000174566785442723431540000012519967781551465347_);" points="2114.221,2655.679 
+						2096.593,2656.327 2096.593,2624.755 2114.221,2624.133 					"/>
+					
+						<linearGradient id="SVGID_00000026135410746677083690000016779942142645766300_" gradientUnits="userSpaceOnUse" x1="2134.0361" y1="2573.8828" x2="2141.0674" y2="2681.1104">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000026135410746677083690000016779942142645766300_);" points="2145.489,2654.53 
+						2127.911,2655.176 2127.911,2574.424 2145.489,2573.842 					"/>
+					
+						<linearGradient id="SVGID_00000053503177718090347850000007933762134830547631_" gradientUnits="userSpaceOnUse" x1="2166.0107" y1="2597.0269" x2="2170.866" y2="2671.0698">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000053503177718090347850000007933762134830547631_);" points="2176.67,2653.384 
+						2159.142,2654.028 2159.142,2598.423 2176.67,2597.822 					"/>
+					
+						<linearGradient id="SVGID_00000033371269025946249250000016767290314318532025_" gradientUnits="userSpaceOnUse" x1="2195.6548" y1="2552.9983" x2="2204.0427" y2="2680.9153">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000033371269025946249250000016767290314318532025_);" points="2207.764,2652.242 
+						2190.284,2652.884 2190.284,2556.45 2207.764,2555.884 					"/>
+					
+						<linearGradient id="SVGID_00000103977011163327711450000013712297044261872794_" gradientUnits="userSpaceOnUse" x1="2226.241" y1="2540.1877" x2="2235.4744" y2="2680.9988">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000103977011163327711450000013712297044261872794_);" points="2238.771,2651.102 
+						2221.34,2651.742 2221.34,2545.536 2238.771,2544.979 					"/>
+					
+						<linearGradient id="SVGID_00000036954930044552967590000002824176185734280869_" gradientUnits="userSpaceOnUse" x1="2259.0337" y1="2593.8022" x2="2263.6658" y2="2664.4409">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000036954930044552967590000002824176185734280869_);" points="2269.691,2649.966 
+						2252.309,2650.604 2252.309,2597.575 2269.691,2596.978 					"/>
+					
+						<linearGradient id="SVGID_00000041261742229097555170000016124069074368151210_" gradientUnits="userSpaceOnUse" x1="2287.4663" y1="2524.2346" x2="2297.5422" y2="2677.8943">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000041261742229097555170000016124069074368151210_);" points="2300.526,2648.833 
+						2283.192,2649.47 2283.192,2533.524 2300.526,2532.979 					"/>
+					
+						<linearGradient id="SVGID_00000150061400966997967290000014687746209326380940_" gradientUnits="userSpaceOnUse" x1="2318.7947" y1="2540.2471" x2="2327.3704" y2="2671.0266">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000150061400966997967290000014687746209326380940_);" points="2331.274,2647.703 
+						2313.989,2648.338 2313.989,2549.73 2331.274,2549.172 					"/>
+					
+						<linearGradient id="SVGID_00000179604033632547398870000004725596105471055495_" gradientUnits="userSpaceOnUse" x1="2352.2507" y1="2617.4148" x2="2354.5784" y2="2652.9133">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000179604033632547398870000004725596105471055495_);" points="2361.937,2646.576 
+						2344.7,2647.209 2344.7,2620.805 2361.937,2620.193 					"/>
+					
+						<linearGradient id="SVGID_00000047025827281371905200000009729865145790099385_" gradientUnits="userSpaceOnUse" x1="2381.3784" y1="2576.0439" x2="2386.7839" y2="2658.4778">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000047025827281371905200000009729865145790099385_);" points="2392.515,2645.452 
+						2375.325,2646.084 2375.325,2584.11 2392.515,2583.526 					"/>
+					
+						<linearGradient id="SVGID_00000034056682753956525290000006880339388347583402_" gradientUnits="userSpaceOnUse" x1="2410.6995" y1="2543.0803" x2="2418.4604" y2="2661.4351">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000034056682753956525290000006880339388347583402_);" points="2423.008,2644.332 
+						2405.866,2644.962 2405.866,2555.765 2423.008,2555.205 					"/>
+					
+						<linearGradient id="SVGID_00000067952672102539706510000006992117156878810790_" gradientUnits="userSpaceOnUse" x1="2442.0774" y1="2568.4917" x2="2447.741" y2="2654.8591">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000067952672102539706510000006992117156878810790_);" points="2453.417,2643.214 
+						2436.322,2643.843 2436.322,2578.885 2453.417,2578.307 					"/>
+					
+						<linearGradient id="SVGID_00000139257766717114497150000003543287612430989476_" gradientUnits="userSpaceOnUse" x1="2470.8047" y1="2524.8345" x2="2479.5537" y2="2658.2593">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000139257766717114497150000003543287612430989476_);" points="2483.742,2642.1 
+						2466.695,2642.726 2466.695,2542.106 2483.742,2541.558 					"/>
+					
+						<linearGradient id="SVGID_00000088133585759180328280000002213811330826527387_" gradientUnits="userSpaceOnUse" x1="2500.4753" y1="2509.137" x2="2510.1821" y2="2657.1638">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000088133585759180328280000002213811330826527387_);" points="2513.983,2640.989 
+						2496.983,2641.613 2496.983,2529.927 2513.983,2529.389 					"/>
+				</g>
+			</g>
+			<g>
+				<path style="fill:#FFFFFF;" d="M1707.985,2928.518v-148.517c0-22.726,20.106-41.948,44.859-42.932l802.656-31.909
+					c22.981-0.914,41.574,16.049,41.574,37.884v142.698c0,21.836-18.594,40.465-41.574,41.612l-802.656,40.073
+					C1728.091,2968.663,1707.985,2951.244,1707.985,2928.518z"/>
+				<path style="fill:#D8DEE8;" d="M1791.599,2790.142c0,10.476-9.247,19.367-20.663,19.858
+					c-11.428,0.491-20.702-7.618-20.702-18.114s9.273-19.388,20.702-19.86C1782.352,2771.555,1791.599,2779.665,1791.599,2790.142z"
+					/>
+				<path style="fill:#D8DEE8;" d="M1856.868,2787.389c0,10.446-9.193,19.31-20.544,19.798
+					c-11.362,0.488-20.582-7.599-20.582-18.064c0-10.465,9.22-19.331,20.582-19.8
+					C1847.675,2768.854,1856.868,2776.943,1856.868,2787.389z"/>
+				<path style="fill:#D8DEE8;" d="M1921.762,2784.653c0,10.416-9.141,19.253-20.426,19.739
+					c-11.297,0.485-20.463-7.58-20.463-18.014c0-10.435,9.166-19.274,20.463-19.74
+					C1912.621,2766.17,1921.762,2774.237,1921.762,2784.653z"/>
+				
+					<linearGradient id="SVGID_00000073719587456971312790000005818771798761312942_" gradientUnits="userSpaceOnUse" x1="2079.5227" y1="2730.4839" x2="2443.9456" y2="2934.7109">
+					<stop  offset="0" style="stop-color:#444B8C"/>
+					<stop  offset="0.9964" style="stop-color:#26264F"/>
+				</linearGradient>
+				<polygon style="fill:url(#SVGID_00000073719587456971312790000005818771798761312942_);" points="2551.667,2891.777 
+					1962.503,2920.227 1962.503,2764.108 2551.667,2739.758 				"/>
+				<g style="opacity:0.3;">
+					<polygon style="fill:#FFFFFF;" points="2019.885,2906.464 2002.108,2907.314 2002.108,2781.264 2019.885,2780.515 					"/>
+					<polygon style="fill:#FFFFFF;" points="2051.419,2904.957 2033.693,2905.804 2033.693,2779.932 2051.419,2779.185 					"/>
+					<polygon style="fill:#FFFFFF;" points="2082.864,2903.454 2065.187,2904.299 2065.187,2778.604 2082.864,2777.859 					"/>
+					<polygon style="fill:#FFFFFF;" points="2114.221,2901.955 2096.593,2902.798 2096.593,2777.28 2114.221,2776.537 					"/>
+					<polygon style="fill:#FFFFFF;" points="2145.489,2900.46 2127.911,2901.3 2127.911,2775.96 2145.489,2775.218 					"/>
+					<polygon style="fill:#FFFFFF;" points="2176.67,2898.97 2159.142,2899.808 2159.142,2774.642 2176.67,2773.903 					"/>
+					<polygon style="fill:#FFFFFF;" points="2207.764,2897.484 2190.284,2898.319 2190.284,2773.329 2207.764,2772.592 					"/>
+					<polygon style="fill:#FFFFFF;" points="2238.771,2896.002 2221.34,2896.835 2221.34,2772.02 2238.771,2771.285 					"/>
+					<polygon style="fill:#FFFFFF;" points="2269.691,2894.524 2252.309,2895.354 2252.309,2770.713 2269.691,2769.98 					"/>
+					<polygon style="fill:#FFFFFF;" points="2300.526,2893.05 2283.192,2893.879 2283.192,2769.411 2300.526,2768.681 					"/>
+					<polygon style="fill:#FFFFFF;" points="2331.274,2891.58 2313.989,2892.407 2313.989,2768.112 2331.274,2767.383 					"/>
+					<polygon style="fill:#FFFFFF;" points="2361.937,2890.115 2344.7,2890.939 2344.7,2766.817 2361.937,2766.091 					"/>
+					<polygon style="fill:#FFFFFF;" points="2392.515,2888.653 2375.325,2889.475 2375.325,2765.526 2392.515,2764.801 					"/>
+					<polygon style="fill:#FFFFFF;" points="2423.008,2887.196 2405.866,2888.015 2405.866,2764.238 2423.008,2763.515 					"/>
+					<polygon style="fill:#FFFFFF;" points="2453.417,2885.743 2436.322,2886.56 2436.322,2762.954 2453.417,2762.233 					"/>
+					<polygon style="fill:#FFFFFF;" points="2483.742,2884.293 2466.695,2885.108 2466.695,2761.673 2483.742,2760.954 					"/>
+					<polygon style="fill:#FFFFFF;" points="2513.983,2882.848 2496.983,2883.66 2496.983,2760.396 2513.983,2759.678 					"/>
+				</g>
+				<g style="opacity:0.69;">
+					
+						<linearGradient id="SVGID_00000118361730361402592560000016631944887511486085_" gradientUnits="userSpaceOnUse" x1="2007.8951" y1="2806.0037" x2="2017.2032" y2="2947.9546">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000118361730361402592560000016631944887511486085_);" points="2019.885,2906.464 
+						2002.108,2907.314 2002.108,2800.057 2019.885,2799.293 					"/>
+					
+						<linearGradient id="SVGID_00000109713120821021950070000008516712786697772945_" gradientUnits="userSpaceOnUse" x1="2042.1619" y1="2892.9316" x2="2043.3048" y2="2910.3618">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000109713120821021950070000008516712786697772945_);" points="2051.419,2904.957 
+						2033.693,2905.804 2033.693,2892.91 2051.419,2892.073 					"/>
+					
+						<linearGradient id="SVGID_00000084509734634489065710000015888262068178459813_" gradientUnits="userSpaceOnUse" x1="2071.7603" y1="2832.7571" x2="2078.1223" y2="2929.7773">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000084509734634489065710000015888262068178459813_);" points="2082.864,2903.454 
+						2065.187,2904.299 2065.187,2831.09 2082.864,2830.302 					"/>
+					
+						<linearGradient id="SVGID_00000163778571776935289550000015110616748599490976_" gradientUnits="userSpaceOnUse" x1="2104.3931" y1="2871.1423" x2="2107.1519" y2="2913.2168">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000163778571776935289550000015110616748599490976_);" points="2114.221,2901.955 
+						2096.593,2902.798 2096.593,2871.226 2114.221,2870.408 					"/>
+					
+						<linearGradient id="SVGID_00000147206094873516835420000000034154440719815311_" gradientUnits="userSpaceOnUse" x1="2134.0425" y1="2820.0073" x2="2141.0569" y2="2926.9788">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000147206094873516835420000000034154440719815311_);" points="2145.489,2900.46 
+						2127.911,2901.3 2127.911,2820.549 2145.489,2819.772 					"/>
+					
+						<linearGradient id="SVGID_00000064343136460041548320000003988950500542585254_" gradientUnits="userSpaceOnUse" x1="2166.0173" y1="2842.8093" x2="2170.856" y2="2916.5969">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000064343136460041548320000003988950500542585254_);" points="2176.67,2898.97 
+						2159.142,2899.808 2159.142,2844.202 2176.67,2843.408 					"/>
+					
+						<linearGradient id="SVGID_00000158026943201763866900000014094894935735221153_" gradientUnits="userSpaceOnUse" x1="2195.6614" y1="2798.439" x2="2204.0327" y2="2926.1016">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000158026943201763866900000014094894935735221153_);" points="2207.764,2897.484 
+						2190.284,2898.319 2190.284,2801.885 2207.764,2801.126 					"/>
+					
+						<linearGradient id="SVGID_00000178910237051041997430000016860620147943540407_" gradientUnits="userSpaceOnUse" x1="2226.2478" y1="2785.2881" x2="2235.4648" y2="2925.8462">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000178910237051041997430000016860620147943540407_);" points="2238.771,2896.002 
+						2221.34,2896.835 2221.34,2790.628 2238.771,2789.879 					"/>
+					
+						<linearGradient id="SVGID_00000047058251800867789080000011912513468229713557_" gradientUnits="userSpaceOnUse" x1="2259.0408" y1="2838.5642" x2="2263.656" y2="2908.9487">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000047058251800867789080000011912513468229713557_);" points="2269.691,2894.524 
+						2252.309,2895.354 2252.309,2842.325 2269.691,2841.537 					"/>
+					
+						<linearGradient id="SVGID_00000124871969158981318220000001288902233161583804_" gradientUnits="userSpaceOnUse" x1="2287.4734" y1="2768.6584" x2="2297.5327" y2="2922.064">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000124871969158981318220000001288902233161583804_);" points="2300.526,2893.05 
+						2283.192,2893.879 2283.192,2777.934 2300.526,2777.196 					"/>
+					
+						<linearGradient id="SVGID_00000057855294345827350400000012782940650553109429_" gradientUnits="userSpaceOnUse" x1="2318.802" y1="2784.3323" x2="2327.3611" y2="2914.8604">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000057855294345827350400000012782940650553109429_);" points="2331.274,2891.58 
+						2313.989,2892.407 2313.989,2793.798 2331.274,2793.049 					"/>
+					
+						<linearGradient id="SVGID_00000163789700885172041500000016757337276203840175_" gradientUnits="userSpaceOnUse" x1="2352.2583" y1="2861.1638" x2="2354.5696" y2="2896.4116">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000163789700885172041500000016757337276203840175_);" points="2361.937,2890.115 
+						2344.7,2890.939 2344.7,2864.534 2361.937,2863.732 					"/>
+					
+						<linearGradient id="SVGID_00000067220742201935589880000008916405983705182102_" gradientUnits="userSpaceOnUse" x1="2381.386" y1="2819.4575" x2="2386.7751" y2="2901.6409">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000067220742201935589880000008916405983705182102_);" points="2392.515,2888.653 
+						2375.325,2889.475 2375.325,2827.501 2392.515,2826.727 					"/>
+					
+						<linearGradient id="SVGID_00000070109474670729980580000015403687125598407341_" gradientUnits="userSpaceOnUse" x1="2410.7073" y1="2786.1594" x2="2418.4519" y2="2904.2642">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000070109474670729980580000015403687125598407341_);" points="2423.008,2887.196 
+						2405.866,2888.015 2405.866,2798.819 2423.008,2798.069 					"/>
+					
+						<linearGradient id="SVGID_00000108270621841392199150000006858468773782288025_" gradientUnits="userSpaceOnUse" x1="2442.0854" y1="2811.2363" x2="2447.7327" y2="2897.3557">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000108270621841392199150000006858468773782288025_);" points="2453.417,2885.743 
+						2436.322,2886.56 2436.322,2821.601 2453.417,2820.835 					"/>
+					
+						<linearGradient id="SVGID_00000181086532229654148600000010425609957023857794_" gradientUnits="userSpaceOnUse" x1="2470.8127" y1="2767.2471" x2="2479.5457" y2="2900.4231">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000181086532229654148600000010425609957023857794_);" points="2483.742,2884.293 
+						2466.695,2885.108 2466.695,2784.488 2483.742,2783.751 					"/>
+					
+						<linearGradient id="SVGID_00000114758038380954512630000017141690811262520221_" gradientUnits="userSpaceOnUse" x1="2500.4839" y1="2751.2178" x2="2510.1741" y2="2898.9966">
+						<stop  offset="0" style="stop-color:#FF9085"/>
+						<stop  offset="1" style="stop-color:#FB6FBB"/>
+					</linearGradient>
+					<polygon style="fill:url(#SVGID_00000114758038380954512630000017141690811262520221_);" points="2513.983,2882.848 
+						2496.983,2883.66 2496.983,2771.974 2513.983,2771.247 					"/>
+				</g>
+			</g>
+			<path style="opacity:0.35;fill:#FFFFFF;" d="M2510.681,2798.864c-130.117-167.36-297.632-162.563-345.205-319.72
+				c-50.905-168.169,115.141-241.365,73.295-423.964c-42.531-185.592-246.639-187.037-276.268-374.714
+				c-24.049-152.33,103.482-196.181,61.823-332.851c-42.628-139.85-195.636-159.108-225.846-296.019
+				c-9.378-42.499-3.954-83.249,8.405-119.859l-96.697-3.873c-34.882-1.397-63.238,23.39-63.238,55.366v2098.824
+				c0,31.976,28.356,56.273,63.238,54.276l884.852-50.679c8.992-0.515,17.468-3,25.059-6.899
+				C2603.839,2947.896,2558.048,2859.788,2510.681,2798.864z"/>
+		</g>
+		<g>
+			
+				<linearGradient id="SVGID_00000057848496555667744620000013233555149788277396_" gradientUnits="userSpaceOnUse" x1="3045.6641" y1="-107.1381" x2="1862.7828" y2="1084.5375" gradientTransform="matrix(0.999 0.0445 -0.0445 0.999 -185.4776 -138.2787)">
+				<stop  offset="0" style="stop-color:#444B8C"/>
+				<stop  offset="0.9964" style="stop-color:#26264F"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000057848496555667744620000013233555149788277396_);" d="M1125.357,1557.205l169.881,200.527
+				l47.418,17.242l3.235-8.058l173.257-182.126l12.711-8.38l-49.735-16.435l-73.398-0.569c-8.725-0.068-15.623-7.19-15.426-15.91
+				l55.287-275.341l-48.735-14.389l-93.482,2.89c-6.094,0.188-11.525-3.283-13.861-8.853c-2.337-5.567-1.144-12.193,3.041-16.908
+				l224.526-252.922c6.328-7.133,18.138-7.908,24.181-1.568l227.207,238.186c4.485,4.702,5.498,11.665,2.574,17.754
+				c-2.917,6.084-9.208,10.14-16.039,10.351l-102.096,3.156l-3.262,137.614l51.899,15.672l331.316-21.055
+				c143.897-2.021,269.466-111.911,275.464-245.103c2.996-66.562-23.125-127.761-73.109-171.889
+				c-25.918-22.877-4.945-28.085-38.661-38.183c-5.95-1.782-62.963-14.706-69.005-16.049c-24.973-5.552-51.232-7.484-78.076-5.612
+				c-4.093,0.286-8.157,0.656-12.196,1.111c-31.731,3.704-58.243-16.235-60.617-45.125
+				c-19.804-241.328-226.378-398.53-467.546-368.166c-174.778,22.005-329.529,141.494-399.345,302.678
+				c-8.832,20.405-28.524,33.566-48.974,32.851c-15.337-0.544-30.984,0.315-46.499,2.549
+				c-134.232,19.302-242.637,143.6-250.988,283.24c-4.522,75.619,18.736,146.268,65.952,199.536
+				c47.849,53.993,114.197,83.464,187.444,82.435l179.576-2.523c8.289-0.116,14.869,6.702,14.683,15.233l-3.001,137.38
+				c-0.186,8.519-7.06,15.371-15.339,15.307L1125.357,1557.205z"/>
+			
+				<linearGradient id="SVGID_00000067218982383484755150000001101768863458701737_" gradientUnits="userSpaceOnUse" x1="1322.8287" y1="1133.6958" x2="5423.835" y2="1169.1366">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000067218982383484755150000001101768863458701737_);" d="M2371.96,1148.22
+				c-1.678,37.278-12.768,72.756-31.018,104.551c-47.302,82.537-142.894,140.438-248.182,141.666l-388.21,4.706l3.313-138.474
+				l103.406-2.987c6.916-0.205,13.3-4.297,16.247-10.394c2.945-6.138,1.922-13.135-2.62-17.883L1594.8,989.326
+				c-6.098-6.384-18.047-5.647-24.47,1.555l-227.312,254.074c-4.256,4.747-5.443,11.417-3.069,16.982
+				c2.331,5.647,7.856,9.125,13.994,8.962l94.648-2.742l-6.67,291.476c-0.206,8.798,6.791,15.959,15.631,16.041l74.312,0.737
+				l-189.217,198.546l-171.906-202.065l71.119,0.696c8.348,0.082,15.306-6.793,15.509-15.386l3.029-138.188
+				c0.204-8.593-6.466-15.468-14.856-15.345l-181.686,2.169c-74.106,0.9-141.215-28.849-189.624-83.233
+				c-47.754-53.687-71.283-124.766-66.702-200.796c8.472-140.398,118.138-265.246,253.912-284.479
+				c15.713-2.209,31.55-3.069,47.058-2.496c7.611,0.287,15.14-1.31,22.015-4.542c11.867-5.401,21.893-15.468,27.54-28.399
+				c70.67-162.045,227.272-282.064,404.253-303.997c244.214-30.24,453.479,128.245,473.532,371.189
+				c2.414,29.054,29.258,49.186,61.421,45.503c4.092-0.45,8.224-0.818,12.358-1.105c71.119-4.828,138.148,16.532,188.276,60.562
+				C2348.555,1019.525,2375.029,1081.192,2371.96,1148.22z"/>
+			
+				<linearGradient id="SVGID_00000133518943615596755950000007402047680308956042_" gradientUnits="userSpaceOnUse" x1="1311.3829" y1="1303.7705" x2="5333.0728" y2="1338.5258">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<path style="opacity:0.3;fill:url(#SVGID_00000133518943615596755950000007402047680308956042_);" d="M2340.943,1252.772
+				c-47.302,82.537-142.894,140.438-248.182,141.666l-388.21,4.706l3.313-138.474l103.406-2.987
+				c6.916-0.205,13.3-4.297,16.247-10.394c2.945-6.138,1.922-13.135-2.62-17.883L1594.8,989.326
+				c-6.098-6.384-18.047-5.647-24.47,1.555l-227.312,254.074c-4.256,4.747-5.443,11.417-3.069,16.982
+				c2.331,5.647,7.856,9.125,13.994,8.962l94.648-2.742l-6.67,291.476c-0.206,8.798,6.791,15.959,15.631,16.041l74.312,0.737
+				l-189.217,198.546l-171.906-202.065l71.119,0.696c8.348,0.082,15.306-6.793,15.509-15.386l3.029-138.188
+				c0.204-8.593-6.466-15.468-14.856-15.345l-181.686,2.169c-74.106,0.9-141.215-28.849-189.624-83.233
+				c-47.754-53.687-71.283-124.766-66.702-200.796c8.472-140.398,118.138-265.246,253.912-284.479
+				c15.713-2.209,31.55-3.069,47.058-2.496c7.611,0.287,15.14-1.31,22.015-4.542c4.46,5.565,8.84,11.253,13.095,17.023
+				c38.505,51.969,78.035,118.219,150.382,121.697c70.382,3.355,134.586-43.867,199.487-63.632
+				c81.595-24.798,162.371-20.133,231.281,34.128c69.321,54.587,114.661,133.319,184.347,187.619
+				c56.429,43.948,124.03,68.787,194.781,76.931c72.798,8.43,147.927,4.869,216.059,36.419
+				C2327.236,1244.833,2334.233,1248.598,2340.943,1252.772z"/>
+		</g>
+		<g>
+			
+				<linearGradient id="SVGID_00000016046374548027824340000001269820985784400310_" gradientUnits="userSpaceOnUse" x1="1021.6266" y1="2557.6848" x2="1339.2188" y2="2557.6848" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#444B8C"/>
+				<stop  offset="0.9964" style="stop-color:#3E4177"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000016046374548027824340000001269820985784400310_);" d="M2735.175,2296.226
+				c58.568-28.603,172.806,74.999,228.399,174.235c22.155,39.544,48.165,85.973,41.782,141.168
+				c-11.314,97.854-119.864,183.689-269.274,212.345c-4.206-15.023-8.412-30.045-12.618-45.067
+				c16.337-17.014,40.766-41.578,71.989-69.722c47.96-43.231,57.815-46.114,60.115-59.762
+				c7.534-44.707-107.434-82.133-148.328-160.74C2672.083,2421.099,2690.182,2318.2,2735.175,2296.226z"/>
+			
+				<linearGradient id="SVGID_00000089573622711893005690000003931079632154480309_" gradientUnits="userSpaceOnUse" x1="2818.2915" y1="2850.2371" x2="2866.4346" y2="3134.718">
+				<stop  offset="0" style="stop-color:#444B8C"/>
+				<stop  offset="0.9964" style="stop-color:#26264F"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000089573622711893005690000003931079632154480309_);" d="M2812.122,3082.714
+				c0,0-9.615,23.722-4.834,33.011c5.02,9.753,19.532,6.853,60.388,8.388c41.844,1.572,51.308,4.93,52.98,0.727
+				c3.342-8.4-29.169-35.075-67.2-42.125C2836.703,3079.608,2822.189,3080.924,2812.122,3082.714z"/>
+			
+				<linearGradient id="SVGID_00000127736133995953650870000009170863385792530583_" gradientUnits="userSpaceOnUse" x1="1238.3433" y1="2898.8447" x2="1196.8826" y2="3158.4238" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#311944"/>
+				<stop  offset="1" style="stop-color:#A03976"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000127736133995953650870000009170863385792530583_);" d="M2820.738,3047.251l22.75,35.461
+				c0,0-10.484,10.347-28.299,6.494l-25.026-33.595L2820.738,3047.251z"/>
+			
+				<linearGradient id="SVGID_00000160180736842496091650000001612051296331979400_" gradientUnits="userSpaceOnUse" x1="1021.627" y1="2557.7078" x2="1339.2173" y2="2557.7078" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#444B8C"/>
+				<stop  offset="0.9964" style="stop-color:#3E4177"/>
+			</linearGradient>
+			<path style="opacity:0.3;fill:url(#SVGID_00000160180736842496091650000001612051296331979400_);" d="M2707.241,2488.684
+				c-35.158-67.584-17.059-170.484,27.934-192.457c11.798-5.761,25.878-6.083,41.26-2.231c-8.1,23.39-6.494,40.302-2.497,52.28
+				c17.826,53.426,94.896,47.348,118.974,108.158c15.221,38.441-8.983,57.517,12.618,88.329
+				c22.387,31.932,58.996,26.578,70.303,57.684c8.426,23.177-8.189,36.356-1.802,55.881c1.78,5.441,5.287,10.904,11.184,16.093
+				c-39.596,71.212-131.736,129.037-249.132,151.553c-4.206-15.023-8.412-30.045-12.618-45.067
+				c16.337-17.014,40.766-41.578,71.989-69.722c47.96-43.231,57.815-46.114,60.115-59.762
+				C2863.102,2604.716,2748.135,2567.29,2707.241,2488.684z"/>
+			
+				<linearGradient id="SVGID_00000025437864693512105380000012237385965597281726_" gradientUnits="userSpaceOnUse" x1="1197.6154" y1="2694.0959" x2="1469.1724" y2="2694.0959" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#444B8C"/>
+				<stop  offset="0.9964" style="stop-color:#3E4177"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000025437864693512105380000012237385965597281726_);" d="M2775.141,2317.433
+				c-2.534,102.424-1.113,213.17,6.305,331.067c9.471,150.54,27.215,288.811,48.904,413.063c-9.635,3.065-19.269,6.13-28.903,9.197
+				c-99.096-96.551-128.749-181.485-136.867-242.579c-5.738-43.187,2.946-46.899-4.799-100.95
+				c-14.749-102.932-53.226-138.184-80.245-234.546c-10.141-36.168-21.431-90.807-20.71-162.031
+				C2630.93,2326.246,2703.036,2321.84,2775.141,2317.433z"/>
+			
+				<linearGradient id="SVGID_00000174577195836565122630000008949476693046516110_" gradientUnits="userSpaceOnUse" x1="1372.6996" y1="1780.7235" x2="1175.6111" y2="2482.5513" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#FFC444"/>
+				<stop  offset="0.9964" style="stop-color:#F36F56"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000174577195836565122630000008949476693046516110_);" d="M2846.126,2133.971
+				c-1.799,0.412-9.611,3.011-12.7,35.646c-7.449,78.69,33.523,110.549,23.434,153.224c-9.684,40.962-59.07,60.834-109.903,81.29
+				c-33.97,13.67-139.039,55.949-200.142,8.408c-25.716-20.009-28.53-44.166-46.876-132.961
+				c-46.613-225.607-64.67-244.991-45.066-293.829c33.666-83.871,123.806-118.603,138.803-124.382
+				c159.915-61.619,348.758,51.631,423.381,181.737c9.826,17.131,68.507,119.445,27.278,167.974
+				c-24.944,29.359-82.263,34.098-120.09,14.078C2873.703,2198.407,2862.965,2130.111,2846.126,2133.971z"/>
+			
+				<linearGradient id="SVGID_00000043442189416483759810000011998283561654959795_" gradientUnits="userSpaceOnUse" x1="1056.5266" y1="2124.3562" x2="1090.7769" y2="2235.5193" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#FFC444"/>
+				<stop  offset="0.9964" style="stop-color:#F36F56"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000043442189416483759810000011998283561654959795_);" d="M3020.904,2193.65
+				c0.5,0,1.007-0.106,1.492-0.327c1.81-0.824,2.608-2.962,1.786-4.775c-1.371-3-34.381-73.844-110.662-101.8
+				c-1.873-0.694-3.94,0.271-4.623,2.145c-0.686,1.869,0.274,3.939,2.145,4.622c73.372,26.892,106.253,97.318,106.576,98.025
+				C3018.224,2192.868,3019.533,2193.65,3020.904,2193.65z"/>
+			
+				<linearGradient id="SVGID_00000082359142349523112660000002622656286313675182_" gradientUnits="userSpaceOnUse" x1="2710.918" y1="2043.1158" x2="2759.114" y2="2124.5137">
+				<stop  offset="0" style="stop-color:#311944"/>
+				<stop  offset="1" style="stop-color:#A03976"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000082359142349523112660000002622656286313675182_);" d="M2721.426,2112.733
+				c0.421-3.254,3.723-25.732,22.492-32.934c9.336-3.582,25.742-4.629,32.131,5.623c4.011,6.438,3.661,16.669-1.607,21.688
+				c-6.66,6.346-15.344-1.197-27.311,4.017c-14.385,6.266-16.72,23.647-21.688,22.491
+				C2721.535,2132.708,2720.311,2121.332,2721.426,2112.733z"/>
+			
+				<linearGradient id="SVGID_00000070826837261351472970000008895021079563987852_" gradientUnits="userSpaceOnUse" x1="1485.34" y1="1812.3549" x2="1288.2511" y2="2514.1836" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#FFC444"/>
+				<stop  offset="0.9964" style="stop-color:#F36F56"/>
+			</linearGradient>
+			<path style="opacity:0.3;fill:url(#SVGID_00000070826837261351472970000008895021079563987852_);" d="M2559.425,1956.906
+				c10.093,27.476-20.191,51.285-7.21,81.118c18.604,42.755,92.54,20.811,118.974,63.092
+				c31.329,50.111-40.413,132.303-10.816,160.434c13.487,12.819,29.07-3.599,68.5,5.408c56.156,12.827,73.028,57.202,99.145,50.473
+				c8.215-2.116,18.172-9.573,26.55-32.529c3.653,12.737,5.391,24.829,2.293,37.937c-9.684,40.962-59.07,60.834-109.904,81.29
+				c-33.971,13.67-139.038,55.949-200.142,8.408c-25.716-20.009-28.53-44.166-46.876-132.961
+				c-46.613-225.607-64.67-244.991-45.066-293.829c10.69-26.631,27.077-48.291,44.941-65.66
+				C2538.327,1928.596,2554.142,1942.522,2559.425,1956.906z"/>
+			
+				<linearGradient id="SVGID_00000106111365943114031700000017414410510164886939_" gradientUnits="userSpaceOnUse" x1="2685.9031" y1="2149.6267" x2="2206.686" y2="1755.761">
+				<stop  offset="0" style="stop-color:#FFC444"/>
+				<stop  offset="0.2564" style="stop-color:#FFC145"/>
+				<stop  offset="0.4611" style="stop-color:#FDB747"/>
+				<stop  offset="0.648" style="stop-color:#FBA64A"/>
+				<stop  offset="0.823" style="stop-color:#F78E4F"/>
+				<stop  offset="0.9903" style="stop-color:#F37056"/>
+				<stop  offset="0.9964" style="stop-color:#F36F56"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000106111365943114031700000017414410510164886939_);" d="M2720.255,2091.556
+				c-4.314,3.924-52.696,55.882-105.321,42.724c-45.832-11.46-73.97-56.02-78.901-93.514
+				c-11.723-89.172,104.453-164.02,90.131-182.066c-8.423-10.613-53.279,9.083-84.724,28.842
+				c-25.785,16.203-133.827,84.096-130.931,197.93c0.294,11.553,2.156,84.758,50.605,121.293
+				c65.433,49.343,166.555,48.025,274.586-71.25C2729.718,2118.484,2726.24,2108.588,2720.255,2091.556z"/>
+			<g>
+				
+					<linearGradient id="SVGID_00000140014333966533162550000016512376850783095694_" gradientUnits="userSpaceOnUse" x1="2988.9348" y1="2145.8696" x2="2816.2322" y2="2015.7402">
+					<stop  offset="0.0036" style="stop-color:#6165D7"/>
+					<stop  offset="1" style="stop-color:#AA80F9"/>
+				</linearGradient>
+				<path style="fill:url(#SVGID_00000140014333966533162550000016512376850783095694_);" d="M2956.453,1982.301l-52.089,166.391
+					c-1.708,5.456-6.673,9.24-12.385,9.442l-68.111,9.901c-8.785,0.311-15.51-7.735-13.646-16.325l45.929-170.314
+					c1.31-6.045,6.569-10.421,12.751-10.613l74.271-5.98C2952.439,1964.516,2959.223,1973.453,2956.453,1982.301z"/>
+				
+					<linearGradient id="SVGID_00000063629352557153921540000010952364985298210180_" gradientUnits="userSpaceOnUse" x1="1117.1161" y1="2018.0107" x2="1199.2383" y2="2166.0796" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+					<stop  offset="0.0036" style="stop-color:#6165D7"/>
+					<stop  offset="1" style="stop-color:#AA80F9"/>
+				</linearGradient>
+				<path style="fill:url(#SVGID_00000063629352557153921540000010952364985298210180_);" d="M2953.955,1987.771l-50.555,161.49
+					c-1.657,5.296-6.475,8.969-12.02,9.164l-59.855,9.611c-8.525,0.301-15.053-7.508-13.243-15.845l44.861-165.393
+					c1.273-5.867,6.376-10.114,12.375-10.301l65.547-5.708C2950.059,1970.511,2956.643,1979.184,2953.955,1987.771z"/>
+				
+					<linearGradient id="SVGID_00000080913614140462926160000003515253363188141244_" gradientUnits="userSpaceOnUse" x1="2805.5911" y1="1973.9867" x2="2933.4324" y2="2283.5391">
+					<stop  offset="0.0036" style="stop-color:#6165D7"/>
+					<stop  offset="1" style="stop-color:#AA80F9"/>
+				</linearGradient>
+				<path style="opacity:0.3;fill:url(#SVGID_00000080913614140462926160000003515253363188141244_);" d="M2818.281,2152.192
+					l42.861-158.016c3.181,1.57,7.777,3.998,12.09,7.698c16.882,14.479,26.55,40.687,20.977,61.649
+					c-7.107,26.733-34.383,27.56-38.156,49.803c-2.952,17.412,11.169,35.842,22.834,47.106l-47.362,7.604
+					C2823.001,2168.337,2816.473,2160.528,2818.281,2152.192z"/>
+			</g>
+			
+				<linearGradient id="SVGID_00000125600406985248993000000015534917121677764490_" gradientUnits="userSpaceOnUse" x1="1312.3524" y1="1716.8522" x2="1289.519" y2="1911.5375" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#311944"/>
+				<stop  offset="1" style="stop-color:#A03976"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000125600406985248993000000015534917121677764490_);" d="M2758.518,1845.334
+				c-2.98,10.458,3.311,21.327,13.883,23.878c12.806,3.09,28.405,7.362,35.141,11.217c12.365,7.076-37.663-1.098-83.679-2.177
+				c-28.728-0.674-50.195-3.898-62.27-6.226c-3.242-0.626-3.492-5.15-0.354-6.171c11.499-3.741,30.194-9.249,45.993-11.235
+				c19.56-2.459,40.536-45.623,40.536-45.623l16.763,15.228L2758.518,1845.334z"/>
+			
+				<linearGradient id="SVGID_00000034053720725092507000000017632107628197006233_" gradientUnits="userSpaceOnUse" x1="1100.052" y1="2105.4739" x2="1154.9966" y2="2105.4739" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#311944"/>
+				<stop  offset="1" style="stop-color:#A03976"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000034053720725092507000000017632107628197006233_);" d="M2925.022,2100.857l-3.181-5.202
+				c-2.814-10.803-13.192-17.854-24.273-16.488l-16.714,2.062c-5.23,0.645-8.77,5.621-7.694,10.78
+				c1.555,7.46,5.557,16.386,15.827,15.693c17.445-1.177,28.596,24.246,28.596,24.246l6.696-9.43
+				C2928.838,2116.097,2929.13,2107.575,2925.022,2100.857z"/>
+			
+				<linearGradient id="SVGID_00000027564059215502938450000010543699500477860514_" gradientUnits="userSpaceOnUse" x1="2812.8394" y1="1709.9724" x2="2782.3152" y2="1800.7419">
+				<stop  offset="0" style="stop-color:#444B8C"/>
+				<stop  offset="0.9964" style="stop-color:#26264F"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000027564059215502938450000010543699500477860514_);" d="M2795.878,1823.213
+				c14.457-2.142,30.652-14.295,30.336-24.338c-0.432-13.802-31.984-21.361-47.914-25.177c-15.98-3.828-22.757-2.442-27.331,1.039
+				c-4.673,3.558-7.743,9.927-8.748,15.419c-0.548,2.993-0.576,7.111-0.064,15.318c0.456,7.283,0.322,6.963,0.51,9.115
+				c0.454,5.168,1.864,14.256,6.901,26.855c2.099-2.3,4.876-5.048,8.384-7.757c1.349-1.042,6.689-5.078,12.761-7.522
+				C2781.136,1821.968,2787.102,1824.513,2795.878,1823.213z"/>
+			
+				<linearGradient id="SVGID_00000011732615513496044880000008445823170360403866_" gradientUnits="userSpaceOnUse" x1="1291.7107" y1="1743.1661" x2="1270.079" y2="1797.2455" gradientTransform="matrix(-1 0 0 1 4027.9646 0)">
+				<stop  offset="0" style="stop-color:#311944"/>
+				<stop  offset="1" style="stop-color:#A03976"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000011732615513496044880000008445823170360403866_);" d="M2741.878,1827.402
+				c0,0,0.937,20.139,19.913,28.981c16.993,7.917,39.543-27.56,33.34-41.107c-2.07-4.519-8.479-9.434-15.046-10.957
+				c-3.878-0.9-5.782-0.125-12.092-1.717c-5.819-1.469-6.95-2.823-9.197-2.37c-2.811,0.565-6.394,3.764-9.072,16.279
+				c-1.394-4.884-4.486-8.158-7.835-8.358c-0.535-0.032-2.081,0.117-3.351,0.931
+				C2733.943,1812.031,2734.841,1819.5,2741.878,1827.402z"/>
+		</g>
+		<g>
+			
+				<linearGradient id="SVGID_00000047044955206691404610000006805749690869773740_" gradientUnits="userSpaceOnUse" x1="1312.1312" y1="2451.1094" x2="1329.8728" y2="3540.4092">
+				<stop  offset="0" style="stop-color:#444B8C"/>
+				<stop  offset="0.9964" style="stop-color:#26264F"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000047044955206691404610000006805749690869773740_);" d="M1120.839,2672.16
+				c-13.889-12.838-40.459-27.637-53.786-62.041c-4.012-10.355-18.224-47.048,2.741-75.116
+				c12.443-16.661,35.557-27.975,55.928-23.969c17.409,3.423,20.131,15.546,49.713,39.948c11.515,9.498,30.023,24.765,50.621,33.253
+				c35.291,14.544,56.494,0.859,91.924,2.42c43.527,1.919,94.091,26.21,118.451,61.535c43.239,62.695-19.397,126.295,27.964,199.743
+				c15.519,24.063,23.167,18.668,59.922,65.25c36.805,46.643,55.208,69.961,51.933,98.54c-4.545,39.662-47.264,77.55-87.493,80.125
+				c-39.297,2.518-64.279-28.401-84.285-14.876c-14.24,9.623-6.097,28.344-21.222,50.841
+				c-19.495,29.005-57.813,34.784-64.002,35.715c-57.44,8.666-134.89-58.69-167.784-138.488
+				C1092.15,2881.141,1196.346,2741.955,1120.839,2672.16z"/>
+			
+				<linearGradient id="SVGID_00000107557982941999149490000005254661121335062930_" gradientUnits="userSpaceOnUse" x1="2173.2429" y1="2989.0725" x2="2167.4434" y2="3103.6121" gradientTransform="matrix(-1 0 0 1 3312.3582 0)">
+				<stop  offset="0" style="stop-color:#893976"/>
+				<stop  offset="1" style="stop-color:#311944"/>
+			</linearGradient>
+			<polygon style="fill:url(#SVGID_00000107557982941999149490000005254661121335062930_);" points="1145.227,3076.99 
+				874.667,3009.314 861.134,3075.047 1108.825,3189.365 1304.948,3140.919 1423.257,3024.757 			"/>
+			
+				<linearGradient id="SVGID_00000138544010680138397840000007095621693523424187_" gradientUnits="userSpaceOnUse" x1="1163.0063" y1="2519.3887" x2="1094.4042" y2="3300.0305">
+				<stop  offset="0" style="stop-color:#FF9085"/>
+				<stop  offset="1" style="stop-color:#FB6FBB"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000138544010680138397840000007095621693523424187_);" d="M885.143,2696.838
+				c-0.391-33.464,90.852-60.206,132.601-68.822c64.942-13.404,116.947-4.988,129.578-2.761
+				c80.992,14.297,131.433,54.786,150.418,71.804c-15.546,8.433-58.446,34.166-79.692,82.983
+				c-20.54,47.196-5.858,90.557,1.789,115.75c6.66,21.939,16.785,55.293,46.728,79.423c15.812,12.742,33.284,19.211,68.226,32.147
+				c41.205,15.255,66.751,19.471,66.565,27.725c-0.236,10.522-42.087,19.108-40.628,25.67c0.109,0.487,0.415,0.526,0.458,0.88
+				c0.563,4.577-46.449,15.832-105.866,24.769c-69.48,10.45-104.219,15.675-137.427,9.995
+				c-51.772-8.856-43.065-24.799-94.951-33.732c-60.359-10.392-87.781,8.492-142.425-12.493
+				c-9.204-3.535-46.033-17.737-44.977-32.483c1.307-18.232,62.056-12.004,114.94-58.719c23.291-20.574,34.564-42.149,38.462-50.247
+				c5.042-10.475,26.201-64.596,4.978-123.532c-0.944-2.622-2.139-4.924-3.581-7.372
+				C959.208,2724.954,885.492,2726.869,885.143,2696.838z"/>
+			
+				<linearGradient id="SVGID_00000081640014923372846320000015968819770087121806_" gradientUnits="userSpaceOnUse" x1="1302.5236" y1="2531.6494" x2="1233.9214" y2="3312.2925">
+				<stop  offset="0" style="stop-color:#FF9085"/>
+				<stop  offset="1" style="stop-color:#FB6FBB"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000081640014923372846320000015968819770087121806_);" d="M1152.086,2827.155
+				c-11.075,23.517,39.815,78.293,96.377,104.301c11.524,5.302,94.283,43.353,131.168,6.762
+				c30.478-30.237,10.225-92.583,3.785-115.079c-34.031-118.887-132.441-161.275-176.821-181.385
+				c-33.12,82.816-21.554,115.636-13.876,127.16c8.021,12.036,30.405,37.321,54.178,59.595
+				c16.722,15.666,27.135,23.29,25.734,25.735c-1.742,3.042-21.344-2.704-97.477-39.761
+				C1166.328,2815.912,1155.87,2819.124,1152.086,2827.155z"/>
+			
+				<linearGradient id="SVGID_00000052095056140489304100000000594342621325259186_" gradientUnits="userSpaceOnUse" x1="2131.1262" y1="2814.3262" x2="2471.7231" y2="2814.3262" gradientTransform="matrix(-1 0 0 1 3312.3582 0)">
+				<stop  offset="0.0036" style="stop-color:#6165D7"/>
+				<stop  offset="1" style="stop-color:#AA80F9"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000052095056140489304100000000594342621325259186_);" d="M840.937,2696.453l36.726,182.9
+				c1.178,5.862,5.72,10.465,11.565,11.718l273.847,58.771c9.813,2.106,18.888-5.828,18.111-15.835l-14.453-186.015
+				c-0.502-6.456-5.075-11.854-11.362-13.406c-43.439-10.721-210.641-50.873-298.826-56.09
+				C846.694,2677.914,838.995,2686.779,840.937,2696.453z"/>
+			
+				<linearGradient id="SVGID_00000137819925721099431670000017893588237160720037_" gradientUnits="userSpaceOnUse" x1="1079.4945" y1="2472.0942" x2="1230.6631" y2="3399.2637">
+				<stop  offset="0" style="stop-color:#FFC444"/>
+				<stop  offset="0.9964" style="stop-color:#F36F56"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000137819925721099431670000017893588237160720037_);" d="M1114.077,2562.874
+				c0,0,5.165,41.295,20.406,50.757c15.242,9.456,39.881,21.816,42.595,25.17c2.715,3.35-94.419,13.794-142.555-10.496l0,0
+				c15.863-3.309,20.176-4.525,20.176-4.525c4.305-1.218,12.337-3.48,20.388-8.069c5.48-3.12,14.312-9.217,22.414-20.729
+				l-0.177-22.865L1114.077,2562.874z"/>
+			
+				<linearGradient id="SVGID_00000183968330712360855740000012105808799394414483_" gradientUnits="userSpaceOnUse" x1="1081.4913" y1="2471.7688" x2="1232.6597" y2="3398.9365">
+				<stop  offset="0" style="stop-color:#FFC444"/>
+				<stop  offset="0.9964" style="stop-color:#F36F56"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000183968330712360855740000012105808799394414483_);" d="M1113.856,2576.576
+				c0,0-1.933,16.764-18.297,19.491c-14.651,2.442-25.149-33.028-17.539-42.056c2.538-3.011,8.738-5.822,14.074-5.592
+				c3.754,0.162,16.368,5.173,17.956,17.889c2.566-2.625,5.723-3.345,7.259-2.208c1.949,1.441,0.835,5.536,0.583,6.463
+				C1117.018,2573.777,1114.884,2575.746,1113.856,2576.576z"/>
+			
+				<linearGradient id="SVGID_00000111904610182118262870000006013487778686103739_" gradientUnits="userSpaceOnUse" x1="2159.9524" y1="2813.0088" x2="2471.7231" y2="2813.0088" gradientTransform="matrix(-1 0 0 1 3312.3582 0)">
+				<stop  offset="0.0036" style="stop-color:#6165D7"/>
+				<stop  offset="1" style="stop-color:#AA80F9"/>
+			</linearGradient>
+			<path style="opacity:0.4;fill:url(#SVGID_00000111904610182118262870000006013487778686103739_);" d="M1087.548,2854.592
+				c-29.41-8.292-53.802,12.301-77.234-3.995c-24.002-16.692-8.337-45.203-33.291-73.239c-26.68-29.978-60.527-15.293-85.223-42.612
+				c-9.167-10.143-17.414-26.67-17.542-54.847c-6.187-0.598-12.112-1.072-17.714-1.404c-9.849-0.583-17.55,8.285-15.608,17.955
+				l36.727,182.901c1.176,5.863,5.719,10.466,11.564,11.719l263.178,56.478C1133.823,2882.357,1109.027,2860.646,1087.548,2854.592z
+				"/>
+			
+				<linearGradient id="SVGID_00000052784845849408352920000011320120318342761859_" gradientUnits="userSpaceOnUse" x1="822.8911" y1="2513.9314" x2="974.0595" y2="3441.0999">
+				<stop  offset="0" style="stop-color:#FFC444"/>
+				<stop  offset="0.9964" style="stop-color:#F36F56"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000052784845849408352920000011320120318342761859_);" d="M860.188,2793.754
+				c0,0-17.469-16.147-19.369-34.903c-1.9-18.757,11.283-33.766,24.054-37.591c12.771-3.825,19.587,1.816,11.014,20.286
+				C867.312,2760.015,853.712,2772.003,860.188,2793.754z"/>
+			<g>
+				
+					<linearGradient id="SVGID_00000073679325901071358870000012945118597568847279_" gradientUnits="userSpaceOnUse" x1="2158.6257" y1="3091.824" x2="2497.6086" y2="3091.824" gradientTransform="matrix(-1 0 0 1 3312.3582 0)">
+					<stop  offset="0" style="stop-color:#893976"/>
+					<stop  offset="1" style="stop-color:#311944"/>
+				</linearGradient>
+				<path style="fill:url(#SVGID_00000073679325901071358870000012945118597568847279_);" d="M1153.733,3167.975
+					c-53.775-28.829-93.49-58.192-120.448-80.387c-53.041-43.67-77.372-76.614-131.07-89.631
+					c-9.598-2.326-64.274-15.581-81.918,8.699c-19.535,26.882,18.445,83.097,23.058,89.925
+					c68.604,101.545,243.306,96.806,298.105,93.513C1145.55,3182.72,1149.641,3175.347,1153.733,3167.975z"/>
+				
+					<linearGradient id="SVGID_00000176022547277437955430000011609714310944688294_" gradientUnits="userSpaceOnUse" x1="2158.6255" y1="3092.6128" x2="2497.6079" y2="3092.6128" gradientTransform="matrix(-1 0 0 1 3312.3582 0)">
+					<stop  offset="0" style="stop-color:#893976"/>
+					<stop  offset="1" style="stop-color:#311944"/>
+				</linearGradient>
+				<path style="opacity:0.3;fill:url(#SVGID_00000176022547277437955430000011609714310944688294_);" d="M820.296,3006.656
+					c5.157-7.095,13.51-10.924,22.942-12.819c-3.138,10.868-3.424,21.066,0.497,29.975c10.72,24.352,42.465,16.851,64.761,45.429
+					c21.898,28.067,6.74,55.118,26.098,66.695c22.187,13.268,49.693-17.73,73.46-2.9c16.159,10.082,11.132,29.21,29.964,39.63
+					c13.014,7.2,25.771,3.795,40.596,1.933c16.992-2.135,40.272-2.592,69.494,3.512c-2.216,3.994-4.433,7.989-6.65,11.983
+					c-54.798,3.293-229.5,8.031-298.104-93.513C838.741,3089.752,800.761,3033.538,820.296,3006.656z"/>
+				
+					<linearGradient id="SVGID_00000110436515565373777650000000863821152658578850_" gradientUnits="userSpaceOnUse" x1="2254.6177" y1="3223.7251" x2="2189.3738" y2="3142.5327" gradientTransform="matrix(-1 0 0 1 3312.3582 0)">
+					<stop  offset="0" style="stop-color:#AA80F9"/>
+					<stop  offset="0.9964" style="stop-color:#6165D7"/>
+				</linearGradient>
+				<path style="fill:url(#SVGID_00000110436515565373777650000000863821152658578850_);" d="M1113.077,3183.149
+					c0,0-9.853-7.066-24.151-2.251c-14.298,4.815-37.002,8.7-36.968,15.692c0.035,6.991,22.751,11.366,38.449,8.493
+					C1105.423,3202.335,1117.232,3189.284,1113.077,3183.149z"/>
+				
+					<linearGradient id="SVGID_00000026842788411689706150000007636961423170912694_" gradientUnits="userSpaceOnUse" x1="2214.5613" y1="3204.4441" x2="2124.6687" y2="3091.3533" gradientTransform="matrix(-1 0 0 1 3312.3582 0)">
+					<stop  offset="0" style="stop-color:#FFC444"/>
+					<stop  offset="0.9964" style="stop-color:#F36F56"/>
+				</linearGradient>
+				<path style="fill:url(#SVGID_00000026842788411689706150000007636961423170912694_);" d="M1127.517,3171.215l-26.314,8.465
+					c0,0-4.274,7.12,1.495,11.636c5.769,4.516,25.815-5.034,25.815-5.034L1127.517,3171.215z"/>
+				
+					<linearGradient id="SVGID_00000101086760132624667330000004580123111645114525_" gradientUnits="userSpaceOnUse" x1="2021.0333" y1="3088.0305" x2="1946.3417" y2="3243.3892" gradientTransform="matrix(-1 0 0 1 3312.3582 0)">
+					<stop  offset="0" style="stop-color:#893976"/>
+					<stop  offset="1" style="stop-color:#311944"/>
+				</linearGradient>
+				<path style="fill:url(#SVGID_00000101086760132624667330000004580123111645114525_);" d="M1493.277,3049.911
+					c7.77,45.238-89.863,94.175-112.213,105.378c-45.552,22.832-131.261,55.063-258.469,42.75
+					c-1.692-10.149-3.384-20.298-5.075-30.447c16.805-5.757,41.708-15.115,70.605-29.329c49.316-24.26,68.043-41.585,136.477-82.959
+					c75.726-45.783,97.784-51.656,120.346-45.99C1464.241,3014.159,1489.667,3028.889,1493.277,3049.911z"/>
+			</g>
+		</g>
+		<g>
+			
+				<linearGradient id="SVGID_00000116929895065494610670000015071373818557601950_" gradientUnits="userSpaceOnUse" x1="883.178" y1="1817.0946" x2="902.7289" y2="3004.751">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<circle style="fill:url(#SVGID_00000116929895065494610670000015071373818557601950_);" cx="895.736" cy="2579.976" r="31.492"/>
+			
+				<linearGradient id="SVGID_00000083802974931112024460000014106893610296785076_" gradientUnits="userSpaceOnUse" x1="886.2003" y1="1817.0461" x2="905.7512" y2="3004.7058">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000083802974931112024460000014106893610296785076_);" d="M895.737,2316.015
+				c-65.798,0-125.963,24.085-172.184,63.909c-9.485,8.172-10.165,22.62-1.312,31.473l0.889,0.888
+				c7.876,7.876,20.53,8.451,28.959,1.17c38.538-33.289,88.727-53.447,143.648-53.447c54.922,0,105.111,20.158,143.648,53.447
+				c8.429,7.281,21.083,6.706,28.959-1.17l0.889-0.889c8.853-8.853,8.173-23.301-1.312-31.473
+				C1021.699,2340.1,961.534,2316.015,895.737,2316.015z"/>
+			
+				<linearGradient id="SVGID_00000043437896638609195380000016828575300535412411_" gradientUnits="userSpaceOnUse" x1="885.3455" y1="1817.0612" x2="904.8964" y2="3004.7244">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000043437896638609195380000016828575300535412411_);" d="M895.737,2389.337
+				c-45.456,0-87.169,15.934-119.921,42.496c-9.802,7.949-10.424,22.714-1.501,31.637l0.153,0.153
+				c7.82,7.82,20.197,8.249,28.811,1.313c25.3-20.373,57.445-32.583,92.458-32.583c35.013,0,67.158,12.21,92.458,32.583
+				c8.614,6.937,20.991,6.508,28.811-1.312l0.153-0.153c8.923-8.923,8.301-23.688-1.5-31.637
+				C982.905,2405.272,941.192,2389.337,895.737,2389.337z"/>
+			
+				<linearGradient id="SVGID_00000156585360963037993320000010980795947058594230_" gradientUnits="userSpaceOnUse" x1="884.4826" y1="1817.0767" x2="904.0335" y2="3004.7393">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000156585360963037993320000010980795947058594230_);" d="M826.768,2515.924
+				c7.741,7.741,19.752,8.614,28.917,2.626c11.513-7.523,25.272-11.896,40.052-11.896s28.538,4.374,40.052,11.896
+				c9.165,5.988,21.175,5.115,28.917-2.626l0.1-0.101c9.49-9.49,7.997-25.271-3.089-32.834
+				c-18.796-12.824-41.507-20.329-65.979-20.329c-24.473,0-47.183,7.505-65.98,20.328c-11.086,7.564-12.579,23.345-3.089,32.834
+				L826.768,2515.924z"/>
+		</g>
+		<g>
+			
+				<linearGradient id="SVGID_00000005229946123135116060000003952315541425607340_" gradientUnits="userSpaceOnUse" x1="2972.657" y1="1098.0808" x2="2992.2078" y2="2285.7371">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			
+				<circle style="fill:url(#SVGID_00000005229946123135116060000003952315541425607340_);" cx="2985.215" cy="1860.963" r="31.492"/>
+			
+				<linearGradient id="SVGID_00000045607317126628480700000004984699479424213918_" gradientUnits="userSpaceOnUse" x1="2975.6792" y1="1098.0328" x2="2995.2302" y2="2285.6914">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000045607317126628480700000004984699479424213918_);" d="M2985.215,1597.001
+				c-65.798,0-125.962,24.085-172.184,63.908c-9.485,8.172-10.165,22.62-1.313,31.473l0.889,0.889
+				c7.876,7.876,20.53,8.451,28.959,1.17c38.538-33.289,88.727-53.447,143.648-53.447c54.922,0,105.111,20.158,143.648,53.447
+				c8.429,7.281,21.083,6.705,28.959-1.17l0.889-0.889c8.853-8.853,8.173-23.301-1.312-31.473
+				C3111.178,1621.086,3051.013,1597.001,2985.215,1597.001z"/>
+			
+				<linearGradient id="SVGID_00000120551762643212253670000001578006962693056687_" gradientUnits="userSpaceOnUse" x1="2974.8245" y1="1098.0468" x2="2994.3755" y2="2285.7112">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000120551762643212253670000001578006962693056687_);" d="M2985.215,1670.324
+				c-45.455,0-87.169,15.934-119.921,42.496c-9.802,7.949-10.424,22.714-1.501,31.638l0.153,0.153
+				c7.82,7.82,20.198,8.249,28.811,1.313c25.3-20.373,57.445-32.583,92.458-32.583c35.013,0,67.158,12.21,92.458,32.583
+				c8.614,6.937,20.991,6.507,28.811-1.312l0.153-0.153c8.923-8.923,8.301-23.688-1.5-31.638
+				C3072.385,1686.258,3030.671,1670.324,2985.215,1670.324z"/>
+			
+				<linearGradient id="SVGID_00000171718481190400873210000006656784134392059543_" gradientUnits="userSpaceOnUse" x1="2973.9614" y1="1098.0634" x2="2993.5125" y2="2285.7251">
+				<stop  offset="0" style="stop-color:#AA80F9"/>
+				<stop  offset="0.9964" style="stop-color:#6165D7"/>
+			</linearGradient>
+			<path style="fill:url(#SVGID_00000171718481190400873210000006656784134392059543_);" d="M2916.247,1796.91
+				c7.741,7.741,19.752,8.614,28.917,2.626c11.513-7.523,25.271-11.897,40.052-11.897c14.78,0,28.539,4.374,40.052,11.897
+				c9.165,5.988,21.176,5.115,28.917-2.626l0.1-0.101c9.49-9.49,7.997-25.271-3.089-32.834
+				c-18.796-12.824-41.507-20.329-65.979-20.329s-47.183,7.505-65.98,20.328c-11.086,7.564-12.579,23.345-3.089,32.834
+				L2916.247,1796.91z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/sme-logo.png b/src/assets/sme-logo.png
new file mode 100644
index 0000000..59d59cb
Binary files /dev/null and b/src/assets/sme-logo.png differ
diff --git a/src/assets/t&cHeader.png b/src/assets/t&cHeader.png
new file mode 100644
index 0000000..33a9cd9
Binary files /dev/null and b/src/assets/t&cHeader.png differ
diff --git a/src/assets/upload-filled.png b/src/assets/upload-filled.png
new file mode 100644
index 0000000..4933552
Binary files /dev/null and b/src/assets/upload-filled.png differ
diff --git a/src/components/AIDrawersidebar.jsx b/src/components/AIDrawersidebar.jsx
new file mode 100644
index 0000000..3b83aa8
--- /dev/null
+++ b/src/components/AIDrawersidebar.jsx
@@ -0,0 +1,274 @@
+import { useState, useEffect } from "react";
+import { FileText, ChevronDown, X, FolderOpen, AlertCircle } from "lucide-react";
+import { useDocStore } from "../store";
+import AiIcon from '../assets/AiIcon.png'
+
+// -------------------- Shimmer --------------------
+const ShimmerSkeleton = () => (
+    <div className="flex flex-col gap-3 px-5 py-5 animate-pulse">
+        <div className="flex items-center gap-2 mb-2">
+            <div style={{ width: 18, height: 18, borderRadius: 4, background: "#e5e7eb" }} />
+            <div style={{ height: 20, width: "60%", borderRadius: 6, background: "#e5e7eb" }} />
+        </div>
+
+        {[100, 92, 78, 95, 60].map((w, i) => (
+            <div key={i} style={{ height: 13, width: `${w}%`, borderRadius: 4, background: "#e5e7eb" }} />
+        ))}
+    </div>
+);
+
+// -------------------- Main --------------------
+const AIDrawerSidebar = ({ isOpen, onClose, uuid }) => {
+    const [selectedId, setSelectedId] = useState("");
+    const [error, setError] = useState(null);
+
+    const {
+        aiSummaryList,
+        aiLoading,
+        setAiSummaryList,
+        setAiLoading,
+        documents,
+    } = useDocStore();
+
+
+    console.log("documents33", documents)
+
+
+    // ✅ Find selected summary
+    const selectedSummary = aiSummaryList.find(
+        (item) => item.documentId === selectedId
+    );
+
+    const summaryText = selectedSummary?.summary || null;
+
+    // -------------------- API CALL --------------------
+    const fetchDocumentSummary = async () => {
+        if (aiSummaryList.length > 0) return;
+
+        try {
+            setError(null);
+            setAiLoading(true);
+
+            const res = await fetch(
+                `${import.meta.env.VITE_BASE_API_URL}/sign/summarize`,
+                {
+                    method: "GET",
+                    headers: {
+                        "X-AUTH-TYPE": "TRANSACTIONAL",
+                        "Content-Type": "application/json",
+                        Authorization: `${uuid}`,
+                    },
+                }
+            );
+
+            if (!res.ok) throw new Error("API failed");
+
+            const data = await res.json();
+
+            setAiSummaryList(data);
+        } catch (err) {
+            setError("Failed to load summary");
+        } finally {
+            setAiLoading(false);
+        }
+    };
+
+    // -------------------- Effects --------------------
+
+    // Call API
+    useEffect(() => {
+        if (uuid && isOpen && aiSummaryList.length === 0) {
+            fetchDocumentSummary();
+        }
+    }, [uuid, isOpen]);
+
+    // Auto select first doc
+    useEffect(() => {
+        if (documents.length > 0 && !selectedId) {
+            setSelectedId(documents[0].contentDocumentId);
+        }
+    }, [documents]);
+
+    // -------------------- Render --------------------
+    const renderContent = () => {
+        // ✅ 1. Shimmer FIRST
+        if (aiLoading) {
+            return <ShimmerSkeleton />;
+        }
+
+        // ✅ 2. Empty
+        if (!selectedId) {
+            return (
+                <div className="flex flex-col items-center justify-center h-full text-center pt-16">
+                    <FolderOpen size={24} className="text-gray-300 mb-3" />
+                    <p className="text-gray-400 text-sm">
+                        Select a document to view summary
+                    </p>
+                </div>
+            );
+        }
+
+        // ✅ 3. Error
+        if (error) {
+            return (
+                <div className="flex flex-col items-center justify-center h-full text-center pt-16">
+                    <AlertCircle size={22} className="text-red-500 mb-2" />
+                    <p className="text-red-500 text-sm">{error}</p>
+                </div>
+            );
+        }
+
+        // ✅ 4. Content
+        if (summaryText) {
+            return (
+                <div className="px-5 py-5">
+                    <div className="flex items-center gap-2 mb-4">
+                        <FileText size={18} className="text-gray-400" />
+                        <h3 className="font-semibold text-gray-900 text-lg">
+                            Document Summary
+                        </h3>
+                    </div>
+
+                    {/* 🔥 THIS IS WHERE YOU ADD dangerouslySetInnerHTML */}
+                    <div
+                        className="text-gray-600 text-sm leading-7"
+                        dangerouslySetInnerHTML={{ __html: summaryText }}
+                    />
+
+                    <div className="mt-3 text-xs text-gray-400">
+                        ID: {selectedId}
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+                No summary found
+            </div>
+        );
+    };
+
+    // -------------------- JSX --------------------
+    return (
+        <>
+            {isOpen && (
+                <div className="fixed inset-0 bg-black/40 z-[999]" onClick={onClose} />
+            )}
+
+            <div
+                className={`fixed top-0 right-0 h-full w-[360px] z-[1000] transform transition-transform duration-300 
+  ${isOpen ? "translate-x-0" : "translate-x-full"}`}
+            >
+                <div className="flex flex-col h-full bg-[#f9fafb] border-l">
+
+                    {/* Header */}
+                    <div className="flex items-center justify-between px-5 py-4 bg-white border-b">
+
+                        {/* Left side */}
+                        <div className="flex items-center gap-2">
+
+                            {/* Gradient Icon Wrapper */}
+                            <div className="w-8 h-8 rounded-md flex items-center justify-center bg-gradient-to-r from-[#0CCBD4] to-[#D865FF]">
+                                <img src={AiIcon} alt="AI" className="w-4 h-4 object-contain" />
+                            </div>
+
+                            {/* Title */}
+                            <h2 className="text-[16px] font-semibold text-gray-900">
+                                Document Summary
+                            </h2>
+
+                        </div>
+
+                        {/* Close Button */}
+                        <button
+                            onClick={onClose}
+                            className="w-7 h-7 flex items-center justify-center rounded-md hover:bg-gray-100"
+                        >
+                            <X size={16} />
+                        </button>
+                    </div>
+
+                    {/* Dropdown Section */}
+                    <div className="px-5 py-4 ">
+
+                        <label className="block text-sm text-gray-500 mb-2">
+                            Select Documents
+                        </label>
+
+                        {/* Trigger Button */}
+                        <button
+                            className="btn w-full justify-between bg-white border border-gray-200 text-gray-700 font-normal"
+                            popoverTarget="doc-popover"
+                            style={{ anchorName: "--doc-anchor" }}
+                        >
+                            <span>
+                                {
+                                    selectedId
+                                        ? documents.find(d => d.contentDocumentId === selectedId)?.name
+                                        : "Select document"
+                                }
+                            </span>
+
+                            <ChevronDown size={16} />
+                        </button>
+
+                        {/* Dropdown Menu */}
+                        <ul
+                            className="dropdown menu w-full rounded-xl bg-base-100 shadow-md mt-2 max-h-60 overflow-y-auto  z-[1001]  "
+                            popover="auto"
+                            id="doc-popover"
+                            style={{ positionAnchor: "--doc-anchor" }}
+                        >
+                            {documents.map((doc) => (
+                                <li key={doc.contentDocumentId}>
+                                    <a
+                                        onClick={() => {
+                                            setSelectedId(doc.contentDocumentId);
+
+                                            // ✅ close dropdown after select
+                                            document.activeElement?.blur();
+                                        }}
+                                        className={`flex justify-between ${selectedId === doc.contentDocumentId ? "bg-gray-100" : ""
+                                            }`}
+                                    >
+                                        <span className="truncate">{doc.name}</span>
+
+                                        {/* Optional selected indicator */}
+                                        {selectedId === doc.contentDocumentId && (
+                                            <span className="text-green-500 text-xs">✓</span>
+                                        )}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    {/* Content Area */}
+                    <div className="flex-1 overflow-y-auto px-4 pb-4">
+
+                        {/* Card */}
+                        <div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
+
+                            {/* 🔥 Shimmer */}
+                            {aiLoading ? (
+                                <ShimmerSkeleton />
+                            ) : summaryText ? (
+                                <div
+                                    className="text-gray-600 text-sm leading-7 space-y-4"
+                                    dangerouslySetInnerHTML={{ __html: summaryText }}
+                                />
+                            ) : (
+                                <p className="text-gray-400 text-sm">
+                                    No summary available
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default AIDrawerSidebar;
\ No newline at end of file
diff --git a/src/components/AuditTrailsModules/AuditTrailsBody.jsx b/src/components/AuditTrailsModules/AuditTrailsBody.jsx
new file mode 100644
index 0000000..da7f4d2
--- /dev/null
+++ b/src/components/AuditTrailsModules/AuditTrailsBody.jsx
@@ -0,0 +1,523 @@
+import { useState, useEffect, useRef } from "react";
+import {
+  PlusCircle, Send, Mail, Eye, ShieldCheck, FileEdit,
+  Hash, Activity, FileText, FilePen, ClipboardList, Copy, Check,
+} from "lucide-react";
+import SMELogo from "../../assets/SMELogo.png";
+import { useDocStore } from "../../store";
+import { useTranslation } from "react-i18next";
+import LanguageDropdown from "../LanguageDropdown";
+// import { getCachedTranslation, setCachedTranslation } from "../../services/auditTranslationCache";
+import { translateAuditAction } from "../../services/auditTranslator";
+import i18n from "../../i18n";
+import { languageSupport } from "../../constant/language";
+import { useLocalizedLabel } from "../../hooks/useLocalizedLabel";
+
+
+// ── TYPE → icon/color config ──────────────────────────────────────────────────
+const TYPE_CONFIG = {
+  CREATE: {
+    icon: PlusCircle,
+    iconColor: "text-blue-500",
+    iconBg: "bg-blue-50",
+    badgeClass: "badge-info badge-outline",
+  },
+  SENT: {
+    icon: Send,
+    iconColor: "text-green-500",
+    iconBg: "bg-green-50",
+    badgeClass: "badge-success badge-outline",
+  },
+  EMAIL: {
+    icon: Mail,
+    iconColor: "text-amber-500",
+    iconBg: "bg-amber-50",
+    badgeClass: "badge-warning badge-outline",
+  },
+  VIEWED: {
+    icon: Eye,
+    iconColor: "text-sky-500",
+    iconBg: "bg-sky-50",
+    badgeClass: "badge-info badge-outline",
+  },
+  ACCEPT: {
+    icon: ShieldCheck,
+    iconColor: "text-violet-500",
+    iconBg: "bg-violet-50",
+    badgeClass: "badge-secondary badge-outline",
+  },
+  DEFAULT: {
+    icon: FileEdit,
+    iconColor: "text-gray-400",
+    iconBg: "bg-gray-50",
+    badgeClass: "badge-ghost badge-outline",
+  },
+};
+
+/**
+ * Derives icon config from type; falls back to DEFAULT.
+ * Special case: SENT + "Invitation email" → EMAIL style.
+ */
+function getConfig(type, action = "") {
+  if (type === "SENT" && action.toLowerCase().includes("invitation email")) {
+    return TYPE_CONFIG.EMAIL;
+  }
+  return TYPE_CONFIG[type] || TYPE_CONFIG.DEFAULT;
+}
+
+/**
+ * Splits "04/13/2026 03:34:28 America/Los_Angeles"
+ * into { datetime: "04/13/2026 03:34:28", tz: "America/Los_Angeles" }
+ */
+function parseDate(raw = "") {
+  const parts = raw.trim().split(" ");
+  const tz = parts.length >= 3 ? parts[parts.length - 1] : "";
+  const datetime = parts.slice(0, parts.length - 1).join(" ");
+  return { datetime, tz };
+}
+
+// ── SHIMMER COMPONENTS ────────────────────────────────────────────────────────
+
+function ShimmerBlock({ className = "" }) {
+  return (
+    <div
+      className={`rounded animate-pulse bg-gradient-to-r from-base-300 via-base-200 to-base-300 bg-[length:200%_100%] ${className}`}
+      style={{
+        animation: "shimmer 1.6s infinite linear",
+      }}
+    />
+  );
+}
+
+function MetaCardShimmer() {
+  return (
+    <div className="card bg-base-100 border border-base-300 shadow-sm">
+      <div className="card-body p-4 gap-3">
+        <ShimmerBlock className="h-3 w-24" />
+        <ShimmerBlock className="h-6 w-full" />
+      </div>
+    </div>
+  );
+}
+
+function TableRowShimmer({ delay = 0 }) {
+  return (
+    <tr
+      className="border-b border-base-100"
+      style={{ animationDelay: `${delay}ms` }}
+    >
+      <td className="pl-5 py-3.5">
+        <ShimmerBlock className="h-3 w-5" />
+      </td>
+      <td className="py-3.5">
+        <div className="flex items-center gap-3">
+          <ShimmerBlock className="h-8 w-8 rounded-full" />
+          <div className="flex flex-col gap-1.5 flex-1">
+            <ShimmerBlock className="h-3 w-3/4" />
+            <ShimmerBlock className="h-2.5 w-1/2" />
+          </div>
+        </div>
+      </td>
+      <td className="py-3.5">
+        <ShimmerBlock className="h-5 w-16 rounded-full" />
+      </td>
+      <td className="py-3.5">
+        <ShimmerBlock className="h-5 w-24 rounded" />
+      </td>
+      <td className="py-3.5">
+        <div className="flex flex-col gap-1.5">
+          <ShimmerBlock className="h-3 w-32" />
+          <ShimmerBlock className="h-2.5 w-20" />
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+function ShimmerLayout() {
+  return (
+    <div className="h-screen flex flex-col bg-base-200 overflow-hidden font-sans">
+      {/* Navbar shimmer */}
+      <div className="navbar bg-base border-b border-base-300 shadow-sm px-4 min-h-14 flex-none">
+        <div className="navbar-start gap-3">
+          <ShimmerBlock className="h-8 w-8 rounded" />
+          <ShimmerBlock className="h-5 w-32" />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-hidden flex flex-col gap-3 p-4">
+        {/* Meta cards shimmer */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 flex-none">
+          <MetaCardShimmer />
+          <MetaCardShimmer />
+          <MetaCardShimmer />
+        </div>
+
+        {/* Table card shimmer */}
+        <div className="card bg-base-100 border border-base-300 shadow-sm flex-1 min-h-0 flex flex-col">
+          <div className="flex flex-col min-h-0 h-full">
+            {/* Header */}
+            <div className="flex items-center justify-between px-5 py-3 border-b border-base-200 flex-none">
+              <div className="flex items-center gap-2">
+                <ShimmerBlock className="h-6 w-6 rounded-md" />
+                <ShimmerBlock className="h-4 w-28" />
+                <ShimmerBlock className="h-5 w-14 rounded-full" />
+              </div>
+            </div>
+
+            {/* Table skeleton */}
+            <div className="overflow-hidden flex-1">
+              <table className="table table-sm w-full">
+                <thead>
+                  <tr className="border-b border-base-200">
+                    {["w-12 pl-5", "", "w-28", "w-36", "w-52"].map((cls, i) => (
+                      <th key={i} className={cls}>
+                        <ShimmerBlock className="h-3 w-16" />
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <TableRowShimmer key={i} delay={i * 80} />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Footer shimmer */}
+            <div className="flex items-center px-5 py-2.5 border-t border-base-200 flex-none bg-base-50">
+              <ShimmerBlock className="h-3 w-40" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes shimmer {
+          0%   { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+// ── MAIN COMPONENT ────────────────────────────────────────────────────────────
+
+export default function AuditTrailsBody() {
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
+  const [visible, setVisible] = useState([]);
+  const [translatedActions, setTranslatedActions] = useState({});
+  const [isTranslating, setIsTranslating] = useState(false);
+  const previousLanguageRef = useRef(null);
+  const { getLocalizedLabel } = useLocalizedLabel();
+
+  const { formJson } = useDocStore();
+  const uid = useDocStore((s) => s.uid);
+  const status = useDocStore((s) => s.status);
+  const docs = useDocStore((s) => s.docs);
+  const audit = useDocStore((s) => s.audit);
+  const isLoaded = useDocStore((s) => s.isLoaded);
+  const setAuditLoading = useDocStore((s) => s.setAuditLoading);
+  const isProUser = useDocStore((s) => s.isProUser)
+  const currentLanguage = useDocStore((s) => s.currentLanguage);
+
+
+  // ── Translate all audit actions when language changes ── 
+  useEffect(() => {
+    if (!audit?.length) return;
+    const newLang = currentLanguage?.value || 'en';
+    const languageChanged = previousLanguageRef.current !== newLang;
+    if (!languageChanged) return;
+
+    previousLanguageRef.current = newLang;
+    setAuditLoading(true);
+    setTranslatedActions({});
+    setVisible([]);
+
+    //  Await the language change FIRST, then translate
+    i18n.reloadResources(newLang, 'translation').then(() => {  //reloadResources forces a fresh HTTP fetch regardless 
+      return i18n.changeLanguage(newLang);
+    }).then(() => {
+      const translations = {};
+      for (let i = 0; i < audit.length; i++) {
+        translations[i] = translateAuditAction(audit[i].action, i18n.t.bind(i18n));
+      }
+      setTranslatedActions(translations);
+      setAuditLoading(false);
+      audit.forEach((_, idx) => {
+        setTimeout(() => setVisible(prev => [...prev, idx]), idx * 80);
+      });
+    });
+
+  }, [currentLanguage?.value, audit]);
+
+  // Staggered row reveal after data loads
+  useEffect(() => {
+    if (!isLoaded || !audit?.length) return;
+    // Don't re-run if we're mid-language-change (translations will trigger their own reveal)
+    if (previousLanguageRef.current === null) return;
+    setVisible([]);
+    audit.forEach((_, i) => {
+      setTimeout(() => setVisible(v => [...v, i]), i * 120 + 200);
+    });
+  }, [isLoaded, audit]);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(uid);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+
+
+
+  // ── Show shimmer while data is not ready ──
+  if (!isLoaded || !audit) return <ShimmerLayout />;
+
+  return (
+    <div className="dvh-screen md:h-screen flex flex-col bg-base-200 overflow-hidden font-sans">
+
+      {/* ── NAVBAR ── */}
+      <div className="navbar bg-regal-blue border-b border-base-300 shadow-sm px-3 sm:px-5 min-h-14 flex-none">
+
+        {/* LEFT SIDE */}
+        <div className="navbar-start gap-2 sm:gap-3">
+          <div className="flex items-center gap-2 sm:gap-3">
+
+            {/* Logo */}
+            <div className="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center">
+              <img
+                alt="logo"
+                src={SMELogo}
+                className="w-full h-full object-contain"
+              />
+            </div>
+
+            {/* Text */}
+            <div className="flex flex-col leading-tight">
+              <span className="text-[10px] sm:text-[12px] text-white">
+                Sign Made Easy
+              </span>
+              <span className="font-semibold text-white text-xs sm:text-sm">
+                {t("auditPage.subtitle")}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* RIGHT SIDE */}
+        <div className="navbar-end">
+          {isProUser && <LanguageDropdown />}
+        </div>
+
+      </div>
+
+      {/* ── PAGE BODY ── */}
+      <div className="flex-1 overflow-hidden flex flex-col gap-2 sm:gap-3 p-2 sm:p-4">
+
+        {/* ── META CARDS ── */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3 flex-none">
+
+          {/* Transaction ID */}
+          <div className="bg-gray-100 border border-base-300 shadow-sm">
+            <div className="card-body p-3 sm:p-4 gap-1.5 sm:gap-2">
+              <div className="flex items-center gap-1.5">
+                <p className="text-[11px] sm:text-[13px] font-semibold text-black tracking-widest">
+                  {t("auditPage.meta.transactionId")}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <code className="font-bold text-[12px] sm:text-[15px] text-base-content/70 truncate flex-1 px-2 py-1 rounded break-all">
+                  {uid || "—"}
+                </code>
+              </div>
+            </div>
+          </div>
+
+          {/* Status */}
+          <div className="bg-gray-100 border border-base-300 shadow-sm">
+            <div className="card-body p-3 sm:p-4 gap-1.5 sm:gap-2">
+              <div className="flex items-center gap-1.5">
+                <p className="text-[11px] sm:text-[13px] font-semibold text-black tracking-widest">
+                  {t("auditPage.meta.transactionStatus")}
+                </p>
+              </div>
+              <div>
+                <span className="badge badge-success badge-outline font-semibold text-[10px] sm:text-xs px-2 sm:px-3 py-2 sm:py-3 gap-1.5">
+                  <span className="w-1.5 h-1.5 rounded-full bg-success inline-block animate-pulse" />
+                  {status || "—"}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* File Name */}
+          <div className="bg-gray-100 border border-base-300 shadow-sm sm:col-span-2 lg:col-span-1">
+            <div className="card-body p-3 sm:p-4 gap-1.5 sm:gap-2">
+              <div className="flex items-center gap-1.5">
+                <p className="text-[11px] sm:text-[13px] font-semibold text-black tracking-widest">
+                  {t("auditPage.meta.files")}
+                </p>
+              </div>
+              <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
+                {docs.map((item, index) => (
+                  <span className="text-[9px] sm:text-[10px] font-medium text-base-content truncate bg-white px-1.5 sm:px-2 rounded-lg py-1 sm:py-2 max-w-[150px] sm:max-w-none" key={index}>
+                    {item.title}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* ── AUDIT TRAIL CARD ── */}
+        <div className="card bg-base-100 border border-base-300 shadow-sm flex-1 min-h-0 flex flex-col">
+          <div className="flex flex-col min-h-0 h-full">
+
+            {/* Card header */}
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between px-3 sm:px-5 py-2 sm:py-3 border-b border-base-200 flex-none bg-gray-100 gap-2 sm:gap-0">
+              <div className="flex flex-col items-start">
+                <span className="font-semibold text-sm sm:text-md text-base-content">
+                  {t("auditPage.audit.title")}
+                </span>
+                <span className="text-black text-[11px] sm:text-[13px]">
+                  {/* {t("auditPage.audit.description")} */}
+                </span>
+              </div>
+            </div>
+
+            {/* Scrollable table - Horizontal scroll on mobile */}
+            <div className="overflow-x-auto overflow-y-auto flex-1 no-scrollbar">
+              <div className="min-w-[640px] lg:min-w-0">
+                <table className="table table-sm w-full">
+                  <thead className="sticky top-0 z-10 bg-base-100">
+                    <tr className="border-b border-base-200">
+                      <th className="text-[9px] sm:text-[10px] font-semibold text-regal-blue uppercase tracking-widest px-3 sm:px-4 py-2 sm:py-3">
+                        {t("auditPage.table.actions")}
+                      </th>
+                      <th className="text-[9px] sm:text-[10px] font-semibold text-regal-blue uppercase tracking-widest px-3 sm:px-4 py-2 sm:py-3 whitespace-nowrap">
+                        {t("auditPage.table.language")}
+                      </th>
+                      <th className="text-[9px] sm:text-[10px] font-semibold text-regal-blue uppercase tracking-widest px-3 sm:px-4 py-2 sm:py-3 whitespace-nowrap">
+                        {t("auditPage.table.ipAddress")}
+                      </th>
+                      <th className="text-[9px] sm:text-[10px] font-semibold text-regal-blue uppercase tracking-widest px-3 sm:px-4 py-2 sm:py-3 whitespace-nowrap">
+                        {t("auditPage.table.date")}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {audit.map((row, i) => {
+                      const config = getConfig(row.type, row.action);
+                      const RowIcon = config.icon;
+                      const { datetime, tz } = parseDate(row.date);
+                      // const lang = row.language || "—";
+                      const translatedAction = translatedActions[i] || row.action;
+                      const isTranslationLoading = isTranslating;
+
+                      return (
+                        <tr
+                          key={i}
+                          className="border-b border-base-100 last:border-0 hover:bg-base-50 transition-all duration-300"
+                          style={{
+                            opacity: visible.includes(i) ? 1 : 0,
+                            transform: visible.includes(i) ? "translateY(0)" : "translateY(10px)",
+                            transition: "opacity 0.35s ease, transform 0.35s ease",
+                          }}
+                        >
+                          {/* Action */}
+                          <td className="py-2 sm:py-3.5 px-3 sm:px-4">
+                            <div className="flex items-center gap-2 sm:gap-3">
+                              <div className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center shrink-0 ${config.iconBg}`}>
+                                <RowIcon size={12} className={`sm:text-[14px] ${config.iconColor}`} />
+                              </div>
+                              <div className="flex-1">
+                                {isTranslationLoading ? (
+                                  <div className="flex items-center gap-2">
+                                    <div className="w-3 h-3 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" />
+                                    <span className="text-xs text-gray-400">Loading translation...</span>
+                                  </div>
+                                ) : (
+                                  <>
+                                    <p className="text-xs sm:text-sm text-base-content/80 leading-snug break-words">
+                                      {translatedAction}
+                                    </p>
+                                  </>
+                                )}
+                              </div>
+                            </div>
+                          </td>
+
+                          {/* Language */}
+                          <td className="py-2 sm:py-3.5 px-3 sm:px-4">
+                            <span className={`badge badge-sm font-medium text-[9px] sm:text-xs whitespace-nowrap ${config.badgeClass}`}>
+                              {getLocalizedLabel(row.language)}
+                            </span>
+                          </td>
+
+                          {/* IP Address */}
+                          <td className="py-2 sm:py-3.5 px-3 sm:px-4">
+                            <code className="font-mono text-[9px] sm:text-[11px] text-base-content/55 bg-base-200 px-1.5 sm:px-2 py-1 rounded break-all">
+                              {row.ip}
+                            </code>
+                          </td>
+
+                          {/* Date */}
+                          <td className="py-2 sm:py-3.5 px-3 sm:px-4">
+                            <p className="font-mono text-[10px] sm:text-xs text-base-content/70 whitespace-nowrap">
+                              {datetime}
+                            </p>
+                            <p className="text-[8px] sm:text-[10px] text-base-content/35 mt-0.5 whitespace-nowrap">
+                              {tz}
+                            </p>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes shimmer {
+          0%   { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+        
+        /* Custom scrollbar for better mobile experience */
+        .scrollbar-thin::-webkit-scrollbar {
+          height: 4px;
+          width: 4px;
+        }
+        
+        .scrollbar-thin::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 10px;
+        }
+        
+        .scrollbar-thin::-webkit-scrollbar-thumb {
+          background: #888;
+          border-radius: 10px;
+        }
+        
+        .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+          background: #555;
+        }
+        
+        /* Better touch scrolling on mobile */
+        @media (max-width: 640px) {
+          .overflow-x-auto {
+            -webkit-overflow-scrolling: touch;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/DocFormOverlay.jsx b/src/components/DocFormOverlay.jsx
new file mode 100644
index 0000000..f4ae37e
--- /dev/null
+++ b/src/components/DocFormOverlay.jsx
@@ -0,0 +1,2050 @@
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  useMemo,
+} from "react";
+
+import { useNavigate, useSearchParams } from "react-router-dom";
+
+
+import TermsAndConditionsModal from "../modals/TermsAndConditionsModal"
+import {
+  SelectInputField,
+  DefaultInputField,
+  RadioInputField,
+  CheckboxInputField,
+  DropDownInputField,
+  CustomTagInputField,
+  TextareaInputField,
+  TextInputField,
+  SignatureInputField,
+} from "./inputFields";
+
+import { parsePixelValue, getCheckboxScale, getFontScaleFactor, getMinSize, getRadioScale, } from './inputFields/utils'
+import InitialInputField from "./inputFields/InitialInputField";
+import StampInputField from "./inputFields/StampInputField";
+import NameInputField from "./inputFields/NameInputField";
+import EmailInputField from "./inputFields/EmailInputField";
+import NumberInputField from "./inputFields/NumberInputField";
+import SignDateInputField from "./inputFields/SignDateInputField";
+import TimeInputField from "./inputFields/TimeInputField";
+import TitlesInputField from "./inputFields/TitlesInputField";
+import AttachmentInputField from "./inputFields/AttachmentInputField";
+import CompanyInputField from "./inputFields/CompanyInputField";
+import ImageBadges from "./inputFields/ImageBadges";
+import WritebackInputField from "./WritebackFields/WritebackInputField";
+import Header from "./DocFormOverlayModules/Header";
+import { useDocStore } from "../store";
+import CancelTransactionModal from "../modals/CancelTransactionModal";
+import api from "../api/Axios";
+import AIDrawersidebar from "./AIDrawersidebar";
+import { Trans, useTranslation } from "react-i18next";
+import MessageInPersonSignerModal from "../modals/MessageInPersonSignerModal";
+import Loader from "../helper/Loader";
+
+
+// ResponsiveImageWithFields component
+const ResponsiveImageWithFields = React.memo(({
+  src,
+  alt,
+  maxHeight,
+  maxWidth,
+  documentIndex,
+  pageIndex,
+  signatureValue,
+  setSignatureValue,
+  initialValue,
+  setInitialValue,
+  stampValue,
+  setStampValue,
+  handleFieldClick,
+  getFieldsForPage,
+  fieldState,
+  lastActiveTab,
+  setLastActiveTab,
+  documents,
+  currentActiveFieldId,
+  allRequiredFilled,
+  handleSubmitClick,
+  handleNextClick,
+  currentFieldIndex,
+  totalFields,
+  goToField,
+  inputFields,
+  transaction,
+  setSignatureRequest,
+  // recipientInfo,
+  // setRecipientInfo,
+  allFieldsFilled,
+  hasStarted,
+  setHasStarted,
+  parseLocation,
+
+  radioFocusedOptionIndex,
+  setRadioFocusedOptionIndex,
+  visibilityMap
+}) => {
+  const containerRef = useRef(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  // Track width/height separately so we only re-render when values actually change
+  const containerSizeRef = useRef({ width: 0, height: 0 });
+  const [, forceResize] = useState(0);
+
+  const pageFields = useMemo(
+    () => getFieldsForPage(documentIndex, pageIndex),
+    [getFieldsForPage, documentIndex, pageIndex]
+  );
+
+  const getLatestFilledValue = (type) => {
+    const filledField = inputFields
+      .filter((f) => f.type === type)
+      .find((f) => {
+        const fs = fieldState[f.id];
+        if (!fs || !fs.update) return false;
+        const v = fs.value;
+        return v && (typeof v === "string" ? v.trim() : v?.text);
+      });
+    return filledField ? fieldState[filledField.id].value : "";
+  };
+
+  const derivedSignatureValue = getLatestFilledValue("signature");
+  const derivedInitialValue = getLatestFilledValue("initial");
+
+  // Stable style calculator — no deps needed because helpers are module-level
+  const getResponsiveStyle = useCallback(
+    (field) => {
+      if (!containerRef.current) return {};
+      const containerRect = containerRef.current.getBoundingClientRect();
+      // console.log("containerRect", containerRect, "maxWidthOfPDF", maxWidth)
+
+      const fieldTop = parsePixelValue(field.top);
+      const fieldLeft = parsePixelValue(field.left);
+      const fieldWidth = parsePixelValue(field.width);
+      const fieldHeight = parsePixelValue(field.height);
+
+      const scaleX = containerRect.width / maxWidth;
+      const scaleY = containerRect.height / maxHeight;
+      const scale = Math.min(scaleX, scaleY);
+
+      const baseFontSize = parsePixelValue(field.fontSize || "13px");
+      const scaledHeight = fieldHeight * scale;
+
+      const FONT_BOOST = 1.15; // ← tweak this: 1.2 = 20% bigger, 1.5 = 50% bigger
+
+      // Font scales exactly like the field — capped at 85% of field height
+      const responsiveFontSize = Math.max(8, Math.min(
+        baseFontSize * scale * FONT_BOOST,  // boosted display size
+        scaledHeight * 0.85                 // never overflow the field
+      ));
+
+      return {
+        position: "absolute",
+        top: `${fieldTop * scaleY}px`,
+        left: `${fieldLeft * scaleX}px`,
+        width: `${fieldWidth * scaleX}px`,
+        height: `${fieldHeight * scaleY}px`,
+        fontSize: `${responsiveFontSize}px`,
+        zIndex: 10,
+        boxSizing: "border-box",
+      };
+    },
+    [maxWidth, maxHeight]   // only recalc when document dimensions change
+  );
+
+
+  const renderField = useCallback((field) => {
+    const responsiveStyle = getResponsiveStyle(field);
+    const fieldStateValue = fieldState[field.id];
+    const fontSize = parseFloat(responsiveStyle.fontSize) || 12;
+
+    const commonProps = {
+      field,
+      value: fieldStateValue?.value || "",
+      fieldState: fieldStateValue, // FULL STATE
+      handleFieldClick,
+      responsiveStyle,
+      fontSize,
+      lastActiveTab,
+      setLastActiveTab,
+      goToField,
+      inputFields,
+      transaction,
+      setSignatureRequest,
+      // recipientInfo,
+      // setRecipientInfo,
+      visibilityMap
+    };
+
+    switch (field.type) {
+      case "select": return <SelectInputField key={field.id} {...commonProps} />;
+      case "checkbox": return <CheckboxInputField key={field.id} {...commonProps} minSize={getMinSize(containerSizeRef.current.width)}
+        checkboxScale={getCheckboxScale(containerSizeRef.current.width)} />;
+      case "dropdown": return <DropDownInputField key={field.id} {...commonProps} />;
+      case "custom-tag": return <CustomTagInputField key={field.id} {...commonProps} />;
+      case "textarea": return <TextareaInputField key={field.id} {...commonProps} />;
+      case "text": return <TextInputField key={field.id} {...commonProps} />;
+      case "email": return <EmailInputField key={field.id} {...commonProps} />;
+      case "number": return <NumberInputField key={field.id} {...commonProps} />;
+      case "signdate": return <SignDateInputField key={field.id} {...commonProps} />;
+      case "time": return <TimeInputField key={field.id} {...commonProps} />;
+      case "company": return <CompanyInputField key={field.id} {...commonProps} />;
+      case "titles": return <TitlesInputField key={field.id} {...commonProps} />;
+      case "attachment": return <AttachmentInputField
+        key={field.id} field={field} value={commonProps.value ?? ""}
+        responsiveStyle={responsiveStyle} fontSize={fontSize}
+        documentIndex={documentIndex} pageIndex={pageIndex}
+        handleFieldClick={handleFieldClick} fieldState={fieldState}
+        goToField={goToField} transaction={transaction}
+      />;
+      case "radio": {
+        // Filter options that belong to THIS document/page context
+        const filteredOptions = field.options?.filter(opt => {
+          const match = opt.location?.match(/container-(\d+)-page-(\d+)/);
+          if (!match) return false;
+          const optContainerIndex = parseInt(match[1]);
+          const optPageNumber = parseInt(match[2]);
+          return optContainerIndex === documentIndex && optPageNumber === pageIndex;
+        });
+
+        // Don't render if no options belong to this page
+        if (!filteredOptions || filteredOptions.length === 0) return null;
+
+        return (
+          <RadioInputField
+            key={`${field.id}-doc${documentIndex}-page${pageIndex}`}
+            field={{ ...field, options: filteredOptions }} // only pass relevant options
+            containerSize={containerSizeRef.current}
+            pdfMaxWidth={maxWidth}
+            pdfMaxHeight={maxHeight}
+            fieldState={fieldState}
+            handleFieldClick={handleFieldClick}
+            minSize={getMinSize(containerSizeRef.current.width)}
+            checkboxScale={getRadioScale(containerSizeRef.current.width)}
+            goToField={goToField}
+
+          />
+        );
+      }
+      case "names": return <NameInputField key={field.id} {...commonProps} />;
+      case "signature":
+        return (
+          <SignatureInputField
+            key={field.id}
+            {...commonProps}
+            fieldValue={signatureValue}
+            setFieldValue={setSignatureValue}
+            setInitialValue={setInitialValue}
+            existingSignature={signatureValue}
+            existingInitial={initialValue}
+            setSignatureRequest={setSignatureRequest}
+          />
+        );
+      case "initial":
+        return (
+          <InitialInputField
+            key={field.id}
+            {...commonProps}
+            fieldValue={initialValue}
+            setFieldValue={setInitialValue}
+            setSignatureValue={setSignatureValue}
+            existingSignature={signatureValue}
+            existingInitial={initialValue}
+          />
+        );
+      case "stamp":
+        return (
+          <StampInputField
+            key={field.id}
+            {...commonProps}
+            documentIndex={documentIndex}
+            pageIndex={pageIndex}
+            globalStampValue={stampValue}
+            setGlobalStampValue={setStampValue}
+          />
+        );
+      case "writeback":
+        return <WritebackInputField key={field.id} {...commonProps} />;
+      default:
+        return <DefaultInputField key={field.id} {...commonProps} />;
+    }
+  }, [getResponsiveStyle,
+    maxHeight, maxWidth,
+    fieldState]);
+
+  // Resize observer — only triggers a re-render when dimensions actually change
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const ro = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      const prev = containerSizeRef.current;
+
+      if (
+        Math.abs(prev.width - width) > 1 ||
+        Math.abs(prev.height - height) > 1
+      ) {
+        containerSizeRef.current = { width, height };
+        forceResize(v => v + 1); // trigger re-render
+      }
+    });
+
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+
+  const handleImageLoad = () => {
+    setImageLoaded(true);
+  };
+
+  return (
+    <>
+
+      <div
+        className="relative w-full max-w-4xl lg:max-w-7xl  mx-auto"
+        ref={containerRef}
+        style={{ aspectRatio: `${maxWidth}/${maxHeight}` }}
+      >
+        <img
+          src={src}
+          alt={alt}
+          className="w-full h-full object-contain border border-gray-300"
+          onLoad={handleImageLoad}
+          onError={(e) => {
+            e.target.src = `https://via.placeholder.com/${maxWidth}x${maxHeight}/f0f0f0/999?text=Image+Loading+Error`;
+          }}
+        />
+        {imageLoaded && pageFields.map(field => renderField(field))}
+      </div>
+
+      <div className="hidden sm:block">
+        <ImageBadges
+          documentId={documents?.[documentIndex]?.contentDocumentId}
+          pageIndex={pageIndex}
+          fieldState={fieldState}
+          getFieldsForPage={getFieldsForPage}
+          documentIndex={documentIndex}
+          currentActiveFieldId={currentActiveFieldId}
+          currentFieldIndex={currentFieldIndex}
+          totalFields={totalFields}
+          allRequiredFilled={allRequiredFilled}
+          handleSubmitClick={handleSubmitClick}
+          handleNextClick={handleNextClick}
+          handleFieldClick={handleFieldClick}
+          goToField={goToField}
+          lastActiveTab={lastActiveTab}
+          inputFields={inputFields} // Add this - you need to pass inputFields from parent
+          allFieldsFilled={allFieldsFilled}
+          getResponsiveStyle={getResponsiveStyle} // ← NEW: pass from ResponsiveImageWithFields
+          containerRef={containerRef} // ← NEW: to get container size
+          maxHeight={maxHeight}
+          maxWidth={maxWidth}
+          containerSize={containerSizeRef.current}
+          hasStarted={hasStarted}
+          setHasStarted={setHasStarted}
+          parseLocation={parseLocation}
+          radioFocusedOptionIndex={radioFocusedOptionIndex}
+          setRadioFocusedOptionIndex={setRadioFocusedOptionIndex}
+          visibilityMap={visibilityMap}
+        />
+        </div>
+    </>
+  );
+});
+
+export default function DocFormOverlay({
+  inputFields,
+  documents,
+  uuid,
+  onSubmit,
+  submitting,
+  transaction,
+  // recipientInfo,
+  // setRecipientInfo,
+  showInPersonSignerModal,
+  setShowInPersonSignerModal
+}) {
+
+  // console.log("recipientInfo" , recipientInfo)
+  const { formJson, recipientInfo,
+    setRecipientInfo, } = useDocStore();
+  const setToast = useDocStore((state) => state.setToast);
+  const updateFormJson = useDocStore((state) => state.updateFormJson)
+  const setRedirectUrl = useDocStore((state) => state.setRedirectUrl)
+  const { t } = useTranslation();
+  // console.log("formJson", formJson)
+  const [downloadOpen, setDownloadOpen] = useState(false);
+  const [signInOpen, setSignInOpen] = useState(false);
+  const [languageOpen, setLanguageOpen] = useState(false);
+  const [signatureValue, setSignatureValue] = useState("");
+  const [signatureRequest, setSignatureRequest] = useState(null);
+  const [initialValue, setInitialValue] = useState("");
+  const [stampValue, setStampValue] = useState("");
+  const [fieldState, setFieldState] = useState({});
+  const [lastActiveTab, setLastActiveTab] = useState("");
+  const [currentFieldIndex, setCurrentFieldIndex] = useState(0);
+  // const [currentActiveFieldId, setCurrentActiveFieldId] = useState(null);
+  const [allRequiredFilled, setAllRequiredFilled] = useState(false);
+  const [progressPercent, setProgressPercent] = useState(0);
+  const [currentActiveFieldId, setCurrentActiveFieldId] = useState(null);
+  const [allFieldsFilled, setAllFieldsFilled] = useState(false);
+  const [showCancelTransaction, setShowCancelTransaction] = useState(false);
+  const [showLanguageBasedTermsAndConditions, setShowLanguageBasedTermsAndConditions] = useState(false)
+  const navigate = useNavigate()
+  const [radioFocusedOptionIndex, setRadioFocusedOptionIndex] = useState(0);
+  const [showInPersonScreenCancelTransaction, setShowInPersonScreenCancelTransaction] = useState(false);
+
+  // ✅ Reset to 0 whenever the active field changes to a new radio cluster
+  useEffect(() => {
+    setRadioFocusedOptionIndex(0);
+  }, [currentActiveFieldId]);
+
+  const [hasStarted, setHasStarted] = useState(false); // when user start via badges or sm screen start then handle the auto scroll to required fields only
+  const [openDrawer, setOpenDrawer] = useState(false); // Ai Drawer
+  const [cancelTransactionModalLoader, setCancelTransactionModalLoader] = useState(false)
+
+  console.log("fieldState", fieldState);
+
+  // console.log("signatureValue", signatureValue, "recipientInfo", recipientInfo)
+
+  const [openIndex, setOpenIndex] = useState(null);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const containerRef = useRef(null);
+
+  // Refs for all images
+  const imageRefs = useRef({});
+
+  // Get selected doc and page from URL
+  const selectedDocId = searchParams.get("doc");
+  const selectedPageIndex = parseInt(searchParams.get("page"));
+
+  useEffect(() => {
+    if (lastActiveTab === "select" && !recipientInfo?.fullName?.trim()) {
+      setSignatureValue("");
+      setInitialValue("");
+    }
+  }, [recipientInfo?.fullName, lastActiveTab]);
+
+  useEffect(() => {
+    if (documents.length > 0 && openIndex === null) {
+      setOpenIndex(0); // Open the first document by default
+    }
+  }, [documents]);
+
+  // Update accordion openIndex and scroll to image when URL changes
+  useEffect(() => {
+    if (selectedDocId && !isNaN(selectedPageIndex)) {
+      const refKey = `${selectedDocId}-${selectedPageIndex}`;
+      const imgEl = imageRefs.current[refKey];
+      const container = containerRef.current;
+      if (imgEl && container) {
+        const headerEl = document.querySelector("header");
+        const headerHeight = headerEl ? headerEl.offsetHeight : 0;
+        container.scrollTo({
+          top: imgEl.offsetTop - container.offsetTop - headerHeight - 10,
+          behavior: "smooth",
+        });
+      }
+    }
+  }, [selectedDocId, selectedPageIndex]);
+
+  // Handle click on image
+  const handleClick = (docId, pageIndex) => {
+    const currentParams = new URLSearchParams(searchParams);
+    currentParams.set("doc", docId);
+    currentParams.set("page", pageIndex);
+    setSearchParams(currentParams);
+  };
+
+  // Initialize fieldState for all inputFields
+  useEffect(() => {
+    setFieldState((prev) => {
+      const updated = { ...prev };
+      const seenClusters = new Set();
+
+      inputFields.forEach((field) => {
+        if (field.type === "radio") {
+          if (seenClusters.has(field.id)) return;
+          seenClusters.add(field.id);
+
+          // field.id IS clusterId
+          if (!updated[field.id]) {
+            const preSelected = field.options?.find(o => o.selected)?.id ?? null;
+            updated[field.id] = {
+              documentId: field.documentId,
+              pageNumber: field.pageNumber ?? 0,
+              type: "radio",
+              update: false,
+              value: preSelected,   // null if nothing pre-selected
+              activeTab: "",
+            };
+          }
+          return;
+        }
+        // If field not initialized yet
+        if (!updated[field.id]) {
+          // Handle attachment fields separately
+          if (field.type === "attachment") {
+            updated[field.id] = {
+              documentId: field.documentId,
+              pageNumber: field.pageNumber ?? 0,
+              type: field.type,
+              update: field.uploadedFileName && field.uploadedDocumentId ? true : false,
+              value: field.uploadedFileName || "", // Preloaded file name
+              link: field.uploadedDocumentId || "", // Preloaded ContentDocumentId
+              activeTab: lastActiveTab,
+            };
+          } else if (field.type === "writeback") {
+            // ✅ use wbtFieldValue as the real value, not field.value (which is SF API name)
+            const wbtVal = field.wbtFieldValue ?? "";
+            updated[field.id] = {
+              documentId: field.documentId,
+              pageNumber: field.pageNumber ?? 0,
+              type: field.type,
+              update: wbtVal !== "",
+              value: wbtVal,
+              activeTab: lastActiveTab,
+            }
+          } else {
+            // Default initialization for other types
+            updated[field.id] = {
+              documentId: field.documentId,
+              pageNumber: field.pageNumber ?? 0,
+              type: field.type,
+              update: field.type === 'email' && (field.defaultValue || field.value) ? true : false,
+              value: field.type === 'checkbox' ? field.selected : field.defaultValue || field.value || "",
+              // value: field.type ===  field.defaultValue || field.value || "",
+              activeTab: lastActiveTab,
+            };
+          }
+        }
+      });
+
+      return updated;
+    });
+  }, [inputFields, lastActiveTab]);
+
+  const parseLocation = useCallback((locationStr) => {
+    if (typeof locationStr !== "string") {
+      // console.warn("Invalid input: not a string");
+      return { containerIndex: 0, pageNumber: 1 };
+    }
+    const match = locationStr.match(/container-(\d+)-page-(\d+)/);
+    if (match) {
+      return {
+        containerIndex: parseInt(match[1], 10),
+        pageNumber: parseInt(match[2], 10),
+      };
+    }
+    return { containerIndex: 0, pageNumber: 1 };
+  }, []);
+
+  // ── Compute which fields are currently visible based on rules ──
+  const visibilityMap = useMemo(() => {
+    const map = {};
+
+    // Step 1: every field starts visible
+    inputFields.forEach((field) => {
+      map[field.id] = true;
+      if (field.type === "radio") {
+        (field.options || []).forEach((opt) => {
+          map[opt.id] = true;
+        });
+      }
+    });
+
+    // Step 2: collect all rules
+    const allRules = [];
+
+    inputFields.forEach((field) => {
+      (field.rule || []).forEach((rule) => {
+        allRules.push({ rule, triggerFieldId: field.id, isRadioOption: false });
+      });
+
+      if (field.type === "radio") {
+        (field.options || []).forEach((opt) => {
+          (opt.rule || []).forEach((rule) => {
+            allRules.push({ rule, triggerFieldId: opt.id, parentField: field, isRadioOption: true });
+          });
+        });
+      }
+    });
+
+    // Step 2.5: set defaults
+    allRules.forEach(({ rule, isRadioOption }) => {
+      if (!["show", "hide"].includes(rule.action)) return;
+
+      (rule.target || []).forEach((targetId) => {
+        if (isRadioOption) {
+          map[targetId] = false;
+        } else if (rule.action === "show" && rule.condition.type === "equals") {
+          map[targetId] = false;
+        } else if (rule.action === "hide" && rule.condition.type === "not") {
+          map[targetId] = false;
+        } else if (rule.action === "show" && rule.condition.type === "not") {
+          map[targetId] = false;
+        }
+      });
+    });
+
+    // Step 3: collect all rule results — show wins over hide
+    const pendingResults = {}; // targetId → { show: bool, hide: bool }
+
+    allRules.forEach(({ rule, triggerFieldId, parentField, isRadioOption }) => {
+      if (!["show", "hide"].includes(rule.action)) return;
+
+      let currentValue = "";
+      let noOptionSelected = false;
+
+      if (isRadioOption) {
+        const freshParent = inputFields.find(
+          (f) => f.type === "radio" && f.options?.some((o) => o.id === triggerFieldId)
+        );
+        if (!freshParent) return;
+
+        const selectedOptionId = fieldState[freshParent.id]?.value ?? "";
+        noOptionSelected = !selectedOptionId;
+        currentValue = selectedOptionId === triggerFieldId ? "selected" : "";
+      } else {
+        currentValue = fieldState[triggerFieldId]?.value ?? "";
+      }
+
+      // Skip radio rules when nothing selected — keep Step 2.5 default
+      if (isRadioOption && noOptionSelected) return;
+
+      let conditionMet = false;
+      const { type, value: condValue } = rule.condition;
+
+      if (type === "equals") {
+        if (typeof condValue === "boolean") {
+          const rawVal = fieldState[triggerFieldId]?.value;
+          conditionMet = rawVal === condValue || rawVal === String(condValue);
+        } else {
+          conditionMet =
+            typeof currentValue === "string"
+              ? currentValue.trim() === condValue
+              : currentValue === condValue;
+        }
+      } else if (type === "not") {
+        if (typeof condValue === "boolean") {
+          const rawVal = fieldState[triggerFieldId]?.value;
+          conditionMet = rawVal !== condValue && rawVal !== String(condValue);
+        } else {
+          conditionMet =
+            typeof currentValue === "string"
+              ? currentValue.trim() !== condValue
+              : currentValue !== condValue;
+        }
+      }
+
+      (rule.target || []).forEach((targetId) => {
+        if (!pendingResults[targetId]) {
+          pendingResults[targetId] = { show: false, hide: false };
+        }
+        if (rule.action === "show" && conditionMet) {
+          pendingResults[targetId].show = true;
+        }
+        if (rule.action === "hide" && conditionMet) {
+          pendingResults[targetId].hide = true;
+        }
+        // ── Track when a hide rule exists but condition is NOT met ──
+        if (rule.action === "hide" && !conditionMet) {
+          pendingResults[targetId].notHiding = true;
+        }
+        if (rule.action === "show" && !conditionMet) {   // ← ADD THIS
+          pendingResults[targetId].notShowing = true;
+        }
+      });
+    });
+
+    // Step 4: apply results — show always beats hide
+    Object.entries(pendingResults).forEach(([targetId, { show, hide, notHiding, notShowing }]) => {
+      if (show) {
+        map[targetId] = true;   // ← show wins regardless of hide
+      } else if (notShowing) {        // ← ADD THIS (before hide check)
+        map[targetId] = false;
+      } else if (hide) {
+        map[targetId] = false;
+      }
+      else if (notHiding) {
+        map[targetId] = true;   // hide rule exists but condition not met → visible
+      }
+      // neither fired → keep Step 2.5 default
+    });
+
+    return map; // ← must be last
+  }, [fieldState, inputFields]);
+
+  const getFieldsForPage = useCallback(
+    (documentIndex, pageIndex) => {
+      const seenClusters = new Set();
+
+      return inputFields
+        .flatMap((field) => {
+          if (field.type === "radio" && field.options) {
+            if (seenClusters.has(field.id)) return [];
+            seenClusters.add(field.id);
+
+            const pageKeys = new Set();
+            const entries = [];
+
+            // ── Filter options by visibilityMap ──
+            const visibleOptions = field.options.filter(
+              (opt) => visibilityMap[opt.id] !== false
+            );
+
+            visibleOptions.forEach((opt) => {
+              const { containerIndex, pageNumber } = parseLocation(opt.location);
+              const key = `${containerIndex}-${pageNumber}`;
+              if (!pageKeys.has(key)) {
+                pageKeys.add(key);
+                entries.push({
+                  ...field,
+                  options: visibleOptions, // pass only visible options down
+                  _renderContainerIndex: containerIndex,
+                  _renderPageNumber: pageNumber,
+                  location: opt.location,
+                });
+              }
+            });
+
+            return entries;
+          }
+          return [field];
+        })
+        .filter((field) => {
+          const { containerIndex, pageNumber } = parseLocation(field.location);
+          return containerIndex === documentIndex && pageNumber === pageIndex;
+        });
+    },
+    [inputFields, parseLocation, visibilityMap] // ← add visibilityMap to deps
+  );
+
+  const sortedAllFields = useMemo(() => {
+    const required = inputFields.filter((f) => f.required);
+    const optional = inputFields.filter((f) => !f.required);
+
+    const sortByPosition = (a, b) => {
+      // ── Radio: use options[0] for location/top/left ──
+      const aLocation = a.type === "radio" ? (a.options?.[0]?.location ?? a.location) : a.location;
+      const bLocation = b.type === "radio" ? (b.options?.[0]?.location ?? b.location) : b.location;
+
+      const { containerIndex: aDoc, pageNumber: aPage } = parseLocation(aLocation);
+      const { containerIndex: bDoc, pageNumber: bPage } = parseLocation(bLocation);
+
+      const aTop = a.type === "radio" ? parseFloat(a.options?.[0]?.top) || 0 : parseFloat(a.top) || 0;
+      const bTop = b.type === "radio" ? parseFloat(b.options?.[0]?.top) || 0 : parseFloat(b.top) || 0;
+      const aLeft = a.type === "radio" ? parseFloat(a.options?.[0]?.left) || 0 : parseFloat(a.left) || 0;
+      const bLeft = b.type === "radio" ? parseFloat(b.options?.[0]?.left) || 0 : parseFloat(b.left) || 0;
+
+      if (aDoc !== bDoc) return aDoc - bDoc;
+      if (aPage !== bPage) return aPage - bPage;
+      if (Math.abs(aTop - bTop) > 5) return aTop - bTop;
+      return aLeft - bLeft;
+    };
+
+    return [...required.sort(sortByPosition), ...optional.sort(sortByPosition)];
+  }, [inputFields, parseLocation]);
+
+  const visibleSortedAllFields = useMemo(() => {
+    return sortedAllFields.filter((f) => {
+      // Always filter out fields hidden by visibilityMap
+      if (visibilityMap[f.id] === false) return false;
+
+      // For radio: also exclude if the cluster itself has no visible options
+      // (all options are hidden by rules)
+      if (f.type === "radio") {
+        const hasVisibleOptions = (f.options || []).some(
+          (opt) => visibilityMap[opt.id] !== false
+        );
+        if (!hasVisibleOptions) return false;
+      }
+
+      return true;
+    });
+  }, [sortedAllFields, visibilityMap]);
+
+  useEffect(() => {
+    if (!currentActiveFieldId) return;
+
+    // Check if current active field should be skipped
+    const shouldSkip = (() => {
+      if (visibilityMap[currentActiveFieldId] === false) return true;
+
+      // Radio cluster: skip if all options are hidden
+      const activeField = inputFields.find(f => f.id === currentActiveFieldId);
+      if (activeField?.type === "radio") {
+        const hasVisibleOptions = (activeField.options || []).some(
+          (opt) => visibilityMap[opt.id] !== false
+        );
+        if (!hasVisibleOptions) return true;
+      }
+
+      return false;
+    })();
+
+    if (!shouldSkip) return;
+
+    // Find next visible unfilled required field
+    const next = visibleSortedAllFields.find((f) => {
+      if (!f.required || ["signdate", "time"].includes(f.type)) return false;
+      const v = fieldState[f.id]?.value;
+      if (v === null || v === undefined) return true; // unfilled
+      if (typeof v === "boolean") return v === false; // ← add this for checkbox
+      if (v === "") return true;
+      if (typeof v === "string") return v.trim() === "";
+      if (typeof v === "object") return Object.keys(v).length === 0;
+      return false;
+    });
+
+    if (next) {
+      const idx = visibleSortedAllFields.findIndex(f => f.id === next.id);
+      setCurrentFieldIndex(idx);
+      setCurrentActiveFieldId(next.id);
+    } else {
+      setCurrentActiveFieldId(null);
+    }
+  }, [visibilityMap, currentActiveFieldId, visibleSortedAllFields, fieldState, inputFields]);
+
+
+  useEffect(() => {
+    // Find first visible unfilled required field
+    const firstVisible = visibleSortedAllFields.find(
+      f => f.required && !["signdate", "time"].includes(f.type)
+    );
+
+    if (firstVisible) {
+      // Only set if currentActiveFieldId is null or currently hidden
+      const currentIsHidden = !currentActiveFieldId ||
+        visibilityMap[currentActiveFieldId] === false;
+
+      if (currentIsHidden) {
+        const idx = visibleSortedAllFields.findIndex(f => f.id === firstVisible.id);
+        setCurrentFieldIndex(idx);
+        setCurrentActiveFieldId(firstVisible.id);
+      }
+    } else {
+      // No visible required fields — clear active field so badge hides
+      if (currentActiveFieldId && visibilityMap[currentActiveFieldId] === false) {
+        setCurrentActiveFieldId(null);
+      }
+    }
+  }, [visibleSortedAllFields, visibilityMap]); // ← runs whenever visibility changes
+
+  const goToField = useCallback(
+    (fieldId) => {
+      console.log('[GO_TO_FIELD] Called with fieldId:', fieldId);
+      console.log('[GO_TO_FIELD] Is field visible?', visibilityMap[fieldId] !== false);
+
+      if (visibilityMap[fieldId] === false) {
+        console.log('[GO_TO_FIELD] Field is HIDDEN, aborting navigation');
+        return;
+      }
+
+      const targetField = visibleSortedAllFields.find(f => f.id === fieldId);
+      if (!targetField) {
+        console.log('[GO_TO_FIELD] Field not found in visibleSortedAllFields');
+        return;
+      }
+
+      console.log('[GO_TO_FIELD] Target field found:', targetField.id, targetField.type, 'required:', targetField.required);
+
+      // Only block navigation to optional fields if required aren't all done
+      if (!targetField.required) {
+        const visibleRequiredFields = visibleSortedAllFields.filter(f => f.required);
+        console.log('[GO_TO_FIELD] Checking required fields completion. Required count:', visibleRequiredFields.length);
+
+        const allRequiredDone = visibleRequiredFields.every(f => {
+          const fs = fieldState[f.id];
+          if (!fs) return false;
+          const v = fs.value;
+          if (v === null || v === undefined) return false;
+          if (typeof v === "boolean") return v === true; // ← add this
+          if (v === "") return false;
+          if (typeof v === "string") return v.trim() !== "";
+          if (typeof v === "object") return Object.keys(v).length > 0;
+          return true;
+        });
+
+        if (!allRequiredDone) {
+          console.log('[GO_TO_FIELD] Not all required fields are filled, blocking navigation to optional field');
+          return;
+        }
+      }
+
+      const fieldIndex = visibleSortedAllFields.findIndex(f => f.id === fieldId);
+      if (fieldIndex !== -1) {
+        console.log('[GO_TO_FIELD] Setting currentFieldIndex to:', fieldIndex);
+        console.log('[GO_TO_FIELD] Setting currentActiveFieldId to:', fieldId);
+        setCurrentFieldIndex(fieldIndex);
+        setCurrentActiveFieldId(fieldId);
+      }
+    },
+    [visibleSortedAllFields, fieldState, visibilityMap]
+  );
+
+
+  const handleNextClick = useCallback(() => {
+    console.log('[NEXT_CLICK] =========================================');
+    console.log('[NEXT_CLICK] Current Field Index:', currentFieldIndex);
+    console.log('[NEXT_CLICK] Current Active Field ID:', currentActiveFieldId);
+    console.log('[NEXT_CLICK] Total visible fields:', visibleSortedAllFields.length);
+
+    // Get ONLY visible required fields (not hidden by rules)
+    const requiredFields = visibleSortedAllFields.filter(
+      f => f.required && !["signdate", "time"].includes(f.type)
+    );
+
+    console.log('[NEXT_CLICK] Required visible fields count:', requiredFields.length);
+    console.log('[NEXT_CLICK] Required visible fields:', requiredFields.map(f => ({
+      id: f.id,
+      type: f.type,
+      required: f.required,
+      visible: visibilityMap[f.id] !== false
+    })));
+
+    const isFieldFilled = (field) => {
+      const fs = fieldState[field.id];
+      if (!fs) return false;
+      const v = fs.value;
+      if (v === null || v === undefined) return false;
+      if (typeof v === "boolean") return v === true; // ← add this for checkbox
+      if (v === "") return false;
+      if (typeof v === "string") return v.trim() !== "";
+      if (typeof v === "object") return Object.keys(v).length > 0;
+      return true; // ← add fallback true for any other non-empty value
+    };
+
+    // Check if all required fields are filled
+    const allFilled = requiredFields.every(isFieldFilled);
+    console.log('[NEXT_CLICK] All required fields filled?', allFilled);
+
+    if (allFilled) {
+      console.log('[NEXT_CLICK] All filled - showing submit badge');
+      return;
+    }
+
+    // Find current index in visible fields
+    const currentVisibleIndex = visibleSortedAllFields.findIndex(f => f.id === currentActiveFieldId);
+    console.log('[NEXT_CLICK] Current field index in visible fields:', currentVisibleIndex);
+    console.log('[NEXT_CLICK] Current field details:', visibleSortedAllFields[currentVisibleIndex]);
+
+    // Find next UNFILLED required field AFTER current position
+    let nextUnfilled = null;
+    let nextIndex = -1;
+
+    console.log('[NEXT_CLICK] Searching for next unfilled required field after index:', currentVisibleIndex);
+
+    for (let i = currentVisibleIndex + 1; i < visibleSortedAllFields.length; i++) {
+      const field = visibleSortedAllFields[i];
+      const isRequired = field.required && !["signdate", "time"].includes(field.type);
+      const isNotFilled = !isFieldFilled(field);
+
+      console.log(`[NEXT_CLICK] Checking field at index ${i}:`, field.id,
+        'required:', isRequired,
+        'filled:', !isNotFilled,
+        'candidate:', isRequired && isNotFilled);
+
+      if (isRequired && isNotFilled) {
+        nextUnfilled = field;
+        nextIndex = i;
+        console.log('[NEXT_CLICK] ✅ Found next unfilled field:', field.id, 'at index:', i);
+        break;
+      }
+    }
+
+    // If not found after, search from beginning (wrap around)
+    if (!nextUnfilled) {
+      console.log('[NEXT_CLICK] No unfilled found after current, searching from beginning');
+      for (let i = 0; i < currentVisibleIndex; i++) {
+        const field = visibleSortedAllFields[i];
+        const isRequired = field.required && !["signdate", "time"].includes(field.type);
+        const isNotFilled = !isFieldFilled(field);
+
+        console.log(`[NEXT_CLICK] Checking field at index ${i}:`, field.id,
+          'required:', isRequired,
+          'filled:', !isNotFilled,
+          'candidate:', isRequired && isNotFilled);
+
+        if (isRequired && isNotFilled) {
+          nextUnfilled = field;
+          nextIndex = i;
+          console.log('[NEXT_CLICK] ✅ Found wrapped unfilled field:', field.id, 'at index:', i);
+          break;
+        }
+      }
+    }
+
+    if (nextUnfilled) {
+      console.log('[NEXT_CLICK] 🎯 Navigating to next field:', nextUnfilled.id, 'type:', nextUnfilled.type);
+      console.log('[NEXT_CLICK] Setting index to:', nextIndex);
+      setCurrentFieldIndex(nextIndex);
+      setCurrentActiveFieldId(nextUnfilled.id);
+    } else {
+      console.log('[NEXT_CLICK] ❌ No unfilled required fields found!');
+      // Double check - maybe all required are actually filled?
+      const recheckFilled = requiredFields.every(isFieldFilled);
+      console.log('[NEXT_CLICK] Recheck all required filled?', recheckFilled);
+    }
+  }, [currentFieldIndex, currentActiveFieldId, visibleSortedAllFields, fieldState, visibilityMap]);
+
+  // Add debug for visibilityMap changes
+  // useEffect(() => {
+  //   console.log('[VISIBILITY_MAP] =========================================');
+  //   console.log('[VISIBILITY_MAP] visibilityMap updated');
+  //   const hiddenFields = Object.entries(visibilityMap)
+  //     .filter(([_, visible]) => visible === false)
+  //     .map(([id]) => id);
+  //   console.log('[VISIBILITY_MAP] Hidden fields:', hiddenFields);
+
+  //   // Find fields that are required but hidden
+  //   const requiredButHidden = inputFields.filter(f =>
+  //     f.required && visibilityMap[f.id] === false && !["signdate", "time"].includes(f.type)
+  //   );
+  //   if (requiredButHidden.length > 0) {
+  //     console.warn('[VISIBILITY_MAP] ⚠️ Required but HIDDEN fields:', requiredButHidden.map(f => ({ id: f.id, type: f.type })));
+  //   }
+  // }, [visibilityMap, inputFields]);
+
+  // Add debug for currentActiveFieldId changes
+
+  useEffect(() => {
+    if (currentActiveFieldId) {
+      console.log('[ACTIVE_FIELD] =========================================');
+      console.log('[ACTIVE_FIELD] Current active field changed to:', currentActiveFieldId);
+      const isVisible = visibilityMap[currentActiveFieldId] !== false;
+      console.log('[ACTIVE_FIELD] Is field visible?', isVisible);
+
+      if (!isVisible) {
+        console.warn('[ACTIVE_FIELD] ⚠️ Active field is HIDDEN! This should not happen!');
+        // Find next visible field
+        const nextVisible = visibleSortedAllFields.find(f => f.id !== currentActiveFieldId);
+        if (nextVisible) {
+          console.log('[ACTIVE_FIELD] Attempting to move to next visible field:', nextVisible.id);
+          setCurrentActiveFieldId(nextVisible.id);
+        }
+      }
+
+      const fieldDetails = inputFields.find(f => f.id === currentActiveFieldId);
+      console.log('[ACTIVE_FIELD] Field details:', {
+        id: currentActiveFieldId,
+        type: fieldDetails?.type,
+        required: fieldDetails?.required,
+        location: fieldDetails?.location
+      });
+    }
+  }, [currentActiveFieldId, visibilityMap, visibleSortedAllFields, inputFields]);
+
+  const handleFieldClick = useCallback(
+    (
+      fieldId,
+      documentId,
+      pageNumber,
+      fieldType,
+      fieldValue,
+      activeTab,
+      sigValue,
+      initValue,
+      newStamp,
+      isBadgeClick = false,
+      contentDocumentId,
+      isValid = true,
+    ) => {
+
+      const stampFields = inputFields.filter(f => f.type === "stamp");
+
+      setFieldState((prev) => {
+        const updated = { ...prev };
+
+        console.log("handleFieldClick triggered for field:", fieldId,
+          documentId,
+          pageNumber,
+          fieldType,
+          fieldValue,
+          activeTab,
+          sigValue,
+          initValue,
+          newStamp,
+          isBadgeClick = false,
+          contentDocumentId,
+          isValid);
+
+        //  RADIO GROUP HANDLING
+        if (fieldType === "radio") {
+          const parentField = inputFields.find(
+            (f) => f.type === "radio" &&
+              f.options?.some((opt) => opt.id === fieldId)
+          );
+
+          if (!parentField) {
+            console.warn("Radio parent field not found for option:", fieldId);
+            return prev;
+          }
+
+          //  field.id IS clusterId
+          const storeKey = parentField.id;
+
+          updated[storeKey] = {
+            ...(prev[storeKey] || {}),
+            documentId: parentField.documentId,
+            pageNumber: parentField.options?.find(o => o.id === fieldId)?.pageNumber ?? 0,
+            type: "radio",
+            update: true,
+            value: fieldId,       // selected option id
+            activeTab: activeTab ?? prev[storeKey]?.activeTab ?? lastActiveTab,
+          };
+
+          return updated;  // early return — skip the bottom "Track click source" block
+        }
+
+        //  ATTACHMENT FIELD HANDLING
+        if (fieldType === "attachment") {
+          updated[fieldId] = {
+            ...prev[fieldId],
+            documentId,
+            pageNumber,
+            type: "attachment",
+            update: true,
+            value: fieldValue,
+            link: contentDocumentId || "",
+            activeTab: activeTab ?? prev[fieldId]?.activeTab,
+          };
+          return updated;
+        }
+
+        // Stamp Condition
+        const effectiveStamp = fieldValue;
+
+        if (fieldType === "stamp" && effectiveStamp) {
+          console.log("🔥 Running stamp sync", effectiveStamp);
+
+          stampFields.forEach((field) => {
+            updated[field.id] = {
+              ...prev[field.id],
+              documentId: field.documentId,
+              pageNumber: field.pageNumber ?? 0,
+              type: "stamp",
+              value: effectiveStamp,
+              update: true,
+              isValid,
+              activeTab: activeTab ?? prev[field.id]?.activeTab ?? lastActiveTab,
+            };
+          });
+
+          return updated; // 🚀 MUST STOP HERE
+        }
+
+
+        //  SYNC LOGIC FOR GLOBAL FIELD TYPES
+        const syncFieldTypes = {
+          // ✅ FIXED: names now also syncs signature and initial fields
+          names: () => {
+            const nameValue = fieldValue ?? "";       // preserve spaces for display
+            const trimmedName = nameValue.trim();     // for initials / signature text
+
+            // 1️⃣  Always sync every "names" field (same as before)
+            inputFields
+              .filter((f) => f.type === "names")
+              .forEach((f) => {
+                updated[f.id] = {
+                  ...prev[f.id],
+                  documentId: f.documentId,
+                  pageNumber: f.pageNumber ?? 0,
+                  type: f.type,
+                  update: true,
+                  value: nameValue,
+                  activeTab: activeTab ?? prev[f.id]?.activeTab ?? lastActiveTab,
+                };
+              });
+
+            // 2️⃣  Name cleared while on "select" tab → wipe only already-shown fields
+            if (lastActiveTab === "select" && !trimmedName) {
+              inputFields
+                .filter((f) => ["signature", "initial"].includes(f.type))
+                .forEach((f) => {
+                  // Only clear fields the user had already filled in
+                  if (prev[f.id]?.update === true) {
+                    updated[f.id] = {
+                      ...prev[f.id],
+                      value: "",
+                      activeTab: "",
+                      update: false,
+                    };
+                  }
+                });
+              return;
+            }
+
+            // 3️⃣  Name present while on "select" tab → sync only already-clicked fields
+            if (lastActiveTab === "select" && trimmedName) {
+              const newSig = {
+                text: trimmedName,
+                fontFamily: '"Great Vibes", cursive',
+                fontSize: "23px",
+              };
+
+              setSignatureValue(newSig)
+
+              const newInit = {
+                text: trimmedName
+                  .split(" ")
+                  .filter(Boolean)
+                  .map((w) => w[0].toUpperCase())
+                  .join(""),
+                fontFamily: '"Great Vibes", cursive',
+                fontSize: "23px",
+              };
+
+              setInitialValue(newInit)
+
+              inputFields
+                .filter((f) => f.type === "signature")
+                .forEach((f) => {
+                  // ✅ Only update fields the user has already interacted with
+                  if (prev[f.id]?.update === true) {
+                    updated[f.id] = {
+                      ...prev[f.id],
+                      value: newSig,
+                      activeTab: "select",
+                      update: true,
+                    };
+                  }
+                });
+
+              inputFields
+                .filter((f) => f.type === "initial")
+                .forEach((f) => {
+                  // ✅ Only update fields the user has already interacted with
+                  if (prev[f.id]?.update === true) {
+                    updated[f.id] = {
+                      ...prev[f.id],
+                      value: newInit,
+                      activeTab: "select",
+                      update: true,
+                    };
+                  }
+                });
+            }
+
+            // 4️⃣  If lastActiveTab is "draw" or "upload", name changes don't
+            //      affect signature/initial content (user drew/uploaded manually).
+            //      Nothing extra needed — just leave those fields as-is.
+          },
+
+          titles: () =>
+            inputFields
+              .filter((field) => field.type === "titles")
+              .forEach((field) => {
+                updated[field.id] = {
+                  ...prev[field.id],
+                  documentId: field.documentId,
+                  pageNumber: field.pageNumber ?? 0,
+                  type: field.type,
+                  update: true,
+                  value: fieldValue,
+                  isValid,
+                  activeTab:
+                    activeTab ?? prev[field.id]?.activeTab ?? lastActiveTab,
+                };
+              }),
+
+          company: () =>
+            inputFields
+              .filter((field) => field.type === "company")
+              .forEach((field) => {
+                updated[field.id] = {
+                  ...prev[field.id],
+                  documentId: field.documentId,
+                  pageNumber: field.pageNumber ?? 0,
+                  type: field.type,
+                  update: true,
+                  value: fieldValue,
+                  isValid: fieldValue.trim() === "" ? false : true,
+                  activeTab:
+                    activeTab ?? prev[field.id]?.activeTab ?? lastActiveTab,
+                };
+              }),
+
+          signdate: () =>
+            inputFields
+              .filter((field) => field.type === "signdate")
+              .forEach((field) => {
+                updated[field.id] = {
+                  ...prev[field.id],
+                  documentId: field.documentId,
+                  pageNumber: field.pageNumber ?? 0,
+                  type: field.type,
+                  update: true,
+                  value: fieldValue,
+                  activeTab:
+                    activeTab ?? prev[field.id]?.activeTab ?? lastActiveTab,
+                };
+              }),
+
+          // time: () =>
+          //   inputFields
+          //     .filter((field) => field.type === "time")
+          //     .forEach((field) => {
+          //       updated[field.id] = {
+          //         ...prev[field.id],
+          //         documentId: field.documentId,
+          //         pageNumber: field.pageNumber ?? 0,
+          //         type: field.type,
+          //         update: true,
+          //         value: fieldValue,
+          //         activeTab:
+          //           activeTab ?? prev[field.id]?.activeTab ?? lastActiveTab,
+          //       };
+          //     }),
+
+          writeback: () => {
+            const currentField = inputFields.find((f) => f.id === fieldId);
+            if (!currentField) return;
+
+            const sfApiName = currentField.value; // e.g. "BillingCity"
+
+            inputFields
+              .filter(
+                (f) =>
+                  f.type === "writeback" &&
+                  f.value === sfApiName // ✅ match all fields with same SF API name
+              )
+              .forEach((f) => {
+                updated[f.id] = {
+                  ...(prev[f.id] || {}),
+                  documentId: f.documentId,
+                  pageNumber: f.pageNumber,
+                  type: "writeback",
+                  update: fieldValue !== "",
+                  value: fieldValue,
+                  activeTab: activeTab ?? prev[f.id]?.activeTab ?? lastActiveTab,
+                  isValid,
+                };
+              });
+          },
+        };
+
+        // Execute sync if field type has sync logic
+        if (syncFieldTypes[fieldType]) {
+          syncFieldTypes[fieldType]();
+        } else {
+          // Single field update (for non-syncing field types)
+          updated[fieldId] = {
+            documentId,
+            pageNumber,
+            type: fieldType,
+            update: true,
+            value: fieldValue,
+            activeTab: activeTab ?? prev[fieldId]?.activeTab ?? lastActiveTab,
+            isValid,
+          };
+        }
+
+        console.log(`Updated field ${fieldId} with value ${fieldValue}`);
+
+        // ✅ writeback early return — sync already handled all matching fields above
+        if (fieldType === "writeback") {
+          updated[fieldId] = {
+            ...updated[fieldId],
+            clickedViaBadge: isBadgeClick,
+            lastClicked: new Date().toISOString(),
+          };
+          return updated;
+        }
+
+
+        // Without this guard, the block below would overwrite with stale global values.
+        if (fieldType !== "names") {
+          // ── Determine the correct sync values ──────────────────────────────────────
+          // If the user just clicked a signature field, `fieldValue` IS the new
+          // signature; use it directly so we never read stale useState.
+          // Same logic for initial fields.
+          // For all other field types fall back to the useState values (unchanged).
+          const updateSig =
+            fieldType === "signature"
+              ? fieldValue                                          // ← fresh value from this click
+              : sigValue !== undefined ? sigValue : signatureValue; // ← existing behaviour
+
+          const updateInit =
+            fieldType === "initial"
+              ? fieldValue                                          // ← fresh value from this click
+              : initValue !== undefined ? initValue : initialValue; // ← existing behaviour
+
+          const updateStamp =
+            newStamp !== undefined ? newStamp : stampValue;
+
+          inputFields
+            .filter(
+              (field) =>
+                ["signature", "initial", "stamp"].includes(field.type) &&
+                field.id !== fieldId   // don't touch the field that was just clicked
+            )
+            .forEach((field) => {
+              if (field.type === "signature" && prev[field.id]?.update === true) {
+                // Only sync if the value would actually change (avoids noisy updates)
+                if (prev[field.id]?.value !== updateSig) {
+                  updated[field.id] = {
+                    ...prev[field.id],
+                    value: updateSig,
+                    activeTab:
+                      activeTab ?? prev[field.id]?.activeTab ?? lastActiveTab,
+                  };
+                }
+              } else if (field.type === "initial" && prev[field.id]?.update === true) {
+                if (prev[field.id]?.value !== updateInit) {
+                  updated[field.id] = {
+                    ...prev[field.id],
+                    value: updateInit,
+                    activeTab:
+                      activeTab ?? prev[field.id]?.activeTab ?? lastActiveTab,
+                  };
+                }
+              }
+              // stamp sync unchanged — handled separately earlier in the function
+            });
+        }
+
+
+        // Track click source
+        updated[fieldId] = {
+          ...updated[fieldId],
+          clickedViaBadge: isBadgeClick,
+          lastClicked: new Date().toISOString(),
+        };
+
+        return updated;
+      });
+    },
+    [
+      lastActiveTab,
+      inputFields,
+      currentActiveFieldId,
+      handleNextClick,
+    ]
+  );
+
+  // Initialize current field
+  // useEffect(() => {
+  //   if (visibleSortedAllFields.length > 0 && currentFieldIndex < visibleSortedAllFields.length) {
+  //     setCurrentActiveFieldId(visibleSortedAllFields[currentFieldIndex].id);  // ← here
+  //   }
+  // }, [currentFieldIndex, visibleSortedAllFields]);
+
+  useEffect(() => {
+    const valueOnlyTypes = new Set([
+      "signature", "initial", "stamp", "attachment",
+      "signdate", "time", "checkbox", "radio",
+      "select", "dropdown", "names", "custom-tag"
+    ]);
+
+    // Helper: is a field actually visible (shown in UI)?
+    const isFieldVisible = (field) => {
+      if (visibilityMap[field.id] === false) return false;
+      if (field.type === "radio") {
+        return (field.options || []).some(
+          (opt) => visibilityMap[opt.id] !== false
+        );
+      }
+      return true;
+    };
+
+    // ── Only visible required fields count ──
+    const visibleRequiredFields = inputFields.filter(
+      (f) => f.required && !["signdate", "time"].includes(f.type) && isFieldVisible(f)
+    );
+    const totalRequired = visibleRequiredFields.length;
+    const totalAll = inputFields.filter(isFieldVisible).length;
+
+    let filledRequiredCount = 0;
+    let filledAllCount = 0;
+    let hasError = false;
+
+    for (const field of inputFields) {
+      // ── Skip if not visible in UI ──
+      if (!isFieldVisible(field)) continue;
+
+      const state = fieldState?.[field.id] || { value: "", isValid: false };
+      const rawValue = state.value;
+
+      const hasValue = (() => {
+        if (rawValue === null || rawValue === undefined || rawValue === "") return false;
+        if (typeof rawValue === "boolean") return rawValue === true;
+        if (typeof rawValue === "string") return rawValue.trim() !== "";
+        if (typeof rawValue === "object") return Object.keys(rawValue).length > 0;
+        return true;
+      })();
+
+      const isPrefilledDefault = !!field.defaultValue;
+
+      const effectiveValid = (() => {
+        if (["signdate", "time"].includes(field.type)) return true;
+        if (isPrefilledDefault) return true;
+        if (valueOnlyTypes.has(field.type)) return hasValue;
+        if (state.update && state.isValid === false) return false;
+        return hasValue;
+      })();
+
+      if (
+        field.required &&
+        !["signdate", "time"].includes(field.type) &&
+        !isPrefilledDefault &&
+        !valueOnlyTypes.has(field.type) &&
+        state.update &&
+        state.isValid === false
+      ) {
+        hasError = true;
+      }
+
+      const isFilled = hasValue && effectiveValid;
+
+      if (isFilled) {
+        filledAllCount++;
+        if (field.required && !["signdate", "time"].includes(field.type)) {
+          filledRequiredCount++;
+        }
+      }
+    }
+
+    const progress =
+      totalRequired === 0
+        ? 100
+        : Math.round((filledRequiredCount / totalRequired) * 100);
+
+    setProgressPercent(progress);
+    setAllRequiredFilled(!hasError && filledRequiredCount === totalRequired);
+    setAllFieldsFilled(!hasError && filledAllCount === totalAll);
+  }, [fieldState, inputFields, visibilityMap]);
+
+  // Auto-scroll to the current active field
+  useEffect(() => {
+    if (!hasStarted) return;
+    if (!currentActiveFieldId || sortedAllFields.length === 0) return;
+
+    const activeField = visibleSortedAllFields.find((f) => f.id === currentActiveFieldId);
+    if (!activeField) return;
+
+    // Get the correct location and top value based on field type
+    let fieldLocation;
+    let fieldTop;
+
+    if (activeField.type === "radio") {
+      // For radio, use the focused option's location and top
+      const options = activeField.options || [];
+      const focusedOption = options[radioFocusedOptionIndex ?? 0];
+      if (!focusedOption) return;
+
+      fieldLocation = focusedOption.location;
+      fieldTop = parseFloat(focusedOption.top) || 0;
+    } else {
+      // For all other field types (checkbox, text, signature, etc.)
+      fieldLocation = activeField.location;
+      fieldTop = parseFloat(activeField.top) || 0;
+    }
+
+    const { containerIndex, pageNumber } = parseLocation(fieldLocation);
+    const targetDoc = documents[containerIndex];
+    if (!targetDoc) return;
+
+    const refKey = `${targetDoc.contentDocumentId}-${pageNumber}`;
+    const targetElement = imageRefs.current[refKey];
+    const container = containerRef.current;
+
+    if (!targetElement || !container) return;
+
+    setTimeout(() => {
+      const containerRect = container.getBoundingClientRect();
+      const targetRect = targetElement.getBoundingClientRect();
+      const imageHeight = targetDoc?.images?.[pageNumber]?.height || 1000;
+      const currentScroll = container.scrollTop;
+
+      const targetImageElement = targetElement.querySelector("img");
+      const scaleFactor = targetImageElement
+        ? targetImageElement.getBoundingClientRect().height / imageHeight
+        : 1;
+
+      const targetTopInContainer = targetRect.top - containerRect.top + currentScroll;
+      const fieldOffsetInImage = fieldTop * scaleFactor;
+      const containerVisibleHeight = container.clientHeight;
+
+      const finalScrollTop = targetTopInContainer + fieldOffsetInImage - containerVisibleHeight / 2;
+
+      container.scrollTo({
+        top: Math.max(0, finalScrollTop),
+        behavior: "smooth",
+      });
+    }, 200);
+
+  }, [currentActiveFieldId, radioFocusedOptionIndex, sortedAllFields, documents, parseLocation, hasStarted]);
+
+  // Fires whenever badge changes active field — no re-render of children needed
+  useEffect(() => {
+    if (!currentActiveFieldId) return;
+    if (!hasStarted) return;
+
+    // Clear data-active from every field wrapper in the document
+    document.querySelectorAll(".field-wrapper[data-active='true']").forEach((el) => {
+      el.removeAttribute("data-active");
+    });
+
+    // Find the active field definition so we can detect radio clusters
+    const activeField = inputFields.find(f => f.id === currentActiveFieldId);
+
+    if (activeField?.type === "radio") {
+      // Radio: activate only the single option the badge is currently scrolled to.
+      // radioFocusedOptionIndex tracks which option within the cluster is focused.
+      const options = activeField.options || [];
+      const focusedOption = options[radioFocusedOptionIndex ?? 0];
+
+      if (focusedOption) {
+        // Target by data-option-id so only that one option wrapper gets the border
+        const target = document.querySelector(
+          `.field-wrapper[data-option-id="${focusedOption.id}"]`
+        );
+        if (target) target.setAttribute("data-active", "true");
+      }
+    } else {
+      // All other field types: activate by data-field-id (unchanged behaviour)
+      const target = document.querySelector(
+        `.field-wrapper[data-field-id="${currentActiveFieldId}"]`
+      );
+      if (target) target.setAttribute("data-active", "true");
+    }
+
+  }, [currentActiveFieldId, radioFocusedOptionIndex, hasStarted, inputFields]);
+
+
+  const handleSubmitClick = () => {
+    if (formJson.status === 'DRAFT') {
+      setToast("Document Preview!", "info");
+      return;
+    }
+
+    // ── Shared visibility helper (same logic as progress useEffect) ──
+    const isFieldVisible = (field) => {
+      if (visibilityMap[field.id] === false) return false;
+      if (field.type === "radio") {
+        // Radio cluster visible only if at least one option is visible
+        return (field.options || []).some(
+          (opt) => visibilityMap[opt.id] !== false
+        );
+      }
+      return true;
+    };
+
+    // Find all required fields that are empty AND visible
+    const emptyRequiredFields = inputFields.filter((field) => {
+      // ── Skip hidden fields using consistent visibility check ──
+      if (!isFieldVisible(field)) return false;
+      if (["signdate", "time"].includes(field.type)) return false;
+      if (!field.required) return false;
+
+      const fs = fieldState[field.id];
+      if (!fs) return true;
+
+      const v = fs.value;
+
+      // For writeback fields, also check the fieldState value
+      if (field.type === "writeback") {
+        return v === null || v === undefined || v === "";
+      }
+
+      // Handle radio fields specially
+      if (field?.type === "radio") {
+        return v === null || v === undefined || v === "";
+      }
+
+      // Handle checkbox/boolean fields
+      if (field?.type === "checkbox" || field?.wbtType === "BOOLEAN") {
+        return v !== true && v !== "true";
+      }
+
+      // Handle picklist/dropdown fields
+      if (field?.type === "dropdown" || field?.wbtType === "PICKLIST") {
+        return !v || v === "" || v === "none";
+      }
+
+      // Handle other field types
+      if (v === null || v === undefined || v === "") return true;
+      if (typeof v === "boolean") return v === false;
+      if (typeof v === "string") return v.trim() === "";
+      if (typeof v === "object") return Object.keys(v).length === 0;
+      return false;
+    });
+
+    if (emptyRequiredFields.length > 0) {
+      document.querySelectorAll(".field-wrapper[data-error='true']").forEach((el) => {
+        el.removeAttribute("data-error");
+      });
+
+      emptyRequiredFields.forEach((field) => {
+        const el = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+        if (el) {
+          el.setAttribute("data-error", "true");
+
+          // Also trigger a visual update for writeback fields
+          if (field.type === "writeback") {
+            // Force a re-render or trigger validation
+            const event = new CustomEvent('field-validation', { detail: { fieldId: field.id, hasError: true } });
+            document.dispatchEvent(event);
+          }
+        }
+      });
+
+      const first = emptyRequiredFields[0];
+      const firstIndex = visibleSortedAllFields.findIndex(f => f.id === first.id);
+      if (firstIndex !== -1) {
+        setCurrentFieldIndex(firstIndex);
+        setCurrentActiveFieldId(first.id);
+
+        // Scroll to the field
+        const element = document.querySelector(`.field-wrapper[data-field-id="${first.id}"]`);
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }
+
+      setToast(
+        `${emptyRequiredFields.length} required field${emptyRequiredFields.length > 1 ? 's' : ''} need attention`,
+        "error"
+      );
+      return;
+    }
+
+    document.querySelectorAll(".field-wrapper[data-error='true']").forEach((el) => {
+      el.removeAttribute("data-error");
+    });
+
+    onSubmit(fieldState, visibilityMap);
+  };
+
+  const handleCancelClose = () => {
+    setShowCancelTransaction(false);
+  };
+
+  const handleCancelConfirm = async (reason) => {
+    setCancelTransactionModalLoader(true)
+    try {
+      let res = await api.put(`/sign/decline`, { reason }, {
+        headers: { Authorization: `${uuid}` }
+      });
+      // console.log(res)
+      if (res.status === 202) {
+        setToast("Action Canceled successfully!", "success");
+        if (formJson?.role === 'InPersonSigner') {
+          // Close the loader and show InPerson screen
+          setCancelTransactionModalLoader(false);
+          setShowInPersonScreenCancelTransaction(true)
+        } else {
+          updateFormJson({
+            status: "DECLINED",
+          });
+        }
+      }
+
+    } catch (error) {
+      console.log(error);
+    } finally {
+      if (formJson?.role !== 'InPersonSigner') {
+        setCancelTransactionModalLoader(false);
+      }
+    }
+  };
+
+  return (
+    <>
+      {submitting && <Loader transparentbg={submitting} />}
+      <div className="h-[100dvh]  overflow-hidden z-10">
+
+
+        <header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-sm border-b border-gray-200">
+
+          {/* --------------------------------------------------------HeaderTop ----------------------------------------------------------------*/}
+          <Header progressPercent={progressPercent} uuid={uuid} setShowCancelTransaction={setShowCancelTransaction} setShowLanguageBasedTermsAndConditions={setShowLanguageBasedTermsAndConditions} handleSubmitClick={handleSubmitClick} setOpenDrawer={setOpenDrawer} />
+        </header>
+
+        {/* --------------------------------------------------------TermsAndConditionsModal ----------------------------------------------------------------*/}
+        {(formJson.term_and_condition_accepted === false && formJson.status !== 'DRAFT' && formJson.role !== 'CC' || showLanguageBasedTermsAndConditions) && <TermsAndConditionsModal uuid={uuid} showLanguageBasedTermsAndConditions={showLanguageBasedTermsAndConditions} setShowLanguageBasedTermsAndConditions={setShowLanguageBasedTermsAndConditions} />}
+
+
+        <main className="flex w-full  mt-16 lg:mt-12 ">
+          <section className="hidden lg:flex flex-col w-full min-w-[20vw] border-r border-slate-300 bg-base-100 mt-3 h-[calc(100vh-3rem)] overflow-hidden">
+
+            {/* ---------------------------------------------------Fixed Header-----------------------------------------------------------*/}
+            <div className="flex-shrink-0 px-3 pt-2 pb-3">
+              <div className="bg-[#005AB5] text-white text-center p-3 rounded-2xl font-semibold text-sm">
+                {t("sidebar.documents")}
+              </div>
+            </div>
+
+            {/* Scrollable Area */}
+            <div className="flex-1 overflow-y-auto no-scrollbar px-3 pb-4 min-h-0">
+              <div className="space-y-3">
+                {documents.length > 0 ? (
+                  documents.map((doc, index) => (
+                    <div
+                      key={doc.contentDocumentId}
+                      className={`collapse collapse-arrow border border-base-300 rounded-xl bg-base-100 shadow-sm transition-all duration-200 ${openIndex === index ? "collapse-open" : ""
+                        }`}
+                    >
+                      <div
+                        onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                        className="collapse-title font-semibold flex flex-col cursor-pointer"
+                      >
+                        <span className="font-semibold text-xs truncate">
+                          {doc?.name}
+                        </span>
+                        <span className="text-xs text-gray-500">
+                          {t("sidebar.pages", { count: doc?.images?.length })}
+                        </span>
+                      </div>
+
+                      <div className="collapse-content p-1 bg-base-200 rounded-b-xl">
+                        <div className="max-h-[240px] overflow-y-auto no-scrollbar flex flex-col items-center gap-3">
+                          {doc?.images?.map((imageData, pageIndex) => {
+                            const refKey = `${doc.contentDocumentId}-${pageIndex}`;
+                            return (
+
+                              <div
+                                key={pageIndex}
+                                ref={(el) => (imageRefs.current[refKey] = el)}
+                                className={`relative border rounded-lg p-1 bg-white shadow-sm ${selectedDocId === doc.contentDocumentId &&
+                                  selectedPageIndex === pageIndex
+                                  ? "border-blue-500"
+                                  : "border-gray-300"
+                                  }`}
+
+                              >
+                                <img
+                                  src={imageData.src}
+                                  alt={`Page ${pageIndex + 1}`}
+                                  className="w-[150px] object-contain rounded-md cursor-pointer"
+                                  onClick={() =>
+                                    handleClick(doc.contentDocumentId, pageIndex)
+                                  }
+                                />
+                                <div
+                                  className="absolute bottom-0 right-0 w-0 h-0"
+                                  style={{
+                                    borderRight: "40px solid #005AB5",
+                                    borderTop: "40px solid transparent",
+                                  }}
+                                >
+                                  <span className="absolute bottom-[4px] right-[-34px] text-[10px] text-white font-semibold">
+                                    {pageIndex + 1}
+                                  </span>
+                                </div>
+                              </div>
+
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <p className="text-gray-500 text-center">
+                    {t("sidebar.noDocuments")}
+                  </p>
+                )}
+              </div>
+            </div>
+          </section>
+
+          <section className="h-full w-full  bg-docs-bg mt-3 md:mt-0">
+            <div className="flex flex-col h-full">
+              <div className="flex-1 flex flex-col ">
+                <div
+                  ref={containerRef}
+                  className="bg-white min-w-[80vw] min-h-[80vh] max-h-[85vh]  overflow-auto no-scrollbar p-0.5 sm:p-6 lg:p-8 flex flex-col items-center gap-6"
+                >
+                  {documents.length > 0 ? (
+                    documents.map((item, documentIndex) => (
+                      <div
+                        className="flex flex-col  w-full "
+                        key={item.contentDocumentId}
+                      >
+                        <h2 className="text-gray-600  text-[12px] sm:text-base lg:text-lg font-semibold text-center my-3 md:mb-4">
+                          {item?.name}
+                        </h2>
+                        <div className="w-full flex flex-col items-center gap-6">
+                          {item?.images?.map((imageData, pageIndex) => {
+                            const refKey = `${item.contentDocumentId}-${pageIndex}`;
+
+                            return (
+                              <a
+                                key={refKey}
+                                id={refKey}
+                                ref={(el) => (imageRefs.current[refKey] = el)}
+                                className="block w-full max-w-full relative"
+                              >
+                                <div className="w-full md:max-w-[60vw] lg:max-w-[60vw] xl:max-w-[60vw] 2xl:max-w-[65vw]  md:mx-auto mb-20 ">
+                                  <ResponsiveImageWithFields
+                                    src={imageData?.src}
+                                    alt={`${item.name} - Page ${pageIndex}`}
+                                    maxHeight={imageData?.height}
+                                    maxWidth={imageData?.width}
+                                    documentIndex={documentIndex}
+                                    pageIndex={pageIndex}
+                                    signatureValue={signatureValue}
+                                    setSignatureValue={setSignatureValue}
+                                    initialValue={initialValue}
+                                    setInitialValue={setInitialValue}
+                                    stampValue={stampValue}
+                                    setStampValue={setStampValue}
+                                    handleFieldClick={handleFieldClick}
+                                    getFieldsForPage={getFieldsForPage}
+                                    fieldState={fieldState}
+                                    lastActiveTab={lastActiveTab}
+                                    setLastActiveTab={setLastActiveTab}
+                                    documents={documents}
+                                    currentActiveFieldId={currentActiveFieldId}
+                                    allRequiredFilled={allRequiredFilled}
+                                    handleSubmitClick={handleSubmitClick}
+                                    handleNextClick={handleNextClick}
+                                    currentFieldIndex={currentFieldIndex}
+                                    totalFields={sortedAllFields.length}
+                                    goToField={goToField}
+                                    inputFields={inputFields}
+                                    transaction={transaction}
+                                    setSignatureRequest={setSignatureRequest}
+                                    // recipientInfo={recipientInfo}
+                                    // setRecipientInfo={setRecipientInfo}
+                                    allFieldsFilled={allFieldsFilled}
+                                    // for handle required auto scroll user click start
+                                    hasStarted={hasStarted}
+                                    setHasStarted={setHasStarted}
+                                    parseLocation={parseLocation}
+
+                                    radioFocusedOptionIndex={radioFocusedOptionIndex}
+                                    setRadioFocusedOptionIndex={setRadioFocusedOptionIndex}
+
+                                    visibilityMap={visibilityMap}
+                                  />
+                                </div>
+                              </a>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    <p className="text-gray-500 text-center">
+                      No documents available.
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+
+        {/* Bottom Submit Pop-up Bar */}
+        {allRequiredFilled && formJson.role !== 'CC' &&
+          (
+            <div className="fixed bottom-0 left-0 w-full z-50  bg-regal-blue text-white shadow-lg transition-all duration-300 ease-in-out">
+
+              <div className="flex items-center justify-between px-3 md:px-6 py-5 md:py-4 gap-3">
+
+                {/* Text Section */}
+                <div className="flex-1 min-w-0">
+                  <h2 className="text-[15px] md:text-lg font-semibold truncate">
+                    {t("footer.readyTitle")}
+                  </h2>
+                  <p className="text-[9px] md:text-sm text-white/80 truncate">
+                    {t("footer.readyDesc")}
+                  </p>
+                </div>
+
+                {/* Button */}
+                {formJson.status !== 'DRAFT' && <button
+                  onClick={handleSubmitClick}
+                  disabled={submitting}
+                  className={`shrink-0 px-3 md:px-5 py-1.5 md:py-2 text-sm md:text-base rounded-md font-medium bg-white text-regal-blue whitespace-nowrap ${submitting ? "cursor-not-allowed opacity-70" : "cursor-pointer hover:bg-gray-100"
+                    }`}
+                >
+                  {submitting ? t("footer.submitting") : t("footer.finish")}
+                </button>}
+
+              </div>
+            </div>
+          )}
+
+        <footer className="fixed bottom-0 left-0 right-0 z-40 bg-white backdrop-blur-sm border-t border-gray-200 px-4 md:px-6 py-2">
+          <div className="flex flex-col items-center justify-between max-w-7xl mx-auto">
+
+            {/* Mobile: current field pill + next button */}
+            <div className="flex sm:hidden items-center justify-center gap-2 w-full mb-1">
+
+              {!hasStarted ? (
+                <button
+                  onClick={() => setHasStarted(true)}
+                  className="flex-shrink-0 bg-[#005AB5] text-white text-xs font-semibold px-4 py-2 rounded-xl flex items-center gap-1"
+                >
+                  {t("footer.start")}
+                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                    <path d="M5 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </button>
+              ) : (
+                <button
+                  onClick={handleNextClick}
+                  disabled={currentFieldIndex === sortedAllFields.length - 1}
+                  className="flex-shrink-0 bg-[#005AB5] disabled:opacity-40 text-white text-xs font-semibold px-4 py-2 rounded-xl"
+                >
+                  {t("footer.next")}
+                </button>
+              )}
+            </div>
+
+            {/* Desktop: terms text */}
+            <div className=" sm:flex items-center justify-center text-center w-full text-[10px] md:text-sm text-gray-700 cursor-pointer" onClick={() => setShowLanguageBasedTermsAndConditions(!showLanguageBasedTermsAndConditions)}>
+              <Trans
+                i18nKey="footer.agreementText"
+                components={[
+                  <span className="text-[#0D6EFD] font-semibold ml-1" />
+                ]}
+              />
+            </div>
+
+          </div>
+        </footer>
+
+      </div>
+      {/* ---------------------------------------------------------Cancel Transactional Modal----------------------------------------------- */}
+      <CancelTransactionModal
+        isOpen={showCancelTransaction}
+        onClose={handleCancelClose}
+        onConfirm={handleCancelConfirm}
+        isLoading={cancelTransactionModalLoader}
+        showInPersonScreenCancelTransaction={showInPersonScreenCancelTransaction}
+      />
+
+      {/* ----------------------------------------------------------Ai Drawer sidebar---------------------------------------------------------*/}
+      <AIDrawersidebar
+        isOpen={openDrawer}
+        onClose={() => setOpenDrawer(false)}
+        uuid={uuid}
+      />
+
+      {/* --------------------------------------------------------InPersonSignerModal When Complete Tra.---------------------------------------------------------------- */}
+      <MessageInPersonSignerModal isOpen={showInPersonSignerModal} onClose={setShowInPersonSignerModal} />
+
+      {/* <MobileFieldBar
+        currentField={sortedAllFields[currentFieldIndex]}
+        currentFieldIndex={currentFieldIndex}
+        totalFields={sortedAllFields.length}
+        fieldState={fieldState}
+        handleNextClick={handleNextClick}
+        handleSubmitClick={handleSubmitClick}
+        allRequiredFilled={allRequiredFilled}
+        goToField={goToField}
+        inputFields={sortedAllFields}   
+      /> */}
+
+
+    </>
+  );
+}
diff --git a/src/components/DocFormOverlayModules/Header.jsx b/src/components/DocFormOverlayModules/Header.jsx
new file mode 100644
index 0000000..dcc11a0
--- /dev/null
+++ b/src/components/DocFormOverlayModules/Header.jsx
@@ -0,0 +1,368 @@
+import { ChevronDown, HelpCircle, Info, XCircle, RefreshCw, FileText, ArrowDownToLine, Download, History } from "lucide-react";
+import SMELogo from "../../assets/sme-logo.png";
+import { useEffect, useRef, useState } from "react";
+import { useDocStore } from "../../store";
+import { useNavigate } from "react-router-dom";
+import LanguageDropdown from "../LanguageDropdown";
+import AiIcon from '../../assets/AiIcon.png';
+import SMELogoIcon from '../../assets/SMELogo.png';
+import { downloadPdfApi } from "../../services/downloadDocument";
+import { useTranslation } from "react-i18next";
+import { fetchReassignData } from "../../services/reassignService";
+import { isRtlLanguage } from "../../i18n";
+
+const Header = ({ progressPercent, uuid, setShowCancelTransaction, setShowLanguageBasedTermsAndConditions, handleSubmitClick, setOpenDrawer }) => {
+  const docFormJson = useDocStore((state) => state.formJson);
+  console.log("docFormJson123", docFormJson)
+  const { t, i18n } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const userMenuRef = useRef(null);
+  const navigate = useNavigate();
+  const [loadingItem, setLoadingItem] = useState(null);
+  // Determine RTL based on current i18n language
+  const isRtl = isRtlLanguage(i18n.language);
+
+  console.log(isRtl, "Drop Down ")
+
+  const isCCRole = docFormJson?.role === 'CC';
+  const isInPersonSigner = docFormJson?.role === 'InPersonSigner';
+  const isDraft = docFormJson?.status === 'DRAFT';
+  const isProUser = docFormJson?.isProUser
+
+  // Menu configuration for regular signers
+  const signerMenuItems = [
+    {
+      id: "download-pdf",
+      labelKey: "menu.downloadPdf",
+      icon: <ArrowDownToLine size={16} />,
+      action: async () => {
+        await downloadPdfApi('pdf');
+      },
+      danger: false,
+      divider: false,
+      visible: true
+    },
+    {
+      id: "audit-trail",
+      labelKey: "menu.auditTrail",
+      icon: <History size={16} />,
+      action: async () => {
+        await downloadPdfApi('audit');
+      },
+      danger: false,
+      divider: false,
+      visible: !docFormJson?.hide_audit_trail
+    },
+    {
+      id: "reassign",
+      labelKey: "menu.reassignSigner",
+      icon: <RefreshCw size={16} />,
+      action: async () => {
+        try {
+          await fetchReassignData();
+          navigate(`/reassign?uuid=${uuid}`, { state: { fromSign: true } }, { replace: true });
+        } catch (error) {
+          console.error("Failed to fetch reassign data", error);
+        }
+      },
+      danger: false,
+      divider: false,
+      visible: docFormJson?.re_assignable && !isInPersonSigner
+    },
+    {
+      id: "cancel",
+      labelKey: "menu.cancelTransaction",
+      icon: <XCircle size={16} />,
+      action: () => setShowCancelTransaction(true),
+      danger: true,
+      divider: false,
+      visible: true
+    },
+    {
+      id: "terms",
+      labelKey: "menu.viewTerms",
+      icon: <FileText size={16} />,
+      action: () => setShowLanguageBasedTermsAndConditions(true),
+      danger: false,
+      divider: true,
+      visible: true
+    },
+    {
+      id: "help",
+      labelKey: "menu.helpSupport",
+      icon: <HelpCircle size={16} />,
+      action: () => console.log("Help & Support"),
+      danger: false,
+      href: "https://support.signmadeasy.com",
+      divider: false,
+      visible: true
+    },
+    {
+      id: "about",
+      labelKey: "menu.about",
+      icon: <Info size={16} />,
+      action: () => console.log("About SME"),
+      danger: false,
+      href: "https://signmadeasy.com",
+      divider: false,
+      visible: true
+    }
+  ];
+
+  // Menu configuration for CC role (only PDF and Audit Trail)
+  const ccMenuItems = [
+    {
+      id: "download-pdf",
+      labelKey: "menu.downloadPdf",
+      icon: <ArrowDownToLine size={16} />,
+      action: async () => {
+        await downloadPdfApi('pdf');
+      },
+      danger: false,
+      divider: false,
+      visible: true
+    },
+    {
+      id: "audit-trail",
+      labelKey: "menu.auditTrail",
+      icon: <History size={16} />,
+      action: async () => {
+        await downloadPdfApi('audit');
+      },
+      danger: false,
+      divider: false,
+      visible: !docFormJson?.hide_audit_trail
+    }
+  ];
+
+  // Select menu items based on role
+  const userMenuItems = isCCRole ? ccMenuItems : signerMenuItems;
+
+  // Close dropdowns on outside click
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (loadingItem) return;
+
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+      if (userMenuRef.current && !userMenuRef.current.contains(e.target)) {
+        setUserMenuOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [loadingItem]);
+
+  const handleMenuItemClick = async (item) => {
+    if (!item.action) return;
+
+    try {
+      setLoadingItem(item.id);
+      await item.action();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoadingItem(null);
+
+      // Don't close dropdown for download items
+      if (item.id !== "download-pdf" && item.id !== "audit-trail") {
+        setUserMenuOpen(false);
+        setOpen(false);
+      }
+    }
+  };
+
+  return (
+    <div className="flex flex-col bg-regal-blue">
+      {/* Top Bar */}
+      <div className="flex items-center justify-between w-full px-4 py-3">
+        {/* Responsive Logo - Mobile vs Tablet/Desktop */}
+        {/* Mobile */}
+        <img
+          src={docFormJson?.logo_url ?? SMELogoIcon}
+          className="h-7 max-w-25 w-auto object-contain block md:hidden"
+          alt="SME Logo"
+        />
+
+        {/* Desktop */}
+        <img
+          src={docFormJson?.logo_url ?? SMELogo}
+          className="h-7 w-auto object-contain hidden md:block"
+          alt="SME Logo"
+        />
+
+        <div className="flex gap-1">
+          {isProUser && <LanguageDropdown />}
+
+          {!isDraft && (
+            <div className="flex items-center gap-2 sm:gap-4">
+              {/* AI Summary Button - Only show for non-CC roles */}
+              {docFormJson?.ai_enabled && !isCCRole && (
+                <button
+                  className="btn btn-sm text-white bg-linear-to-r from-[#0CCBD4] to-[#D865FF] border-0 flex items-center gap-1 sm:gap-2"
+                  onClick={() => setOpenDrawer(true)}
+                >
+                  <img src={AiIcon} alt="" className="w-4 h-4 sm:w-5 sm:h-5" />
+                  <span className="hidden sm:inline">{t("header.aiSummary")}</span>
+                  <span className="sm:hidden sr-only">{t("header.aiSummary")}</span>
+                </button>
+              )}
+
+              <div className="relative flex cursor-pointer" ref={dropdownRef}>
+                {/* CC Role: Show single "Options" button instead of split button */}
+                {isCCRole ? (
+                  <>
+                    <button
+                      className="group flex items-center gap-1 sm:gap-2 bg-white/95 hover:bg-white px-2 sm:px-4 py-1.5 rounded-l-lg 
+        text-regal-blue font-semibold text-sm transition-all duration-200 
+        hover:shadow-md active:scale-95 border-r border-gray-200"
+                      onClick={() => setOpen(!open)}
+                    >
+                      <Download size={16} className="sm:w-5 sm:h-5" />
+                      <span className="hidden sm:inline">{t("header.options")}</span>
+                      <span className="sm:hidden">{t("header.options")}</span>
+                    </button>
+
+                    <button
+                      onClick={() => setOpen(!open)}
+                      className="bg-white/95 hover:bg-white px-2 py-1.5 rounded-r-lg 
+        text-regal-blue transition-all duration-200 hover:shadow-md 
+        active:scale-95 flex items-center justify-center"
+                    >
+                      <ChevronDown
+                        size={16}
+                        className={`transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
+                      />
+                    </button>
+                  </>
+                ) : (
+                  /* Regular Signer: Show split button with Complete Sign */
+                  <>
+                    <button
+                      className={`group flex items-center gap-1 sm:gap-2 bg-white/95 hover:bg-white px-2 sm:px-4 py-1.5 
+        text-regal-blue font-semibold text-sm transition-all duration-200 
+        hover:shadow-md active:scale-95 border-r border-gray-200 cursor-pointer ${isRtl
+                          ? 'rounded-r-lg border-l border-gray-200'
+                          : 'rounded-l-lg border-r border-gray-200'
+                        }`}
+                      onClick={handleSubmitClick}
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-4 w-4 sm:h-5 sm:w-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M5 13l4 4L19 7"
+                        />
+                      </svg>
+                      <span className="hidden sm:inline">{t("header.completeSign")}</span>
+                      <span className="sm:hidden">{t("header.sign")}</span>
+                    </button>
+
+                    <button
+                      onClick={() => setOpen(!open)}
+                      className={`
+      bg-white/95 hover:bg-white px-2 py-1.5 
+      text-regal-blue transition-all duration-200 hover:shadow-md 
+      active:scale-95 flex items-center justify-center cursor-pointer
+      ${isRtl
+                          ? 'rounded-l-lg'
+                          : 'rounded-r-lg'
+                        }
+    `}
+                    >
+                      <ChevronDown
+                        size={16}
+                        className={`transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
+                      />
+                    </button>
+                  </>
+                )}
+
+                {/* Dropdown Menu */}
+                {open && (
+                  <div className={`absolute ${isRtl ? "left-0" : "right-0"} top-10 w-56 sm:w-64 bg-white rounded-lg shadow-xl z-50 py-2 
+                    animate-in fade-in slide-in-from-top-2 duration-200`}>
+                    {userMenuItems.map((item, index) => {
+                      const commonClass = `w-full text-left px-4 py-2.5 text-xs sm:text-sm transition-all duration-200 cursor-pointer
+                        flex items-center gap-3 group
+                        ${item.danger
+                          ? "text-red-600 hover:bg-red-50 hover:text-red-700"
+                          : "text-gray-700 hover:bg-blue-50 hover:text-regal-blue"
+                        }`;
+
+                      const iconClass = `transition-transform duration-200 group-hover:scale-110
+                        ${item.danger
+                          ? "text-red-500"
+                          : "text-gray-400 group-hover:text-regal-blue"
+                        }`;
+
+                      return (
+                        <div key={item.id}>
+                          {item.divider && index > 0 && (
+                            <hr className="my-2 border-gray-200" />
+                          )}
+
+                          {item.href ? (
+                            <a href={item.href} target="_blank" className={commonClass}>
+                              <span className={iconClass}>{item.icon}</span>
+                              <span className="flex-1">
+                                {loadingItem === item.id ? t("header.processing") : t(item.labelKey)}
+                              </span>
+                            </a>
+                          ) : (
+                            item.visible && (
+                              <button
+                                onClick={() => handleMenuItemClick(item)}
+                                className={commonClass}
+                                disabled={loadingItem === item.id}
+                              >
+                                <span className={iconClass}>
+                                  {loadingItem === item.id ? (
+                                    <RefreshCw size={16} className="animate-spin" />
+                                  ) : (
+                                    item.icon
+                                  )}
+                                </span>
+
+                                <span className="flex-1">
+                                  {loadingItem === item.id ? t("header.processing") : t(item.labelKey)}
+                                </span>
+                              </button>
+                            )
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Progress Bar - Only show for non-CC roles */}
+      {!isCCRole && (
+        <div className="w-full h-1 bg-blue-300/20">
+          <div
+            className="h-full bg-gradient-to-r from-yellow-400 to-yellow-500 transition-all duration-500 ease-out rounded-r-full"
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/EmailTemplateEditorModules/EmailTemplateEditor.jsx b/src/components/EmailTemplateEditorModules/EmailTemplateEditor.jsx
new file mode 100644
index 0000000..4571822
--- /dev/null
+++ b/src/components/EmailTemplateEditorModules/EmailTemplateEditor.jsx
@@ -0,0 +1,437 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import {
+  IconMinus,
+  IconPhoto,
+  IconH1,
+  IconLayoutList,
+  IconTextSize,
+  IconRectangle,
+  IconLayoutBottombar,
+  IconRotate,
+  IconArrowUp,
+  IconLoader2,
+  IconAlertCircle,
+  IconChevronDown,
+  IconChevronRight,
+  IconDeviceDesktop,
+  IconPalette,
+  IconAlignLeft,
+  IconAlignCenter,
+  IconAlignRight,
+  IconEye,
+  IconEyeOff,
+  IconBuilding,
+  IconLink,
+  IconPhone,
+  IconMapPin,
+} from '@tabler/icons-react';
+import { DEFAULT_CONFIG_JSON } from './EmailTemplateJson';
+import { AlignField, applyConfigToHTML, ColorField, Section, ToggleSwitch } from './EmailTemplateFeatures';
+import { X } from 'lucide-react';
+import axios from 'axios';
+import Loader from '../../helper/Loader';
+import { HeaderEmailIcon } from './HeaderEmailIcon';
+
+
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+const EmailTemplateEditor = ({ originalHTML, jsonConfig, setJsonConfig, isLoading, error, authDataSF, resetConfig }) => {
+  const iframeRef = useRef(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const updateConfig = useCallback((key, value) => {
+    console.log(`🔄 Updating ${key}:`, value);
+    setJsonConfig((prev) => {
+      const newConfig = { ...prev, [key]: value };
+      console.log('📝 New config:', newConfig);
+      return newConfig;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!iframeRef.current || !originalHTML) return;
+    const patched = applyConfigToHTML(originalHTML, jsonConfig);
+    const doc = iframeRef.current.contentDocument;
+    if (doc) {
+      doc.open();
+      doc.write(patched);
+      doc.close();
+    }
+  }, [jsonConfig, originalHTML]);
+
+  const handleReset = () => {
+    setJsonConfig(resetConfig);
+  };
+
+  const handleClose = () => {
+    window.parent.postMessage({
+      type: "TEMPLATE_CLOSED",
+      success: true,
+    }, "*")
+  }
+
+  const handleSave = async () => {
+    try {
+      setIsSaving(true);
+      const finalHTML = originalHTML ? applyConfigToHTML(originalHTML, jsonConfig) : '';
+      const payload = { buId: authDataSF?.buId, html: finalHTML, config: JSON.stringify(jsonConfig) };
+
+
+      console.log('Saving config:', jsonConfig);
+      console.log('Saving HTML:', finalHTML);
+
+      const res = await axios.post(
+        `${import.meta.env.VITE_BASE_API_URL}/email/template?businessUnitId=${authDataSF.buid}`,
+        jsonConfig,
+        {
+          headers: {
+            'X-AUTH-TYPE': 'USER',
+            'Authorization': `Bearer ${authDataSF.token}`,
+            "ngrok-skip-browser-warning": "69420",
+          }
+        }
+      );
+
+      console.log("Response Save", res)
+
+      if (res.status === 200) {
+        window.parent.postMessage({
+          type: "TEMPLATE_SAVED",
+          success: true,
+          messgae: "Template Save",
+          data: res?.data
+        }, "*")
+        console.log("End")
+      }
+    } catch (err) {
+      console.error('Save failed:', err);
+      window.parent.postMessage(
+        {
+          type: "TEMPLATE_SAVED",
+          success: false,
+          error: err?.message || "Unknown error",
+          message: "An error occurred while saving the configuration. Please contact support.",
+        },
+        "*"
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+
+  // Add this check - if config is null and not loading, show error
+  if (!jsonConfig && !isLoading) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-gray-100">
+        <div className="text-center p-8 bg-white rounded-lg shadow-lg">
+          <IconAlertCircle size={48} className="text-red-500 mx-auto mb-4" />
+          <h3 className="text-lg font-semibold text-red-700 mb-2">No Configuration Found</h3>
+          <p className="text-gray-600">Unable to load template configuration from server.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // If still loading or no config yet, show loading
+  if (!jsonConfig || isLoading) {
+    return (
+      <Loader transparentbg={false} />
+    );
+  }
+
+
+  return (
+    <div className="h-screen bg-gray-100 flex overflow-hidden ">
+      {/* Sidebar */}
+      <div className="w-96 bg-white border-r border-gray-200 flex flex-col shadow-xl z-10 overflow-y-auto no-scrollbar">
+        <div className="px-6 py-4 border-b border-gray-100 bg-regal-blue sticky top-0 z-20">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center backdrop-blur">
+                <HeaderEmailIcon />
+              </div>
+              <div>
+                <h1 className="text-white font-semibold text-base">Customize Email Template</h1>
+              </div>
+            </div>
+            {isLoading && <IconLoader2 size={18} className="text-white animate-spin" />}
+          </div>
+        </div>
+
+        {error && (
+          <div className="mx-4 mt-4 p-3 rounded-lg bg-red-50 border border-red-200 flex items-start gap-2">
+            <IconAlertCircle size={16} className="text-red-500 shrink-0 mt-0.5" />
+            <div className="flex-1">
+              <p className="text-xs text-red-700 font-medium">Failed to load template</p>
+              <p className="text-xs text-red-600 mt-0.5">{error}</p>
+            </div>
+          </div>
+        )}
+
+        <div className="flex-1">
+          <div className="py-4">
+            <Section title="TOP BAR" icon={<IconMinus size={16} />} defaultExpanded={true}>
+              <ColorField label="Background Color" jsonKey="top_bar_bg_color" value={jsonConfig.top_bar_bg_color} onChange={updateConfig} />
+              <ColorField label="Gradient End Color" jsonKey="top_bar_gradient_end" value={jsonConfig.top_bar_gradient_end} onChange={updateConfig} />
+              {/* <AlignField label="Alignment" jsonKey="top_bar_align" value={jsonConfig.top_bar_align} onChange={updateConfig} /> */}
+              {/* <NumberField label="Height" jsonKey="top_bar_height" value={jsonConfig.top_bar_height} onChange={updateConfig} min={1} max={20} unit="px" /> */}
+            </Section>
+
+            <Section title="LOGO / HEADER" icon={<IconPhoto size={16} />} defaultExpanded={false}>
+              <ColorField label="Background Color" jsonKey="logo_bg_color" value={jsonConfig.logo_bg_color} onChange={updateConfig} />
+              <AlignField label="Logo Alignment" jsonKey="logo_align" value={jsonConfig.logo_align} onChange={updateConfig} />
+              {/* <NumberField label="Max Width" jsonKey="logo_max_width" value={jsonConfig.logo_max_width} onChange={updateConfig} min={50} max={500} unit="px" /> */}
+              {/* <div className="grid grid-cols-2 gap-2">
+                <NumberField label="Padding Top" jsonKey="logo_padding_top" value={jsonConfig.logo_padding_top} onChange={updateConfig} min={0} max={50} unit="px" />
+                <NumberField label="Padding Bottom" jsonKey="logo_padding_bottom" value={jsonConfig.logo_padding_bottom} onChange={updateConfig} min={0} max={50} unit="px" />
+                <NumberField label="Padding Left" jsonKey="logo_padding_left" value={jsonConfig.logo_padding_left} onChange={updateConfig} min={0} max={50} unit="px" />
+                <NumberField label="Padding Right" jsonKey="logo_padding_right" value={jsonConfig.logo_padding_right} onChange={updateConfig} min={0} max={50} unit="px" />
+              </div> */}
+            </Section>
+
+            <Section title="TITLE" icon={<IconH1 size={16} />} defaultExpanded={false}>
+              {/* <TextField label="Title Text" jsonKey="title_text" value={jsonConfig.title_text} onChange={updateConfig} /> */}
+              <ColorField label="Text Color" jsonKey="title_text_color" value={jsonConfig.title_text_color} onChange={updateConfig} />
+              <ColorField label="Background Color" jsonKey="title_bg_color" value={jsonConfig.title_bg_color} onChange={updateConfig} />
+              <AlignField label="Alignment" jsonKey="title_align" value={jsonConfig.title_align} onChange={updateConfig} />
+              {/* <NumberField label="Font Size" jsonKey="title_font_size" value={jsonConfig.title_font_size} onChange={updateConfig} min={12} max={72} unit="px" /> */}
+              {/* <div className="grid grid-cols-2 gap-2">
+                <NumberField label="Margin Top" jsonKey="title_margin_top" value={jsonConfig.title_margin_top} onChange={updateConfig} min={0} max={50} unit="px" />
+                <NumberField label="Margin Bottom" jsonKey="title_margin_bottom" value={jsonConfig.title_margin_bottom} onChange={updateConfig} min={0} max={50} unit="px" />
+              </div> */}
+            </Section>
+
+            <Section title="BODY CONTENT" icon={<IconLayoutList size={16} />} defaultExpanded={false}>
+              <ColorField label="Background Color" jsonKey="body_bg_color" value={jsonConfig.body_bg_color} onChange={updateConfig} />
+              <ColorField label="Text Color" jsonKey="body_text_color" value={jsonConfig.body_text_color} onChange={updateConfig} />
+              <AlignField label="Alignment" jsonKey="body_align" value={jsonConfig.body_align} onChange={updateConfig} />
+              {/* <div className="grid grid-cols-2 gap-2">
+                <NumberField label="Padding Top" jsonKey="body_padding_top" value={jsonConfig.body_padding_top} onChange={updateConfig} min={0} max={50} unit="px" />
+                <NumberField label="Padding Bottom" jsonKey="body_padding_bottom" value={jsonConfig.body_padding_bottom} onChange={updateConfig} min={0} max={50} unit="px" />
+                <NumberField label="Padding Left" jsonKey="body_padding_left" value={jsonConfig.body_padding_left} onChange={updateConfig} min={0} max={50} unit="px" />
+                <NumberField label="Padding Right" jsonKey="body_padding_right" value={jsonConfig.body_padding_right} onChange={updateConfig} min={0} max={50} unit="px" />
+              </div> */}
+            </Section>
+
+            <Section title="SENDER HEADING" icon={<IconTextSize size={16} />} defaultExpanded={false}>
+              {/* <TextField label="Sender Text" jsonKey="sender_text" value={jsonConfig.sender_text} onChange={updateConfig} rows={2} /> */}
+              <ColorField label="Text Color" jsonKey="sender_text_color" value={jsonConfig.sender_text_color} onChange={updateConfig} />
+              {/* <ColorField label="Background Color" jsonKey="sender_bg_color" value={jsonConfig.sender_bg_color} onChange={updateConfig} /> */}
+              {/* <NumberField label="Font Size" jsonKey="sender_font_size" value={jsonConfig.sender_font_size} onChange={updateConfig} min={12} max={72} unit="px" /> */}
+            </Section>
+
+
+
+            <Section title="CUSTOM MESSAGE" icon={<IconLayoutList size={16} />} defaultExpanded={false}>
+              {/* <ToggleSwitch label="Show Custom Message" jsonKey="show_custom_message" checked={jsonConfig.show_custom_message} onChange={updateConfig} />
+              {jsonConfig.show_custom_message && (
+                <> */}
+              {/* <TextField label="Message Text" jsonKey="custom_message_text" value={jsonConfig.custom_message_text} onChange={updateConfig} rows={4} /> */}
+              <ColorField label="Text Color" jsonKey="custom_message_text_color" value={jsonConfig.custom_message_text_color} onChange={updateConfig} />
+              <ColorField label="Background Color" jsonKey="custom_message_bg_color" value={jsonConfig.custom_message_bg_color} onChange={updateConfig} />
+              {/* <AlignField label="Alignment" jsonKey="custom_message_text_align" value={jsonConfig.custom_message_text_align} onChange={updateConfig} /> */}
+              {/* <NumberField label="Font Size" jsonKey="custom_message_font_size" value={jsonConfig.custom_message_font_size} onChange={updateConfig} min={10} max={72} unit="px" /> */}
+              {/* <NumberField label="Line Height" jsonKey="custom_message_line_height" value={jsonConfig.custom_message_line_height} onChange={updateConfig} min={1} max={3} step={0.1} /> */}
+              {/* </>
+              )} */}
+            </Section>
+
+            {/* <Section title="INSTRUCTION TEXT" icon={<IconTextSize size={16} />} defaultExpanded={false}>
+              <ToggleSwitch label="Show Instruction" jsonKey="show_instruction" checked={jsonConfig.show_instruction} onChange={updateConfig} />
+              {jsonConfig.show_instruction && (
+                <>
+                  <TextField label="Instruction Text" jsonKey="instruction_text" value={jsonConfig.instruction_text} onChange={updateConfig} rows={2} />
+                  <ColorField label="Text Color" jsonKey="instruction_text_color" value={jsonConfig.instruction_text_color} onChange={updateConfig} />
+                  <AlignField label="Alignment" jsonKey="instruction_text_align" value={jsonConfig.instruction_text_align} onChange={updateConfig} />
+                  <NumberField label="Font Size" jsonKey="instruction_font_size" value={jsonConfig.instruction_font_size} onChange={updateConfig} min={10} max={72} unit="px" />
+                </>
+              )}
+            </Section> */}
+
+            <Section title="BUTTON" icon={<IconRectangle size={16} />} defaultExpanded={false}>
+              {/* <ToggleSwitch label="Show Button" jsonKey="show_button" checked={jsonConfig.show_button} onChange={updateConfig} /> */}
+              {/* {jsonConfig.show_button && (
+                <> */}
+              {/* <TextField label="Button Text" jsonKey="button_text" value={jsonConfig.button_text} onChange={updateConfig} /> */}
+              <ColorField label="Background Color" jsonKey="button_bg_color" value={jsonConfig.button_bg_color} onChange={updateConfig} />
+              <ColorField label="Text Color" jsonKey="button_text_color" value={jsonConfig.button_text_color} onChange={updateConfig} />
+              {/* <AlignField label="Alignment" jsonKey="button_align" value={jsonConfig.button_align} onChange={updateConfig} /> */}
+              {/* <div className="grid grid-cols-2 gap-2">
+                    <NumberField label="Padding X" jsonKey="button_padding_left" value={jsonConfig.button_padding_left} onChange={updateConfig} min={5} max={50} unit="px" />
+                    <NumberField label="Padding Y" jsonKey="button_padding_top" value={jsonConfig.button_padding_top} onChange={updateConfig} min={5} max={50} unit="px" />
+                  </div> */}
+              {/* <NumberField label="Border Radius" jsonKey="button_radius" value={jsonConfig.button_radius} onChange={updateConfig} min={0} max={50} unit="px" />
+                  <NumberField label="Font Size" jsonKey="button_font_size" value={jsonConfig.button_font_size} onChange={updateConfig} min={12} max={72} unit="px" /> */}
+              {/* </>
+              )} */}
+            </Section>
+
+            <Section title="REASSIGN & AUDIT" icon={<IconLink size={16} />} defaultExpanded={false}>
+              {/* <ToggleSwitch label="Show Reassign Section" jsonKey="show_reassign_section" checked={jsonConfig.show_reassign_section} onChange={updateConfig} />
+              {jsonConfig.show_reassign_section && (
+                <> */}
+              {/* <TextField label="Reassign Text" jsonKey="reassign_text" value={jsonConfig.reassign_text} onChange={updateConfig} /> */}
+              {/* <TextField label="Link Text" jsonKey="reassign_link_text" value={jsonConfig.reassign_link_text} onChange={updateConfig} /> */}
+              <ColorField label="Reassign Link Color" jsonKey="reassign_link_color" value={jsonConfig.reassign_link_color} onChange={updateConfig} />
+              {/* </>
+              )} */}
+              <div className="border-t border-gray-100 my-3"></div>
+              {/* <ToggleSwitch label="Show Audit Trail Section" jsonKey="show_audit_trail_section" checked={jsonConfig.show_audit_trail_section} onChange={updateConfig} />
+              {jsonConfig.show_audit_trail_section && (
+                <> */}
+              {/* <TextField label="Audit Trail Text" jsonKey="audit_trail_text" value={jsonConfig.audit_trail_text} onChange={updateConfig} /> */}
+              {/* <TextField label="Link Text" jsonKey="audit_trail_link_text" value={jsonConfig.audit_trail_link_text} onChange={updateConfig} /> */}
+              <ColorField label="Audit Link Color" jsonKey="audit_trail_link_color" value={jsonConfig.audit_trail_link_color} onChange={updateConfig} />
+              {/* </>
+              )} */}
+            </Section>
+
+            {/* <Section title="TRANSACTION & REGARDS" icon={<IconTextSize size={16} />} defaultExpanded={false}>
+              <ToggleSwitch label="Show Transaction ID" jsonKey="show_transaction_id" checked={jsonConfig.show_transaction_id} onChange={updateConfig} />
+              {jsonConfig.show_transaction_id && (
+                <>
+                  <ColorField label="Text Color" jsonKey="transaction_text_color" value={jsonConfig.transaction_text_color} onChange={updateConfig} />
+                  <NumberField label="Font Size" jsonKey="transaction_font_size" value={jsonConfig.transaction_font_size} onChange={updateConfig} min={10} max={72} unit="px" />
+                </>
+              )}
+              <div className="border-t border-gray-100 my-3"></div>
+              <ToggleSwitch label="Show Regards Text" jsonKey="show_regards" checked={jsonConfig.show_regards} onChange={updateConfig} />
+              {jsonConfig.show_regards && (
+                <>
+                  <TextField label="Regards Text" jsonKey="regards_text" value={jsonConfig.regards_text} onChange={updateConfig} />
+                  <ColorField label="Text Color" jsonKey="regards_text_color" value={jsonConfig.regards_text_color} onChange={updateConfig} />
+                </>
+              )}
+            </Section> */}
+
+            <Section title="COMPANY ADDRESS" icon={<IconBuilding size={16} />} defaultExpanded={false}>
+              {/* <ToggleSwitch label="Show Company Address" jsonKey="show_company_address" checked={jsonConfig.show_company_address} onChange={updateConfig} />
+              {jsonConfig.show_company_address && (
+                <> */}
+              {/* <TextField label="Company Name" jsonKey="company_name" value={jsonConfig.company_name} onChange={updateConfig} /> */}
+              {/* <TextField label="Address Line 1" jsonKey="company_address_line1" value={jsonConfig.company_address_line1} onChange={updateConfig} /> */}
+              {/* <TextField label="Address Line 2" jsonKey="company_address_line2" value={jsonConfig.company_address_line2} onChange={updateConfig} /> */}
+              {/* <TextField label="City/State/Zip" jsonKey="company_city_state_zip" value={jsonConfig.company_city_state_zip} onChange={updateConfig} /> */}
+              {/* <TextField label="Phone" jsonKey="company_phone" value={jsonConfig.company_phone} onChange={updateConfig} /> */}
+              {/* <TextField label="Website" jsonKey="company_website" value={jsonConfig.company_website} onChange={updateConfig} /> */}
+              <ColorField label="Text Color" jsonKey="company_address_text_color" value={jsonConfig.company_address_text_color} onChange={updateConfig} />
+              <ColorField label="Background Gradient Color" jsonKey="company_address_bg_gradient" value={jsonConfig.company_address_bg_gradient} onChange={updateConfig} />
+              <ColorField label="Company Link Color" jsonKey="company_link_color" value={jsonConfig.company_link_color} onChange={updateConfig} />
+              {/* <NumberField label="Font Size" jsonKey="company_address_font_size" value={jsonConfig.company_address_font_size} onChange={updateConfig} min={10} max={72} unit="px" /> */}
+              {/* </>
+              )} */}
+            </Section>
+
+            {/* <Section title="FOOTER" icon={<IconLayoutBottombar size={16} />} defaultExpanded={false}>
+              <ToggleSwitch label="Show Footer" jsonKey="show_footer" checked={jsonConfig.show_footer} onChange={updateConfig} />
+              {jsonConfig.show_footer && (
+                <>
+                  <TextField label="Footer Text" jsonKey="footer_text" value={jsonConfig.footer_text} onChange={updateConfig} />
+                  <ColorField label="Text Color" jsonKey="footer_text_color" value={jsonConfig.footer_text_color} onChange={updateConfig} />
+                  <ColorField label="Background Color" jsonKey="footer_bg_color" value={jsonConfig.footer_bg_color} onChange={updateConfig} />
+                  <AlignField label="Alignment" jsonKey="footer_align" value={jsonConfig.footer_align} onChange={updateConfig} />
+                  <NumberField label="Font Size" jsonKey="footer_font_size" value={jsonConfig.footer_font_size} onChange={updateConfig} min={10} max={72} unit="px" />
+                  <NumberField label="Padding" jsonKey="footer_padding" value={jsonConfig.footer_padding} onChange={updateConfig} min={5} max={50} unit="px" />
+                </>
+              )}
+            </Section> */}
+
+            {/* <Section title="CONTAINER SETTINGS" icon={<IconDeviceDesktop size={16} />} defaultExpanded={false}>
+              <NumberField label="Max Width" jsonKey="email_container_max_width" value={jsonConfig.email_container_max_width} onChange={updateConfig} min={300} max={1200} unit="px" />
+              <ColorField label="Container BG Color" jsonKey="email_container_bg_color" value={jsonConfig.email_container_bg_color} onChange={updateConfig} />
+              <ColorField label="Outer BG Color" jsonKey="body_bg_color_outer" value={jsonConfig.body_bg_color_outer} onChange={updateConfig} />
+            </Section> */}
+          </div>
+        </div>
+
+        {/* <div className="p-5 border-t border-gray-200 bg-gray-50 space-y-3 sticky bottom-0">
+          <button onClick={handleReset} className="w-full py-2.5 text-sm font-medium rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-all flex items-center justify-center gap-2 shadow-sm">
+            <IconRotate size={16} /> Reset to Default
+          </button>
+          <button onClick={handleSave} disabled={isLoading || !originalHTML} className="w-full py-2.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2 shadow-sm">
+            <IconArrowUp size={16} /> Save Configuration
+          </button>
+          {showToast && (
+            <div className="fixed bottom-6 left-96 transform -translate-x-1/2 z-50 animate-fade-in-up">
+              <div className="px-4 py-2.5 rounded-lg bg-gray-900 text-white text-sm shadow-lg flex items-center gap-2">
+                <svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                Config saved successfully!
+              </div>
+            </div>
+          )}
+        </div> */}
+      </div>
+
+      {/* Preview Area */}
+      <div className="flex-1 flex flex-col bg-gray-100">
+        {/* Preview Header */}
+        <div className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-end shadow-sm">
+          <div className="flex gap-2">
+            <button className="btn btn-md bg-[#b60554] text-white rounded-2xl" onClick={handleClose}>
+              <X size={13} />
+              Close
+            </button>
+            <button className="btn btn-md rounded-2xl" disabled={isLoading || !originalHTML || isSaving} onClick={handleReset}>
+              <IconRotate size={13} />
+              Reset
+            </button>
+
+            <button
+              className="btn btn-md text-white bg-regal-blue rounded-2xl flex items-center gap-2"
+              onClick={handleSave}
+              disabled={isLoading || !originalHTML || isSaving}
+            >
+              {isSaving ? (
+                <>
+                  <IconLoader2 size={13} className="animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                <>
+                  <IconArrowUp size={13} />
+                  Save
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        <div className="flex-1 p-6 overflow-auto">
+          <div className="w-full h-full bg-white rounded-lg shadow-xl overflow-hidden border border-gray-200">
+            {isLoading ? (
+              <div className="flex-1 flex flex-col items-center justify-center h-full gap-4 text-gray-400">
+                <IconLoader2 size={40} className="animate-spin text-blue-500" />
+                <p className="text-sm text-gray-500 font-medium">Loading your email template...</p>
+              </div>
+            ) : (
+              <iframe ref={iframeRef} title="Email Template Preview" className="w-full h-full border-0" sandbox="allow-same-origin allow-scripts allow-popups" style={{ background: '#f5f7fa' }} />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* <style jsx>{`
+        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
+        @keyframes fade-in-up {
+          from { opacity: 0; transform: translate(-50%, 20px); }
+          to { opacity: 1; transform: translate(-50%, 0); }
+        }
+        .animate-fade-in-up { animation: fade-in-up 0.3s ease-out; }
+      `}</style> */}
+    </div>
+  );
+};
+
+export default EmailTemplateEditor;
\ No newline at end of file
diff --git a/src/components/EmailTemplateEditorModules/EmailTemplateFeatures.jsx b/src/components/EmailTemplateEditorModules/EmailTemplateFeatures.jsx
new file mode 100644
index 0000000..b19e360
--- /dev/null
+++ b/src/components/EmailTemplateEditorModules/EmailTemplateFeatures.jsx
@@ -0,0 +1,684 @@
+import { useState } from "react";
+import {
+  IconMinus,
+  IconPhoto,
+  IconH1,
+  IconLayoutList,
+  IconTextSize,
+  IconRectangle,
+  IconLayoutBottombar,
+  IconRotate,
+  IconArrowUp,
+  IconLoader2,
+  IconAlertCircle,
+  IconChevronDown,
+  IconChevronRight,
+  IconDeviceDesktop,
+  IconPalette,
+  IconAlignLeft,
+  IconAlignCenter,
+  IconAlignRight,
+  IconEye,
+  IconEyeOff,
+  IconBuilding,
+  IconLink,
+  IconPhone,
+  IconMapPin,
+} from '@tabler/icons-react';
+
+// ─── Components ────────────────────────────────────────────────────────────────
+export const ColorField = ({ label, jsonKey, value, onChange }) => {
+
+  const [opacity, setOpacity] = useState(() => {
+    if (value && value.length === 9) {
+      return parseInt(value.slice(7, 9), 16) / 255;
+    }
+    return 1;
+  });
+
+  const handleColorChange = (e) => {
+    let newColor = e.target.value;
+    // Preserve alpha if it exists
+    if (value && value.length === 9 && opacity < 1) {
+      const alphaHex = Math.round(opacity * 255).toString(16).padStart(2, '0');
+      newColor = newColor + alphaHex;
+    }
+    onChange(jsonKey, newColor);
+  };
+
+  const handleOpacityChange = (e) => {
+    const newOpacity = parseFloat(e.target.value);
+    setOpacity(newOpacity);
+    if (value) {
+      const baseColor = value.length === 9 ? value.slice(0, 7) : value.slice(0, 7);
+      const alphaHex = Math.round(newOpacity * 255).toString(16).padStart(2, '0');
+      onChange(jsonKey, baseColor + alphaHex);
+    }
+  };
+
+  const handleHexChange = (e) => {
+    let rawValue = e.target.value;
+
+    // Ensure the value starts with # if empty
+    if (rawValue === '') {
+      rawValue = '#';
+    }
+
+    // If the first character is not #, add it
+    if (rawValue[0] !== '#') {
+      rawValue = '#' + rawValue;
+    }
+
+    // Allow 8-digit hex (with alpha) or 6-digit hex
+    const maxLength = rawValue.startsWith('#') ? 9 : 7;
+    if (rawValue.length > maxLength) {
+      rawValue = rawValue.slice(0, maxLength);
+    }
+
+    // Only allow valid hex characters after the #
+    const hexPart = rawValue.slice(1);
+    const validHexPart = hexPart.replace(/[^0-9a-fA-F]/g, '');
+    const newValue = '#' + validHexPart;
+
+    console.log(`Hex input typing ${jsonKey}:`, newValue);
+    onChange(jsonKey, newValue);
+  };
+
+  const handleHexBlur = (e) => {
+    let v = e.target.value.trim();
+
+    // If empty or just '#', revert to last valid value
+    if (!v || v === '#') {
+      onChange(jsonKey, value);
+      return;
+    }
+
+    // Ensure starts with #
+    if (v[0] !== '#') {
+      v = '#' + v;
+    }
+
+    // Convert 3-digit to 6-digit
+    if (/^#[0-9a-fA-F]{3}$/i.test(v)) {
+      const hex = '#' + v[1] + v[1] + v[2] + v[2] + v[3] + v[3];
+      onChange(jsonKey, hex);
+    }
+    // Check for 8-digit hex (with alpha)
+    else if (/^#[0-9a-fA-F]{8}$/i.test(v)) {
+      onChange(jsonKey, v);
+    }
+    // Check for 6-digit hex
+    else if (/^#[0-9a-fA-F]{6}$/i.test(v)) {
+      onChange(jsonKey, v);
+    }
+    // If not valid, revert to last valid
+    else {
+      onChange(jsonKey, value);
+    }
+  };
+
+  // Display value - if 8-digit, show as 6-digit with note
+  const displayValue = value && value.length === 9 ? `${value.slice(0, 7)} (with alpha)` : value;
+
+  return (
+    <div className="mb-4">
+      <label className="block text-[11px] font-medium text-gray-600 uppercase tracking-wide mb-2">{label}</label>
+      <div className="flex items-center gap-3">
+        <div className="relative w-10 h-10 rounded-lg border-2 border-gray-200 overflow-hidden shrink-0 cursor-pointer shadow-sm hover:shadow-md transition-shadow">
+          <div className="absolute inset-0 rounded-lg pointer-events-none" style={{ background: value }} />
+          <input
+            type="color"
+            value={value && value.length === 9 ? value.slice(0, 7) : value}
+            onChange={handleColorChange}
+            className="absolute inset-[-6px] w-[calc(100%+12px)] h-[calc(100%+12px)] opacity-0 cursor-pointer"
+          />
+        </div>
+        <input
+          type="text"
+          value={value || ''}
+          onChange={handleHexChange}
+          onBlur={handleHexBlur}
+          maxLength={9}
+          className="flex-1 text-sm font-mono border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+        />
+      </div>
+      {value && value.length === 9 && (
+        <div className="mt-2">
+          <label className="block text-[10px] font-medium text-gray-500 mb-1">Opacity: {Math.round(opacity * 100)}%</label>
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.01"
+            value={opacity}
+            onChange={handleOpacityChange}
+            className="w-full"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const AlignField = ({ label, jsonKey, value, onChange }) => (
+  <div className="mb-4">
+    <label className="block text-[11px] font-medium text-gray-600 uppercase tracking-wide mb-2">{label}</label>
+    <div className="flex gap-1 bg-gray-100 p-1 rounded-lg">
+      {[
+        { value: 'left', icon: IconAlignLeft, label: 'Left' },
+        { value: 'center', icon: IconAlignCenter, label: 'Center' },
+        { value: 'right', icon: IconAlignRight, label: 'Right' }
+      ].map((opt) => (
+        <button key={opt.value} onClick={() => onChange(jsonKey, opt.value)} className={`flex-1 py-2 px-3 rounded-md text-xs font-medium transition-all flex items-center justify-center gap-1.5 ${value === opt.value ? 'bg-white text-blue-600 shadow-sm ring-1 ring-blue-200' : 'text-gray-500 hover:text-gray-700 hover:bg-white/50'}`}>
+          <opt.icon size={14} /><span className="hidden sm:inline">{opt.label}</span>
+        </button>
+      ))}
+    </div>
+  </div>
+);
+
+export const NumberField = ({ label, jsonKey, value, onChange, min, max, unit }) => (
+  <div className="mb-4">
+    <label className="block text-[11px] font-medium text-gray-600 uppercase tracking-wide mb-2">{label}</label>
+    <div className="flex items-center gap-2">
+      <input type="number" value={value} onChange={(e) => onChange(jsonKey, parseInt(e.target.value) || 0)} min={min} max={max} className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" />
+      {unit && <span className="text-xs text-gray-500">{unit}</span>}
+    </div>
+  </div>
+);
+
+export const TextField = ({ label, jsonKey, value, onChange, rows = 1 }) => {
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    console.log(`TextField changing ${jsonKey}:`, newValue); // Debug log
+    onChange(jsonKey, newValue);
+  };
+
+  return (
+    <div className="mb-4">
+      <label className="block text-[11px] font-medium text-gray-600 uppercase tracking-wide mb-2">{label}</label>
+      {rows === 1 ? (
+        <input
+          type="text"
+          value={value || ''}
+          onChange={handleChange}
+          className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+        />
+      ) : (
+        <textarea
+          value={value || ''}
+          onChange={handleChange}
+          rows={rows}
+          className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+        />
+      )}
+    </div>
+  );
+};
+
+export const ToggleSwitch = ({ label, jsonKey, checked, onChange }) => (
+  <div className="mb-4">
+    <label className="block text-[11px] font-medium text-gray-600 uppercase tracking-wide mb-2">{label}</label>
+    <div className="flex items-center gap-3">
+      <button onClick={() => onChange(jsonKey, !checked)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 ${checked ? 'bg-blue-600' : 'bg-gray-300'}`}>
+        <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${checked ? 'translate-x-6' : 'translate-x-1'}`} />
+      </button>
+      <span className="text-sm text-gray-700 flex items-center gap-1">
+        {checked ? <IconEye size={14} className="text-green-600" /> : <IconEyeOff size={14} className="text-red-600" />}
+        {checked ? 'Visible' : 'Hidden'}
+      </span>
+    </div>
+  </div>
+);
+
+export const Section = ({ title, icon, children, defaultExpanded = true }) => {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  return (
+    <div className="mb-3 mx-3 rounded-lg border border-gray-200 overflow-hidden  bg-white shadow-sm hover:shadow-md transition-shadow">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between px-4 py-4  bg-gradient-to-r from-gray-50 to-white hover:from-gray-100 hover:to-gray-50 transition-all group"
+      >
+        <div className="flex items-center gap-2.5">
+          <span className="text-gray-500 group-hover:text-blue-500 transition-colors">
+            {icon}
+          </span>
+          <h3 className="text-xs font-semibold text-gray-700 uppercase tracking-wide">
+            {title}
+          </h3>
+        </div>
+        <div className="flex items-center gap-2">
+          {/* <span className="text-[10px] text-gray-400">
+            {expanded ? 'Click to collapse' : 'Click to expand'}
+          </span> */}
+          {expanded ? (
+            <IconChevronDown size={14} className="text-gray-400" />
+          ) : (
+            <IconChevronRight size={14} className="text-gray-400" />
+          )}
+        </div>
+      </button>
+      {expanded && (
+        <div className="px-4 pb-4 pt-2 border-t border-gray-100 bg-white">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── Apply Config to HTML ──────────────────────────────────────────────────────
+export const applyConfigToHTML = (originalHTML, cfg) => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(originalHTML, 'text/html');
+
+  const setStyle = (id, prop, value) => {
+    const el = doc.getElementById(id);
+    if (!el) return;
+    let s = el.getAttribute('style') || '';
+    const re = new RegExp(`(${prop}\\s*:\\s*)[^;]+(;?)`, 'i');
+    if (re.test(s)) {
+      s = s.replace(re, `$1${value}$2`);
+    } else {
+      s = s.trimEnd();
+      if (s && !s.endsWith(';')) s += ';';
+      s += ` ${prop}: ${value};`;
+    }
+    el.setAttribute('style', s);
+  };
+
+  // Top Bar
+  const topBar = doc.getElementById('top-bar');
+  if (topBar) {
+    let s = topBar.getAttribute('style') || '';
+    s = s.replace(
+      /linear-gradient\(45deg,\s*#[0-9a-fA-F]{6},\s*#[0-9a-fA-F]{6}\)/i,
+      `linear-gradient(45deg, ${cfg.top_bar_bg_color}, ${cfg.top_bar_gradient_end})`
+    );
+    topBar.setAttribute('style', s);
+    setStyle('top-bar', 'text-align', cfg.top_bar_align);
+  }
+
+  // Logo Section
+  setStyle('logo-container', 'background', cfg.logo_bg_color);
+  setStyle('logo-container', 'text-align', cfg.logo_align);
+  setStyle('logo-container', 'padding', `${cfg.logo_padding_top}px ${cfg.logo_padding_right}px ${cfg.logo_padding_bottom}px ${cfg.logo_padding_left}px`);
+
+  const logo = doc.getElementById('company-logo');
+  if (logo) {
+    logo.style.maxWidth = cfg.logo_max_width + 'px';
+    logo.style.objectFit = cfg.logo_object_fit;
+  }
+
+  // Title
+  setStyle('title-text', 'color', cfg.title_text_color);
+  setStyle('title-text', 'font-size', cfg.title_font_size + 'px');
+  setStyle('title-text', 'font-family', cfg.title_font_family);
+  setStyle('title-text', 'margin-top', cfg.title_margin_top + 'px');
+  setStyle('title-text', 'margin-bottom', cfg.title_margin_bottom + 'px');
+
+  // const titleText = doc.getElementById('title-text');
+  // if (titleText) titleText.textContent = cfg.title_text;
+
+  const titleWrapper = doc.getElementById('title-wrapper');
+  if (titleWrapper) {
+    setStyle('title-wrapper', 'background', cfg.title_bg_color);
+    const centerTag = titleWrapper.querySelector('center');
+    if (centerTag) {
+      if (cfg.title_align === 'left') {
+        centerTag.setAttribute('style', 'text-align: left; display: block;');
+      } else if (cfg.title_align === 'right') {
+        centerTag.setAttribute('style', 'text-align: right; display: block;');
+      } else {
+        centerTag.removeAttribute('style');
+      }
+    }
+  }
+
+
+  // BODY CONTENT - Apply to ALL elements including reassign, audit, transaction, regards
+  const bodyContent = doc.getElementById('body-content');
+  if (bodyContent) {
+    setStyle('body-content', 'background', cfg.body_bg_color);
+    setStyle('body-content', 'text-align', cfg.body_align);
+    setStyle('body-content', 'color', cfg.body_text_color);
+    setStyle('body-content', 'padding', `${cfg.body_padding_top}px ${cfg.body_padding_right}px ${cfg.body_padding_bottom}px ${cfg.body_padding_left}px`);
+
+    // Apply body alignment to ALL child elements
+    const allElements = bodyContent.querySelectorAll('#custom-message, #instruction-text, #reassign-text, #audit-trail-text, #transaction-id, #regards-text, p, div, h3');
+    allElements.forEach(el => {
+      // Apply alignment
+      if (cfg.body_align) {
+        el.style.textAlign = cfg.body_align;
+      }
+      // Apply text color but preserve link colors
+      if (cfg.body_text_color && el.tagName !== 'A') {
+        // Don't override if it's a link or has specific color set
+        const hasSpecificColor = el.id === 'reassign-text' || el.id === 'audit-trail-text' || el.id === 'transaction-id' || el.id === 'regards-text';
+        if (hasSpecificColor || !el.querySelector('a')) {
+          el.style.color = cfg.body_text_color;
+        }
+      }
+    });
+  }
+
+
+
+  // Sender Heading
+  const senderHeading = doc.getElementById('sender-heading');
+  if (senderHeading) {
+    // senderHeading.textContent = cfg.sender_text;
+    setStyle('sender-heading', 'color', cfg.sender_text_color);
+    setStyle('sender-heading', 'font-size', cfg.sender_font_size + 'px');
+    setStyle('sender-heading', 'font-family', cfg.sender_font_family);
+    setStyle('sender-heading', 'margin-top', cfg.sender_margin_top + 'px');
+    setStyle('sender-heading', 'margin-bottom', cfg.sender_margin_bottom + 'px');
+  }
+
+  // CUSTOM MESSAGE - FIXED: Alignment and text color
+  const customMessage = doc.getElementById('custom-message');
+  if (customMessage) {
+    customMessage.style.display = cfg.show_custom_message ? 'block' : 'none';
+
+    // Update text content
+    // if (cfg.custom_message_text && cfg.custom_message_text !== customMessage.textContent) {
+    //   customMessage.textContent = cfg.custom_message_text;
+    // }
+
+    // Apply text color
+    const textColor = cfg.custom_message_text_color || cfg.body_text_color || '#000000';
+    customMessage.style.color = textColor;
+
+    // Apply background color
+    const bgColor = cfg.custom_message_bg_color || '#ffffff';
+    customMessage.style.backgroundColor = bgColor;
+
+    // Apply other styles
+    customMessage.style.fontSize = (cfg.custom_message_font_size || 14) + 'px';
+    customMessage.style.fontFamily = cfg.custom_message_font_family || "Montserrat, sans-serif";
+    customMessage.style.marginTop = (cfg.custom_message_margin_top || 20) + 'px';
+    customMessage.style.lineHeight = cfg.custom_message_line_height || 1.6;
+    customMessage.style.textAlign = cfg.body_align || 'justify';
+    customMessage.style.fontStyle = 'italic';
+    customMessage.style.padding = '5px 8px';
+    customMessage.style.borderRadius = '5px';
+  }
+
+
+  // INSTRUCTION TEXT - FIXED: Alignment and text color
+  const instructionText = doc.getElementById('instruction-text');
+  if (instructionText) {
+    instructionText.style.display = cfg.show_instruction ? 'block' : 'none';
+    // instructionText.textContent = cfg.instruction_text;
+    setStyle('instruction-text', 'color', cfg.body_text_color);
+    setStyle('instruction-text', 'font-size', cfg.instruction_font_size + 'px');
+    setStyle('instruction-text', 'font-family', cfg.instruction_font_family);
+    setStyle('instruction-text', 'margin-top', cfg.instruction_margin_top + 'px');
+    // Apply body alignment
+    setStyle('instruction-text', 'text-align', cfg.body_align);
+  }
+
+  // BUTTON - FIXED: Alignment
+  const buttonBg = doc.getElementById('button-bg');
+  if (buttonBg) {
+    buttonBg.style.display = cfg.show_button ? 'block' : 'none';
+    setStyle('button-bg', 'background-color', cfg.button_bg_color);
+    setStyle('button-bg', 'padding', `${cfg.button_padding_top}px ${cfg.button_padding_right}px ${cfg.button_padding_bottom}px ${cfg.button_padding_left}px`);
+    setStyle('button-bg', 'border-radius', cfg.button_radius + 'px');
+  }
+
+  const buttonLink = doc.getElementById('button-link');
+  if (buttonLink) {
+    // buttonLink.textContent = cfg.button_text;
+    setStyle('button-link', 'color', cfg.button_text_color);
+    setStyle('button-link', 'font-size', cfg.button_font_size + 'px');
+    setStyle('button-link', 'font-weight', cfg.button_font_weight);
+    setStyle('button-link', 'font-family', cfg.button_font_family);
+  }
+
+
+
+  // BUTTON ALIGNMENT - COMPLETE FIX
+  const buttonWrapper = doc.getElementById('button-wrapper');
+  if (buttonWrapper) {
+    const centerTag = buttonWrapper.querySelector('center');
+    const buttonTable = buttonWrapper.querySelector('table');
+
+    // Reset all styles first
+    if (centerTag) {
+      centerTag.removeAttribute('style');
+      centerTag.removeAttribute('align');
+    }
+    if (buttonTable) {
+      buttonTable.removeAttribute('style');
+    }
+    buttonWrapper.removeAttribute('style');
+
+    // Apply new alignment
+    if (cfg.button_align === 'left') {
+      if (centerTag) {
+        centerTag.setAttribute('align', 'left');
+        centerTag.style.textAlign = 'left';
+      }
+      if (buttonTable) {
+        buttonTable.style.margin = '0';
+        buttonTable.style.marginRight = 'auto';
+      }
+      buttonWrapper.style.textAlign = 'left';
+    }
+    else if (cfg.button_align === 'right') {
+      if (centerTag) {
+        centerTag.setAttribute('align', 'right');
+        centerTag.style.textAlign = 'right';
+      }
+      if (buttonTable) {
+        buttonTable.style.margin = '0';
+        buttonTable.style.marginLeft = 'auto';
+      }
+      buttonWrapper.style.textAlign = 'right';
+    }
+    else {
+      // center
+      if (buttonTable) {
+        buttonTable.style.margin = '0 auto';
+      }
+      buttonWrapper.style.textAlign = 'center';
+    }
+  }
+
+
+  // Reassign Section 
+  const reassignText = doc.getElementById('reassign-text');
+  if (reassignText) {
+    reassignText.style.display = cfg.show_reassign_section ? 'block' : 'none';
+
+    // Clear existing content while preserving the structure
+    // Instead of manipulating text nodes, rebuild the content properly
+    const reassignSpan = reassignText.querySelector('span');
+    const reassignLink_ = reassignText.querySelector('#reassign-link');
+
+    if (reassignSpan) {
+      // reassignSpan.textContent = cfg.reassign_text || "To reassign the signer,";
+    }
+
+    if (reassignLink_) {
+      const linkSpan = reassignLink_.querySelector('span');
+      if (linkSpan) {
+        linkSpan.textContent = cfg.reassign_link_text || "Click here";
+      } else {
+        reassignLink_.textContent = cfg.reassign_link_text || "Click here";
+      }
+      setStyle('reassign-link', 'color', cfg.reassign_link_color);
+    }
+
+    setStyle('reassign-text', 'font-size', (cfg.reassign_font_size || 14) + 'px');
+    setStyle('reassign-text', 'font-family', cfg.reassign_font_family || "Montserrat, sans-serif");
+    setStyle('reassign-text', 'margin-top', (cfg.reassign_margin_top || 0) + 'px');
+    setStyle('reassign-text', 'margin-bottom', (cfg.reassign_margin_bottom || 0) + 'px');
+    setStyle('reassign-text', 'text-align', cfg.body_align || 'left');
+    setStyle('reassign-text', 'color', cfg.body_text_color || '#000000');
+  }
+
+
+  // Audit Trail Section - FIXED
+  const auditTrailText = doc.getElementById('audit-trail-text');
+  if (auditTrailText) {
+    auditTrailText.style.display = cfg.show_audit_trail_section ? 'block' : 'none';
+
+    const auditSpan = auditTrailText.querySelector('span:first-child');
+    const auditLink = auditTrailText.querySelector('#audit-trail-link');
+
+    if (auditSpan) {
+      // auditSpan.textContent = cfg.audit_trail_text || "To view the audit trail,";
+    }
+
+    if (auditLink) {
+      const linkSpan = auditLink.querySelector('span');
+      if (linkSpan) {
+        linkSpan.textContent = cfg.audit_trail_link_text || "Click here";
+      } else {
+        auditLink.textContent = cfg.audit_trail_link_text || "Click here";
+      }
+      setStyle('audit-trail-link', 'color', cfg.audit_trail_link_color);
+    }
+
+    setStyle('audit-trail-text', 'font-size', (cfg.audit_trail_font_size || 14) + 'px');
+    setStyle('audit-trail-text', 'font-family', cfg.audit_trail_font_family || "Montserrat, sans-serif");
+    setStyle('audit-trail-text', 'line-height', cfg.audit_trail_line_height || 3);
+    setStyle('audit-trail-text', 'text-align', cfg.body_align || 'left');
+    setStyle('audit-trail-text', 'color', cfg.body_text_color || '#000000');
+  }
+
+  // Transaction ID
+  const transactionId = doc.getElementById('transaction-id');
+  if (transactionId) {
+    transactionId.style.display = cfg.show_transaction_id ? 'block' : 'none';
+    setStyle('transaction-id', 'font-size', cfg.transaction_font_size + 'px');
+    setStyle('transaction-id', 'font-family', cfg.transaction_font_family);
+    setStyle('transaction-id', 'margin-top', cfg.transaction_margin_top + 'px');
+    setStyle('transaction-id', 'margin-bottom', cfg.transaction_margin_bottom + 'px');
+    setStyle('transaction-id', 'padding-top', cfg.transaction_padding_top + 'px');
+    // Apply body text color and alignment
+    setStyle('transaction-id', 'color', cfg.body_text_color);
+    setStyle('transaction-id', 'text-align', cfg.body_align);
+  }
+
+
+  // Regards
+  const regardsText = doc.getElementById('regards-text');
+  if (regardsText) {
+    regardsText.style.display = cfg.show_regards ? 'block' : 'none';
+    // regardsText.textContent = cfg.regards_text;
+    setStyle('regards-text', 'font-size', cfg.regards_font_size + 'px');
+    setStyle('regards-text', 'font-family', cfg.regards_font_family);
+    setStyle('regards-text', 'padding-top', cfg.regards_padding_top + 'px');
+    // Apply body text color and alignment
+    setStyle('regards-text', 'color', cfg.body_text_color);
+    setStyle('regards-text', 'text-align', cfg.body_align);
+  }
+
+  // Company Address Section - FIXED (update individual elements)
+  const companyAddress = doc.getElementById('company-address');
+  const companyInfoRow = doc.getElementById('company-info-row');
+
+  console.log(companyAddress, "companyAddress");
+
+  if (companyInfoRow) {
+    companyInfoRow.style.display = cfg.show_company_address ? '' : 'none';
+  }
+
+  if (companyAddress) {
+    companyAddress.style.display = cfg.show_company_address ? 'block' : 'none';
+
+    // Update individual span elements instead of replacing entire HTML
+    const companyNameSpan = doc.getElementById('company-name');
+    console.log("companyNameSpan", companyNameSpan)
+    const addressLine1Span = doc.getElementById('company-address-line1');
+    const addressLine2Span = doc.getElementById('company-address-line2');
+    const cityStateZipSpan = doc.getElementById('company-city-state-zip');
+    const phoneSpan = doc.getElementById('company-phone');
+    const phone2Span = doc.getElementById('company-phone2');
+    const websiteLink = doc.getElementById('company-website');
+
+    if (companyNameSpan) {
+      // companyNameSpan.textContent = cfg.company_name || "HIC Global Solutions";
+    }
+
+    if (addressLine1Span) {
+      // addressLine1Span.textContent = cfg.company_address_line1 || "Noida Sector 68";
+    }
+
+    if (addressLine2Span) {
+      // addressLine2Span.textContent = cfg.company_address_line2 || "";
+    }
+
+    if (cityStateZipSpan) {
+      // cityStateZipSpan.textContent = cfg.company_city_state_zip || "Noida, UP, 201301, India";
+    }
+
+    if (phoneSpan) {
+      // phoneSpan.textContent = cfg.company_phone || "+91 98765 43210";
+    }
+
+    if (phone2Span) {
+      // phone2Span.textContent = cfg.company_phone2 ? `, ${cfg.company_phone2}` : "";
+    }
+
+    if (websiteLink) {
+      const websiteSpan = websiteLink.querySelector('span');
+      if (websiteSpan) {
+        // websiteSpan.textContent = cfg.company_website_text || cfg.company_website || "https://www.google.com/";
+      }
+      // websiteLink.href = cfg.company_website || "https://www.google.com/";
+      websiteLink.style.color = cfg.company_link_color || "#0000EE";
+    }
+
+    // Apply styles to the container
+    if (cfg.company_address_bg_gradient) {
+      companyAddress.style.background = cfg.company_address_bg_gradient;
+    }
+    companyAddress.style.color = cfg.company_address_text_color || '#000000';
+    companyAddress.style.fontSize = (cfg.company_address_font_size || 14) + 'px';
+    companyAddress.style.fontFamily = cfg.company_address_font_family || "Montserrat, sans-serif";
+    companyAddress.style.lineHeight = cfg.company_address_line_height || 1.6;
+    companyAddress.style.padding = (cfg.company_address_padding || 18) + 'px';
+  }
+
+  // Footer - Use visibility: hidden instead of display: none
+  const footerCell = doc.getElementById('footer-text');
+
+  if (footerCell) {
+    // footerCell.textContent = cfg.footer_text;
+    setStyle('footer-text', 'color', cfg.footer_text_color);
+    setStyle('footer-text', 'background', cfg.footer_bg_color);
+    setStyle('footer-text', 'text-align', cfg.footer_align);
+    setStyle('footer-text', 'font-size', cfg.footer_font_size + 'px');
+    setStyle('footer-text', 'font-family', cfg.footer_font_family);
+    setStyle('footer-text', 'padding', cfg.footer_padding + 'px');
+    setStyle('footer-text', 'border-top', cfg.footer_border_top);
+    footerCell.setAttribute('align', cfg.footer_align);
+
+    // Use visibility to hide content but keep the space and border
+    if (!cfg.show_footer) {
+      footerCell.style.visibility = 'hidden';
+    } else {
+      footerCell.style.visibility = 'visible';
+    }
+  }
+
+  // Email Container
+  const emailContainer = doc.querySelector('.email-container');
+  if (emailContainer) {
+    emailContainer.style.maxWidth = cfg.email_container_max_width + 'px';
+    emailContainer.style.background = cfg.email_container_bg_color;
+  }
+
+  const bodyEl = doc.querySelector('body');
+  if (bodyEl) {
+    bodyEl.style.background = cfg.body_bg_color_outer;
+  }
+
+  let htmlString = '<!DOCTYPE html>\n' + doc.documentElement.outerHTML;
+  return htmlString;
+}
\ No newline at end of file
diff --git a/src/components/EmailTemplateEditorModules/EmailTemplateJson.js b/src/components/EmailTemplateEditorModules/EmailTemplateJson.js
new file mode 100644
index 0000000..744526f
--- /dev/null
+++ b/src/components/EmailTemplateEditorModules/EmailTemplateJson.js
@@ -0,0 +1,150 @@
+// ─── Default JSON Configuration ────────────────────────────────────────────────
+export const DEFAULT_CONFIG_JSON = {
+  // Top Bar
+  top_bar_bg_color: "#006CF0",
+  top_bar_align: "center",
+  top_bar_height: 5,
+  top_bar_gradient_end: "#34beff",
+
+  // Logo
+  logo_align: "left",
+  logo_bg_color: "#ffffff",
+  logo_padding_top: 15,
+  logo_padding_bottom: 15,
+  logo_padding_left: 15,
+  logo_padding_right: 15,
+  logo_max_width: 203,
+  logo_object_fit: "contain",
+
+  // Title
+  title_text: "Please Sign Documents",
+  title_text_color: "#000000",
+  title_bg_color: "#ffffff",
+  title_align: "center",
+  title_font_size: 32,
+  title_font_family: "Roboto, sans-serif",
+  title_margin_top: 20,
+  title_margin_bottom: 20,
+
+  // Body
+  body_bg_color: "#1891f70d",
+  body_padding_top: 18,
+  body_padding_bottom: 10,
+  body_padding_left: 20,
+  body_padding_right: 20,
+
+  // Sender Heading
+  sender_text: "Jai Pandey has sent Sign Made Easy Proposal for your signature",
+  sender_text_color: "#0d80f4",
+  sender_bg_color: "#1891f70d",
+  sender_font_size: 18,
+  sender_font_family: "Montserrat, sans-serif",
+  sender_margin_top: 0,
+  sender_margin_bottom: 0,
+
+  // Custom Message
+  show_custom_message: true,
+  custom_message_text: "HIC Global Solutions isn't just any Salesforce consulting company — we're a team of Salesforce and business experts passionate about delivering agile, creative solutions to meet your unique CRM needs.\n\nCustom message SR-08107",
+  custom_message_text_color: "#000000",
+  custom_message_font_size: 14,
+  custom_message_font_family: "Montserrat, sans-serif",
+  custom_message_margin_top: 20,
+  custom_message_text_align: "justify",
+  custom_message_line_height: 1.6,
+
+  // Instruction
+  show_instruction: true,
+  instruction_text: "Please click on the button below to start the signing process.",
+  instruction_text_color: "#000000",
+  instruction_font_size: 14,
+  instruction_font_family: "Montserrat, sans-serif",
+  instruction_margin_top: 20,
+  instruction_text_align: "justify",
+
+  // Button
+  show_button: true,
+  button_text: "View Document",
+  button_bg_color: "#0270f0",
+  button_text_color: "#ffffff",
+  button_align: "center",
+  button_padding_top: 11,
+  button_padding_bottom: 11,
+  button_padding_left: 20,
+  button_padding_right: 20,
+  button_radius: 10,
+  button_font_size: 16,
+  button_font_weight: "500",
+  button_font_family: "Montserrat, sans-serif",
+
+  // Reassign Section
+  show_reassign_section: true,
+  reassign_text: "To reassign the signer,",
+  reassign_link_text: "Click here",
+  reassign_link_color: "#0270f0",
+  reassign_text_color: "#000000",
+  reassign_font_size: 14,
+  reassign_font_family: "Montserrat, sans-serif",
+  reassign_margin_top: 0,
+  reassign_margin_bottom: 0,
+
+  // Audit Trail Section
+  show_audit_trail_section: true,
+  audit_trail_text: "To view the audit trail,",
+  audit_trail_link_text: "Click here",
+  audit_trail_link_color: "#0270f0",
+  audit_trail_text_color: "#000000",
+  audit_trail_font_size: 14,
+  audit_trail_font_family: "Montserrat, sans-serif",
+  audit_trail_line_height: 3,
+
+  // Transaction ID
+  show_transaction_id: true,
+  transaction_id_prefix: "Sign Made Easy Transaction Id:",
+  transaction_text_color: "#000000",
+  transaction_font_size: 14,
+  transaction_font_family: "Montserrat, sans-serif",
+  transaction_margin_top: 10,
+  transaction_margin_bottom: 10,
+  transaction_padding_top: 10,
+
+  // Regards
+  show_regards: true,
+  regards_text: "Regards,",
+  regards_text_color: "#000000",
+  regards_font_size: 14,
+  regards_font_family: "Montserrat, sans-serif",
+  regards_padding_top: 20,
+
+  // Company Address Section
+  show_company_address: true,
+  company_name: "HIC",
+  company_address_line1: "Noida Sector 68",
+  company_address_line2: "Noida Sector",
+  company_city_state_zip: "UP, Noida, 111002, India",
+  company_phone: "638787836764 7637864863",
+  company_website: "https://www.google.com/",
+  company_website_text: "https://www.google.com/",
+  company_address_bg_gradient: "linear-gradient(45deg, #006cf070, #34beff75)",
+  company_address_text_color: "#000000",
+  company_address_font_size: 14,
+  company_address_font_family: "Montserrat, sans-serif",
+  company_address_line_height: 1.6,
+  company_address_padding: 18,
+  company_link_color: "#0000EE",
+
+  // Footer
+  show_footer: true,
+  footer_text: "© 2026 Sign Made Easy. All Rights Reserved",
+  footer_text_color: "#000000",
+  footer_bg_color: "#ffffff",
+  footer_align: "right",
+  footer_font_size: 14,
+  footer_font_family: "Montserrat, sans-serif",
+  footer_padding: 10,
+  footer_border_top: "1px solid #57a8f2",
+
+  // Container
+  email_container_max_width: 700,
+  email_container_bg_color: "#ffffff",
+  body_bg_color_outer: "#f5f7fa",
+};
\ No newline at end of file
diff --git a/src/components/EmailTemplateEditorModules/HeaderEmailIcon.jsx b/src/components/EmailTemplateEditorModules/HeaderEmailIcon.jsx
new file mode 100644
index 0000000..d4e65f9
--- /dev/null
+++ b/src/components/EmailTemplateEditorModules/HeaderEmailIcon.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const HeaderEmailIcon = () => {
+  return (
+    <>
+    <svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 1000 1000" fill="#fff"><path d="m723 334 2 1a3 3 0 0 0 2-1l9-9 3-4 1-5a11 11 0 0 0-4-8l-12-12a12 12 0 0 0-8-4l-4 1a9 9 0 0 0-4 3l-10 9-1 2 1 2zM579 447v2l1 2 2 2h3l32-9 98-98 1-2-1-2-24-25-2-1a3 3 0 0 0-2 1l-98 98zm156 38V359l-4 4-43 44v79a135 135 0 0 1 47-1m-220-23a31 31 0 0 0-21-14h-13c-18 4-35 10-52 16-18 6-36 10-54 14a15 15 0 0 0-9 7 15 15 0 0 0-2 11 15 15 0 0 0 18 10c19-3 37-8 55-13l26-9 16-5 9-3 2 3 4 11a25 25 0 0 0 22 15c17 1 32-12 47-20 16-9 1-35-15-25l-22 13a33 33 0 0 1-7 2v-1a32 32 0 0 0-5-12zm51 186H263a16 16 0 0 1-16-16V390a47 47 0 0 0-47 47v211a47 47 0 0 0 47 47h355c-9-14-16-30-20-47h-17zM327 389.5v-13a15.7 15.7 0 0 1 15.7-15.7h266.4l47-47H327a47 47 0 0 0-47 47v211.6a47 47 0 0 0 47 47h252a133.3 133.3 0 0 1 8.5-47H343a15.7 15.7 0 0 1-15.7-15.7V389.5zm468 213.3c-4-1-9.3-1-13.6-1.7-1 0-1.7-1-1.7-1.7-1.7-5-4-10-6-14.4v-2.5c2.5-3.4 6-7.6 8.5-11 1.7-2.5 1.7-5-1-7.6l-15.3-15.3c-1-1-2.5-1.7-3.4-1.7s-2.5 1-3.4 1.7c-3.4 2.5-7.6 6-11 8.5-1 0-1 1-1 1h-1c-5-1.7-9.3-4-14.4-6-1 0-1.7-1-1.7-1.7-1-4-1-8.5-1.7-12.7 0-2.5-1-4-3.4-6-1-1-1.7-1-1.7-1h-22c-1.7 0-2.5 0-3.4 1-1.7 1.7-3.4 3.4-3.4 6 0 4-1 8.5-1.7 12.7 0 1-1 1.7-1.7 1.7-5 1.7-9.3 4-14.4 6h-1q-1 0-1.7-1c-3.4-2.5-7-6-11-8.5-1-1-1.7-1.7-3.4-1.7s-2.5 1-4 1.7l-15.3 15.3c-2.5 2.5-2.5 5-1 7.6 2.5 3.4 6 7 8.5 11 1 1 1 1.7 0 2.5-1.7 5-4 9.3-6 14.4 0 1-1 1.7-1.7 1.7-4 1-8.5 1-12.7 1.7a6.4 6.4 0 0 0-6 4v25.4a10 10 0 0 0 6 4c4 0 8.5 1 12.7 1.7 1 0 1.7 1 1.7 1.7 1.7 5 4 9.3 6 14.4 0 1 1 1.7 0 2.5-2.5 3.4-6 7.6-8.5 11-1.7 2.5-1.7 5 1 7.6l15.3 15.3c1.7 1.7 2.5 1.7 4 1.7 1 0 2.5-1 3.4-1.7 3.4-2.5 7-6 11-8.5 1 0 1-1 1.7-1h1c5 1.7 9.3 4 14.4 6 1 0 1.7 1 1.7 1.7 1 4 1 9.3 1.7 13.6 0 3.4 2.5 5 6 5h21c3.4 0 5-1.7 6-5 1-4 1-9.3 1.7-13.6 0-1 1-1.7 1.7-1.7 5-1.7 10-4 14.4-6h1s1 0 1 1c3.4 2.5 7.6 6 11 8.5 1 1 2.5 1.7 3.4 1.7 1.7 0 2.5-1 4-1.7l15.3-15.3c2.5-2.5 2.5-5 1-7.6-2.5-3.4-6-7-8.5-11 1 1 1-1.7 0-2.5 1.7-5 4-9.3 6-14.4 0-1 1-1.7 1.7-1.7 4-1 9.3-1 13.6-1.7 3.4 0 5-2.5 5-6v-21c0-4-1.7-6-5-7zm-83 51s-1 0 0 0c-19.5 0-34-15.3-34-34s15.3-34 34-34a34 34 0 0 1 34 34 35 35 0 0 1-34 34"/></svg>
+    </>
+  )
+}
+
diff --git a/src/components/FootertPrivacyPolicy.jsx b/src/components/FootertPrivacyPolicy.jsx
new file mode 100644
index 0000000..1ae4fc4
--- /dev/null
+++ b/src/components/FootertPrivacyPolicy.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Trans } from 'react-i18next'
+
+const FootertPrivacyPolicy = () => {
+    const handlePolicy = (app) => {
+        if (app === 'PP') {
+            window.location.href = 'https://signmadeasy.com/privacy-policy'
+        } else {
+            window.location.href = 'https://signmadeasy.com/reasonable-use-policy'
+        }
+    }
+    return (
+        <>
+            <footer className="relative bottom-0 text-center text-sm bg-white/80 backdrop-blur-sm py-3 z-50 mt-auto">
+                <p className="px-4 font-semibold text-xs text-gray-600">
+                    <Trans
+                        i18nKey="completion.footerText"
+                        components={[
+                            <span className="text-blue-600 hover:text-blue-700 hover:underline transition cursor-pointer" onClick={() => handlePolicy('PP')}></span>,
+                            <span className="text-blue-600 hover:text-blue-700 hover:underline transition cursor-pointer" onClick={() => handlePolicy('RUP')}></span>,
+                        ]}
+                    />
+                </p>
+            </footer>
+        </>
+    )
+}
+
+export default FootertPrivacyPolicy
\ No newline at end of file
diff --git a/src/components/IndividualFieldBadge.jsx b/src/components/IndividualFieldBadge.jsx
new file mode 100644
index 0000000..59f0e11
--- /dev/null
+++ b/src/components/IndividualFieldBadge.jsx
@@ -0,0 +1,178 @@
+import { ChevronLeft } from "lucide-react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { isRtlLanguage } from "../i18n";
+
+// Individual field badge component with click detection and position updates
+const IndividualFieldBadge = React.memo(
+    ({
+        field,
+        isFilled,
+        isSubmitBadge,
+        // isLastField,
+        isRequiredField = false, // Add this prop
+        handleSubmitClick,
+        handleNextClick,
+        handleFieldClick,
+        goToField,
+        fieldState,
+        lastActiveTab,
+        isBadgeClick = false,
+        badgeStyle,
+        setRadioFocusedOptionIndex,
+        totalRadioOptions
+    }) => {
+        console.log("Badge render - field:", field.id, {
+            isFilled,
+            isSubmitBadge,
+            isRequiredField,
+            fieldType: field.type,
+        });
+
+        const { t, i18n } = useTranslation();
+        const isRtl = isRtlLanguage(i18n.language);
+
+        const topValue = parseFloat(field?.top) || 0;
+        const leftValue = parseFloat(field?.left) || 0;
+
+        const getBadgeText = () => {
+            if (isSubmitBadge) return "Submit";
+            if (isFilled) return "Next";
+
+            // ✅ Radio: show "Select" instead of "Radio"
+            if (field.type === "radio") return "Select";
+
+            const fieldTypeName = field.type.charAt(0).toUpperCase() + field.type.slice(1);
+            return fieldTypeName;
+        };
+
+        const handleBadgeClick = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+
+            goToField?.(field.id);
+
+            if (isSubmitBadge) {
+                handleSubmitClick();
+                return;
+            }
+
+            if (field.type === "radio") {
+                if (isFilled) {
+                    handleNextClick?.();
+                    return;
+                }
+
+                // ✅ Advance to next option index (cycles back to 0)
+                const currentIndex = field._focusedOptionIndex ?? 0;
+                const nextIndex = (currentIndex + 1) % (totalRadioOptions ?? 1);
+                setRadioFocusedOptionIndex(nextIndex);
+                return;
+            }
+
+            if (!isFilled) {
+                // ✅ For signature/initial fields, only navigate — never call handleFieldClick
+                // with an empty value, as it would wipe out any previously set signature value.
+                if (["signature", "initial"].includes(field.type)) {
+                    return;
+                }
+
+                handleFieldClick?.(
+                    field.id,
+                    field.documentId || "",
+                    field.pageNumber || 1,
+                    field.type,
+                    fieldState?.[field.id]?.value || "",
+                    fieldState?.[field.id]?.activeTab || lastActiveTab || "",
+                    undefined, undefined, undefined,
+                    true
+                );
+                return;
+            }
+
+            handleNextClick?.();
+        };
+
+        const badgeText = getBadgeText();
+        if (!badgeText) return null;
+
+        // Determine border color and icon
+        const isCompletedState = isSubmitBadge || isFilled;
+        const showRequiredIndicator = !isFilled && isRequiredField;
+
+        return (
+            <div
+                onClick={handleBadgeClick}
+                className={`absolute bg-regal-blue z-[49] inline-flex items-center rounded-md font-semibold shadow-md border cursor-pointer transition-all duration-300 ease-in-out backdrop-blur-sm
+    ${isCompletedState
+                        ? "border-yellow-400"
+                        : isRequiredField
+                            ? "border-red-400"
+                            : "border-white/50"
+                    }
+    ${isBadgeClick ? "scale-105 ring-2 ring-yellow-400/50" : ""}
+  `}
+                style={{
+                    position: "absolute",
+                    ...badgeStyle,
+                    pointerEvents: "auto",
+                    transition: "all 0.2s ease",
+                    // ✅ RTL-aware clip path
+                    clipPath: isRtl
+                        ? "polygon(0% 0%, calc(100% - 16px) 0%, 100% 50%, calc(100% - 16px) 100%, 0% 100%)"
+                        : "polygon(16px 0%, 100% 0%, 100% 100%, 16px 100%, 0% 50%)",
+                    // ✅ RTL-aware padding
+                    paddingLeft: isRtl ? "8px" : "20px",
+                    paddingRight: isRtl ? "20px" : "8px",
+                    paddingTop: "9px",
+                    paddingBottom: "9px",
+                    // ✅ Prevent arrow distortion on short text like "Next"
+                    minWidth: isSubmitBadge ? "58px" : isFilled ? "44px" : "60px",
+                    // ✅ RTL direction for text
+                    direction: isRtl ? 'rtl' : 'ltr',
+                }}
+                data-field-id={field.id}
+                data-is-badge="true"
+                data-is-required={isRequiredField}
+            >
+                <div className={`
+    flex items-center gap-1 w-full
+    ${isRtl ? 'flex-row-reverse' : 'flex-row'}
+  `}>
+                    <span className="text-white text-[10px] leading-none whitespace-nowrap">
+                        {badgeText}
+                    </span>
+
+                    {/* Chevron for completed / submit states */}
+                    {isCompletedState && (
+                        <svg
+                            className={`
+          w-2.5 h-2.5 text-yellow-400 shrink-0 
+          ${isRtl ? 'rotate-180' : ''}
+          ${isRtl ? 'mr-auto' : 'ml-auto'}
+        `}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
+                    )}
+
+                    {/* Red asterisk for empty required fields */}
+                    {showRequiredIndicator && (
+                        <span className={`
+        text-red-300 text-[9px] leading-none shrink-0
+        ${isRtl ? 'mr-auto' : 'ml-auto'}
+      `}>
+                            *
+                        </span>
+                    )}
+                </div>
+            </div>
+        );
+    }
+);
+
+
+export default IndividualFieldBadge
\ No newline at end of file
diff --git a/src/components/LanguageDropdown.jsx b/src/components/LanguageDropdown.jsx
new file mode 100644
index 0000000..52d208c
--- /dev/null
+++ b/src/components/LanguageDropdown.jsx
@@ -0,0 +1,165 @@
+import { useState, useRef, useEffect, memo, useMemo } from "react";
+import { Globe, ChevronDown, Check } from "lucide-react";
+import { useDocStore } from "../store";
+import { languageSupport } from "../constant/language";
+import { changeLanguage } from "../services/changeLanguage";
+import { useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useLocalizedLabel } from "../hooks/useLocalizedLabel";
+import { isRtlLanguage } from "../i18n";
+import { updateHtmlLanguageAttributes } from "../services/languageUtils";
+
+const LanguageDropdown = memo(() => {
+  const { t, i18n } = useTranslation();
+  const location = useLocation();
+  const currentLanguage = useDocStore((state) => state.currentLanguage);
+  const setLanguage = useDocStore((state) => state.setLanguage);
+  const setLanguageLoading = useDocStore((state) => state.setLanguageLoading)
+  const setAuditLoading = useDocStore((s) => s.setAuditLoading);
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const { getLocalizedLabel } = useLocalizedLabel();
+
+  // Determine RTL based on current i18n language
+  const isRtl = isRtlLanguage(i18n.language);
+
+  // Create localized language list
+  const localizedLanguages = useMemo(() => {
+    return languageSupport.map(lang => ({
+      ...lang,
+      displayLabel: getLocalizedLabel(lang.value)
+    }));
+  }, [t, i18n.language]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleLanguageSelect = async (lang) => {
+    if (loading) return;
+    try {
+      setIsOpen(false);
+      setLoading(true);
+      // setLanguageLoading(true)
+      if (location.pathname === '/audit-trails-info') {
+        setAuditLoading(true);
+      }
+
+      const res = await changeLanguage(lang.value);
+
+      if (res?.status === 202) {
+        await setLanguage(lang);
+
+        // setIsOpen(false);
+        // updateHtmlLanguageAttributes(lang.value);
+      } else {
+        console.error("Unexpected status:", res?.status);
+      }
+    } catch (err) {
+      console.error("Failed to change language", err);
+    } finally {
+      setLoading(false);
+      if (location.pathname === '/audit-trails-info') {
+        setAuditLoading(false);
+      }
+      //  setLanguageLoading(false);
+    }
+  };
+
+  const currentDisplayLabel = getLocalizedLabel(currentLanguage.value);
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Main Button - Using logical properties */}
+      <button
+        onClick={() => !loading && setIsOpen(!isOpen)}
+        className={`
+          flex items-center gap-2 px-3 py-1.5 rounded-lg cursor-pointer
+          text-white font-medium text-sm transition-all duration-200 
+          hover:bg-white/10 active:scale-95 disabled:opacity-50 
+          ${isRtl ? 'flex-row-reverse' : 'flex-row'}
+        `}
+        disabled={loading}
+      >
+        <Globe size={16} className="text-white shrink-0" />
+        <span>{currentDisplayLabel}</span>
+        {loading ? (
+          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin shrink-0" />
+        ) : (
+          <ChevronDown
+            size={14}
+            className={`
+              shrink-0 transition-transform duration-200
+              ${isOpen ? 'rotate-180' : ''}
+            `}
+          />
+        )}
+      </button>
+
+      {/* Dropdown Menu - Using logical properties */}
+      {isOpen && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
+          <div
+            className={`
+              absolute top-full mt-2 w-56 bg-white rounded-lg shadow-xl z-50 py-2 
+              overflow-auto max-h-60
+              animate-in fade-in slide-in-from-top-2 duration-200
+              ${isRtl ? 'left-0' : 'right-0'}
+            `}
+          >
+            {localizedLanguages.map((lang) => {
+              const isCurrent = currentLanguage.value === lang.value;
+              const isLangRtl = isRtlLanguage(lang.value);
+
+              console.log("isLangRtl", isLangRtl)
+
+              return (
+                <button
+                  key={lang.value}
+                  onClick={() => handleLanguageSelect(lang)}
+                  disabled={loading}
+                  className={`
+                    w-full px-4 py-2.5 text-sm transition-all duration-200 cursor-pointer
+                    flex items-center justify-between group hover:bg-gray-50
+                    ${loading ? "opacity-50 cursor-not-allowed" : ""}
+                    ${isCurrent ? "bg-blue-50 text-blue-600" : "text-gray-700"}
+                   
+                    ${isRtl ? 'text-right' : 'text-left'}
+                  `}
+                >
+                  <div className={`
+                    flex items-center gap-3
+                  
+                  `}>
+                    <Globe
+                      size={14}
+                      className={`
+                        shrink-0
+                        ${isCurrent ? "text-blue-600" : "text-gray-400"}
+                      `}
+                    />
+                    <span>{lang.displayLabel}</span>
+                  </div>
+                  {isCurrent && (
+                    <Check size={16} className="text-blue-600 shrink-0" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+});
+
+export default LanguageDropdown;
\ No newline at end of file
diff --git a/src/components/MobileFieldBar.jsx b/src/components/MobileFieldBar.jsx
new file mode 100644
index 0000000..5be5e12
--- /dev/null
+++ b/src/components/MobileFieldBar.jsx
@@ -0,0 +1,181 @@
+import { useState } from "react";
+
+const MobileFieldBar = ({
+  currentField,
+  currentFieldIndex,
+  totalFields,
+  fieldState,
+  handleNextClick,
+  handleSubmitClick,
+  allRequiredFilled,
+  goToField,
+  inputFields,
+}) => {
+  const [showFieldList, setShowFieldList] = useState(false);
+
+  if (!currentField) return null;
+
+  const state = fieldState?.[currentField.id];
+  const isFilled = state?.value && state.value.toString().trim() !== "";
+  const isRequired = currentField.required;
+  const isLast = currentFieldIndex === totalFields - 1;
+
+  const fieldLabel =
+    currentField.label ||
+    currentField.placeholder ||
+    currentField.type?.charAt(0).toUpperCase() + currentField.type?.slice(1) ||
+    "Field";
+
+  return (
+    <>
+      {/* Field list drawer */}
+      {/* {showFieldList && (
+        <div
+          className="fixed inset-0 z-[60] bg-black/40 sm:hidden"
+          onClick={() => setShowFieldList(false)}
+        >
+          <div
+            className="absolute bottom-[72px] left-0 right-0 bg-white rounded-t-2xl max-h-[60vh] overflow-y-auto p-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <p className="text-xs font-semibold text-gray-500 mb-3 uppercase tracking-wide">
+              All Fields
+            </p>
+            {inputFields.map((field, idx) => {
+              const fs = fieldState?.[field.id];
+              const filled =
+                fs?.value && fs.value.toString().trim() !== "";
+              const label =
+                field.label ||
+                field.placeholder ||
+                field.type?.charAt(0).toUpperCase() +
+                  field.type?.slice(1) ||
+                `Field ${idx + 1}`;
+              return (
+                <button
+                  key={field.id}
+                  onClick={() => {
+                    goToField(field.id);
+                    setShowFieldList(false);
+                  }}
+                  className="w-full flex items-center justify-between py-2.5 border-b border-gray-100 text-left"
+                >
+                  <span className="flex items-center gap-2">
+                    <span
+                      className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                        filled
+                          ? "bg-green-500"
+                          : field.required
+                          ? "bg-red-400"
+                          : "bg-gray-300"
+                      }`}
+                    />
+                    <span className="text-sm text-gray-800 truncate max-w-[220px]">
+                      {label}
+                    </span>
+                  </span>
+                  {field.required && !filled && (
+                    <span className="text-[10px] text-red-500 font-medium flex-shrink-0">
+                      Required
+                    </span>
+                  )}
+                  {filled && (
+                    <span className="text-[10px] text-green-600 font-medium flex-shrink-0">
+                      Done
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )} */}
+
+      {/* Bottom bar */}
+      <div className="fixed bottom-0 left-0 right-0 z-50 sm:hidden bg-white border-t border-gray-200 shadow-lg">
+        <div className="flex justify-center gap-2 px-3 py-2">
+          {/* <button
+            onClick={() => setShowFieldList((v) => !v)}
+            className="flex-1 min-w-0 flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 text-left"
+          >
+            <span
+              className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                isFilled
+                  ? "bg-green-500"
+                  : isRequired
+                  ? "bg-red-400"
+                  : "bg-gray-300"
+              }`}
+            />
+            <span className="flex-1 min-w-0">
+              <span className="block text-[11px] text-gray-400 leading-none mb-0.5">
+                {currentFieldIndex + 1} / {totalFields}
+                {isRequired ? " · Required" : " · Optional"}
+              </span>
+              <span className="block text-sm font-medium text-gray-800 truncate">
+                {fieldLabel}
+              </span>
+            </span>
+          
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              className={`flex-shrink-0 transition-transform ${
+                showFieldList ? "rotate-180" : ""
+              }`}
+            >
+              <path
+                d="M2 4l4 4 4-4"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button> */}
+
+          {/* Next / Finish button */}
+          {allRequiredFilled ? (
+            <button
+              onClick={handleSubmitClick}
+              className="flex-shrink-0 bg-[#005AB5] text-white text-sm font-semibold px-4 py-2.5 rounded-xl"
+            >
+              Finish
+            </button>
+          ) : (
+            <button
+              onClick={handleNextClick}
+              disabled={isLast}
+              className={`flex-shrink-0 flex items-center gap-1 text-sm font-semibold px-4 py-2.5 rounded-xl ${
+                isLast
+                  ? "bg-gray-100 text-gray-400"
+                  : "bg-[#005AB5] text-white"
+              }`}
+            >
+              Next
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+              >
+                <path
+                  d="M5 3l4 4-4 4"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+        
+      </div>
+    </>
+  );
+};
+
+export default MobileFieldBar
\ No newline at end of file
diff --git a/src/components/QuestionnaireModal.jsx b/src/components/QuestionnaireModal.jsx
new file mode 100644
index 0000000..a076062
--- /dev/null
+++ b/src/components/QuestionnaireModal.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const QuestionnaireModal = () => {
+  return (
+    <dialog id="my_modal_3" className="modal">
+      <div className="modal-box">
+        <h3 className="font-bold text-lg">Hello!</h3>
+        <p className="py-4">Press ESC key or click the button below to close</p>
+        <div className="modal-action">
+          <form method="dialog">
+            {/* if there is a button in form, it will close the modal */}
+            <button className="btn">Close</button>
+          </form>
+        </div>
+      </div>
+    </dialog>
+  );
+};
+
+export default QuestionnaireModal;
diff --git a/src/components/ReassignModules/FormSkeleton.jsx b/src/components/ReassignModules/FormSkeleton.jsx
new file mode 100644
index 0000000..fe81142
--- /dev/null
+++ b/src/components/ReassignModules/FormSkeleton.jsx
@@ -0,0 +1,70 @@
+export const FormSkeleton = () => {
+    return (
+        <div className="h-screen flex flex-col overflow-hidden">
+            {/* Header Skeleton */}
+            <div className="flex-shrink-0 bg-regal-blue border-b border-white/10">
+                <div className="flex items-center justify-between px-4 py-2">
+
+                    {/* Logo Skeleton */}
+                    <div className="flex items-center gap-3">
+                        <div className="skeleton h-7 w-7 rounded-full bg-white/20"></div>
+                        <div className="hidden md:block skeleton h-6 w-32 bg-white/20"></div>
+                    </div>
+
+                    {/* Language Dropdown Skeleton */}
+                    <div className="flex items-center gap-2">
+                        <div className="skeleton h-8 w-32 rounded-lg bg-white/20"></div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Body Skeleton */}
+            <div className="flex-1 bg-gradient-to-br from-base-200 to-base-300">
+                <div className="flex items-start justify-center p-4 sm:p-6 lg:p-8 min-h-full">
+                    <div className="w-full max-w-2xl">
+
+                        {/* Card */}
+                        <div className="card bg-base-100 shadow-lg border border-base-200">
+                            <div className="card-body p-6 sm:p-8 space-y-5">
+
+                                {/* Row 1 */}
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+                                    {[1, 2].map((item) => (
+                                        <div key={item} className="space-y-2">
+                                            <div className="skeleton h-4 w-28"></div>
+                                            <div className="skeleton h-12 w-full rounded-xl"></div>
+                                        </div>
+                                    ))}
+                                </div>
+
+                                {/* Row 2 */}
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+                                    {[1, 2].map((item) => (
+                                        <div key={item} className="space-y-2">
+                                            <div className="skeleton h-4 w-24"></div>
+                                            <div className="skeleton h-12 w-full rounded-xl"></div>
+                                        </div>
+                                    ))}
+                                </div>
+
+                                {/* Textarea */}
+                                <div className="space-y-2">
+                                    <div className="skeleton h-4 w-40"></div>
+                                    <div className="skeleton h-20 w-full rounded-xl"></div>
+                                </div>
+
+                                {/* Buttons */}
+                                <div className="flex justify-end gap-3 pt-2">
+                                    <div className="skeleton h-12 w-24 rounded-xl"></div>
+                                    <div className="skeleton h-12 w-32 rounded-xl"></div>
+                                </div>
+
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ReassignModules/ReassignForm.jsx b/src/components/ReassignModules/ReassignForm.jsx
new file mode 100644
index 0000000..7ddded1
--- /dev/null
+++ b/src/components/ReassignModules/ReassignForm.jsx
@@ -0,0 +1,413 @@
+import { useEffect, useState } from 'react';
+import { Mail, User, Globe, MessageSquare, CheckCircle, AlertCircle } from 'lucide-react';
+import SMELogo from "../../assets/sme-logo.png";
+import SMELogoIcon from '../../assets/SMELogo.png';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useDocStore } from '../../store';
+import api from '../../api/Axios';
+import { languageSupport } from '../../constant/language';
+import { useTranslation } from "react-i18next";
+import { clearSession } from '../../services/sessionService';
+import ReusableModal from "../../modals/ReusableModal";
+import LanguageDropdown from "../LanguageDropdown";
+import { FormSkeleton } from './FormSkeleton';
+import Loader from '../../helper/Loader';
+
+const ReassignForm = () => {
+    const { t } = useTranslation();
+    const [searchParams] = useSearchParams();
+    const languageLoading = useDocStore((state) => state.languageLoading);
+    const docFormJson = useDocStore((state) => state.formJson);
+    const currentLanguage = useDocStore((state) => state.currentLanguage);
+    const setToast = useDocStore((state) => state.setToast);
+    const logoUrl = useDocStore((state) => state.logoUrl);
+    const isProUser = useDocStore((state) => state.isProUser);
+    const isLoaded = useDocStore((state) => state.isLoaded);
+    const navigate = useNavigate()
+    const location = useLocation();
+    const [isLoading, setIsLoading] = useState(false);
+    const [showSuccessModal, setShowSuccessModal] = useState(false);
+    const [submittedName, setSubmittedName] = useState('');
+
+
+    const uuid = searchParams.get("uuid");
+
+    console.log("currentLanguage", currentLanguage)
+
+    const [formData, setFormData] = useState({
+        firstName: '',
+        lastName: '',
+        email: '',
+        language: currentLanguage.value,
+        message: ''
+    });
+
+    const [errors, setErrors] = useState({});
+    const [isSubmitted, setIsSubmitted] = useState(false);
+
+    // console.log("window.history.length" , window.history.length)
+    console.log("location.state", location.state)
+
+
+    useEffect(() => {
+        setFormData(prev => ({
+            ...prev,
+            language: currentLanguage?.value || '',
+        }));
+    }, [currentLanguage]);
+
+    const validateForm = () => {
+        const newErrors = {};
+
+        if (!formData.firstName.trim()) {
+            newErrors.firstName = "reassign.errors.firstNameRequired";
+        } else if (formData.firstName.length < 1) {
+            newErrors.firstName = "reassign.errors.firstNameMin";
+        }
+
+        if (!formData.lastName.trim()) {
+            newErrors.lastName = "reassign.errors.lastNameRequired";
+        } else if (formData.lastName.length < 1) {
+            newErrors.lastName = "reassign.errors.lastNameMin";
+        }
+
+        if (!formData.email.trim()) {
+            newErrors.email = "reassign.errors.emailRequired";
+        } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+            newErrors.email = "reassign.errors.emailInvalid";
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: value
+        }));
+        // Clear error for this field when user starts typing
+        if (errors[name]) {
+            setErrors(prev => ({
+                ...prev,
+                [name]: ''
+            }));
+        }
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+
+        if (validateForm()) {
+            setIsLoading(true);
+
+            // Format the data to match the required JSON structure
+            const reassignData = {
+                toName: `${formData.firstName} ${formData.lastName}`.trim(),
+                toEmail: formData.email,
+                message: formData.message || "",
+                language: formData.language, // Now directly uses 'en', 'es', 'fr', etc.
+                firstName: formData.firstName,
+                lastName: formData.lastName,
+                internal: false
+            };
+
+            // console.log(reassignData)
+            // return
+
+            try {
+                const response = await api.post("/sign/reassign", reassignData);
+                console.log('API Response:', response.data);
+
+                // Check for 201 status
+                if (response.status === 201) {
+                    setSubmittedName(`${formData.firstName} ${formData.lastName}`);
+                    setShowSuccessModal(true);
+
+                    // setToast(
+                    //     t("reassign.successMessage", {
+                    //         name: `${formData.firstName} ${formData.lastName}`
+                    //     }),
+                    //     "success"
+                    // );
+
+                    // clearSession();
+                    // Optional: Reset form after modal is closed
+                    // setFormData({ ... });
+                }
+
+            } catch (error) {
+                console.error('Error submitting form:', error);
+                setToast(
+                    t("reassign.submitError"),
+                    "error"
+                );
+            } finally {
+                setIsLoading(false);
+            }
+        }
+    };
+
+    const handleModalClose = () => {
+        setShowSuccessModal(false);
+        // Optional: Navigate or reset form here
+        // navigate(`/sign?uuid=${uuid}`, { replace: true });
+    };
+
+
+    const handleCancel = () => {
+        // navigate(`/sign?uuid=${uuid}`, { replace: true });
+        // window.location.href = `/sign?uuid=${uuid}`;
+        // console.log("window.history.length" , window.history.length)
+        // window.history.back()
+
+        if (location.state?.fromSign) {
+            navigate(`/sign?uuid=${uuid}`, { replace: true });
+        } else {
+            window.location.href = `/sign?uuid=${uuid}`;
+        }
+    }
+
+    if (!isLoaded) return <FormSkeleton />;
+    console.log("languageLoading", languageLoading)
+    if (languageLoading)  return <Loader transparentbg={false} />
+
+    return (
+        <>
+            <div className='h-screen flex flex-col overflow-hidden'>
+                {/* Top Bar - Fixed at top */}
+                <div className="flex-shrink-0 bg-regal-blue border-b border-white/10">
+                    <div className="flex items-center justify-between px-4 py-3">
+
+                        {/* LEFT: Logo */}
+                        <div className="flex items-center gap-2">
+
+                            <img
+                                src={logoUrl ?? docFormJson?.logo_url ?? SMELogoIcon}
+                                className="h-7 w-auto object-contain block md:hidden"
+                                alt="SME Logo"
+                                onError={(e) => {
+                                    e.currentTarget.src = SMELogoIcon;
+                                }}
+                            />
+                            <img
+                                src={logoUrl ?? docFormJson?.logo_url ?? SMELogo}
+                                className="h-7 w-auto object-contain hidden md:block"
+                                alt="SME Logo"
+                                onError={(e) => {
+                                    e.currentTarget.src = SMELogo;
+                                }}
+                            />
+                        </div>
+
+                        {/* RIGHT: Language Dropdown */}
+                        <div className="flex items-center">
+                            {isProUser && <LanguageDropdown />}
+                        </div>
+
+                    </div>
+                </div>
+
+                {/* Scrollable Content Area */}
+                <div className="flex-1 overflow-y-auto bg-gradient-to-br from-base-200 to-base-300">
+                    <div className="flex items-start justify-center p-4 sm:p-6 lg:p-8 min-h-full">
+                        <div className="w-full max-w-2xl">
+                            {/* Card Container */}
+                            <div className="card bg-base-100 shadow-lg border border-base-200">
+                                <div className="card-body p-6 sm:p-8">
+                                    {/* Success Alert */}
+
+                                    <form onSubmit={handleSubmit} className="space-y-5">
+                                        {/* First Name & Last Name - Responsive Grid */}
+                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+                                            {/* First Name Field */}
+                                            <div className="form-control w-full">
+                                                <label className="label">
+                                                    <span className="label-text font-semibold flex items-center gap-2">
+                                                        <User size={16} />
+                                                        {t("reassign.fields.firstName")}
+                                                        <span className="text-error">*</span>
+                                                    </span>
+                                                </label>
+                                                <input
+                                                    type="text"
+                                                    name="firstName"
+                                                    value={formData.firstName}
+                                                    onChange={handleChange}
+                                                    placeholder={t("reassign.placeholders.firstName")}
+                                                    className={`input input-bordered w-full ${errors.firstName ? 'input-error' : ''}`}
+                                                />
+                                                {errors.firstName && (
+                                                    <label className="label">
+                                                        <span className="label-text-alt text-error flex items-center gap-1">
+                                                            <AlertCircle size={12} />
+                                                            {t(errors.firstName)}
+                                                        </span>
+                                                    </label>
+                                                )}
+                                            </div>
+
+                                            {/* Last Name Field */}
+                                            <div className="form-control w-full">
+                                                <label className="label">
+                                                    <span className="label-text font-semibold flex items-center gap-2">
+                                                        <User size={16} />
+                                                        {t("reassign.fields.lastName")}
+                                                        <span className="text-error">*</span>
+                                                    </span>
+                                                </label>
+                                                <input
+                                                    type="text"
+                                                    name="lastName"
+                                                    value={formData.lastName}
+                                                    onChange={handleChange}
+                                                    placeholder={t("reassign.placeholders.lastName")}
+                                                    className={`input input-bordered w-full ${errors.lastName ? 'input-error' : ''}`}
+                                                />
+                                                {errors.lastName && (
+                                                    <label className="label">
+                                                        <span className="label-text-alt text-error flex items-center gap-1">
+                                                            <AlertCircle size={12} />
+                                                            {t(errors.lastName)}
+                                                        </span>
+                                                    </label>
+                                                )}
+                                            </div>
+                                        </div>
+
+                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+                                            {/* Email Field */}
+                                            <div className="form-control w-full">
+                                                <label className="label">
+                                                    <span className="label-text font-semibold flex items-center gap-2">
+                                                        <Mail size={16} />
+                                                        {t("reassign.fields.email")}
+                                                        <span className="text-error">*</span>
+                                                    </span>
+                                                </label>
+                                                <input
+                                                    type="email"
+                                                    name="email"
+                                                    value={formData.email}
+                                                    onChange={handleChange}
+                                                    placeholder={t("reassign.placeholders.email")}
+                                                    className={`input input-bordered w-full ${errors.email ? 'input-error' : ''}`}
+                                                />
+                                                {errors.email && (
+                                                    <label className="label">
+                                                        <span className="label-text-alt text-error flex items-center gap-1">
+                                                            <AlertCircle size={12} />
+                                                            {t(errors.email)}
+                                                        </span>
+                                                    </label>
+                                                )}
+                                            </div>
+
+                                            {/* Language Select */}
+                                            <div className="form-control w-full">
+                                                <label className="label">
+                                                    <span className="label-text font-semibold flex items-center gap-2">
+                                                        <Globe size={16} />
+                                                        {t("reassign.fields.language")}
+                                                    </span>
+                                                </label>
+                                                <select
+                                                    name="language"
+                                                    value={formData.language}
+                                                    onChange={handleChange}
+                                                    className="select select-bordered w-full "
+                                                    disabled={!isProUser}
+                                                >
+                                                    {languageSupport.map((option) => (
+                                                        <option key={option.value} value={option.value}>
+                                                            {option.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                            </div>
+
+                                        </div>
+
+                                        {/* Optional Message */}
+                                        <div className="form-control w-full flex flex-col">
+                                            <label className="label">
+                                                <span className="label-text font-semibold flex items-center gap-2">
+                                                    <MessageSquare size={16} />
+                                                    {t("reassign.fields.message")}
+                                                </span>
+                                            </label>
+                                            <textarea
+                                                name="message"
+                                                value={formData.message}
+                                                onChange={handleChange}
+                                                className="textarea textarea-bordered h-28 w-full resize-none"
+                                                placeholder={t("reassign.placeholders.message")}
+                                            ></textarea>
+                                        </div>
+
+                                        {/* Buttons */}
+                                        <div className="form-control mt-3 flex gap-2 justify-end">
+                                            <button
+                                                type="button"
+                                                disabled={isLoading}
+                                                onClick={handleCancel}
+                                                className="btn  transition-all duration-300 shadow-md hover:shadow-lg"
+                                            >
+                                                {t("reassign.buttons.cancel")}
+                                            </button>
+                                            <button
+                                                type="submit"
+                                                disabled={isLoading}
+                                                className={`btn bg-regal-blue text-white  hover:from-primary/90 hover:to-primary transition-all duration-300 shadow-md hover:shadow-lg ${isLoading ? 'loading' : ''}`}
+                                            >
+                                                {isLoading ? t("reassign.buttons.submitting") : t("reassign.buttons.submit")}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Custom Animation Styles */}
+                <style jsx>{`
+            @keyframes slideDown {
+                from {
+                    opacity: 0;
+                    transform: translateY(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            .animate-slideDown {
+                animation: slideDown 0.3s ease-out;
+            }
+        `}</style>
+
+
+                <ReusableModal
+                    isOpen={showSuccessModal}
+                    onClose={handleModalClose}
+                    title={t("reassign.title")}
+                    subtitle={t("reassign.successSubtitle") || "Document has been successfully reassigned"}
+                    iconBgColor="from-green-400 to-emerald-500"
+                    message={{
+                        title: t("reassign.successTitle") || "Thank You!",
+                        description: t("reassign.successMessage") || "The document has been successfully reassigned to the new signer."
+                    }}
+                    noteMessage=""
+                    buttonText={t("reassign.buttons.continue") || "Continue"}
+                    showCloseButton={true}
+                    closeOnOutsideClick={false}
+                />
+            </div>
+        </>
+    );
+};
+
+export default ReassignForm;
\ No newline at end of file
diff --git a/src/components/ReassignModules/ReassignInfoMessgae.jsx b/src/components/ReassignModules/ReassignInfoMessgae.jsx
new file mode 100644
index 0000000..602b149
--- /dev/null
+++ b/src/components/ReassignModules/ReassignInfoMessgae.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import bgComplete from "../../assets/bgComplete.png";
+import { LockKeyhole } from 'lucide-react';
+
+const ReassignInfoMessgae = () => {
+  return (
+    <>
+    <div
+      className="flex flex-col items-center justify-center min-h-screen text-center p-6"
+      style={{
+        backgroundImage: `url(${bgComplete})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      <h1 className="text-5xl font-semibold text-gray-800 mb-3 flex gap-3 items-center">
+        <LockKeyhole className="w-10 h-10 text-red-500" />
+        <span>Document Reassigned</span>
+      </h1>
+
+      <p className="text-gray-600 max-w-md font-semibold mb-6">
+       There was an error processing your request. The current recipient is not active or valid for this context.
+      </p>
+    </div>
+    </>
+  )
+}
+
+export default ReassignInfoMessgae
\ No newline at end of file
diff --git a/src/components/WritebackFields/WritebackInputField.jsx b/src/components/WritebackFields/WritebackInputField.jsx
new file mode 100644
index 0000000..22d3fb5
--- /dev/null
+++ b/src/components/WritebackFields/WritebackInputField.jsx
@@ -0,0 +1,1228 @@
+import React, { useState, useEffect, useRef } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+// ── Validators per wbtType ──────────────────────────────────────────────────
+const validators = {
+    INTEGER: (v) => {
+        if (v === "" || v === null) return null;
+        return Number.isInteger(Number(v)) && !isNaN(Number(v)) && !v.includes(".")
+            ? null
+            : "Must be a whole number (e.g. 42)";
+    },
+    DOUBLE: (v) => {
+        if (v === "" || v === null) return null;
+        return !isNaN(Number(v)) && v.trim() !== ""
+            ? null
+            : "Must be a decimal number (e.g. 3.14)";
+    },
+    EMAIL: (v) => {
+        if (v === "" || v === null) return null;
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
+            ? null
+            : "Invalid email address";
+    },
+    PHONE: (v) => {
+        if (v === "" || v === null) return null;
+        return /^[+\d\s\-().]{7,20}$/.test(v)
+            ? null
+            : "Invalid phone number";
+    },
+    STRING: () => null,
+    PICKLIST: () => null,
+    BOOLEAN: () => null,
+    ENCRYPTEDSTRING: () => null,
+    LOOKUP: () => null,
+};
+
+const validate = (wbtType, value, field) => {
+    const fn = validators[wbtType] || (() => null);
+    const typeError = fn(String(value ?? ""));
+    if (typeError) return typeError;
+
+    // ✅ Dynamic wbtFieldSize check
+    const skipSizeCheck = ["BOOLEAN", "PICKLIST", "LOOKUP"].includes(wbtType);
+    const maxSize = parseInt(field?.wbtFieldSize);
+    if (!skipSizeCheck && maxSize > 0 && String(value ?? "").length > maxSize) {
+        return `Max ${maxSize} characters allowed`;
+    }
+
+    return null;
+};
+
+// ───────────────────────────────────────────────────────────────────────────
+
+const WritebackInputField = React.memo(({
+    field,
+    value,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    goToField,
+    visibilityMap
+}) => {
+    const wbtType = field.wbtType || "STRING";
+    const Icon = FieldIcons[field.type];
+
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const iconSize = Math.min(
+        parseFloat(responsiveStyle.width),
+        parseFloat(responsiveStyle.height)
+    ) * 0.5;
+
+    const [localValue, setLocalValue] = useState(value ?? field.wbtFieldValue ?? "");
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [validationError, setValidationError] = useState(null);
+    const [touched, setTouched] = useState(false);
+    const textareaRef = useRef()
+    const [debounceTimer, setDebounceTimer] = useState(null);
+
+
+    //  FIX 1: Moved PICKLIST hooks to top level (Rules of Hooks)
+    const [isPicklistOpen, setIsPicklistOpen] = useState(false);
+    const dropdownRef = useRef(null);
+
+    //  FIX 2: Track last externally synced value to force updates
+    const lastExternalValue = useRef(value ?? field.wbtFieldValue ?? "");
+
+    const clearError = () => {
+        const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+        if (wrapper) wrapper.removeAttribute("data-error");
+    };
+
+    const setError = () => {
+        const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+        if (wrapper) wrapper.setAttribute("data-error", "true");
+    };
+
+    useEffect(() => {
+        if (wbtType !== "PICKLIST") return;
+        const handler = (e) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setIsPicklistOpen(false);
+                setIsFocused(false); // FIX: ensure focus clears on outside click
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [wbtType]);
+
+    // Inside WritebackInputField, add this effect
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.detail.fieldId === field.id && e.detail.hasError) {
+                setTouched(true);  // ← this triggers the validation effect above
+            }
+        };
+        document.addEventListener('field-validation', handler);
+        return () => document.removeEventListener('field-validation', handler);
+    }, [field.id]);
+
+    // Add this at the top of your component (inside the component function, after useState declarations)
+    useEffect(() => {
+        // Sync validation error with data-error attribute on mount and when validationError changes
+        if (validationError) {
+            setError();
+        } else {
+            clearError();
+        }
+    }, [validationError, field.id]);
+
+    // Handle required field validation when localValue changes
+    useEffect(() => {
+        if (!isFocused && touched) {  // ← add `&& touched`
+            const hasValue = localValue && localValue.trim() !== "" && localValue !== "";
+            if (field.required && !hasValue) {
+                const error = field?.error || "This field is required";
+                setValidationError(error);
+                setError();
+            } else if (hasValue) {
+                const error = validate(wbtType, localValue, field);
+                setValidationError(error);
+                if (error) setError();
+                else clearError();
+            } else {
+                clearError();
+                setValidationError(null);
+            }
+        }
+    }, [localValue, isFocused, field.required, touched]);  // ← add touched to deps
+
+
+    // Use a ref to track what we last received so we only sync on real changes
+    useEffect(() => {
+        const newValue = value ?? field.wbtFieldValue ?? "";
+
+        // Always update if external value differs from what we last received
+        // Don't use isFocused guard — it blocks picklist sync
+        if (newValue !== lastExternalValue.current) {
+            lastExternalValue.current = newValue;
+            setLocalValue(newValue);
+            if (newValue && newValue.trim() !== "") {
+                setValidationError(null);
+                clearError();
+            }
+        }
+    }, [value, field.wbtFieldValue]);
+
+
+    // Add this with your other useEffects
+    useEffect(() => {
+        return () => {
+            if (debounceTimer) clearTimeout(debounceTimer);
+        };
+    }, [debounceTimer]);
+
+    if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+
+
+    const handleFocus = () => {
+        setIsFocused(true);
+        clearError();
+        if (isRequired) goToField?.(field.id);
+    };
+
+    const handleBlur = () => {
+        setIsFocused(false);
+        setTouched(true);
+        // Re-validate on blur
+        const hasValue = localValue && localValue.trim() && localValue !== "";
+
+        if (field.required && !hasValue) {
+            const error = field?.error || "This field is required";
+            setValidationError(error);
+            setError();
+        } else if (hasValue) {
+            const error = validate(wbtType, localValue, field);
+            setValidationError(error);
+            if (error) {
+                setError();
+            } else {
+                clearError();
+            }
+        } else {
+            clearError();
+            setValidationError(null);
+        }
+    };
+
+    const handleTextareaChange = (e) => {
+        let newValue = e.target.value;
+        const textarea = textareaRef.current;
+
+        // --- Enforce wbtFieldSize max length (hard slice) ---
+        const maxSize = parseInt(field?.wbtFieldSize);
+        if (maxSize > 0 && newValue.length > maxSize) {
+            newValue = newValue.slice(0, maxSize);
+        }
+
+        // --- Overflow detection: measure BEFORE accepting, always revert DOM ---
+        if (textarea) {
+            const previousValue = localValue;
+
+            // Only block when adding text, allow deletions always
+            if (newValue.length > previousValue.length) {
+                const prevScrollTop = textarea.scrollTop;
+
+                // Save original overflow and temporarily allow scroll to measure correctly
+                const originalOverflow = textarea.style.overflow;
+                textarea.style.overflow = "hidden";
+
+                // Measure with new value
+                textarea.value = newValue;
+                const wouldOverflow = textarea.scrollHeight > textarea.clientHeight;
+
+                // Always revert DOM — React owns the value via state
+                textarea.value = previousValue;
+                textarea.style.overflow = originalOverflow;
+                textarea.scrollTop = prevScrollTop;
+
+                if (wouldOverflow) {
+                    return; // Hard stop before any state update
+                }
+            }
+        }
+
+        // --- Update local state ---
+        setLocalValue(newValue);
+        lastExternalValue.current = newValue;
+
+        // --- Debounced validation + global push ---
+        if (debounceTimer) clearTimeout(debounceTimer);
+
+        const timer = setTimeout(() => {
+            const typeError = validate(wbtType, newValue, field);
+
+            if (typeError && newValue !== "") {
+                setValidationError(typeError);
+                setError();
+            } else {
+                setValidationError("");
+                clearError();
+            }
+
+            handleFieldClick?.(
+                field.id,
+                field.documentId,
+                field.pageNumber,
+                field.type,
+                newValue,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                false,
+                undefined,
+                !typeError,
+            );
+        }, 400);
+
+        setDebounceTimer(timer);
+
+        // Immediate push (non-validated)
+        handleFieldClick?.(field.id, field.documentId, field.pageNumber, field.type, newValue);
+    };
+
+    const handleChange = (rawVal) => {
+        const maxSize = parseInt(field?.wbtFieldSize);
+        const skipSizeCheck = ["BOOLEAN", "PICKLIST", "LOOKUP"].includes(wbtType);
+
+        // For DOUBLE and INTEGER, also validate numeric range/precision if needed
+        const numericMaxSize = maxSize; // This represents max digits allowed
+
+        // If wbtFieldSize exists and value exceeds it for number inputs
+        let sizeError = null;
+
+        if (!skipSizeCheck && maxSize > 0) {
+            if (wbtType === "INTEGER" || wbtType === "DOUBLE") {
+                // For numbers, check the total digit length (excluding decimal point)
+                const numericStr = String(rawVal).replace(/\./g, '');
+                if (numericStr.length > maxSize) {
+                    sizeError = `Max ${maxSize} digits allowed`;
+                }
+            } else {
+                // For string types, check character length
+                if (String(rawVal).length > maxSize) {
+                    sizeError = `Max ${maxSize} characters allowed`;
+                }
+            }
+        }
+
+        setLocalValue(rawVal);
+        lastExternalValue.current = rawVal;
+        const typeError = validate(wbtType, rawVal, field);
+        const error = typeError || sizeError;
+        setValidationError(error);
+
+        if (error) {
+            setError();
+            return;
+        }
+
+        clearError();
+
+        // Valid — push to global state
+        handleFieldClick?.(
+            field.id,
+            field.documentId,
+            field.pageNumber,
+            field.type,
+            rawVal,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            false,
+            undefined,
+            true,
+        );
+    };
+
+    const handleBooleanChange = (e) => {
+        const val = e.target.checked ? "true" : "false";
+        setLocalValue(val);
+        clearError();
+        if (isRequired) {
+            goToField?.(field.id);
+        }
+        handleFieldClick?.(
+            field.id, field.documentId, field.pageNumber,
+            field.type, val,
+            undefined, undefined, undefined, undefined, false, undefined, true
+        );
+    };
+
+    const isRequired = field.required;
+    const showTooltip = isFocused || isHovered || validationError;
+    const hasError = !!validationError;
+
+    // Check if field has any value
+    const hasAnyValue = () => {
+        return !!(localValue && localValue.trim() && localValue !== "");
+    };
+
+
+    // ── Active state — mirrors TextInputField's fieldState check ─────────────
+    // fieldState is set by the badge/navigation system when it scrolls to a field.
+    // The CSS rule `.field-wrapper[data-active="true"] .text-input` uses this
+    // to paint the blue active border (overrides even the red error border).
+    const isActive =
+        fieldState?.update &&
+        fieldState?.documentId === field.documentId &&
+        fieldState?.pageNumber === field.pageNumber &&
+        fieldState?.id === field.id;
+
+    // ── Font styling via getFontProps (same as TextInputField) ────────────────
+    const appliedFontSize = parseFloat(responsiveStyle.fontSize) || parseFloat(field.fontSize) || fontSize || 12;
+    const appliedFontColor = fontProps.color || "#000000";
+    const appliedFontFamily = fontProps.fontFamily || "inherit";
+    const appliedFontWeight = fontProps.fontWeight || "400";
+    const appliedFontStyle = fontProps.fontStyle || "normal";
+    const appliedTextDecoration = fontProps.textDecoration || "none";
+
+    // Shared text style object (mirrors TextInputField's textStyle)
+    const textStyle = {
+        fontFamily: appliedFontFamily,
+        fontWeight: appliedFontWeight,
+        fontStyle: appliedFontStyle,
+        textDecoration: appliedTextDecoration,
+        color: appliedFontColor,
+    };
+
+    // Responsive tooltip sizes
+    const baseFontSize = appliedFontSize;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.5);
+
+    const labelText = field.label || field.value || wbtType;
+
+    // Custom border styles based on focus, hover, error states, and readOnly
+    const getBorderStyle = () => {
+        // Error state
+        if (hasError) {
+            return {
+                border: "1.5px solid #dc2626",
+                boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+                backgroundColor: hasAnyValue() ? "transparent" : "#FEF2F2",
+            };
+        }
+
+        // Focus state
+        if (isFocused && !field.readOnly) {
+            return {
+                border: "1.5px solid #005AB5",
+                boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+                backgroundColor: hasAnyValue() ? "transparent" : "#EDF6FF",
+            };
+        }
+
+        // Hover state
+        if (isHovered && !field.readOnly) {
+            return {
+                border: "1px dashed #005AB5",
+                boxShadow: "none",
+                backgroundColor: hasAnyValue() ? "transparent" : "#EDF6FF",
+            };
+        }
+
+        // Read-only state
+        if (field.readOnly) {
+            return {
+                border: "1px solid #e2e8f0",
+                boxShadow: "none",
+                backgroundColor: "#f7fafc",
+            };
+        }
+
+        // When field has a value (not focused, not hovered, no error)
+        if (hasAnyValue() && !isFocused && !hasError) {
+            return {
+                border: "1px dashed #7ab8f5",  // Show dashed border for fields with value
+                boxShadow: "none",
+                backgroundColor: "transparent",
+            };
+        }
+
+        // Default state (empty field, not focused, not hovered)
+        return {
+            border: "1px dashed #7ab8f5",
+            boxShadow: "none",
+            backgroundColor: hasAnyValue() ? "transparent" : "#EDF6FF",
+        };
+    };
+
+    const borderStyle = getBorderStyle();
+
+    const wrapperStyle = {
+        width: "100%",
+        height: "100%",
+        ...borderStyle,
+        display: "flex",
+        alignItems: "center",
+        overflow: "hidden",
+        transition: "border 0.15s ease, box-shadow 0.2s ease",
+        boxSizing: "border-box",
+        position: "relative",
+        fontSize: `${appliedFontSize}px`,
+        ...textStyle,
+    };
+
+    const inputBaseStyle = {
+        ...textStyle,
+        fontSize: `${appliedFontSize}px`,
+        color: hasError ? "#dc2626" : appliedFontColor,
+        border: "none",
+        outline: "none",
+        width: "100%",
+        height: "100%",
+        backgroundColor: "transparent",
+        padding: "0 2px",
+        boxSizing: "border-box",
+    };
+
+    const iconEl = !hasAnyValue() && Icon ? (
+        <Icon style={{
+            width: `${iconSize}px`,
+            height: `${iconSize}px`,
+            opacity: 0.45,
+            flexShrink: 0,
+            marginLeft: "2px",
+        }} />
+    ) : null;
+
+    // Tooltip content
+    const renderTooltip = () => (
+        <div 
+        style={{
+            position: "absolute",
+            bottom: `calc(100% + ${tooltipBottom}px)`,
+            left: 0,
+            whiteSpace: "nowrap",
+            pointerEvents: "none",
+            zIndex: 50,
+        }}>
+            <span style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: hasError ? "#FEF2F2" : "#fff",
+                border: hasError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                color: hasError ? "#dc2626" : "#374151",
+            }}>
+                {hasError ? (
+                    <span style={{ fontWeight: 500 }}>{validationError}</span>
+                ) : (
+                    <>
+                        <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                            {isRequired ? "Required" : "Optional"}
+                        </span>
+                        <span style={{ color: "#d1d5db" }}>·</span>
+                        <span>{labelText}</span>
+                        {hasAnyValue() && (
+                            <>
+                                <span style={{ color: "#d1d5db" }}>·</span>
+                                <span
+                                    style={{
+                                        color: appliedFontColor,
+                                        fontSize: `${tooltipFontSize * 0.9}px`,
+                                        maxWidth: "150px",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                    }}
+                                >
+                                    {/* {localValue} */}
+                                </span>
+                            </>
+                        )}
+                        {field.wbtFieldSize && !["BOOLEAN", "PICKLIST", "LOOKUP"].includes(wbtType) && (
+                            <>
+                                <span style={{ color: "#d1d5db" }}>·</span>
+                                <span style={{ color: "#9ca3af", fontSize: `${tooltipFontSize * 0.85}px` }}>
+                                    Max {field.wbtFieldSize} chars
+                                </span>
+                            </>
+                        )}
+                    </>
+                )}
+            </span>
+        </div>
+    );
+
+    // BOOLEAN — special layout
+    if (wbtType === "BOOLEAN") {
+        const checkSize = Math.min(
+            parseFloat(responsiveStyle.width),
+            parseFloat(responsiveStyle.height)
+        ) * 0.7;
+
+        return (
+            <div
+                className="field-wrapper"
+                data-field-id={field.id}
+                data-active={isActive ? "true" : undefined}
+                style={{
+                    position: "absolute",
+                    top: responsiveStyle.top,
+                    left: responsiveStyle.left,
+                    width: responsiveStyle.width,
+                    height: responsiveStyle.height,
+                    zIndex: showTooltip ? 50 : 10,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+            >
+                {showTooltip && renderTooltip()}
+                <input
+                    type="checkbox"
+                    checked={localValue === "true" || localValue === true}
+                    onChange={handleBooleanChange}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    style={{
+                        width: `${checkSize}px`,
+                        height: `${checkSize}px`,
+                        cursor: field.readOnly ? "default" : "pointer",
+                        accentColor: "#005AB5",
+                        margin: 0,
+                    }}
+                    disabled={field.readOnly}
+                />
+            </div>
+        );
+    }
+
+    // All other types
+    const renderInput = () => {
+        switch (wbtType) {
+            case "PICKLIST": {
+                // ✅ Using top-level state — no hooks inside switch
+                const selectedLabel = (field.option || []).find(o => o.value === localValue)?.label || "";
+                const fieldHeight = parseFloat(responsiveStyle.height) || 28;
+                const optionFontSize = Math.max(10, Math.min(13, appliedFontSize * 1.1));
+
+                return (
+                    <div
+                        ref={dropdownRef}
+                        className="text-input dragout"
+                        data-id={field.id}
+                        data-page-number={field.pageNumber}
+                        data-document-id={field.documentId}
+                        data-type={field.type}
+                        dir="ltr"
+                        style={{
+                            width: "100%", height: "100%",
+                            ...borderStyle,
+                            overflow: "visible", position: "relative",
+                            transition: "border 0.15s ease, box-shadow 0.2s ease",
+                        }}
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={() => setIsHovered(false)}
+                        onBlur={(e) => {
+                            // ✅ FIX 5: Only blur if focus leaves the entire dropdown
+                            if (!dropdownRef.current?.contains(e.relatedTarget)) {
+                                setIsPicklistOpen(false);
+                                setIsFocused(false); // ✅ explicitly clear focus
+                                handleBlur();
+                            }
+                        }}
+                    >
+                        <div
+                            onClick={() => {
+                                if (!field.readOnly) {
+                                    setIsPicklistOpen(o => !o);
+                                    setIsFocused(true); // ✅ set focus on open
+                                    if (isRequired) goToField?.(field.id);
+                                }
+                            }}
+                            style={{
+                                width: "100%", height: "100%",
+                                display: "flex", alignItems: "center",
+                                cursor: field.readOnly ? "default" : "pointer",
+                                padding: "0 4px", boxSizing: "border-box",
+                                userSelect: "none", gap: "3px",
+                            }}
+                        >
+                            {!hasAnyValue() && iconEl}
+                            <span style={{
+                                flex: 1,
+                                fontSize: `${appliedFontSize}px`,
+                                fontFamily: appliedFontFamily,
+                                fontWeight: appliedFontWeight,
+                                fontStyle: appliedFontStyle,
+                                color: hasAnyValue() ? appliedFontColor : "rgba(0,0,0,0.35)",
+                                overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
+                            }}>
+                                {selectedLabel || ""}
+                            </span>
+                            {!field.readOnly && (
+                                <svg
+                                    style={{
+                                        flexShrink: 0, opacity: 0.5,
+                                        transition: "transform 0.2s ease",
+                                        transform: isPicklistOpen ? "rotate(180deg)" : "rotate(0deg)",
+                                    }}
+                                    width={Math.max(7, appliedFontSize * 0.75)}
+                                    height={Math.max(7, appliedFontSize * 0.75)}
+                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                >
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                                </svg>
+                            )}
+                        </div>
+
+                        {isPicklistOpen && !field.readOnly && (
+                            <div style={{
+                                position: "absolute", top: "calc(100% + 3px)", left: 0,
+                                minWidth: "100%", maxWidth: "220px",
+                                backgroundColor: "#fff", border: "1px solid #e2e8f0",
+                                borderRadius: "4px", boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                                zIndex: 100, overflow: "hidden",
+                                maxHeight: "160px", overflowY: "auto",
+                            }}>
+                                <div
+                                    onMouseDown={(e) => {
+                                        e.preventDefault();
+                                        handleChange("");
+                                        setIsPicklistOpen(false);
+                                        setIsFocused(false); // ✅ FIX 6: clear focus after selection
+                                    }}
+                                    style={{
+                                        padding: `${Math.max(3, fieldHeight * 0.18)}px 8px`,
+                                        fontSize: `${optionFontSize}px`, color: "#9ca3af",
+                                        cursor: "pointer", borderBottom: "1px solid #f1f5f9",
+                                        backgroundColor: !hasAnyValue() ? "#f8fafc" : "transparent",
+                                        transition: "background 0.12s",
+                                    }}
+                                    onMouseEnter={e => e.currentTarget.style.backgroundColor = "#f1f5f9"}
+                                    onMouseLeave={e => e.currentTarget.style.backgroundColor = !hasAnyValue() ? "#f8fafc" : "transparent"}
+                                >
+                                    --None--
+                                </div>
+
+                                {(field.option || []).map((opt) => {
+                                    const isSelected = localValue === opt.value;
+                                    return (
+                                        <div
+                                            key={opt.value}
+                                            onMouseDown={(e) => {
+                                                e.preventDefault();
+                                                handleChange(opt.value);
+                                                setIsPicklistOpen(false);
+                                                setIsFocused(false); // ✅ FIX 6: clear focus after selection
+                                            }}
+                                            style={{
+                                                padding: `${Math.max(3, fieldHeight * 0.18)}px 8px`,
+                                                fontSize: `${optionFontSize}px`,
+                                                color: isSelected ? "#005AB5" : "#374151",
+                                                fontWeight: isSelected ? 600 : 400,
+                                                cursor: "pointer",
+                                                backgroundColor: isSelected ? "#EDF6FF" : "transparent",
+                                                display: "flex", alignItems: "center",
+                                                justifyContent: "space-between", gap: "6px",
+                                                transition: "background 0.12s", whiteSpace: "nowrap",
+                                            }}
+                                            onMouseEnter={e => { if (!isSelected) e.currentTarget.style.backgroundColor = "#f8fafc"; }}
+                                            onMouseLeave={e => { if (!isSelected) e.currentTarget.style.backgroundColor = "transparent"; }}
+                                        >
+                                            <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{opt.label}</span>
+                                            {isSelected && (
+                                                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#005AB5" style={{ flexShrink: 0 }}>
+                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                                                </svg>
+                                            )}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        )}
+                    </div>
+                );
+            }
+
+            case "DOUBLE":
+            case "INTEGER":
+
+                return (
+                    <div
+                        className="text-input dragout"
+                        data-id={field.id}
+                        data-page-number={field.pageNumber}
+                        data-document-id={field.documentId}
+                        data-type={field.type}
+                        dir="ltr"
+                        style={wrapperStyle}>
+                        {iconEl}
+                        <input
+                            type="number"
+                            value={localValue}
+                            onChange={(e) => {
+                                let newValue = e.target.value;
+                                const maxSize = parseInt(field?.wbtFieldSize);
+
+                                // For numbers, check digit length (excluding decimal point)
+                                if (maxSize > 0 && wbtType === "INTEGER") {
+                                    // For INTEGER, just check total digits
+                                    if (newValue.replace(/^-/, '').length > maxSize) {
+                                        return; // Don't allow more digits
+                                    }
+                                } else if (maxSize > 0 && wbtType === "DOUBLE") {
+                                    // For DOUBLE, check digits excluding decimal point
+                                    const digitsOnly = newValue.replace(/\./g, '').replace(/^-/, '');
+                                    if (digitsOnly.length > maxSize) {
+                                        return; // Don't allow more digits
+                                    }
+                                }
+
+                                handleChange(newValue);
+                            }}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            step={wbtType === "DOUBLE" ? "any" : "1"}
+                            style={inputBaseStyle}
+                            disabled={field.readOnly}
+                            readOnly={field.readOnly}
+                            placeholder={field.placeholder || ""}
+                            dir="ltr"
+                        />
+                    </div>
+                );
+
+            case "EMAIL":
+                return (
+                    <div
+                        className="text-input dragout"
+                        data-id={field.id}
+                        data-page-number={field.pageNumber}
+                        data-document-id={field.documentId}
+                        data-type={field.type}
+                        dir="ltr"
+                        style={wrapperStyle}>
+                        {iconEl}
+                        <input
+                            type="email"
+                            value={localValue}
+                            onChange={(e) => handleChange(e.target.value)}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            style={inputBaseStyle}
+                            disabled={field.readOnly}
+                            readOnly={field.readOnly}
+                            placeholder={field.placeholder || ""}
+                            dir="ltr"
+                        />
+                    </div>
+                );
+
+            case "PHONE":
+                return (
+                    <div
+                        className="text-input dragout"
+                        data-id={field.id}
+                        data-page-number={field.pageNumber}
+                        data-document-id={field.documentId}
+                        data-type={field.type}
+                        dir="ltr"
+                        style={wrapperStyle}>
+                        {iconEl}
+                        <input
+                            type="tel"
+                            value={localValue}
+                            onChange={(e) => handleChange(e.target.value)}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            style={inputBaseStyle}
+                            disabled={field.readOnly}
+                            readOnly={field.readOnly}
+                            placeholder={field.placeholder || ""}
+                            dir="ltr"
+                        />
+                    </div>
+                );
+
+            case "ENCRYPTEDSTRING": {
+                const maskChar = field.mask || "*";
+                const maskType = field.maskType || "all";
+
+                // Helper function to show last 4 characters visible (based on actual user input)
+                const showLastFour = (val, showOriginal = false) => {
+                    if (!val || val.trim() === "") return "";
+                    if (showOriginal) return val;
+                    if (val.length <= 4) return val;
+                    const visiblePart = val.slice(-4);
+                    const hiddenCount = val.length - 4;
+                    return maskChar.repeat(hiddenCount) + visiblePart;
+                };
+
+                // Helper function to hide all characters (completely masked)
+                const hideAll = (val, showOriginal = false) => {
+                    if (!val || val.trim() === "") return "";
+                    if (showOriginal) return val;
+                    return maskChar.repeat(val.length);
+                };
+
+                // Format SIN: XXX-XXX-XXX with last 4 visible (show only up to 9 chars in display)
+                const formatSIN = (val, showOriginal = false) => {
+                    const cleaned = val.replace(/-/g, '');
+                    if (showOriginal) return cleaned;
+
+                    // Show last 4 actual characters entered
+                    const visiblePart = cleaned.slice(-3);
+                    const hiddenCount = Math.max(0, cleaned.length - 4);
+                    let masked = maskChar.repeat(hiddenCount) + visiblePart;
+
+                    // Truncate display to SIN format (max 9 chars)
+                    if (masked.length > 9) {
+                        masked = masked.slice(-9);
+                    }
+
+                    // Apply SIN formatting with dashes
+                    if (masked.length <= 3) return masked;
+                    if (masked.length <= 6) return `${masked.slice(0, 3)}-${masked.slice(3)}`;
+                    return `${masked.slice(0, 3)}-${masked.slice(3, 6)}-${masked.slice(6, 9)}`;
+                };
+
+                // Format SSN: XXX-XX-XXXX with last 4 visible (show only up to 9 chars in display)
+                const formatSSN = (val, showOriginal = false) => {
+                    const cleaned = val.replace(/-/g, '');
+                    if (showOriginal) return cleaned;
+
+                    // Show last 4 actual characters entered
+                    const visiblePart = cleaned.slice(-4);
+                    const hiddenCount = Math.max(0, cleaned.length - 4);
+                    let masked = maskChar.repeat(hiddenCount) + visiblePart;
+
+                    // Truncate display to SSN format (max 9 chars)
+                    if (masked.length > 9) {
+                        masked = masked.slice(-9);
+                    }
+
+                    // Apply SSN formatting with dashes
+                    if (masked.length <= 3) return masked;
+                    if (masked.length <= 5) return `${masked.slice(0, 3)}-${masked.slice(3)}`;
+                    return `${masked.slice(0, 3)}-${masked.slice(3, 5)}-${masked.slice(5, 9)}`;
+                };
+
+                // Format Credit Card: XXXX-XXXX-XXXX-XXXX with last 4 visible (show only 16 chars in display)
+                const formatCreditCard = (val, showOriginal = false) => {
+                    const cleaned = val.replace(/-/g, '');
+                    if (showOriginal) return cleaned;
+
+                    // Show last 4 actual characters entered
+                    const visiblePart = cleaned.slice(-4);
+                    const hiddenCount = Math.max(0, cleaned.length - 4);
+                    let masked = maskChar.repeat(hiddenCount) + visiblePart;
+
+                    // Truncate display to credit card format (max 16 chars)
+                    if (masked.length > 16) {
+                        masked = masked.slice(-16);
+                    }
+
+                    // Apply credit card formatting with dashes (4 groups of 4)
+                    const groups = [];
+                    for (let i = 0; i < masked.length; i += 4) {
+                        groups.push(masked.slice(i, i + 4));
+                    }
+                    return groups.join('-');
+                };
+
+                // Format NINO: XX-XX-XX-XX-X with ALL characters hidden (show only up to 9 chars in display)
+                const formatNINO = (val, showOriginal = false) => {
+                    const cleaned = val.replace(/-/g, '').toUpperCase();
+                    if (showOriginal) return cleaned;
+
+                    // Hide ALL characters - no visible last four
+                    let masked = maskChar.repeat(cleaned.length);
+
+                    // Truncate display to NINO format (max 9 chars)
+                    if (masked.length > 9) {
+                        masked = masked.slice(-9);
+                    }
+
+                    // Apply NINO formatting with dashes
+                    if (masked.length <= 2) return masked;
+                    if (masked.length <= 4) return `${masked.slice(0, 2)}-${masked.slice(2)}`;
+                    if (masked.length <= 6) return `${masked.slice(0, 2)}-${masked.slice(2, 4)}-${masked.slice(4)}`;
+                    if (masked.length <= 8) return `${masked.slice(0, 2)}-${masked.slice(2, 4)}-${masked.slice(4, 6)}-${masked.slice(6)}`;
+                    return `${masked.slice(0, 2)}-${masked.slice(2, 4)}-${masked.slice(4, 6)}-${masked.slice(6, 8)}-${masked.slice(8, 9)}`;
+                };
+
+                // Format Last Four: Show only last 4 characters visible (no truncation)
+                const formatLastFour = (val, showOriginal = false) => {
+                    if (!val || val.trim() === "") return "";
+                    if (showOriginal) return val;
+                    if (val.length <= 4) return val;
+                    const visiblePart = val.slice(-4);
+                    const hiddenCount = val.length - 4;
+                    return maskChar.repeat(hiddenCount) + visiblePart;
+                };
+
+                // Format based on maskType
+                const getFormattedMaskedValue = (val, isFocusedMode = false) => {
+                    if (!val || val.trim() === "") return "";
+
+                    switch (maskType) {
+                        case "sin":
+                            return formatSIN(val, isFocusedMode);
+                        case "ssn":
+                            return formatSSN(val, isFocusedMode);
+                        case "creditCard":
+                            return formatCreditCard(val, isFocusedMode);
+                        case "nino":
+                            return formatNINO(val, isFocusedMode);
+                        case "lastFour":
+                            return formatLastFour(val, isFocusedMode);
+                        case "all":
+                        default:
+                            // For "all" mask type, show NOTHING visible (completely masked)
+                            if (isFocusedMode) return val;
+                            return hideAll(val, isFocusedMode);
+                    }
+                };
+
+                // Check if the field is pre-masked (loaded with masked data)
+                const isPreMasked = field.wbtFieldValue &&
+                    field.wbtFieldValue.length > 0 &&
+                    [...field.wbtFieldValue].every((c) => c === maskChar);
+
+                // Determine display value
+                let displayValue = localValue;
+                if (!isFocused) {
+                    if (isPreMasked) {
+                        displayValue = getFormattedMaskedValue(localValue, false);
+                    } else {
+                        displayValue = getFormattedMaskedValue(localValue, false);
+                    }
+                } else {
+                    // When focused, show the actual value (unmasked)
+                    displayValue = localValue;
+                }
+
+                // Handle change with masking for different types
+                const handleEncryptedChange = (rawVal) => {
+                    let processedValue = rawVal;
+
+                    // Remove formatting characters (dashes) for internal storage
+                    switch (maskType) {
+                        case "sin":
+                        case "ssn":
+                        case "creditCard":
+                        case "nino":
+                            processedValue = rawVal.replace(/-/g, '');
+                            if (maskType === "nino") {
+                                processedValue = processedValue.toUpperCase();
+                            }
+                            break;
+                        case "lastFour":
+                        case "all":
+                        default:
+                            processedValue = rawVal;
+                            break;
+                    }
+
+                    handleChange(processedValue);
+                };
+
+                return (
+                    <div className="text-input dragout"
+                        data-id={field.id}
+                        data-page-number={field.pageNumber}
+                        data-document-id={field.documentId}
+                        data-type={field.type}
+                        dir="ltr"
+                        style={wrapperStyle}>
+                        {iconEl}
+                        <input
+                            type="text"
+                            value={displayValue}
+                            onChange={(e) => {
+                                if (isFocused && !field.readOnly) {
+                                    handleEncryptedChange(e.target.value);
+                                }
+                            }}
+                            onFocus={(e) => {
+                                handleFocus();
+                                const len = e.target.value.length;
+                                requestAnimationFrame(() => {
+                                    e.target.setSelectionRange(len, len);
+                                });
+                            }}
+                            onBlur={handleBlur}
+                            autoComplete="off"
+                            disabled={field.readOnly}
+                            readOnly={field.readOnly}
+                            style={{
+                                ...inputBaseStyle,
+                                letterSpacing: isFocused ? "normal" : "0.2em",
+                            }}
+                            placeholder={field.placeholder || ""}
+                            dir="ltr"
+                        />
+                    </div>
+                );
+            }
+
+            case "LOOKUP":
+                return (
+                    <div className="text-input dragout"
+                        data-id={field.id}
+                        data-page-number={field.pageNumber}
+                        data-document-id={field.documentId}
+                        data-type={field.type}
+                        dir="ltr"
+                        style={wrapperStyle}>
+                        {iconEl}
+                        <svg style={{ flexShrink: 0, opacity: 0.4, marginLeft: "2px" }}
+                            width={Math.max(8, appliedFontSize * 0.9)}
+                            height={Math.max(8, appliedFontSize * 0.9)}
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="#005AB5">
+                            <circle cx="11" cy="11" r="8" strokeWidth={2} />
+                            <path d="M21 21l-4.35-4.35" strokeWidth={2} strokeLinecap="round" />
+                        </svg>
+                        <input
+                            type="text"
+                            value={localValue}
+                            onChange={(e) => handleChange(e.target.value)}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            style={inputBaseStyle}
+                            disabled={field.readOnly}
+                            readOnly={field.readOnly}
+                            placeholder={field.placeholder || ""}
+                            dir="ltr"
+                        />
+                    </div>
+                );
+
+            case "TEXTAREA":
+                const textareaStyle = {
+                    ...textStyle,
+                    fontSize: `${appliedFontSize}px`,
+                    color: hasError ? "#dc2626" : appliedFontColor,
+                    border: "none",
+                    outline: "none",
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "transparent",
+                    boxSizing: "border-box",
+                    resize: "none",
+                    overflow: "hidden", // scrollHeight grows beyond clientHeight when content overflows
+                    display: "block",
+                    // padding: "2px 4px",
+                    lineHeight: "1.3",
+                    wordWrap: "break-word",
+                    wordBreak: "break-word",
+                    overflowWrap: "break-word",
+                    whiteSpace: "pre-wrap",
+                    verticalAlign: "top",
+                };
+
+                return (
+                    <>
+                        <div
+                            className="text-input dragout"
+                            data-id={field.id}
+                            data-page-number={field.pageNumber}
+                            data-document-id={field.documentId}
+                            data-type={field.type}
+                            dir="ltr"
+                            style={{
+                                ...wrapperStyle,
+                                margin: 0,
+                                padding: 0,
+                                display: "flex",
+                                alignItems: "flex-start",
+                                justifyContent: "flex-start",
+                                overflow: "hidden",
+                                transition: "border 0.15s ease, box-shadow 0.2s ease",
+                                boxSizing: "border-box",
+                                position: "relative",
+                            }}
+                        >
+                            {iconEl}
+                            <textarea
+                                ref={textareaRef}
+                                value={localValue}
+                                onChange={handleTextareaChange}
+                                onFocus={handleFocus}
+                                onBlur={handleBlur}
+                                style={textareaStyle}
+                                disabled={field.readOnly}
+                                readOnly={field.readOnly}
+                                placeholder={field.placeholder || ""}
+                                dir="ltr"
+                            />
+                        </div>
+                    </>
+                );
+
+            default: // STRING
+                const maxLength = parseInt(field.wbtFieldSize) || 255;
+                return (
+                    <div className="text-input dragout"
+                        data-id={field.id}
+                        data-page-number={field.pageNumber}
+                        data-document-id={field.documentId}
+                        data-type={field.type}
+                        dir="ltr"
+                        style={wrapperStyle}>
+                        {iconEl}
+                        <input
+                            type="text"
+                            value={localValue}
+                            onChange={(e) => handleChange(e.target.value)}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            maxLength={maxLength}
+                            style={inputBaseStyle}
+                            disabled={field.readOnly}
+                            readOnly={field.readOnly}
+                            placeholder={field.placeholder || ""}
+                            dir="ltr"
+                        />
+                    </div>
+                );
+        }
+    };
+
+    return (
+        <div
+            className="field-wrapper"
+            data-field-id={field.id}
+            data-error={validationError ? "true" : undefined} // Also set data-error directly on the div
+            data-active={isActive ? "true" : undefined}
+            style={{
+                position: "absolute",
+                ...responsiveStyle,
+                ...textStyle,
+                fontSize: `${appliedFontSize}px`,
+                zIndex: showTooltip ? 50 : 10,
+            }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {showTooltip && renderTooltip()}
+            {renderInput()}
+        </div>
+    );
+});
+
+export default WritebackInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/AttachmentInputField.jsx b/src/components/inputFields/AttachmentInputField.jsx
new file mode 100644
index 0000000..e809df3
--- /dev/null
+++ b/src/components/inputFields/AttachmentInputField.jsx
@@ -0,0 +1,343 @@
+import React, { useMemo, useState } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import AttachmentModal from "../../modals/AttachmentModal";
+
+const AttachmentInputField = React.memo(
+  ({
+    field,
+    responsiveStyle,
+    handleFieldClick,
+    fieldState,
+    lastActiveTab,
+    goToField,
+    transaction,
+  }) => {
+    const Icon = FieldIcons[field.type];
+    const [showModal, setShowModal] = useState(false);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+
+    // 🔹 Get current field state for THIS specific field only
+    const currentFieldState = fieldState[field.id] || {};
+    const displayValue = currentFieldState.value || "";
+    const contentDocumentId = currentFieldState.link || "";
+    const isRequired = field.required;
+
+    // 🔹 Prepare existing file object for modal (if this field has a file)
+    const existingFile = useMemo(() => {
+      if (displayValue && contentDocumentId) {
+        return {
+          FileName: displayValue,
+          ContentDocumentId: contentDocumentId,
+        };
+      }
+      return null;
+    }, [displayValue, contentDocumentId]);
+
+    const clearError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.removeAttribute("data-error");
+    };
+
+    const setError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.setAttribute("data-error", "true");
+    };
+
+    const handleClick = () => {
+      if (isProcessing) return;
+
+      setIsFocused(true);
+
+      // ── Clear error highlight when user clicks the field ──
+      clearError();
+      if (isRequired) {
+        goToField?.(field.id);
+      }
+
+      setShowModal(true);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+
+      // ── Validate on blur - set error if required and empty ──
+      if (field.required && !displayValue) {
+        setError();
+      } else {
+        clearError();
+      }
+    };
+
+    // 🔹 Called when file uploaded successfully
+    const handleAttachmentSave = (uploadedFile) => {
+      setIsProcessing(true);
+
+      // Only update THIS specific field
+      handleFieldClick(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        "attachment",
+        uploadedFile.FileName,
+        fieldState[field.id]?.activeTab || lastActiveTab,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        uploadedFile.ContentDocumentId
+      );
+
+      // Clear error after successful upload
+      clearError();
+
+      // setShowModal(false);
+      setTimeout(() => setIsProcessing(false), 100);
+    };
+
+    // 🔹 Handle delete from modal
+    const handleAttachmentDelete = () => {
+      setIsProcessing(true);
+
+      // Clear only THIS specific field
+      handleFieldClick(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        "attachment",
+        "",
+        "",
+        fieldState[field.id]?.activeTab || lastActiveTab
+      );
+
+      // Clear error after delete
+      clearError();
+
+      setTimeout(() => setIsProcessing(false), 100);
+    };
+
+    const hasValue = Boolean(displayValue);
+    const showTooltip = isHovered;
+    const isActive = !!fieldState[field.id]?.active;
+
+
+    const baseFontSize = parseFloat(responsiveStyle.fontSize) || 12;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : "Attachment";
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.5;
+
+    // Check if field has error
+    const hasError = () => {
+      if (typeof document !== 'undefined') {
+        const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+        return wrapper?.hasAttribute('data-error');
+      }
+      return false;
+    };
+
+    // Custom border styles based on focus, hover, and error states
+    const getBorderStyle = () => {
+      // If field has value and is not focused and not hovered, return transparent border
+      // if (hasValue && !isFocused && !isHovered) {
+      //   return {
+      //     border: "1px solid transparent",
+      //     boxShadow: "none",
+      //     backgroundColor: "transparent",
+      //   };
+      // }
+
+      // Error state
+      if (hasError()) {
+        return {
+          border: "1.5px solid #dc2626",
+          boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+          backgroundColor: hasValue ? "transparent" : "#FEF2F2",
+        };
+      }
+
+      // Focus state
+      if (isFocused) {
+        return {
+          border: "1.5px solid #005AB5",
+          boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+          backgroundColor: hasValue ? "transparent" : "#EDF6FF",
+        };
+      }
+
+      // Hover state
+      if (isHovered) {
+        return {
+          border: "1px dashed #005AB5",
+          boxShadow: "none",
+          backgroundColor: hasValue ? "transparent" : "#EDF6FF",
+        };
+      }
+
+      // Default state (empty field)
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: hasValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    const borderStyle = getBorderStyle();
+
+    return (
+      <>
+        <div
+          className="field-wrapper"
+          data-field-id={field.id}
+          data-active={isActive ? "true" : undefined}
+          style={{
+            position: "absolute",
+            ...responsiveStyle,
+            zIndex: showTooltip ? 50 : 10,
+            overflow: "visible",
+          }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          onBlur={handleBlur}
+          tabIndex={0}
+        >
+          {/* {showTooltip && ( */}
+            <div
+              style={{
+                position: "absolute",
+                bottom: `calc(100% + ${tooltipBottom}px)`,
+                left: 0,
+                whiteSpace: "nowrap",
+                pointerEvents: "none",
+                zIndex: 99,
+              }}
+            >
+              <span
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: `${tooltipGap}px`,
+                  fontSize: `${tooltipFontSize}px`,
+                  fontWeight: 500,
+                  padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                  borderRadius: "3px",
+                  backgroundColor: "#fff",
+                  border: "1px solid #e2e8f0",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                  color: "#374151",
+                }}
+              >
+                <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                  {isRequired ? "Required" : "Optional"}
+                </span>
+                <span style={{ color: "#d1d5db" }}>·</span>
+                <span>{labelText}</span>
+              </span>
+            </div>
+          {/* )} */}
+          <div
+            className="attachment dragout text-input cursor-pointer"
+            data-id={field.id}
+            data-page-number={field.pageNumber}
+            data-document-id={field.documentId}
+            data-type={field.type}
+            style={{
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              transition: "border 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease",
+              boxSizing: "border-box",
+              ...borderStyle,
+              borderRadius: "2px",
+              padding: "0 8px",
+              cursor: "pointer",
+               direction: "ltr",
+            }}
+            onClick={handleClick}
+          >
+            {isProcessing ? (
+              <span style={{ fontSize: `${baseFontSize}px`, color: "#666" }}>
+                Processing...
+              </span>
+            ) : hasValue ? (
+              <span
+                style={{
+                  fontSize: `${baseFontSize}px`,
+                  color: "#000000",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 52 52"
+                  style={{
+                    color: "#005AB5", width: `${iconSize}px`,
+                    height: `${iconSize}px`, flexShrink: 0
+                  }}
+                >
+                  <g>
+                    <path
+                      fill="currentColor"
+                      d="M17.6,36.7c0.6,0.6,1.5,0.5,2.1,0l10-10c0.7-0.7,1.9-0.8,2.8,0c0.9,0.8,0.8,2.2,0,3L20.2,41.8
+        c-2.7,2.7-7.2,2.7-9.9,0l-0.1-0.1c-2.7-2.7-2.7-7.2,0-9.9l21.7-21.7c2.7-2.7,7.2-2.7,9.9,0l0.1,0.1
+        c2.7,2.7,2.7,7.2,0,9.9l-0.1,0.1c-0.5,0.5-0.6,1.2-0.2,1.8c0.6,1.1,1.1,2.3,1.4,3.5c0.2,0.8,1.1,1,1.7,0.5
+        c0.8-0.8,1.5-1.6,1.5-1.6c5.1-5.1,5.1-13.4,0-18.5L46,5.9c-5.1-5.1-13.4-5.1-18.5,0L5.8,27.5
+        c-5.1,5.1-5.1,13.4,0,18.5L6,46.2c5.1,5.1,13.3,5.1,18.4,0l12.4-12.3c3.2-3.2,3.1-8.4-0.2-11.6
+        c-3.2-3.1-8.4-2.9-11.5,0.3l-9.8,9.8c-0.6,0.6-0.6,1.6,0,2.2L17.6,36.7z"
+                    />
+                  </g>
+                </svg>
+                {displayValue}
+              </span>
+            ) : (
+              Icon && (
+                <Icon
+                  style={{
+                    width: `${iconSize}px`,
+                    height: `${iconSize}px`,
+                    opacity: 0.45,
+                    flexShrink: 0,
+                  }}
+                />
+              )
+            )}
+          </div>
+        </div>
+
+        {showModal && (
+          <AttachmentModal
+            onSave={handleAttachmentSave}
+            onDelete={handleAttachmentDelete}
+            onClose={() => setShowModal(false)}
+            fieldType="attachment"
+            fieldLabel={field.label || "Attachment Field"}
+            uid={field.id}
+            activeTab={fieldState[field.id]?.activeTab || lastActiveTab}
+            transaction={transaction.transactionId}
+            existingFile={existingFile}
+          />
+        )}
+      </>
+    );
+  }
+);
+
+export default AttachmentInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/CheckboxInputField.jsx b/src/components/inputFields/CheckboxInputField.jsx
new file mode 100644
index 0000000..871eef6
--- /dev/null
+++ b/src/components/inputFields/CheckboxInputField.jsx
@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from "react";
+
+const CheckboxInputField = React.memo(
+  ({
+    field,
+    value,
+    onChange,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    lastActiveTab,
+    goToField,
+    checkboxScale,
+    minSize = 16,
+    visibilityMap,
+  }) => {
+    const [localChecked, setLocalChecked] = useState(false);
+    const [isHovered,    setIsHovered]    = useState(false);
+    const [isFocused,    setIsFocused]    = useState(false);
+    const [hasErrorState, setHasErrorState] = useState(false);
+
+    // Active state — driven by DOM attribute written by the parent badge system,
+    // not by React props. Same MutationObserver pattern as RadioInputField.
+    const [isActive, setIsActive] = useState(false);
+
+    useEffect(() => {
+      if (value !== localChecked) {
+        setLocalChecked(!!value);
+      }
+    }, [value]);
+
+    // Watch data-error AND data-active on this field's wrapper
+    useEffect(() => {
+      const selector = `.field-wrapper[data-field-id="${field.id}"]`;
+
+      const checkAttributes = () => {
+        const wrapper = document.querySelector(selector);
+        if (!wrapper) return;
+        setHasErrorState(wrapper.hasAttribute("data-error"));
+        setIsActive(wrapper.getAttribute("data-active") === "true");
+      };
+
+      checkAttributes();
+
+      const wrapper = document.querySelector(selector);
+      if (!wrapper) return;
+
+      const observer = new MutationObserver(checkAttributes);
+      observer.observe(wrapper, {
+        attributes: true,
+        attributeFilter: ["data-error", "data-active"],
+      });
+
+      return () => observer.disconnect();
+    }, [field.id]);
+
+    // ── Visibility ─────────────────────────────────────────────────────────────
+    // After all hooks (Rules of Hooks)
+    if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+    // ── DOM error helpers ──────────────────────────────────────────────────────
+    const clearError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.removeAttribute("data-error");
+    };
+
+    const setError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.setAttribute("data-error", "true");
+    };
+
+    // ── Events ─────────────────────────────────────────────────────────────────
+    const handleChange = (e) => {
+      const checked = e.target.checked;
+      setLocalChecked(checked);
+      if (isRequired) goToField?.(field.id);
+      clearError();
+      handleFieldClick?.(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        field.type,
+        checked
+      );
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+      if (field.required && !localChecked) {
+        setError();
+      } else {
+        clearError();
+      }
+    };
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      clearError();
+      if (isRequired) goToField?.(field.id);
+    };
+
+    // ── Border style ───────────────────────────────────────────────────────────
+    // Priority (high to low):
+    //   active  -> blue solid 2px + glow  (badge — always wins)
+    //   error   -> red solid              (submit validation)
+    //   filled  -> light blue dashed      (checked state)
+    //   focused -> blue solid 1.5px
+    //   hovered -> blue dashed
+    //   default -> light blue dashed
+    const getBorderStyle = () => {
+      if (isActive) {
+        return {
+          border         : "2px solid #005AB5",
+          boxShadow      : "0 0 0 3px rgba(0, 90, 181, 0.25)",
+          backgroundColor: "#EDF6FF",
+          transition     : "all 0.15s ease",
+        };
+      }
+
+      if (hasErrorState) {
+        return {
+          border         : "1px solid #7F1D1D",
+          boxShadow      : "0 0 0 2px red",
+          backgroundColor: "#FECACA",
+          transition     : "all 0.15s ease",
+        };
+      }
+
+      if (localChecked) {
+        return {
+          border         : "1px dashed #7ab8f5",
+          backgroundColor: "transparent",
+        };
+      }
+
+      if (isFocused) {
+        return {
+          border         : "1.5px solid #005AB5",
+          boxShadow      : "0 0 0 2px rgba(0,90,181,0.15)",
+          backgroundColor: "#EDF6FF",
+        };
+      }
+
+      if (isHovered) {
+        return {
+          border         : "1px dashed #005AB5",
+          backgroundColor: "#EDF6FF",
+        };
+      }
+
+      return {
+        border         : "1px dashed #7ab8f5",
+        backgroundColor: "#EDF6FF",
+      };
+    };
+
+    const borderStyle = getBorderStyle();
+
+    // ── Tooltip sizing ─────────────────────────────────────────────────────────
+    const labelText    = field.label || "Checkbox";
+    const isRequired   = field.required;
+    const baseFontSize = parseFloat(responsiveStyle.fontSize) || fontSize || 12;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+
+    // ── Checkbox size ──────────────────────────────────────────────────────────
+    const parsePx = (val) =>
+      typeof val === "string" ? parseFloat(val) || 0 : val || 0;
+
+    const containerW   = parsePx(responsiveStyle.width);
+    const containerH   = parsePx(responsiveStyle.height);
+    const rawSize      = Math.min(containerW, containerH);
+    const checkboxSize = Math.max(minSize, Math.min(rawSize * checkboxScale, 24));
+
+    // ── Render ─────────────────────────────────────────────────────────────────
+    return (
+      <div
+        data-id={field.id}
+        data-field-id={field.id}
+        className="field-wrapper"
+        style={{
+          position  : "absolute",
+          ...responsiveStyle,
+          display   : "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor    : "pointer",
+          boxSizing : "border-box",
+          padding   : "2px",
+          borderRadius: "2px",
+          transition: "all 0.15s ease",
+          ...borderStyle,
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onBlur={handleBlur}
+        onClick={handleFocus}
+      >
+        {/* Tooltip — shown on hover or when badge is active */}
+        {(isHovered || isActive) && (
+          <div
+            style={{
+              position     : "absolute",
+              bottom       : "100%",
+              left         : 0,
+              marginBottom : "4px",
+              zIndex       : 99,
+              pointerEvents: "none",
+              whiteSpace   : "nowrap",
+            }}
+          >
+            <span
+              style={{
+                display        : "inline-flex",
+                alignItems     : "center",
+                gap            : "4px",
+                fontSize       : `${tooltipFontSize}px`,
+                padding        : "2px 6px",
+                borderRadius   : "3px",
+                backgroundColor: "#fff",
+                border         : "1px solid #e2e8f0",
+                boxShadow      : "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily     : "system-ui, -apple-system, sans-serif",
+                fontStyle      : "normal",
+                textDecoration : "none",
+              }}
+            >
+              <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                {isRequired ? "Required" : "Optional"}
+              </span>
+              <span style={{ color: "#d1d5db" }}>·</span>
+              <span>{labelText}</span>
+            </span>
+          </div>
+        )}
+
+        {/* Checkbox */}
+        <input
+          type="checkbox"
+          checked={localChecked}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          style={{
+            width          : `${checkboxSize}px`,
+            height         : `${checkboxSize}px`,
+            margin         : 0,
+            padding        : 0,
+            cursor         : "pointer",
+            accentColor    : field.accentColor || undefined,
+            backgroundColor: "transparent",
+          }}
+        />
+      </div>
+    );
+  }
+);
+
+export default CheckboxInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/CompanyInputField.jsx b/src/components/inputFields/CompanyInputField.jsx
new file mode 100644
index 0000000..bed49d0
--- /dev/null
+++ b/src/components/inputFields/CompanyInputField.jsx
@@ -0,0 +1,311 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+const CompanyInputField = React.memo(
+  ({
+    field,
+    value,
+
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    goToField,
+  }) => {
+    const Icon = FieldIcons[field.type];
+    const inputRef = useRef(null);
+    const [localValue, setLocalValue] = useState(
+      value || field.defaultValue || ""
+    );
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [validationError, setValidationError] = useState("");
+    const [debounceTimer, setDebounceTimer] = useState(null);
+
+    const isRequired = field.required;
+    const showTooltip = isHovered;
+
+    // ── FONT ──────────────────────────────────────────────────────────────────
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const textStyle = {
+      fontFamily: fontProps.fontFamily,
+      fontWeight: fontProps.fontWeight,
+      fontStyle: fontProps.fontStyle,
+      textDecoration: fontProps.textDecoration,
+      color: fontProps.color,
+    };
+
+    const appliedFontSize =
+      parseFloat(responsiveStyle.fontSize) ||
+      parseFloat(field.fontSize) ||
+      fontSize ||
+      12;
+
+    useEffect(() => {
+      if (!isFocused && value !== localValue) {
+        setLocalValue(value || field.defaultValue || "");
+      }
+    }, [value, field.defaultValue, isFocused]);
+
+    // ── DOM error helpers ─────────────────────────────────────────────────────
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+
+    const handleWrapperClick = () => {
+      if (field.readOnly) return;
+      inputRef.current?.focus();
+    };
+
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError = () => !!getWrapper()?.hasAttribute("data-error");
+
+    const handleChange = (e) => {
+      const maxLength = parseInt(field.fieldSize) || 255;
+      let newValue = e.target.value;
+      if (newValue.length > maxLength) newValue = newValue.slice(0, maxLength);
+
+      setLocalValue(newValue);
+      setValidationError("");
+      clearError();
+
+      if (debounceTimer) clearTimeout(debounceTimer);
+
+      const timer = setTimeout(() => {
+        handleFieldClick?.(
+          field.id,
+          field.documentId,
+          field.pageNumber,
+          field.type,
+          newValue
+        );
+      }, 400);
+
+      setDebounceTimer(timer);
+    };
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      clearError();
+      setValidationError("");
+
+      if (goToField && isRequired) {
+        goToField(field.id);
+      }
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+
+      // Validate on blur - set error if required and empty
+      if (field.required && !localValue.trim()) {
+        setError();
+        setValidationError(field?.error);
+      } else {
+        clearError();
+        setValidationError("");
+      }
+    };
+
+    const shouldDisplayField =
+      field.type === "company" &&
+      fieldState[field.id]?.update &&
+      fieldState[field.id]?.documentId === field.documentId &&
+      fieldState[field.id]?.pageNumber === field.pageNumber &&
+      fieldState[field.id]?.value;
+
+    const displayValue = shouldDisplayField
+      ? fieldState[field.id].value
+      : localValue;
+    const maxLength = parseInt(field.fieldSize) || 255;
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.45;
+
+
+    const tooltipFontSize = Math.max(7, Math.min(12, appliedFontSize * 0.85));
+    const tooltipPadV = Math.max(1, appliedFontSize * 0.18);
+    const tooltipPadH = Math.max(3, appliedFontSize * 0.45);
+    const tooltipGap = Math.max(3, appliedFontSize * 0.35);
+    const tooltipBottom = Math.max(3, appliedFontSize * 0.1);
+
+
+
+    const labelText = field.label
+      ? field.label
+      : "Company";
+
+
+    // Check if field has any value
+    const hasAnyValue = () => {
+      return !!(displayValue && displayValue.trim());
+    };
+
+    // Custom border styles based on focus, hover, and error states
+    const getBorderStyle = () => {
+      if (hasError() || validationError) return {
+        border: "1.5px solid #dc2626",
+        boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      if (isFocused) return {
+        border: "1.5px solid #005AB5",
+        boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (isHovered && !field.readOnly) return {
+        border: "1px dashed #005AB5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (field.readOnly) return {
+        border: "1px solid #e2e8f0",
+        boxShadow: "none",
+        backgroundColor: "#f7fafc",
+      };
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          ...textStyle,
+          fontSize: `${appliedFontSize}px`,
+          zIndex:   showTooltip ? 50 : 10,
+          cursor:   field.readOnly ? "default" : "text",
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={handleWrapperClick}
+      >
+        {/* Floating label tooltip */}
+        {(showTooltip || validationError) && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display:         "inline-flex",
+                alignItems:      "center",
+                gap:             `${tooltipGap}px`,
+                fontSize:        `${tooltipFontSize}px`,
+                fontWeight:      500,
+                padding:         `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius:    "3px",
+                backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                border:          validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                color:           validationError ? "#dc2626" : "#374151",
+                boxShadow:       "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily:      "system-ui, -apple-system, sans-serif",
+                fontStyle:       "normal",
+                textDecoration:  "none",
+              }}
+            >
+              {validationError ? (
+                <span style={{ fontWeight: 500 }}>{validationError}</span>
+              ) : (
+                <>
+                  <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                    {isRequired ? "Required" : "Optional"}
+                  </span>
+                  <span style={{ color: "#d1d5db" }}>·</span>
+                  <span>{labelText}</span>
+                </>
+              )}
+            </span>
+          </div>
+        )}
+
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="text-input dragout"
+          style={{
+            position:   "relative",  // ← anchor for absolute icon
+            width:      "100%",
+            height:     "100%",
+            ...getBorderStyle(),
+            margin:     0,
+            padding:    0,
+            display:    "flex",
+            alignItems: "flex-end",
+            overflow:   "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing:  "border-box",
+          }}
+        >
+          {!displayValue && Icon && (
+            <Icon
+              style={{
+                position: "absolute",
+                left: "2px",
+                bottom: "2px",
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                opacity: 0.4,
+                pointerEvents: "none",  // clicks fall through to <input>
+                zIndex: 0,       // behind input text, above background
+              }}
+            />
+          )}
+
+          <input
+            ref={inputRef}
+            type="text"
+            value={localValue}
+            onChange={!field.readOnly ? handleChange : undefined}
+            onFocus={!field.readOnly  ? handleFocus  : undefined}
+            onBlur={!field.readOnly   ? handleBlur   : undefined}
+            maxLength={field.maxLength || 255}
+            dir="ltr"
+            style={{
+              ...textStyle,
+              fontSize:        `${appliedFontSize}px`,
+              border:          "none",
+              outline:         "none",
+              width:           "100%",   // full width — icon does not displace it
+              backgroundColor: "transparent",
+              alignSelf:       "flex-end",
+              lineHeight:      1,
+              padding:         0,
+              margin:          0,
+              position:        "relative",
+              zIndex:          1,        // above icon layer so text renders on top
+              cursor:          field.readOnly ? "default" : "text",
+            }}
+            disabled={field.readOnly  || false}
+            required={field.required}
+            placeholder={field.placeholder || ""}
+            readOnly={field.readOnly}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default CompanyInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/CustomTagInputField.jsx b/src/components/inputFields/CustomTagInputField.jsx
new file mode 100644
index 0000000..2f25791
--- /dev/null
+++ b/src/components/inputFields/CustomTagInputField.jsx
@@ -0,0 +1,352 @@
+import React, { useState, useEffect, useRef } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+const CustomTagInputField = React.memo(
+  ({
+    field,
+    value,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    goToField,
+    fieldState,
+    visibilityMap
+  }) => {
+
+    const Icon = FieldIcons[field.type === 'custom-tag' ? 'customtag' : ""];
+    const inputRef = useRef(null);
+    const [localValue, setLocalValue] = useState(
+      value || field.defaultValue || ""
+    );
+    const [validationError, setValidationError] = useState("");
+    const [debounceTimer, setDebounceTimer] = useState(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    const isRequired = field.required;
+    const showTooltip = isHovered;
+
+    // ── FONT ──────────────────────────────────────────────────────────────────
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const textStyle = {
+      fontFamily: fontProps.fontFamily,
+      fontWeight: fontProps.fontWeight,
+      fontStyle: fontProps.fontStyle,
+      textDecoration: fontProps.textDecoration,
+      color: fontProps.color,
+    };
+
+    const appliedFontSize =
+      parseFloat(responsiveStyle.fontSize) ||
+      parseFloat(field.fontSize) ||
+      fontSize ||
+      12;
+
+    useEffect(() => {
+      setLocalValue(value || field.defaultValue || "");
+    }, [value, field.defaultValue]);
+
+    // ── DOM error helpers ─────────────────────────────────────────────────────
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError = () => !!getWrapper()?.hasAttribute("data-error");
+
+    const validateValue = (val) => {
+      if (!field?.regex?.length || val === "") return "";
+      try {
+        const regexString = field.regex[0];
+        const regex = new RegExp(regexString.replace(/^\/|\/$/g, ""));
+        return regex.test(val) ? "" : field?.error || "Invalid input";
+      } catch (err) {
+        console.error("Invalid regex:", err);
+        return "";
+      }
+    };
+
+    if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+    const handleWrapperClick = () => {
+      if (field.readOnly) return;
+      inputRef.current?.focus();
+    };
+
+
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      setLocalValue(newValue);
+      setValidationError("");
+      clearError();
+
+      if (debounceTimer) clearTimeout(debounceTimer);
+
+      const timer = setTimeout(() => {
+        const validationErr = validateValue(newValue);
+        const isValid = !validationErr && newValue !== "";
+
+        if (validationErr) {
+          setValidationError(validationErr);
+          if (field.required && newValue === "") {
+            setError();
+          } else if (newValue !== "" && validationErr) {
+            setError();
+          }
+        } else {
+          setValidationError("");
+          clearError();
+        }
+
+        if (newValue === "" || isValid) {
+          handleFieldClick?.(
+            field.id,
+            field.documentId,
+            field.pageNumber,
+            field.type,
+            newValue,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            false,
+            undefined,
+            isValid
+          );
+        }
+      }, 400);
+
+      setDebounceTimer(timer);
+    };
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      clearError();
+      setValidationError("");
+      if (isRequired) {
+        goToField?.(field.id);
+      }
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+      const hasValue = localValue && localValue.trim();
+
+      if (field.required && !hasValue) {
+        setError();
+        setValidationError(field?.error || "This field is required");
+      } else if (hasValue) {
+        const validationErr = validateValue(localValue);
+        if (validationErr) {
+          setError();
+          setValidationError(validationErr);
+        } else {
+          clearError();
+          setValidationError("");
+        }
+      } else {
+        clearError();
+        setValidationError("");
+      }
+    };
+
+
+    const currentField = fieldState?.[field.id];
+
+    const shouldDisplayField =
+      field.type === "custom-tag" &&
+      currentField?.update &&
+      currentField?.documentId === field.documentId &&
+      currentField?.pageNumber === field.pageNumber &&
+      currentField?.value;
+
+    const displayValue = shouldDisplayField
+      ? currentField?.value
+      : localValue;
+
+    const maxLength = parseInt(field.fieldSize) || 255;
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.45;
+
+
+    const tooltipFontSize = Math.max(7, Math.min(12, appliedFontSize * 0.85));
+    const tooltipPadV = Math.max(1, appliedFontSize * 0.18);
+    const tooltipPadH = Math.max(3, appliedFontSize * 0.45);
+    const tooltipGap = Math.max(3, appliedFontSize * 0.35);
+    const tooltipBottom = Math.max(3, appliedFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : field.type.charAt(0).toUpperCase() + field.type.slice(1);
+
+    const hasAnyValue = () => !!(displayValue && displayValue.trim());
+
+    const getBorderStyle = () => {
+      if (hasError() || validationError) return {
+        border: "1.5px solid #dc2626",
+        boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      if (isFocused) return {
+        border: "1.5px solid #005AB5",
+        boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (isHovered && !field.readOnly) return {
+        border: "1px dashed #005AB5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (field.readOnly) return {
+        border: "1px solid #e2e8f0",
+        boxShadow: "none",
+        backgroundColor: "#f7fafc",
+      };
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          ...textStyle,
+          fontSize: `${appliedFontSize}px`,
+          zIndex: showTooltip ? 50 : 10,
+          cursor: field.readOnly ? "default" : "text",
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={handleWrapperClick}
+      >
+        {/* Floating label tooltip */}
+        {(showTooltip || validationError) && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                border: validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                color: validationError ? "#dc2626" : "#374151",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                fontStyle: "normal",
+                textDecoration: "none",
+              }}
+            >
+              {validationError ? (
+                <span style={{ fontWeight: 500 }}>{validationError}</span>
+              ) : (
+                <>
+                  <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                    {isRequired ? "Required" : "Optional"}
+                  </span>
+                  <span style={{ color: "#d1d5db" }}>·</span>
+                  <span>{labelText}</span>
+                </>
+              )}
+            </span>
+          </div>
+        )}
+
+        {/* Input wrapper */}
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="text-input dragout"
+          style={{
+            position: "relative",  // ← anchor for absolute icon
+            width: "100%",
+            height: "100%",
+            ...getBorderStyle(),
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            alignItems: "flex-end",
+            overflow: "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing: "border-box",
+          }}
+        >
+          {!displayValue && Icon && (
+            <Icon
+              style={{
+                position:      "absolute",
+                left:          "2px",
+                bottom:        "2px",
+                width:         `${iconSize}px`,
+                height:        `${iconSize}px`,
+                opacity:       0.4,
+                pointerEvents: "none",  // clicks fall through to <input>
+                zIndex:        0,       // behind input text, above background
+              }}
+            />
+          )}
+
+          <input
+            ref={inputRef}
+            type={"text"}
+            value={localValue}
+            onChange={!field.readOnly ? handleChange : undefined}
+            onFocus={!field.readOnly ? handleFocus : undefined}
+            onBlur={!field.readOnly ? handleBlur : undefined}
+            maxLength={field?.fieldSize || 255}
+             dir = "ltr"
+            style={{
+              ...textStyle,
+              fontSize: `${appliedFontSize}px`,
+              border: "none",
+              outline: "none",
+              width: "100%",   // full width — icon does not displace it
+              backgroundColor: "transparent",
+              alignSelf: "flex-end",
+              lineHeight: 1,
+              padding: 0,
+              margin: 0,
+              position: "relative",
+              zIndex: 1,        // above icon layer so text renders on top
+              cursor: field.readOnly ? "default" : "text",
+              dir:"ltr"
+            }}
+            required={field?.required}
+            disabled={field.readOnly || false}
+            placeholder={field.placeholder || ""}
+            readOnly={field.readOnly}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default CustomTagInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/DefaultInputField.jsx b/src/components/inputFields/DefaultInputField.jsx
new file mode 100644
index 0000000..70bf822
--- /dev/null
+++ b/src/components/inputFields/DefaultInputField.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const DefaultInputField = ({
+  field,
+  value,
+  onChange,
+  responsiveStyle,
+  fontSize,
+}) => (
+  // <input
+  //   type="text"
+  //   value={value}
+  //   onChange={(e) => onChange(field.id, e.target.value)}
+  //   style={{ ...responsiveStyle, fontSize: `${fontSize}px` }}
+  //   className="border border-gray-300 rounded p-1"
+  // />
+  null
+);
+
+export default DefaultInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/DropDownInputField.jsx b/src/components/inputFields/DropDownInputField.jsx
new file mode 100644
index 0000000..7812609
--- /dev/null
+++ b/src/components/inputFields/DropDownInputField.jsx
@@ -0,0 +1,511 @@
+import React, { useState, useEffect, useRef } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+
+const DropDownInputField = React.memo(
+  ({
+    field,
+    value,
+    onChange,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    lastActiveTab,
+    goToField,
+    visibilityMap
+  }) => {
+    const Icon = FieldIcons[field.type];
+    const dropdownRef = useRef(null);
+
+    const [localValue, setLocalValue] = useState(
+      value || field.defaultValue || ""
+    );
+    const [open, setOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [validationError, setValidationError] = useState("");
+
+    const isRequired = field.required;
+
+    // Debug: Log the field props to check if styling properties are being received
+    useEffect(() => {
+      console.log("DropDownInputField field props:", {
+        id: field.id,
+        fontColor: field.fontColor,
+        bold: field.bold,
+        italic: field.italic,
+        fontFamily: field.fontFamily,
+        fontSize: field.fontSize,
+        required: field.required,
+        readOnly: field.readOnly
+      });
+    }, [field]);
+
+    useEffect(() => {
+      if (value !== localValue) {
+        setLocalValue(value || field.defaultValue || "");
+      }
+    }, [value, field.defaultValue]);
+
+    // Close on outside click
+    useEffect(() => {
+      const handleClickOutside = (e) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+          setOpen(false);
+          setIsFocused(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    const clearError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.removeAttribute("data-error");
+    };
+
+    const setError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.setAttribute("data-error", "true");
+    };
+
+    const validateValue = (val) => {
+      if (!field.validation || val === "" || val === "none") return "";
+      
+      // Text validation - check for allowed characters
+      // if (field.validation === "text") {
+      //   const textRegex = /^[a-zA-Z\s\-']+$/;
+      //   if (val && !textRegex.test(val)) {
+      //     return field?.error || "Only letters, spaces, hyphens, and apostrophes allowed";
+      //   }
+      // }
+      
+      return "";
+    };
+
+    // ── NEW: hide field when controlled visibility says hidden ──
+    if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+    const handleChange = (newValue) => {
+      if (field.readOnly) return;
+      
+      setLocalValue(newValue);
+      setValidationError("");
+      clearError();
+
+      // Validate the value
+      const validationErr = validateValue(newValue);
+      const isValid = !validationErr && newValue !== "" && newValue !== "none";
+
+      if (validationErr && newValue !== "" && newValue !== "none") {
+        setValidationError(validationErr);
+        setError();
+      } else {
+        setValidationError("");
+        clearError();
+      }
+
+      handleFieldClick?.(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        field.type,
+        newValue,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        false,
+        undefined,
+        isValid
+      );
+      
+      setOpen(false);
+      setIsFocused(false);
+    };
+
+    const handleFocus = () => {
+      if (field.readOnly) return;
+      
+      setIsFocused(true);
+      clearError();
+      setValidationError("");
+
+     if (isRequired) {
+       goToField?.(field.id); 
+     }
+      
+      handleFieldClick?.(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        field.type,
+        localValue
+      );
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+      
+      // Validate on blur - set error if required and empty
+      const hasValue = localValue && localValue !== "" && localValue !== "none";
+      
+      if (field.required && !hasValue) {
+        setError();
+        setValidationError(field?.error || "This field is required");
+      } else if (hasValue) {
+        const validationErr = validateValue(localValue);
+        if (validationErr) {
+          setError();
+          setValidationError(validationErr);
+        } else {
+          clearError();
+          setValidationError("");
+        }
+      } else {
+        clearError();
+        setValidationError("");
+      }
+    };
+
+    const shouldDisplayField =
+      field.type === "dropdown" &&
+      fieldState[field.id]?.update &&
+      fieldState[field.id]?.documentId === field.documentId &&
+      fieldState[field.id]?.pageNumber === field.pageNumber &&
+      fieldState[field.id]?.value;
+
+    const displayValue = shouldDisplayField
+      ? fieldState[field.id].value
+      : localValue;
+
+    const selectedLabel =
+      field.options?.find((o) => o.value === displayValue)?.label || "";
+
+    const isPlaceholder = !displayValue || displayValue === "none";
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.5;
+
+    
+    const showTooltip = isHovered || validationError;
+
+    const baseFontSize = parseFloat(responsiveStyle.fontSize) || fontSize || 12;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : "Select an option";
+
+    // Check if field has error
+    const hasError = () => {
+      if (typeof document !== 'undefined') {
+        const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+        return wrapper?.hasAttribute('data-error');
+      }
+      return false;
+    };
+
+    // Check if field has any value
+    const hasAnyValue = () => {
+      return !!(displayValue && displayValue !== "" && displayValue !== "none");
+    };
+
+    // CRITICAL: Get the font styling directly from field
+    const appliedFontColor = field.fontColor || "#000000";
+    const appliedFontSize = parseFloat(field.fontSize) || fontSize || 12;
+    const appliedFontFamily = field.fontFamily || "inherit";
+    const appliedFontWeight = field.bold ? "600" : "400";
+    const appliedFontStyle = field.italic ? "italic" : "normal";
+    const appliedTextDecoration = field.underLine ? "underline" : "none";
+
+    // Custom border styles based on focus, hover, error states, and readOnly
+    const getBorderStyle = () => {
+      // Error state
+      if (hasError() || validationError) {
+        return {
+          border: "1.5px solid #dc2626",
+          boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+          backgroundColor: hasAnyValue() ? "transparent" : "#FEF2F2",
+        };
+      }
+      
+      // Focus state
+      if (isFocused && !field.readOnly) {
+        return {
+          border: "1.5px solid #005AB5",
+          boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+          backgroundColor: hasAnyValue() ? "transparent" : "#EDF6FF",
+        };
+      }
+      
+      // Hover state - only if not readOnly
+      if (isHovered && !field.readOnly && !hasAnyValue()) {
+        return {
+          border: "1px dashed #005AB5",
+          boxShadow: "none",
+          backgroundColor: "#EDF6FF",
+        };
+      }
+      
+      // Read-only state
+      if (field.readOnly) {
+        return {
+          border: "1px solid #e2e8f0",
+          boxShadow: "none",
+          backgroundColor: "#f7fafc",
+        };
+      }
+      
+      // If field has value and is not focused and not hovered and no error
+      if (hasAnyValue() && !isFocused && !isHovered && !hasError()) {
+        return {
+          border: "1px solid transparent",
+          boxShadow: "none",
+          backgroundColor: "transparent",
+        };
+      }
+      
+      // Default state (empty field)
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: hasAnyValue() ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    const borderStyle = getBorderStyle();
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        dir="ltr"
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          zIndex: showTooltip ? 50 : 10,
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {/* Floating label tooltip */}
+        {(showTooltip || validationError) && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                border: validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                color: validationError ? "#dc2626" : "#374151",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+              }}
+            >
+              {validationError ? (
+                <span style={{ fontWeight: 500 }}>{validationError}</span>
+              ) : (
+                <>
+                  <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                    {isRequired ? "Required" : "Optional"}
+                  </span>
+                  <span style={{ color: "#d1d5db" }}>·</span>
+                  <span>{labelText}</span>
+                  {hasAnyValue() && (
+                    <>
+                      <span style={{ color: "#d1d5db" }}>·</span>
+                      <span
+                        style={{
+                          color: appliedFontColor,
+                          fontSize: `${tooltipFontSize * 0.9}px`,
+                          maxWidth: "150px",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                      >
+                        {/* {selectedLabel} */}
+                      </span>
+                    </>
+                  )}
+                </>
+              )}
+            </span>
+          </div>
+        )}
+
+        {/* Dropdown Container */}
+        <div
+          ref={dropdownRef}
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="dropdown-input text-input dragout"
+          style={{
+            width: "100%",
+            height: "100%",
+            ...borderStyle,
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            borderRadius: "4px",
+            cursor: field.readOnly ? "default" : "pointer",
+            fontSize: `${appliedFontSize}px`,
+            fontFamily: appliedFontFamily,
+            fontWeight: appliedFontWeight,
+            fontStyle: appliedFontStyle,
+            color: appliedFontColor,
+            textDecoration: appliedTextDecoration,
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing: "border-box",
+            position: "relative",
+            padding: "0 4px",
+          }}
+          onClick={() => {
+            if (!field.readOnly) {
+              setOpen(true);
+              handleFocus();
+            }
+          }}
+        >
+          {/* Icon */}
+          {isPlaceholder && Icon && (
+            <Icon
+              style={{
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                opacity: 0.45,
+                flexShrink: 0,
+              }}
+            />
+          )}
+
+          {/* Selected Value */}
+          <div
+            className="flex-1 truncate"
+            style={{
+              color: isPlaceholder ? "rgba(0,0,0,0.3)" : appliedFontColor,
+              fontSize: `${appliedFontSize}px`,
+              fontFamily: appliedFontFamily,
+              fontWeight: appliedFontWeight,
+              fontStyle: appliedFontStyle,
+              textDecoration: appliedTextDecoration,
+            }}
+          >
+            {selectedLabel || field.label || "Select an option"}
+          </div>
+
+          {/* Dropdown Arrow */}
+          {!field.readOnly && (
+            <div
+              style={{
+                width: "16px",
+                height: "16px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "10px",
+                color: "#9ca3af",
+                flexShrink: 0,
+                transition: "transform 0.2s ease",
+                transform: open ? "rotate(180deg)" : "rotate(0deg)",
+              }}
+            >
+              ▼
+            </div>
+          )}
+
+          {/* Dropdown Panel */}
+          {open && !field.readOnly && (
+            <div
+              onClick={(e) => e.stopPropagation()}
+              style={{
+                position: "absolute",
+                left: 0,
+                top: "calc(100% + 2px)",
+                width: "100%",
+                backgroundColor: "#fff",
+                border: "1px solid #e2e8f0",
+                borderRadius: "6px",
+                boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)",
+                zIndex: 100,
+                maxHeight: "192px",
+                overflowY: "auto",
+                fontSize: `${appliedFontSize}px`,
+              }}
+            >
+              {/* None option */}
+              <div
+                onClick={() => handleChange("none")}
+                style={{
+                  padding: "6px 12px",
+                  cursor: "pointer",
+                  color: "#374151",
+                  transition: "background-color 0.15s ease",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = "#eff6ff";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                }}
+              >
+                -- None --
+              </div>
+
+              {/* Options */}
+              {field.options?.map((option, index) => (
+                <div
+                  key={index}
+                  onClick={() => handleChange(option.value)}
+                  style={{
+                    padding: "6px 12px",
+                    cursor: "pointer",
+                    backgroundColor: option.value === displayValue ? "#dbeafe" : "transparent",
+                    color: option.value === displayValue ? "#1e40af" : "#374151",
+                    transition: "background-color 0.15s ease",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (option.value !== displayValue) {
+                      e.currentTarget.style.backgroundColor = "#eff6ff";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (option.value !== displayValue) {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    }
+                  }}
+                >
+                  {option.label}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default DropDownInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/EmailInputField.jsx b/src/components/inputFields/EmailInputField.jsx
new file mode 100644
index 0000000..d34514a
--- /dev/null
+++ b/src/components/inputFields/EmailInputField.jsx
@@ -0,0 +1,264 @@
+import React, { useEffect, useState } from "react";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+const EmailInputField = React.memo(
+  ({
+    field,
+    value,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    goToField,
+  }) => {
+    const [localValue, setLocalValue] = useState(
+      value || field.defaultValue || ""
+    );
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    useEffect(() => {
+      if (!isFocused && value !== localValue) {
+        setLocalValue(value || field.defaultValue || "");
+      }
+    }, [value, field.defaultValue, isFocused]);
+
+    const clearError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.removeAttribute("data-error");
+    };
+
+    const setError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.setAttribute("data-error", "true");
+    };
+
+    const validateEmail = (email) => {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return emailRegex.test(email);
+    };
+
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      setLocalValue(newValue);
+
+      // Clear error when user types
+      if (newValue.trim()) {
+        clearError();
+      }
+    };
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      // Clear error when user focuses the field
+      clearError();
+      if (goToField) {
+        goToField(field.id);
+      }
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+
+      // Validate on blur
+      const hasValue = localValue && localValue.trim();
+
+      if (field.required && !hasValue) {
+        // Required but empty
+        setError();
+      } else if (hasValue && !validateEmail(localValue)) {
+        // Has value but invalid email format
+        setError();
+      } else {
+        clearError();
+      }
+
+      // Update parent state on blur
+      handleFieldClick?.(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        field.type,
+        localValue
+      );
+    };
+
+    const shouldDisplayField =
+      field.type === "email" &&
+      fieldState[field.id]?.update &&
+      fieldState[field.id]?.documentId === field.documentId &&
+      fieldState[field.id]?.pageNumber === field.pageNumber &&
+      fieldState[field.id]?.value;
+
+    const displayValue = shouldDisplayField
+      ? fieldState[field.id].value
+      : localValue;
+
+    const isRequired = field.required;
+    const showTooltip = isHovered;
+
+    // ── FONT ──────────────────────────────────────────────────────────────────
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const textStyle = {
+      fontFamily: fontProps.fontFamily,
+      fontWeight: fontProps.fontWeight,
+      fontStyle: fontProps.fontStyle,
+      textDecoration: fontProps.textDecoration,
+      color: fontProps.color,
+    };
+
+    const appliedFontSize =
+      parseFloat(responsiveStyle.fontSize) ||
+      parseFloat(field.fontSize) ||
+      fontSize ||
+      12;
+
+    const baseFontSize = parseFloat(responsiveStyle.fontSize) || fontSize || 12;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : "Email";
+
+    // Check if field has error
+    const hasError = () => {
+      if (typeof document !== 'undefined') {
+        const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+        return wrapper?.hasAttribute('data-error');
+      }
+      return false;
+    };
+
+    // Check if field has any value
+    const hasAnyValue = () => {
+      return !!(displayValue && displayValue.trim());
+    };
+
+    // Custom border styles based on focus, hover, and error states
+    const getBorderStyle = () => {
+      if (hasError()) return {
+        border: "1.5px solid #dc2626",
+        boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      if (isFocused) return {
+        border: "1.5px solid #005AB5",
+        boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (isHovered && !field.readOnly) return {
+        border: "1px dashed #005AB5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (field.readOnly) return {
+        border: "1px solid #e2e8f0",
+        boxShadow: "none",
+        backgroundColor: "#f7fafc",
+      };
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    return (
+      <div
+        data-id={field.id}
+        data-page-number={field.pageNumber}
+        data-document-id={field.documentId}
+        data-type={field.type}
+        className="email-input dragout field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          ...textStyle,
+          fontSize: `${appliedFontSize}px`,
+          zIndex: showTooltip ? 50 : 10,
+          cursor: field.readOnly ? "default" : "text",
+          overflow: "visible",   // ← add this
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {showTooltip && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                // backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                // border: validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                // color: validationError ? "#dc2626" : "#374151",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                fontStyle: "normal",
+                textDecoration: "none",
+              }}
+            >
+              <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                {isRequired ? "Required" : "Optional"}
+              </span>
+              <span style={{ color: "#d1d5db" }}>·</span>
+              <span>{labelText}</span>
+            </span>
+          </div>
+        )}
+
+        <div
+          className="text-input dragout"
+          style={{
+            width: "100%",
+            height: "100%",
+            // ...getBorderStyle(),
+            boxSizing: "border-box",
+            position: "relative",
+          }}
+        >
+          <span
+            style={{
+              ...textStyle,
+              fontSize: `${appliedFontSize}px`,
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              whiteSpace: "nowrap",
+              lineHeight: 1,
+              pointerEvents: "none",
+            }}
+          >
+            {displayValue
+              ? displayValue
+              : <span style={{ color: "#9ca3af" }}>{field.label || "Enter Email"}</span>
+            }
+          </span>
+        </div>
+      </div>
+    );
+  }
+);
+
+export default EmailInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/ImageBadges.jsx b/src/components/inputFields/ImageBadges.jsx
new file mode 100644
index 0000000..0bb5aa0
--- /dev/null
+++ b/src/components/inputFields/ImageBadges.jsx
@@ -0,0 +1,256 @@
+import React, { useMemo, useState } from "react";
+import IndividualFieldBadge from "../IndividualFieldBadge";
+import { isRtlLanguage } from "../../i18n";
+import { useTranslation } from "react-i18next";
+
+const ImageBadges = React.memo(
+    ({
+        documentId,
+        pageIndex,
+        fieldState,
+        getFieldsForPage,
+        documentIndex,
+        currentActiveFieldId,
+        currentFieldIndex,
+        totalFields,
+        handleSubmitClick,
+        handleNextClick,
+        handleFieldClick,
+        goToField,
+        allRequiredFilled,
+        lastActiveTab,
+        inputFields,
+        allFieldsFilled,
+        getResponsiveStyle,
+        containerRef,
+        maxHeight,
+        maxWidth,
+        containerSize,
+        hasStarted,
+        setHasStarted,
+        // ✅ Add these two new props from parent
+        radioFocusedOptionIndex,
+        setRadioFocusedOptionIndex,
+        visibilityMap
+    }) => {
+        const { width: containerWidth } = containerSize;
+        const isMobile = containerWidth < 480;
+
+        const { t, i18n } = useTranslation();
+        const isRtl = isRtlLanguage(i18n.language);
+
+        const hasRequiredFields = useMemo(() => {
+            return inputFields.some(field => {
+                if (!field.required || ["signdate", "time"].includes(field.type)) return false;
+                // Check visibility 
+                if (visibilityMap?.[field.id] === false) return false;
+                if (field.type === "radio") {
+                    return (field.options || []).some(opt => visibilityMap?.[opt.id] !== false);
+                }
+                return true;
+            });
+        }, [inputFields, visibilityMap]); // ← add visibilityMap to deps
+
+        const pageFields = useMemo(() => {
+            if (!fieldState || !documentId || !getFieldsForPage) return [];
+            return getFieldsForPage(documentIndex, pageIndex).filter((f) => visibilityMap?.[f.id] !== false);
+        }, [documentId, pageIndex, fieldState, getFieldsForPage, documentIndex, visibilityMap]);
+
+        const activeFieldOnThisPage = useMemo(() => {
+            return pageFields.find((f) => f.id === currentActiveFieldId);
+        }, [pageFields, currentActiveFieldId]);
+
+        // ✅ If no required fields, never show the start badge or any other badges
+        if (!hasRequiredFields) {
+            return null;
+        }
+
+        // ── Start badge ──
+        if (!hasStarted) {
+            if (documentIndex !== 0 || pageIndex !== 0) return null;
+            const badgeFontSize = containerWidth < 480 ? 8 : 13;
+            return (
+                <div
+                    onClick={() => {
+                        // ✅ Only start if there are required fields
+                        if (hasRequiredFields) {
+                            setHasStarted(true);
+                        } else {
+                            //  no fields need filling
+                            console.log("No required fields to fill");
+                        }
+                    }}
+                    className="absolute z-[49] inline-flex items-center gap-1 rounded-md font-semibold shadow-md border border-yellow-400 bg-regal-blue cursor-pointer"
+                    style={{
+                        top: "12px",
+                        // right: "12px",
+                        [isRtl ? "left" : "right"]: `12px`,
+                        fontSize: `${badgeFontSize}px`,
+                        paddingLeft: isRtl ? "10px" : "22px",
+                        paddingRight: isRtl ? "22px" : "10px",
+                        paddingTop: containerWidth < 480 ? "2px" : "10px",
+                        paddingBottom: containerWidth < 480 ? "2px" : "10px",
+                        pointerEvents: "auto",
+                        clipPath: isRtl
+                            ? "polygon(0% 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 0% 100%)" // ← RTL clip path (mirrored)
+                            : "polygon(18px 0%, 100% 0%, 100% 100%, 18px 100%, 0% 50%)", // ← LTR clip path
+                    }}
+                >
+                    <div className={`flex items-center gap-1 ${isRtl ? 'flex-row-reverse' : 'flex-row'}`}>
+                        <span className="text-white leading-none">Start</span>
+                        <svg
+                            className={`
+        w-3 h-3 text-yellow-400 shrink-0 
+        transition-transform duration-200
+        ${isRtl ? 'rotate-180' : ''}
+      `}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
+                    </div>
+                </div>
+            );
+        }
+
+        // ✅ If no required fields but somehow hasStarted is true, reset it
+        if (!hasRequiredFields && hasStarted) {
+            setHasStarted(false);
+            return null;
+        }
+
+        if (!activeFieldOnThisPage) return null;
+
+        const isRadioField = activeFieldOnThisPage.type === "radio";
+
+        // ✅ For radio: only render badge on the page that matches focused option
+        if (isRadioField) {
+            const options = activeFieldOnThisPage.options || [];
+            const focusedOption = options[radioFocusedOptionIndex ?? 0];
+
+            if (!focusedOption) return null;
+
+            // Parse focused option's location
+            const locMatch = focusedOption.location?.match(/container-(\d+)-page-(\d+)/);
+            if (!locMatch) return null;
+
+            const optionContainerIndex = parseInt(locMatch[1]);
+            const optionPageIndex = parseInt(locMatch[2]);
+
+            // ✅ Only the page/container matching the focused option renders the badge
+            if (optionContainerIndex !== documentIndex || optionPageIndex !== pageIndex) {
+                return null;
+            }
+
+            // Build style from focused option
+            const fieldForStyle = {
+                ...activeFieldOnThisPage,
+                top: focusedOption.top,
+                left: focusedOption.left,
+                width: focusedOption.width,
+                height: focusedOption.height,
+                fontSize: "13px",
+                _currentPageOption: focusedOption,
+                _focusedOptionIndex: radioFocusedOptionIndex ?? 0,
+            };
+
+            const rawValue = fieldState[activeFieldOnThisPage.id]?.value;
+            const isFilled = (() => {
+                if (rawValue === null || rawValue === undefined || rawValue === "") return false;
+                if (typeof rawValue === "boolean") return rawValue === true;
+                if (typeof rawValue === "string") return rawValue.trim() !== "";
+                if (typeof rawValue === "object") return Object.keys(rawValue).length > 0;
+                return false;
+            })();
+
+            const fieldDetails = inputFields.find((f) => f.id === activeFieldOnThisPage.id);
+            const isRequiredField = fieldDetails?.required || false;
+            const isSubmitBadge = allRequiredFilled && isRequiredField;
+
+            const fieldStyle = getResponsiveStyle(fieldForStyle);
+            const badgeTop = parseFloat(fieldStyle.top) + parseFloat(fieldStyle.height) / 2;
+            const rightOffset = Math.max(6, containerWidth * 0.015);
+            const baseFontSize = parseFloat(fieldStyle.fontSize) || 12;
+            const badgeFontSize = containerWidth < 480
+                ? Math.max(6, baseFontSize * 0.5)
+                : Math.max(10, Math.min(16, baseFontSize * 0.85));
+
+            return (
+                <IndividualFieldBadge
+                    field={fieldForStyle}
+                    isFilled={isFilled}
+                    isSubmitBadge={isSubmitBadge}
+                    isRequiredField={isRequiredField}
+                    handleSubmitClick={handleSubmitClick}
+                    handleNextClick={handleNextClick}
+                    handleFieldClick={handleFieldClick}
+                    goToField={goToField}
+                    fieldState={fieldState}
+                    lastActiveTab={lastActiveTab}
+                    isBadgeClick={true}
+                    // ✅ Pass setter so badge can advance the focused index
+                    setRadioFocusedOptionIndex={setRadioFocusedOptionIndex}
+                    totalRadioOptions={options.length}
+                    badgeStyle={{
+                        top: `${badgeTop}px`,
+                        // right: `${rightOffset}px`,
+                        [isRtl ? "left" : "right"]: `${rightOffset}px`,
+                        transform: "translateY(-50%)",
+                        fontSize: isMobile ? "8px" : `${badgeFontSize}px`,
+                    }}
+                />
+            );
+        }
+
+        // ── Non-radio fields (unchanged) ──
+        const fieldForStyle = activeFieldOnThisPage;
+
+        const rawValue = fieldState[activeFieldOnThisPage.id]?.value;
+        const isFilled = (() => {
+            if (rawValue === null || rawValue === undefined || rawValue === "") return false;
+            if (typeof rawValue === "boolean") return rawValue === true;
+            if (typeof rawValue === "string") return rawValue.trim() !== "";
+            if (typeof rawValue === "object") return Object.keys(rawValue).length > 0;
+            return false;
+        })();
+
+        const fieldDetails = inputFields.find((f) => f.id === activeFieldOnThisPage.id);
+        const isRequiredField = fieldDetails?.required || false;
+        const isSubmitBadge = allRequiredFilled && isRequiredField;
+
+        const fieldStyle = getResponsiveStyle(fieldForStyle);
+        const badgeTop = parseFloat(fieldStyle.top) + parseFloat(fieldStyle.height) / 2;
+        const rightOffset = Math.max(6, containerWidth * 0.015);
+        const baseFontSize = parseFloat(fieldStyle.fontSize) || 12;
+        const badgeFontSize = containerWidth < 480
+            ? Math.max(6, baseFontSize * 0.5)
+            : Math.max(10, Math.min(16, baseFontSize * 0.85));
+
+        return (
+            <IndividualFieldBadge
+                field={activeFieldOnThisPage}
+                isFilled={isFilled}
+                isSubmitBadge={isSubmitBadge}
+                isRequiredField={isRequiredField}
+                handleSubmitClick={handleSubmitClick}
+                handleNextClick={handleNextClick}
+                handleFieldClick={handleFieldClick}
+                goToField={goToField}
+                fieldState={fieldState}
+                lastActiveTab={lastActiveTab}
+                isBadgeClick={true}
+                badgeStyle={{
+                    top: `${badgeTop}px`,
+                    // right: `${rightOffset}px`,
+                    [isRtl ? "left" : "right"]: `${rightOffset}px`,
+                    transform: "translateY(-50%)",
+                    fontSize: isMobile ? "8px" : `${badgeFontSize}px`,
+                }}
+            />
+        );
+    }
+);
+
+export default ImageBadges;
\ No newline at end of file
diff --git a/src/components/inputFields/InitialInputField.jsx b/src/components/inputFields/InitialInputField.jsx
new file mode 100644
index 0000000..b82c088
--- /dev/null
+++ b/src/components/inputFields/InitialInputField.jsx
@@ -0,0 +1,382 @@
+import React, { useState, useEffect } from "react";
+import SignatureInitialsModal from "../../modals/SignatureInitialsModal";
+import { FieldIcons } from "../../assets/icons/icons";
+import { useFieldActiveState } from "../../hooks/useFieldActiveState";
+
+const InitialInputField = React.memo(
+  ({
+    field,
+    value,
+    onChange,
+    responsiveStyle,
+    fontSize,
+    fieldValue,
+    setFieldValue,
+    setSignatureValue,
+    documentIndex,
+    pageIndex,
+    handleFieldClick,
+    fieldState,
+    existingSignature,
+    existingInitial,
+    lastActiveTab,
+    setLastActiveTab,
+    goToField,
+  }) => {
+    const Icon = FieldIcons[field.type];
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [localValue, setLocalValue] = useState(value || "");
+    const [showModal, setShowModal] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+
+    const isActive = useFieldActiveState(field.id);
+    const isRequired = field.required;
+
+    useEffect(() => {
+      if (value !== localValue) {
+        setLocalValue(value || "");
+      }
+    }, [value]);
+
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError = () => !!getWrapper()?.hasAttribute("data-error");
+
+    // ── Resolve display value regardless of `update` flag ──
+    const resolveDisplayValue = () => {
+      const fsValue = fieldState[field.id]?.value;
+      const fsMatchesField =
+        fieldState[field.id]?.documentId === field.documentId &&
+        fieldState[field.id]?.pageNumber === field.pageNumber;
+
+      if (fsValue && fsMatchesField) {
+        return fsValue;
+      }
+      return localValue;
+    };
+
+    const displayValue = resolveDisplayValue();
+
+    const isTextSignature = (val) => typeof val === "object" && val?.text;
+
+    const hasAnyValue = () => {
+      const v = displayValue;
+      return v && (typeof v === "string" ? v.trim() : v?.text);
+    };
+
+    const handleClick = (e) => {
+      const isBadgeClick = e.target.closest('[data-is-badge="true"]') !== null;
+      if (isProcessing) return;
+
+      setIsFocused(true);
+      clearError();
+      if (isRequired) {
+        goToField?.(field.id);
+      }
+
+      const hasLocalValue =
+        typeof localValue === "string" ? localValue.trim() : localValue?.text;
+
+      if (localValue && hasLocalValue) {
+        setShowModal(true);
+        return;
+      }
+
+      const hasFieldValue =
+        typeof fieldValue === "string" ? fieldValue.trim() : fieldValue?.text;
+
+      if (fieldValue && hasFieldValue) {
+        setIsProcessing(true);
+        const newValue = fieldValue;
+        setLocalValue(newValue);
+        handleFieldClick(
+          field.id,
+          field.documentId,
+          field.pageNumber,
+          field.type,
+          newValue,
+          fieldState[field.id]?.activeTab || lastActiveTab
+        );
+        setTimeout(() => setIsProcessing(false), 100);
+        return;
+      }
+
+      // if (!isBadgeClick) {
+      //   handleFieldClick(
+      //     field.id,
+      //     field.documentId,
+      //     field.pageNumber,
+      //     field.type,
+      //     fieldValue || "",
+      //     fieldState[field.id]?.activeTab || lastActiveTab
+      //   );
+      // }
+      setShowModal(true);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+      if (field.required && !hasAnyValue()) {
+        setError();
+      } else {
+        clearError();
+      }
+    };
+
+    const handleInitialSave = (sig, init, activeTab) => {
+      setIsProcessing(true);
+      const trimmedInitial = typeof init === "string" ? init.trim() : init;
+
+      setFieldValue(trimmedInitial);
+      setSignatureValue(sig);
+      setLocalValue(trimmedInitial);
+
+      handleFieldClick(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        field.type,
+        trimmedInitial,
+        activeTab,
+        sig,
+        trimmedInitial
+      );
+
+      setShowModal(false);
+      setLastActiveTab(activeTab);
+      clearError();
+      setTimeout(() => setIsProcessing(false), 100);
+    };
+
+    const iconSize =
+      Math.min(
+        parseFloat(responsiveStyle.width),
+        parseFloat(responsiveStyle.height)
+      ) * 0.5;
+
+    
+    const showTooltip = isHovered;
+
+    const baseFontSize = parseFloat(responsiveStyle.fontSize) || fontSize || 12;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : field.type.charAt(0).toUpperCase() + field.type.slice(1);
+
+
+    // ── Border logic ──
+    // filled + not active  → transparent (clean, no border over signature)
+    // filled + focused     → solid blue (active field indicator)
+    // filled + hovered     → dashed blue
+    // empty + error        → red border
+    // empty + focused      → solid blue
+    // empty + hovered      → dashed blue
+    // empty default        → dashed light blue
+    const getBorderStyle = () => {
+      // Active via badge — always wins first
+      if (isActive) return {
+        border:          "2px solid #005AB5",
+        boxShadow:       "0 0 0 3px rgba(0, 90, 181, 0.25)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Error state
+      if (hasError()) return {
+        border:          "1.5px solid #dc2626",
+        boxShadow:       "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      // Focused (modal open)
+      if (isFocused) return {
+        border:          "1.5px solid #005AB5",
+        boxShadow:       "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Hovered
+      if (isHovered) return {
+        border:          "1px dashed #005AB5",
+        boxShadow:       "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Has value, idle — transparent
+      if (displayValue) return {
+        border:          "1px solid transparent",
+        boxShadow:       "none",
+        backgroundColor: "transparent",
+      };
+      // Default empty
+      return {
+        border:          "1px dashed #7ab8f5",
+        boxShadow:       "none",
+        backgroundColor: "#EDF6FF",
+      };
+    };
+
+
+
+    const renderValue = (val) => {
+      if (!val) return null;
+      if (isTextSignature(val)) {
+        return (
+          <div
+            style={{
+              fontFamily: val.fontFamily,
+              fontSize: responsiveStyle.fontSize,
+              fontWeight: val.fontWeight,
+              color: "#000",
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              whiteSpace: "nowrap",
+              overflow: "visible",
+              wordBreak: "normal",
+            }}
+          >
+            {val.text}
+          </div>
+        );
+      }
+      return (
+        <img
+          src={val}
+          alt="Initial"
+          style={{
+            width: "100%",           // ← fill full width
+            height: "100%",          // ← fill full height
+            objectFit: "fill",       // ← stretch to fill (no letterboxing)
+            display: "block",
+            backgroundColor: "transparent",  // ← add this
+            mixBlendMode: "multiply",         // ← this makes white pixels transparent over any bg
+
+          }}
+        />
+      );
+    };
+
+    return (
+      <>
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="signature dragout text-input field-wrapper"
+          data-field-id={field.id}
+          dir="ltr"
+          style={{
+            position: "absolute",
+            ...responsiveStyle,
+            zIndex: showTooltip ? 50 : 10,
+            cursor: displayValue && !isProcessing ? "default" : "pointer",
+          }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          onBlur={handleBlur}
+        >
+          {showTooltip && (
+            <div
+              style={{
+                position: "absolute",
+                bottom: `calc(100% + ${tooltipBottom}px)`,
+                left: 0,
+                whiteSpace: "nowrap",
+                pointerEvents: "none",
+                zIndex: 99,
+              }}
+            >
+              <span
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: `${tooltipGap}px`,
+                  fontSize: `${tooltipFontSize}px`,
+                  fontWeight: 500,
+                  padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                  borderRadius: "3px",
+                  backgroundColor: "#fff",
+                  border: "1px solid #e2e8f0",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                  color: "#374151",
+                }}
+              >
+                <span
+                  style={{
+                    color: isRequired ? "#ef4444" : "#9ca3af",
+                    fontWeight: 600,
+                  }}
+                >
+                  {isRequired ? "Required" : "Optional"}
+                </span>
+                <span style={{ color: "#d1d5db" }}>·</span>
+                <span>{labelText}</span>
+              </span>
+            </div>
+          )}
+
+          <div
+            style={{
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              letterSpacing: displayValue ? "0.4rem" : "0px",
+              fontSize: `${fontSize}px`,
+              color: displayValue ? "transparent" : "",
+              cursor: displayValue && !isProcessing ? "default" : "pointer",
+              fontWeight: "medium",
+              transition:
+                "border 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease",
+              boxSizing: "border-box",
+              ...getBorderStyle(),
+              // padding: "0 4px",
+              borderRadius: "2px",
+            }}
+            onClick={handleClick}
+          >
+            {!displayValue && Icon && !isProcessing && (
+              <Icon
+                style={{
+                  width: `${iconSize}px`,
+                  height: `${iconSize}px`,
+                  opacity: 0.45,
+                  flexShrink: 0,
+                  marginRight: "4px",
+                }}
+              />
+            )}
+
+            {displayValue
+              ? renderValue(displayValue)
+              : isProcessing
+                ? "Processing..."
+                : null}
+          </div>
+        </div>
+
+        {showModal && (
+          <SignatureInitialsModal
+            onSave={handleInitialSave}
+            onClose={() => setShowModal(false)}
+            fieldType="initial"
+            fieldLabel={field.label || "Initial Field"}
+            existingSignature={existingSignature}
+            existingInitial={displayValue || existingInitial}
+            isEdit={!!displayValue}
+            activeTab={fieldState[field.id]?.activeTab || lastActiveTab}
+          />
+        )}
+      </>
+    );
+  }
+);
+
+export default InitialInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/NameInputField.jsx b/src/components/inputFields/NameInputField.jsx
new file mode 100644
index 0000000..b3fd157
--- /dev/null
+++ b/src/components/inputFields/NameInputField.jsx
@@ -0,0 +1,378 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import { useDocStore } from "../../store";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+
+const NameInputField = React.memo(
+  ({
+    field,
+    value,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    goToField,
+    setSignatureValue,
+    setInitialValue
+  }) => {
+    const Icon = FieldIcons[field.type];
+    const inputRef = useRef(null);
+    const {
+      recipientInfo,
+      setRecipientInfo,
+    } = useDocStore();
+
+    const [localValue, setLocalValue] = useState(
+      value || field.defaultValue || ""
+    );
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isTouched, setIsTouched] = useState(false);
+    const [validationError, setValidationError] = useState("");
+
+    const isRequired = field.required;
+    const showTooltip = isHovered;
+
+    // ── FONT ──────────────────────────────────────────────────────────────────
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const textStyle = {
+      fontFamily: fontProps.fontFamily,
+      fontWeight: fontProps.fontWeight,
+      fontStyle: fontProps.fontStyle,
+      textDecoration: fontProps.textDecoration,
+      color: fontProps.color,
+    };
+
+    const appliedFontSize =
+      parseFloat(responsiveStyle.fontSize) ||
+      parseFloat(field.fontSize) ||
+      fontSize ||
+      12;
+
+    const generateInitials = (name = "") => {
+      return name
+        .trim()
+        .split(" ")
+        .filter(Boolean)
+        .map((w) => w[0].toUpperCase())
+        .join("");
+    };
+
+    useEffect(() => {
+      if (!isFocused && value !== localValue) {
+        setLocalValue(value || field.defaultValue || "");
+      }
+    }, [value, field.defaultValue, isFocused]);
+
+    useEffect(() => {
+      if (recipientInfo?.fullName === undefined) return;
+      if (recipientInfo.fullName === localValue) return;
+
+      setLocalValue(recipientInfo.fullName);
+      handleFieldClick?.(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        field.type,
+        recipientInfo.fullName
+      );
+    }, [recipientInfo?.fullName]);
+
+    // ── DOM error helpers ─────────────────────────────────────────────────────
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError = () => !!getWrapper()?.hasAttribute("data-error");
+
+    const handleWrapperClick = () => {
+      if (field.readOnly) return;
+      inputRef.current?.focus();
+    };
+
+    const handleChange = (e) => {
+      const name = e.target.value;
+      const newInitials = generateInitials(name);
+
+      setRecipientInfo({
+        fullName: name,
+        initials: newInitials,
+      });
+
+      setLocalValue(name);
+
+      // Clear error when user starts typing
+      if (name.trim()) {
+        clearError();
+      }
+
+      // Optional: Update signature values if needed
+      // if (setSignatureValue && setInitialValue) {
+      //   const newSig = name.trim()
+      //     ? { text: name, fontFamily: '"Great Vibes", cursive', fontSize: "23px" }
+      //     : "";
+
+      //   const newInit = name.trim()
+      //     ? {
+      //         text: newInitials,
+      //         fontFamily: '"Great Vibes", cursive',
+      //         fontSize: "23px",
+      //       }
+      //     : "";
+
+      //   setSignatureValue(newSig);
+      //   setInitialValue(newInit);
+      // }
+
+      handleFieldClick?.(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        field.type,
+        name
+      );
+    };
+
+    const handleFocus = (e) => {
+      setIsFocused(true);
+      if (!isTouched) setIsTouched(true);
+
+      // Clear error when user focuses the field
+      clearError();
+      setValidationError("");
+      if (isRequired) goToField?.(field.id);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+
+      // Validate on blur
+      const hasValue = localValue && localValue.trim();
+
+      if (field.required && !hasValue && isTouched) {
+        setError();
+      } else if (hasValue) {
+        clearError();
+      }
+    };
+
+    const shouldDisplayField =
+      field.type === "names" &&
+      fieldState[field.id]?.update &&
+      fieldState[field.id]?.documentId === field.documentId &&
+      fieldState[field.id]?.pageNumber === field.pageNumber &&
+      fieldState[field.id]?.value;
+
+    const displayValue = shouldDisplayField
+      ? fieldState[field.id].value
+      : localValue;
+
+    const maxLength = parseInt(field.fieldSize) || 255;
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.45;
+
+
+    const tooltipFontSize = Math.max(7, Math.min(12, appliedFontSize * 0.85));
+    const tooltipPadV = Math.max(1, appliedFontSize * 0.18);
+    const tooltipPadH = Math.max(3, appliedFontSize * 0.45);
+    const tooltipGap = Math.max(3, appliedFontSize * 0.35);
+    const tooltipBottom = Math.max(3, appliedFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : field.type.charAt(0).toUpperCase() + field.type.slice(1);
+
+
+    const hasAnyValue = () => {
+      return displayValue && displayValue.trim();
+    };
+
+    const getBorderStyle = () => {
+      if (hasError() || validationError) return {
+        border: "1.5px solid #dc2626",
+        boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      if (isFocused) return {
+        border: "1.5px solid #005AB5",
+        boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (isHovered && !field.readOnly) return {
+        border: "1px dashed #005AB5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (field.readOnly) return {
+        border: "1px solid #e2e8f0",
+        boxShadow: "none",
+        backgroundColor: "#f7fafc",
+      };
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          ...textStyle,
+          fontSize: `${appliedFontSize}px`,
+          zIndex: showTooltip ? 50 : 10,
+          cursor: field.readOnly ? "default" : "text",
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={handleWrapperClick}
+      >
+        {showTooltip && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                border: validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                color: validationError ? "#dc2626" : "#374151",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                fontStyle: "normal",
+                textDecoration: "none",
+              }}
+            >
+              <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                {isRequired ? "Required" : "Optional"}
+              </span>
+              <span style={{ color: "#d1d5db" }}>·</span>
+              <span>{labelText}</span>
+            </span>
+          </div>
+        )}
+
+        {hasError() && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: "#FEF2F2",
+                border: "1px solid #fecaca",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                color: "#dc2626",
+              }}
+            >
+              <span style={{ fontWeight: 600 }}>Required</span>
+            </span>
+          </div>
+        )}
+
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="text-input dragout"
+          style={{
+            position: "relative",  // ← anchor for absolute icon
+            width: "100%",
+            height: "100%",
+            ...getBorderStyle(),
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            alignItems: "flex-end",
+            overflow: "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing: "border-box",
+          }}
+        >
+          {!displayValue && Icon && (
+            <Icon
+              style={{
+                position: "absolute",
+                left: "2px",
+                bottom: "2px",
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                opacity: 0.4,
+                pointerEvents: "none",  // clicks fall through to <input>
+                zIndex: 0,       // behind input text, above background
+              }}
+            />
+          )}
+          <input
+            ref={inputRef}
+            type="text"
+            value={displayValue}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            maxLength={maxLength}
+            dir="ltr" // ← Force LTR always
+            style={{
+              ...textStyle,
+              fontSize: `${appliedFontSize}px`,
+              border: "none",
+              outline: "none",
+              width: "100%",   // full width — icon does not displace it
+              backgroundColor: "transparent",
+              alignSelf: "flex-end",
+              lineHeight: 1,
+              padding: 0,
+              margin: 0,
+              position: "relative",
+              zIndex: 1,        // above icon layer so text renders on top
+              cursor: field.readOnly ? "default" : "text",
+            }}
+            required={field.required}
+            placeholder=""
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default NameInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/NumberInputField.jsx b/src/components/inputFields/NumberInputField.jsx
new file mode 100644
index 0000000..4968225
--- /dev/null
+++ b/src/components/inputFields/NumberInputField.jsx
@@ -0,0 +1,543 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+const NumberInputField = React.memo(
+  ({
+    field,
+    value,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    lastActiveTab,
+    goToField,
+    visibilityMap
+  }) => {
+
+    const Icon = FieldIcons[field.type];
+    const inputRef = useRef(null);
+    const [localValue, setLocalValue] = useState(
+      value || field.defaultValue || ""
+    );
+    const [validationError, setValidationError] = useState("");
+    const [debounceTimer, setDebounceTimer] = useState(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    const isRequired = field.required;
+    const showTooltip = isHovered;
+
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const textStyle = {
+      fontFamily: fontProps.fontFamily,
+      fontWeight: fontProps.fontWeight,
+      fontStyle: fontProps.fontStyle,
+      textDecoration: fontProps.textDecoration,
+      color: fontProps.color,
+    };
+
+    const appliedFontSize =
+      parseFloat(responsiveStyle.fontSize) ||
+      parseFloat(field.fontSize) ||
+      fontSize ||
+      12;
+
+
+    // Sync local state with external updates
+    useEffect(() => {
+      if (!isFocused && value !== localValue) {
+        setLocalValue(value || field.defaultValue || "");
+      }
+    }, [value, field.defaultValue, isFocused]);
+
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError = () => !!getWrapper()?.hasAttribute("data-error");
+
+    // Validate number
+    const validateValue = (val) => {
+      if (val === "" || val === null || val === undefined) return "";
+
+      const errorMsg = field?.error || "Please enter valid value !";
+
+      // Remove commas
+      const numericValue = parseFloat(val.toString().replace(/,/g, ""));
+
+      // ❌ Invalid number
+      if (isNaN(numericValue)) {
+        return errorMsg;
+      }
+
+      // ❌ MIN check
+      if (field.min !== undefined && field.min !== "") {
+        const minVal = parseFloat(field.min);
+        if (!isNaN(minVal) && numericValue < minVal) {
+          return errorMsg;
+        }
+      }
+
+      // ❌ MAX check
+      if (field.max !== undefined && field.max !== "") {
+        const maxVal = parseFloat(field.max);
+        if (!isNaN(maxVal) && numericValue > maxVal) {
+          return errorMsg;
+        }
+      }
+
+      // ❌ DECIMAL check
+      if (field.decimal !== undefined && field.decimal !== "") {
+        const decimalPlaces = parseInt(field.decimal);
+        const decimalPart = val.toString().split('.')[1];
+
+        if (decimalPart && decimalPart.length > decimalPlaces) {
+          return errorMsg;
+        }
+      }
+
+      return ""; // ✅ valid
+    };
+
+    // Format number according to formatType and format
+    const formatNumber = (val) => {
+      if (!val || val === "") return val;
+
+      const numValue = parseFloat(val);
+      if (isNaN(numValue)) return val;
+
+      // Apply formatting based on formatType
+      if (field.formatType === "number" && field.format) {
+        try {
+          // Handle different format patterns
+          if (field.format === "123,456,789.00") {
+            return numValue.toLocaleString('en-US', {
+              minimumFractionDigits: parseInt(field.decimal) || 0,
+              maximumFractionDigits: parseInt(field.decimal) || 0
+            });
+          } else if (field.otherFormat === "(123,456,789.00)") {
+            return `(${numValue.toLocaleString('en-US', {
+              minimumFractionDigits: parseInt(field.decimal) || 0,
+              maximumFractionDigits: parseInt(field.decimal) || 0
+            })})`;
+          }
+        } catch (err) {
+          console.error("Formatting error:", err);
+        }
+      }
+
+      return val;
+    };
+
+    const enforceLengthAndDecimal = (val) => {
+      if (!val) return val;
+
+      const maxDigits = parseInt(field.fieldSize) || 255;
+      const decimalLimit = parseInt(field.decimal) || 0;
+
+      // remove commas
+      val = val.replace(/,/g, "");
+
+      // allow only digits, dot, minus
+      let clean = val.replace(/[^0-9.-]/g, "");
+
+      // handle minus
+      const isNegative = clean.startsWith("-");
+      clean = clean.replace(/-/g, "");
+
+      // keep only first dot
+      const firstDotIndex = clean.indexOf(".");
+
+      let integerPart = clean;
+      let decimalPart = "";
+      let hasDot = false;
+
+      if (firstDotIndex !== -1) {
+        hasDot = true;
+
+        integerPart = clean.slice(0, firstDotIndex);
+
+        decimalPart = clean
+          .slice(firstDotIndex + 1)
+          .replace(/\./g, "");
+      }
+
+      // apply decimal limit
+      decimalPart = decimalPart.slice(0, decimalLimit);
+
+      // TOTAL DIGITS ONLY
+      let totalDigits = integerPart + decimalPart;
+
+      // trim digits only
+      totalDigits = totalDigits.slice(0, maxDigits);
+
+      // rebuild
+      const integerLength = integerPart.length;
+
+      integerPart = totalDigits.slice(
+        0,
+        Math.min(integerLength, totalDigits.length)
+      );
+
+      decimalPart = totalDigits.slice(integerPart.length);
+
+      // restore minus
+      if (isNegative) {
+        integerPart = "-" + integerPart;
+      }
+
+      // preserve dot while typing
+      if (hasDot) {
+        return `${integerPart}.${decimalPart}`;
+      }
+
+      return integerPart;
+    };
+
+    if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+    const handleWrapperClick = () => {
+      if (field.readOnly) return;
+      inputRef.current?.focus();
+    };
+
+    // Debounced value + validation - Only updates global state when valid
+    const handleChange = (e) => {
+      let newValue = e.target.value;
+
+      // Remove any non-numeric characters except decimal point and minus sign
+      if (field.type === "number") {
+        newValue = enforceLengthAndDecimal(e.target.value);
+        // Ensure only one decimal point
+        const parts = newValue.split('.');
+        if (parts.length > 2) {
+          newValue = parts[0] + '.' + parts.slice(1).join('');
+        }
+      }
+
+      setLocalValue(newValue);
+
+      // Clear validation error and data-error when user types
+      setValidationError("");
+      clearError();
+
+      if (debounceTimer) clearTimeout(debounceTimer);
+
+      const timer = setTimeout(() => {
+        const validationErr = validateValue(newValue);
+        const isValid = !validationErr && newValue !== "";
+
+        if (validationErr) {
+          setValidationError(validationErr);
+          if (newValue !== "") {
+            setError();
+          }
+        } else {
+          setValidationError("");
+          clearError();
+        }
+
+        // Only update global state if:
+        // 1. Value is empty (allow clearing)
+        // 2. Value is valid (passes all validations)
+        if (newValue === "" || isValid) {
+          // Format the value before sending to global state
+          const formattedValue = isValid ? newValue : "";
+          handleFieldClick?.(
+            field.id,
+            field.documentId,
+            field.pageNumber,
+            field.type,
+            formattedValue,
+            undefined, // activeTab
+            undefined, // sigValue
+            undefined, // initValue
+            undefined, // newStamp
+            false, // isBadgeClick
+            undefined, // contentDocumentId
+            isValid // flag for valid state
+          );
+        }
+      }, 400);
+
+      setDebounceTimer(timer);
+    };
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      // Clear error when user focuses the field
+      clearError();
+      setValidationError("");
+      if (isRequired)  goToField?.(field.id);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+
+      // Validate on blur
+      const hasValue = localValue && localValue.trim();
+
+      if (field.required && !hasValue) {
+        // Required but empty
+        setValidationError(field?.error || "This field is required");
+        setError();
+      } else if (hasValue) {
+        const validationErr = validateValue(localValue);
+        if (validationErr) {
+          setError();
+          setValidationError(validationErr);
+        } else {
+          clearError();
+          setValidationError("");
+          // Format on blur if valid
+          // const formattedValue = formatNumber(localValue);
+          const formattedValue = localValue;
+          if (formattedValue !== localValue) {
+            setLocalValue(formattedValue);
+          }
+        }
+      } else {
+        clearError();
+        setValidationError("");
+      }
+    };
+
+
+    const shouldDisplayField =
+      field.type === "number" &&
+      fieldState?.[field.id]?.update &&
+      fieldState?.[field.id]?.documentId === field.documentId &&
+      fieldState?.[field.id]?.pageNumber === field.pageNumber &&
+      fieldState?.[field.id]?.value;
+
+    const displayValue = shouldDisplayField
+      ? fieldState[field.id].value
+      : localValue;
+    const maxLength = parseInt(field.fieldSize) || 255;
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.5;
+
+
+    const tooltipFontSize = Math.max(7, Math.min(12, appliedFontSize * 0.85));
+    const tooltipPadV = Math.max(1, appliedFontSize * 0.18);
+    const tooltipPadH = Math.max(3, appliedFontSize * 0.45);
+    const tooltipGap = Math.max(3, appliedFontSize * 0.35);
+    const tooltipBottom = Math.max(3, appliedFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : "Number";
+
+    // Check if field has error
+
+    // Check if field has any value
+    const hasAnyValue = () => {
+      return !!(displayValue && displayValue.toString().trim());
+    };
+
+    // Build validation rules text for tooltip
+    const validationRules = [];
+    if (field.min !== undefined && field.min !== "") validationRules.push(`Min: ${field.min}`);
+    if (field.max !== undefined && field.max !== "") validationRules.push(`Max: ${field.max}`);
+    if (field.decimal !== undefined && field.decimal !== "") validationRules.push(`Decimals: ${field.decimal}`);
+
+    // Custom border styles based on focus, hover, and error states
+    const getBorderStyle = () => {
+      if (hasError() || validationError) return {
+        border: "1.5px solid #dc2626",
+        boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      if (isFocused) return {
+        border: "1.5px solid #005AB5",
+        boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (isHovered && !field.readOnly) return {
+        border: "1px dashed #005AB5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (field.readOnly) return {
+        border: "1px solid #e2e8f0",
+        boxShadow: "none",
+        backgroundColor: "#f7fafc",
+      };
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          ...textStyle,
+          fontSize: `${appliedFontSize}px`,
+          zIndex: showTooltip ? 50 : 10,
+          cursor: field.readOnly ? "default" : "text",
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={handleWrapperClick}
+      >
+        {/* Floating label tooltip */}
+        {(showTooltip || validationError) && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                border: validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                color: validationError ? "#dc2626" : "#374151",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                fontStyle: "normal",
+                textDecoration: "none",
+              }}
+            >
+              {/* 🔥 If error → show only error */}
+              {validationError ? (
+                <span style={{ fontWeight: 500 }}>
+                  {validationError}
+                </span>
+              ) : (
+                <>
+                  {/* ✅ Normal tooltip */}
+                  <span
+                    style={{
+                      color: isRequired ? "#ef4444" : "#9ca3af",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {isRequired ? "Required" : "Optional"}
+                  </span>
+
+                  <span style={{ color: "#d1d5db" }}>·</span>
+
+                  <span>{labelText}</span>
+
+                  {validationRules.length > 0 && (
+                    <>
+                      <span style={{ color: "#d1d5db" }}>·</span>
+                      <span
+                        style={{
+                          color: "#6b7280",
+                          fontSize: `${tooltipFontSize * 0.9}px`,
+                        }}
+                      >
+                        {validationRules.join(", ")}
+                      </span>
+                    </>
+                  )}
+                </>
+              )}
+            </span>
+          </div>
+        )}
+
+
+
+        {/* Input wrapper */}
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="number-input text-input dragout"
+          style={{
+            position: "relative",  // ← anchor for absolute icon
+            width: "100%",
+            height: "100%",
+            ...getBorderStyle(),
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            alignItems: "flex-end",
+            overflow: "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing: "border-box",
+          }}
+          onClick={handleFocus}
+        >
+          {!displayValue && Icon && (
+            <Icon
+              style={{
+                position: "absolute",
+                left: "2px",
+                bottom: "2px",
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                opacity: 0.4,
+                pointerEvents: "none",  // clicks fall through to <input>
+                zIndex: 0,       // behind input text, above background
+              }}
+            />
+          )}
+
+          <input
+            ref={inputRef}
+            type="text"
+            value={localValue}
+            onChange={!field.readOnly ? handleChange : undefined}
+            onFocus={!field.readOnly ? handleFocus : undefined}
+            onBlur={!field.readOnly ? handleBlur : undefined}
+            // placeholder={field.label || "Enter Number"}
+            // maxLength={field.fieldSize || 255}
+            dir="ltr"
+            style={{
+              ...textStyle,
+              fontSize: `${appliedFontSize}px`,
+              border: "none",
+              outline: "none",
+              width: "100%",   // full width — icon does not displace it
+              backgroundColor: "transparent",
+              alignSelf: "flex-end",
+              lineHeight: 1,
+              padding: 0,
+              margin: 0,
+              position: "relative",
+              zIndex: 1,        // above icon layer so text renders on top
+              cursor: field.readOnly ? "default" : "text",
+            }}
+            disabled={field.readOnly || false}
+            required={field.required}
+            placeholder={field.placeholder || ""}
+            readOnly={field.readOnly}
+            inputMode="decimal"
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default NumberInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/RadioInputField.jsx b/src/components/inputFields/RadioInputField.jsx
new file mode 100644
index 0000000..dad6a16
--- /dev/null
+++ b/src/components/inputFields/RadioInputField.jsx
@@ -0,0 +1,303 @@
+import React, { useState, useEffect } from "react";
+import { parsePixelValue } from "./utils";
+
+const RadioInputField = React.memo(({
+  field,
+  containerSize,
+  pdfMaxWidth,
+  pdfMaxHeight,
+  fieldState,
+  handleFieldClick,
+  minSize = 16,
+  checkboxScale = 1,
+  goToField,
+  visibilityMap,
+}) => {
+
+  const [hoveredOptionId, setHoveredOptionId] = useState(null);
+  const [focusedOptionId, setFocusedOptionId] = useState(null);
+  const [hasError,        setHasError]        = useState(false);
+
+  // activeOptionId — which single option the badge is pointing to.
+  // The parent writes data-active="true" to a specific wrapper identified by
+  // data-option-id (after the fix below in the parent effect).
+  // We observe each option's own wrapper independently.
+  const [activeOptionId, setActiveOptionId] = useState(null);
+
+  const selectedOptionId = fieldState?.[field.id]?.value ?? null;
+  const isRequired       = field.required;
+
+  // Watch data-error on any cluster wrapper AND data-active on each option wrapper
+  useEffect(() => {
+    const clusterSelector = `.field-wrapper[data-field-id="${field.id}"]`;
+
+    const checkAttributes = () => {
+      // Error: any wrapper in this cluster has data-error
+      const clusterWrappers = document.querySelectorAll(clusterSelector);
+      let foundError = false;
+      clusterWrappers.forEach(w => {
+        if (w.hasAttribute("data-error")) foundError = true;
+      });
+      setHasError(foundError);
+
+      // Active: find which specific option has data-active="true"
+      let foundActiveOptionId = null;
+      clusterWrappers.forEach(w => {
+        if (w.getAttribute("data-active") === "true") {
+          // data-option-id tells us exactly which option is active
+          foundActiveOptionId = w.getAttribute("data-option-id") || null;
+        }
+      });
+      setActiveOptionId(foundActiveOptionId);
+    };
+
+    checkAttributes();
+
+    const wrappers = document.querySelectorAll(clusterSelector);
+    const observer = new MutationObserver(checkAttributes);
+    wrappers.forEach(w =>
+      observer.observe(w, {
+        attributes: true,
+        attributeFilter: ["data-error", "data-active"],
+      })
+    );
+
+    // Watch for newly mounted option wrappers (radio mounts several divs)
+    const bodyObserver = new MutationObserver(() => {
+      const fresh = document.querySelectorAll(clusterSelector);
+      fresh.forEach(w =>
+        observer.observe(w, {
+          attributes: true,
+          attributeFilter: ["data-error", "data-active"],
+        })
+      );
+      checkAttributes();
+    });
+    bodyObserver.observe(document.body, { childList: true, subtree: true });
+
+    return () => {
+      observer.disconnect();
+      bodyObserver.disconnect();
+    };
+  }, [field.id]);
+
+  // Visibility guard — after all hooks
+  if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+  const handleRadioSelect = (optionId) => {
+    if (isRequired) {
+      goToField?.(field.id);
+    }
+    handleFieldClick(
+      optionId,
+      field.documentId,
+      field.options?.[0]?.pageNumber ?? 0,
+      "radio",
+      optionId
+    );
+    const wrappers = document.querySelectorAll(`.field-wrapper[data-field-id="${field.id}"]`);
+    wrappers.forEach(w => w.removeAttribute("data-error"));
+    setHasError(false);
+  };
+
+  const handleFocus = (optionId) => {
+    setFocusedOptionId(optionId);
+    const wrappers = document.querySelectorAll(`.field-wrapper[data-field-id="${field.id}"]`);
+    wrappers.forEach(w => w.removeAttribute("data-error"));
+    setHasError(false);
+    if (isRequired) goToField?.(field.id);
+  };
+
+  const handleBlur = (e) => {
+    const isRelatedInGroup = e.relatedTarget?.closest?.(`[data-field-id="${field.id}"]`);
+    if (isRelatedInGroup) { setFocusedOptionId(null); return; }
+    setFocusedOptionId(null);
+  };
+
+  const scaleX = containerSize.width  / pdfMaxWidth;
+  const scaleY = containerSize.height / pdfMaxHeight;
+
+  const getTooltipSizes = (radioSize) => {
+    const base = Math.max(8, Math.min(radioSize, 20));
+    return {
+      tooltipFontSize: Math.max(7, Math.min(11, base * 0.75)),
+      tooltipPadV    : Math.max(1, base * 0.15),
+      tooltipPadH    : Math.max(3, base * 0.4),
+      tooltipGap     : Math.max(3, base * 0.3),
+      tooltipBottom  : Math.max(3, base * 0.45),
+    };
+  };
+
+  // Border per option — active only fires on the specific option the badge targets
+  const getBorderStyle = (isSelected, isHovered, isFocused, isThisOptionActive) => {
+    if (isThisOptionActive) {
+      return {
+        border         : "2px solid #005AB5",
+        boxShadow      : "0 0 0 3px rgba(0, 90, 181, 0.25)",
+        backgroundColor: "#EDF6FF",
+        borderRadius   : "4px",
+        transition     : "all 0.15s ease",
+      };
+    }
+    if (hasError) {
+      return {
+        border         : "2px solid #ef4444",
+        boxShadow      : "0 0 0 3px rgba(239, 68, 68, 0.2)",
+        backgroundColor: "#fef2f2",
+        borderRadius   : "4px",
+        transition     : "all 0.15s ease",
+        animation      : "shake 0.4s ease",
+      };
+    }
+    if (isSelected) {
+      return {
+        border         : "1px dashed #7ab8f5",
+        backgroundColor: "transparent",
+        borderRadius   : "4px",
+      };
+    }
+    if (isFocused) {
+      return {
+        border         : "1.5px solid #005AB5",
+        boxShadow      : "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: "#EDF6FF",
+        borderRadius   : "4px",
+      };
+    }
+    if (isHovered) {
+      return {
+        border         : "1px dashed #005AB5",
+        backgroundColor: "#EDF6FF",
+        borderRadius   : "4px",
+      };
+    }
+    return {
+      border         : "1px dashed #7ab8f5",
+      backgroundColor: "#EDF6FF",
+      borderRadius   : "4px",
+    };
+  };
+
+  return (
+    <>
+      {field.options?.map((option) => {
+        const top    = parsePixelValue(option.top)    * scaleY;
+        const left   = parsePixelValue(option.left)   * scaleX;
+        const width  = parsePixelValue(option.width)  * scaleX;
+        const height = parsePixelValue(option.height) * scaleY;
+
+        const radioSize = Math.max(minSize, Math.min(Math.min(width, height) * checkboxScale, 24));
+
+        const isSelected        = selectedOptionId  === option.id;
+        const isHovered         = hoveredOptionId   === option.id;
+        const isFocused         = focusedOptionId   === option.id;
+        const isThisOptionActive = activeOptionId   === option.id;  // ← per-option
+
+        const labelText = option.dataLabel || `Radio ${option.id}`;
+
+        const { tooltipFontSize, tooltipPadV, tooltipPadH, tooltipGap, tooltipBottom } =
+          getTooltipSizes(radioSize);
+
+        const borderStyle = getBorderStyle(isSelected, isHovered, isFocused, isThisOptionActive);
+
+        return (
+          <div
+            key={option.id}
+            data-field-id={field.id}
+            data-option-id={option.id}
+            className="field-wrapper"
+            style={{
+              position      : "absolute",
+              top           : `${top}px`,
+              left          : `${left}px`,
+              width         : `${width}px`,
+              height        : `${height}px`,
+              display       : "flex",
+              alignItems    : "center",
+              justifyContent: "center",
+              cursor        : "pointer",
+              boxSizing     : "border-box",
+              padding       : "3px",
+              transition    : "all 0.15s ease",
+              zIndex        : isHovered || isFocused || isThisOptionActive ? 50 : 10,
+              ...borderStyle,
+            }}
+            onMouseEnter={() => setHoveredOptionId(option.id)}
+            onMouseLeave={() => setHoveredOptionId(null)}
+          >
+            <style>{`
+              @keyframes shake {
+                0%, 100% { transform: translateX(0); }
+                20%       { transform: translateX(-4px); }
+                40%       { transform: translateX(4px); }
+                60%       { transform: translateX(-3px); }
+                80%       { transform: translateX(3px); }
+              }
+            `}</style>
+
+            {(isHovered || isFocused || isThisOptionActive) && (
+              <div
+                style={{
+                  position     : "absolute",
+                  bottom       : `calc(100% + ${tooltipBottom}px)`,
+                  left         : "50%",
+                  transform    : "translateX(-50%)",
+                  whiteSpace   : "nowrap",
+                  pointerEvents: "none",
+                  zIndex       : 99,
+                }}
+              >
+                <span
+                  style={{
+                    display        : "inline-flex",
+                    alignItems     : "center",
+                    gap            : `${tooltipGap}px`,
+                    fontSize       : `${tooltipFontSize}px`,
+                    fontWeight     : 500,
+                    padding        : `${tooltipPadV}px ${tooltipPadH}px`,
+                    borderRadius   : "4px",
+                    backgroundColor: "#fff",
+                    border         : "1px solid #e2e8f0",
+                    boxShadow      : "0 1px 3px rgba(0,0,0,0.08)",
+                    color          : "#374151",
+                    fontFamily     : "system-ui, -apple-system, sans-serif",
+                    fontStyle      : "normal",
+                    textDecoration : "none",
+                  }}
+                >
+                  <span style={{ color: isRequired ? "#dc2626" : "#64748b", fontWeight: 600 }}>
+                    {isRequired ? "Required" : "Optional"}
+                  </span>
+                  <span style={{ color: "#cbd5e1" }}>·</span>
+                  <span style={{ color: "#64748b" }}>Radio</span>
+                  <span style={{ color: "#cbd5e1" }}>·</span>
+                  <span>{field.groupName}-{labelText}</span>
+                </span>
+              </div>
+            )}
+
+            <input
+              type="radio"
+              name={`cluster-${field.id}`}
+              checked={isSelected}
+              onChange={() => handleRadioSelect(option.id)}
+              onFocus={() => handleFocus(option.id)}
+              onBlur={handleBlur}
+              style={{
+                width      : `${radioSize}px`,
+                height     : `${radioSize}px`,
+                margin     : 0,
+                cursor     : "pointer",
+                accentColor: field.accentColor || "#2563eb",
+                flexShrink : 0,
+              }}
+              required={field?.required}
+            />
+          </div>
+        );
+      })}
+    </>
+  );
+});
+
+export default RadioInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/SelectInputField.jsx b/src/components/inputFields/SelectInputField.jsx
new file mode 100644
index 0000000..30ddc22
--- /dev/null
+++ b/src/components/inputFields/SelectInputField.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const SelectInputField = ({
+  field,
+  value,
+  onChange,
+  responsiveStyle,
+  fontSize,
+}) => (
+  <select
+    value={value}
+    onChange={(e) => onChange(field.id, e.target.value)}
+    style={{ ...responsiveStyle, fontSize: `${fontSize}px` }}
+    className="border border-gray-300 rounded p-1"
+  >
+    {field.options?.map((option) => (
+      <option key={option.id} value={option.value}>
+        {option.label}
+      </option>
+    ))}
+  </select>
+);
+
+export default SelectInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/SignDateInputField.jsx b/src/components/inputFields/SignDateInputField.jsx
new file mode 100644
index 0000000..efcd624
--- /dev/null
+++ b/src/components/inputFields/SignDateInputField.jsx
@@ -0,0 +1,241 @@
+import React, { useEffect, useRef, useState } from "react";
+import { detectDateFormat, formatDate } from "./utils";
+import { FieldIcons } from "../../assets/icons/icons";
+
+const SignDateInputField = React.memo(
+  ({
+    field,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    goToField,
+  }) => {
+    const hasInitialized = useRef(false);
+    const Icon = FieldIcons[field.type];
+
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    const today = new Date();
+
+    const detectedFormat = field.value ? detectDateFormat(field.value) : null;
+    const formatToUse = field.format || detectedFormat || "MM/DD/YYYY";
+    const dateDisplay = formatDate(today, formatToUse);
+
+    // ✅ run only once
+    useEffect(() => {
+      if (!hasInitialized.current && field.type === "signdate") {
+        hasInitialized.current = true;
+
+        handleFieldClick?.(
+          field.id,
+          field.documentId,
+          field.pageNumber,
+          field.type,
+          dateDisplay
+        );
+      }
+    }, [dateDisplay, field, handleFieldClick]);
+
+    const handleFocus = () => {
+      setIsFocused(true);
+
+      const wrapper = document.querySelector(
+        `.field-wrapper[data-field-id="${field.id}"]`
+      );
+      if (wrapper) wrapper.removeAttribute("data-error");
+
+      if (!field.required) return;
+      goToField?.(field.id);
+    };
+
+    const handleBlur = () => setIsFocused(false);
+
+    const currentField = fieldState;
+
+    const displayValue =
+      currentField?.update &&
+        currentField?.documentId === field.documentId &&
+        currentField?.pageNumber === field.pageNumber
+        ? currentField?.value
+        : dateDisplay;
+
+    const iconSize =
+      Math.min(
+        parseFloat(responsiveStyle.width),
+        parseFloat(responsiveStyle.height)
+      ) * 0.5;
+
+    const isRequired = field.required;
+    const showTooltip = isHovered;
+
+    const baseFontSize =
+      parseFloat(responsiveStyle.fontSize) || fontSize || 12;
+
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : "Sign Date";
+
+    const hasValue = !!displayValue;
+
+
+    // CRITICAL: Get the font styling directly from field
+    const appliedFontColor = field.fontColor || "#000000";
+    const appliedFontSize = parseFloat(responsiveStyle.fontSize) || parseFloat(field.fontSize) || fontSize || 12;
+    const appliedFontFamily = field.fontFamily || "Times New Roman";
+    const appliedFontWeight = field.bold ? "600" : "400";
+    const appliedFontStyle = field.italic ? "italic" : "normal";
+    const appliedTextDecoration = field.underLine ? "underline" : "none";
+
+
+    const borderStyle = hasValue
+      ? isHovered
+        ? {
+          border: "1px dashed #005AB5", // 👈 show ONLY on hover
+          backgroundColor: "transparent",
+        }
+        : {
+          border: "none",               // 👈 default = no border
+          backgroundColor: "transparent",
+        }
+      : isFocused
+        ? {
+          border: "1.5px solid #005AB5",
+          boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+          backgroundColor: "#EDF6FF",
+        }
+        : isHovered
+          ? {
+            border: "1px dashed #005AB5",
+            backgroundColor: "#EDF6FF",
+          }
+          : {
+            border: "1px dashed #7ab8f5",
+            backgroundColor: "#EDF6FF",
+          };
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          zIndex: showTooltip ? 50 : 10,
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {/* ✅ Tooltip */}
+        {showTooltip && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: "#fff",
+                border: "1px solid #e2e8f0",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                color: "#374151",
+              }}
+            >
+              <span
+                style={{
+                  color: isRequired ? "#ef4444" : "#9ca3af",
+                  fontWeight: 600,
+                }}
+              >
+                {isRequired ? "Required" : "Optional"}
+              </span>
+              <span style={{ color: "#d1d5db" }}>·</span>
+              <span>{labelText}</span>
+            </span>
+          </div>
+        )}
+
+        {/* ✅ Input Box */}
+        <div
+          className="text-input dragout"
+          style={{
+            width: "100%",
+            height: "100%",
+            ...borderStyle,
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            alignItems: "flex-end",
+            justifyContent: "flex-start",
+            fontSize: `${appliedFontSize}px`,
+            fontFamily: appliedFontFamily,
+            fontWeight: appliedFontWeight,
+            fontStyle: appliedFontStyle,
+            color: appliedFontColor,
+            textDecoration: appliedTextDecoration,
+            overflow: "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing: "border-box",
+          }}
+          onClick={handleFocus}
+        >
+          {!displayValue && Icon && (
+            <Icon
+              style={{
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                opacity: 0.45,
+                marginLeft: "2px",
+              }}
+            />
+          )}
+
+          <input
+            type="text"
+            value={displayValue || ""}
+            readOnly
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            dir="ltr"
+            style={{
+              fontSize: `${appliedFontSize}px`,
+              fontFamily: appliedFontFamily,
+              fontWeight: appliedFontWeight,
+              fontStyle: appliedFontStyle,
+              color: appliedFontColor,
+              textDecoration: appliedTextDecoration,
+              border: "none",
+              outline: "none",
+              width: "100%",
+              backgroundColor: "transparent",
+              // padding: "0 2px",
+              alignSelf: "flex-end",     // ← pins input to bottom of flex container
+              lineHeight: 1,
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default SignDateInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/SignatureInputField.jsx b/src/components/inputFields/SignatureInputField.jsx
new file mode 100644
index 0000000..c3e64ff
--- /dev/null
+++ b/src/components/inputFields/SignatureInputField.jsx
@@ -0,0 +1,393 @@
+import React, { useState, useEffect } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import SignatureInitialsModal from "../../modals/SignatureInitialsModal";
+import { useDocStore } from "../../store";
+import { useFieldActiveState } from "../../hooks/useFieldActiveState";
+
+const SignatureInputField = React.memo(
+  ({
+    field,
+    value,
+    responsiveStyle,
+    fontSize,
+    fieldValue,
+    setFieldValue,
+    setInitialValue,
+    setSignatureRequest,
+    handleFieldClick,
+    fieldState,
+    existingSignature,
+    existingInitial,
+    lastActiveTab,
+    setLastActiveTab,
+    goToField,
+  }) => {
+    const Icon = FieldIcons[field.type];
+    const { formJson, recipientInfo, setRecipientInfo } = useDocStore();
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [localValue, setLocalValue] = useState(value || "");
+    const [showModal, setShowModal] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+
+    const isActive = useFieldActiveState(field.id);
+
+    useEffect(() => {
+      if (value !== localValue) {
+        setLocalValue(value || "");
+      }
+    }, [value]);
+
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError = () => !!getWrapper()?.hasAttribute("data-error");
+
+    useEffect(() => {
+      const activeTab = fieldState[field.id]?.activeTab || lastActiveTab;
+      if (activeTab === "select" && !recipientInfo?.fullName?.trim()) {
+        setLocalValue("");
+      }
+    }, [recipientInfo?.fullName, fieldState, field.id, lastActiveTab]);
+
+
+    // ── Resolve display value regardless of `update` flag ──
+    // If fieldState has a value for this field (even update=false), use it;
+    // otherwise fall back to localValue.
+    const resolveDisplayValue = () => {
+      const fsValue = fieldState[field.id]?.value;
+      const fsMatchesField =
+        fieldState[field.id]?.documentId === field.documentId &&
+        fieldState[field.id]?.pageNumber === field.pageNumber;
+
+      if (fsValue && fsMatchesField) {
+        return fsValue;
+      }
+      return localValue;
+    };
+
+    const displayValue = resolveDisplayValue();
+
+    const isTextSignature = (val) => typeof val === "object" && val?.text;
+
+    const hasAnyValue = () => {
+      const v = displayValue;
+      return v && (typeof v === "string" ? v.trim() : v?.text);
+    };
+
+    const handleClick = (e) => {
+      const isBadgeClick = e.target.closest('[data-is-badge="true"]') !== null;
+      if (isProcessing) return;
+
+      setIsFocused(true);
+      clearError();
+      goToField?.(field.id);
+
+      const hasLocalValue =
+        typeof localValue === "string" ? localValue.trim() : localValue?.text;
+
+      if (localValue && hasLocalValue) {
+        // Field already has a value → open modal to edit
+        setShowModal(true);
+        return;
+      }
+
+      const hasFieldValue =
+        typeof fieldValue === "string" ? fieldValue.trim() : fieldValue?.text;
+
+      if (fieldValue && hasFieldValue) {
+        // A previously saved global value exists → apply it immediately
+        setIsProcessing(true);
+        const newValue = fieldValue;
+        setLocalValue(newValue);
+        handleFieldClick(
+          field.id,
+          field.documentId,
+          field.pageNumber,
+          field.type,
+          newValue,
+          fieldState[field.id]?.activeTab || lastActiveTab
+        );
+        setTimeout(() => setIsProcessing(false), 100);
+        return;
+      }
+
+      // Field is empty → just open the modal.
+      // Do NOT call handleFieldClick here; update: true is set only on save.
+      // if (!isBadgeClick) {
+      //   handleFieldClick(
+      //     field.id,
+      //     field.documentId,
+      //     field.pageNumber,
+      //     field.type,
+      //     fieldValue || "",
+      //     fieldState[field.id]?.activeTab || lastActiveTab
+      //   );
+      // }
+      setShowModal(true);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+      if (field.required && !hasAnyValue()) {
+        setError();
+      } else {
+        clearError();
+      }
+    };
+
+    const handleSignatureSave = (sig, init, activeTab) => {
+      setIsProcessing(true);
+      const trimmedValue = typeof sig === "string" ? sig.trim() : sig;
+
+      setFieldValue(trimmedValue);
+      setInitialValue(init);
+      setLocalValue(trimmedValue);
+      setSignatureRequest({ fieldId: field.id, value: trimmedValue });
+
+      handleFieldClick(
+        field.id,
+        field.documentId,
+        field.pageNumber,
+        field.type,
+        trimmedValue,
+        activeTab,
+        trimmedValue,
+        init
+      );
+
+      setShowModal(false);
+      setLastActiveTab(activeTab);
+      clearError();
+      setTimeout(() => setIsProcessing(false), 100);
+    };
+
+    const iconSize =
+      Math.min(
+        parseFloat(responsiveStyle.width),
+        parseFloat(responsiveStyle.height)
+      ) * 0.5;
+
+    const isRequired = field.required;
+    const showTooltip = isHovered;
+
+    const baseFontSize = parseFloat(responsiveStyle.fontSize) || fontSize || 12;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : field.type.charAt(0).toUpperCase() + field.type.slice(1);
+
+
+    // ── Border logic ──
+    // filled + not active  → transparent (no border noise over signature image/text)
+    // filled + focused     → solid blue border (active editing indicator)
+    // filled + hovered     → dashed blue border
+    // empty + error        → red border
+    // empty + focused      → solid blue border
+    // empty + hovered      → dashed blue
+    // empty default        → dashed light blue
+    const getBorderStyle = () => {
+      // Active via badge — always wins first
+      if (isActive) return {
+        border: "2px solid #005AB5",
+        boxShadow: "0 0 0 3px rgba(0, 90, 181, 0.25)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Error state
+      if (hasError()) return {
+        border: "1.5px solid #dc2626",
+        boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      // Focused (modal open)
+      if (isFocused) return {
+        border: "1.5px solid #005AB5",
+        boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Hovered
+      if (isHovered) return {
+        border: "1px dashed #005AB5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Has value, idle — transparent
+      if (displayValue) return {
+        border: "1px solid transparent",
+        boxShadow: "none",
+        backgroundColor: "transparent",
+      };
+      // Default empty
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: "#EDF6FF",
+      };
+    };
+
+    const renderValue = (val) => {
+      if (!val) return null;
+      if (isTextSignature(val)) {
+        return (
+          <div
+            style={{
+              fontFamily: val.fontFamily,
+              fontSize: responsiveStyle.fontSize,
+              fontWeight: val.fontWeight,
+              color: "#000",
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              whiteSpace: "nowrap",
+              overflow: "visible",
+              wordBreak: "normal",
+            }}
+          >
+            {val.text}
+          </div>
+        );
+      }
+      return (
+        <img
+          src={val}
+          alt="Signature"
+          style={{
+            width: "100%",           // ← fill full width
+            height: "100%",          // ← fill full height
+            objectFit: "fill",       // ← stretch to fill (no letterboxing)
+            display: "block",
+            // backgroundColor: "transparent",  
+            mixBlendMode: "multiply",         // ← this makes white pixels transparent over any bg
+
+          }}
+        />
+      );
+    };
+
+    return (
+      <>
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="signature dragout text-input field-wrapper"
+          data-field-id={field.id}
+          dir="ltr"
+          style={{
+            position: "absolute",
+            ...responsiveStyle,
+            zIndex: showTooltip ? 50 : 10,
+            cursor: displayValue && !isProcessing ? "default" : "pointer",
+          }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          onBlur={handleBlur}
+        >
+          {showTooltip && (
+            <div
+              style={{
+                position: "absolute",
+                bottom: `calc(100% + ${tooltipBottom}px)`,
+                left: 0,
+                whiteSpace: "nowrap",
+                pointerEvents: "none",
+                zIndex: 99,
+              }}
+            >
+              <span
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: `${tooltipGap}px`,
+                  fontSize: `${tooltipFontSize}px`,
+                  fontWeight: 500,
+                  padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                  borderRadius: "3px",
+                  backgroundColor: "#fff",
+                  border: "1px solid #e2e8f0",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                  color: "#374151",
+                }}
+              >
+                <span
+                  style={{
+                    color: isRequired ? "#ef4444" : "#9ca3af",
+                    fontWeight: 600,
+                  }}
+                >
+                  {isRequired ? "Required" : "Optional"}
+                </span>
+                <span style={{ color: "#d1d5db" }}>·</span>
+                <span>{labelText}</span>
+              </span>
+            </div>
+          )}
+
+          <div
+            style={{
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              fontSize: `${fontSize}px`,
+              color: displayValue ? "transparent" : "",
+              cursor: displayValue && !isProcessing ? "default" : "pointer",
+              fontWeight: "medium",
+              transition:
+                "border 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease",
+              boxSizing: "border-box",
+              ...getBorderStyle(),
+              // padding: "0 4px",
+              borderRadius: "2px",
+            }}
+            onClick={handleClick}
+          >
+            {!displayValue && Icon && !isProcessing && (
+              <Icon
+                style={{
+                  width: `${iconSize}px`,
+                  height: `${iconSize}px`,
+                  opacity: 0.45,
+                  flexShrink: 0,
+                  marginRight: "4px",
+                }}
+              />
+            )}
+
+            {displayValue
+              ? renderValue(displayValue)
+              : isProcessing
+                ? "Processing..."
+                : null}
+          </div>
+        </div>
+
+        {showModal && (
+          <SignatureInitialsModal
+            onSave={handleSignatureSave}
+            onClose={() => setShowModal(false)}
+            fieldType="signature"
+            fieldLabel={field.label || "Signature Field"}
+            existingSignature={displayValue || existingSignature}
+            existingInitial={existingInitial}
+            isEdit={!!displayValue}
+            activeTab={fieldState[field.id]?.activeTab || lastActiveTab}
+            recipientInfo={recipientInfo}
+            setRecipientInfo={setRecipientInfo}
+          />
+        )}
+      </>
+    );
+  }
+);
+
+export default SignatureInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/StampInputField.jsx b/src/components/inputFields/StampInputField.jsx
new file mode 100644
index 0000000..54b42d2
--- /dev/null
+++ b/src/components/inputFields/StampInputField.jsx
@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import StampModal from "../../modals/StampModal";
+import { useFieldActiveState } from "../../hooks/useFieldActiveState";
+
+
+const StampInputField = React.memo(
+  ({
+    field,
+    value,
+    responsiveStyle,
+    fieldValue,
+    handleFieldClick,
+    globalStampValue,
+    setGlobalStampValue,
+    goToField,
+  }) => {
+    const Icon = FieldIcons[field.type];
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [localValue,   setLocalValue]   = useState(value || "");
+    const [showModal,    setShowModal]    = useState(false);
+    const [isHovered,    setIsHovered]    = useState(false);
+    const [isFocused,    setIsFocused]    = useState(false);
+
+    // ── Mirrors TextInputField active state via MutationObserver ──
+    const isActive = useFieldActiveState(field.id);
+
+    useEffect(() => {
+      if (value !== localValue) setLocalValue(value || "");
+    }, [value]);
+
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError   = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError   = () => !!getWrapper()?.hasAttribute("data-error");
+
+    const handleClick = () => {
+      if (isProcessing) return;
+      setIsFocused(true);
+      clearError();
+      goToField?.(field.id);
+      setShowModal(true);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+      const hasAnyValue = globalStampValue || fieldValue || localValue;
+      if (field.required && !hasAnyValue) setError();
+      else clearError();
+    };
+
+    const handleStampSave = (stamp, activeTab) => {
+      setIsProcessing(true);
+      const trimmedValue = stamp.trim();
+      setGlobalStampValue(trimmedValue);
+      handleFieldClick(
+        field.id, field.documentId, field.pageNumber,
+        field.type, trimmedValue, activeTab
+      );
+      // setShowModal(false);
+      clearError();
+      setTimeout(() => setIsProcessing(false), 100);
+    };
+
+    const displayValue = globalStampValue || fieldValue || localValue || "";
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.5;
+
+    const isRequired     = field.required;
+    const showTooltip    = isHovered && !displayValue;
+    const baseFontSize   = parseFloat(responsiveStyle.fontSize) || 12;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV    = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH    = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap     = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom  = Math.max(3, baseFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : field.type.charAt(0).toUpperCase() + field.type.slice(1);
+
+    // ── Mirrors TextInputField getBorderStyle exactly ──────────────────────
+    const getBorderStyle = () => {
+      // Active via badge — always wins first
+      if (isActive) return {
+        border:          "2px solid #005AB5",
+        boxShadow:       "0 0 0 3px rgba(0, 90, 181, 0.25)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Error state
+      if (hasError()) return {
+        border:          "1.5px solid #dc2626",
+        boxShadow:       "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      // Focused (modal open)
+      if (isFocused) return {
+        border:          "1.5px solid #005AB5",
+        boxShadow:       "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Hovered
+      if (isHovered) return {
+        border:          "1px dashed #005AB5",
+        boxShadow:       "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      // Has value, idle — transparent
+      if (displayValue) return {
+        border:          "1px solid transparent",
+        boxShadow:       "none",
+        backgroundColor: "transparent",
+      };
+      // Default empty
+      return {
+        border:          "1px dashed #7ab8f5",
+        boxShadow:       "none",
+        backgroundColor: "#EDF6FF",
+      };
+    };
+
+    return (
+      <>
+        {/* ── Outer: field-wrapper only ── */}
+        <div
+          className="field-wrapper"
+          data-field-id={field.id}
+          style={{
+            position: "absolute",
+            ...responsiveStyle,
+            zIndex:   showTooltip ? 50 : 10,
+            overflow: "visible",
+            cursor:   displayValue && !isProcessing ? "default" : "pointer",
+          }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          onBlur={handleBlur}
+        >
+          {/* Tooltip */}
+          {showTooltip && (
+            <div style={{
+              position:      "absolute",
+              bottom:        `calc(100% + ${tooltipBottom}px)`,
+              left:          0,
+              whiteSpace:    "nowrap",
+              pointerEvents: "none",
+              zIndex:        99,
+            }}>
+              <span style={{
+                display:         "inline-flex",
+                alignItems:      "center",
+                gap:             `${tooltipGap}px`,
+                fontSize:        `${tooltipFontSize}px`,
+                fontWeight:      500,
+                padding:         `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius:    "3px",
+                backgroundColor: "#fff",
+                border:          "1px solid #e2e8f0",
+                boxShadow:       "0 1px 3px rgba(0,0,0,0.08)",
+                color:           "#374151",
+                fontFamily:      "system-ui, -apple-system, sans-serif",
+                fontStyle:       "normal",
+              }}>
+                <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                  {isRequired ? "Required" : "Optional"}
+                </span>
+                <span style={{ color: "#d1d5db" }}>·</span>
+                <span>{labelText}</span>
+              </span>
+            </div>
+          )}
+
+          {/* ── Inner: text-input with getBorderStyle() inline ── */}
+          <div
+            data-id={field.id}
+            data-page-number={field.pageNumber}
+            data-document-id={field.documentId}
+            data-type={field.type}
+            className="text-input stamp dragout"
+            style={{
+              position:   "relative",
+              width:      "100%",
+              height:     "100%",
+              display:    "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow:   "hidden",
+              boxSizing:  "border-box",
+              borderRadius: "2px",
+              transition: "border 0.15s ease, box-shadow 0.2s ease",
+              ...getBorderStyle(),   // ← same pattern as TextInputField
+            }}
+            onClick={handleClick}
+          >
+            {displayValue ? (
+              <img
+                src={displayValue}
+                alt="Stamp"
+                style={{ width: "100%", height: "100%", objectFit: "fill" }}
+              />
+            ) : isProcessing ? (
+              <span style={{ fontSize: `${baseFontSize}px`, color: "#666" }}>
+                Processing...
+              </span>
+            ) : (
+              Icon && (
+                <Icon style={{
+                  width:     `${iconSize}px`,
+                  height:    `${iconSize}px`,
+                  opacity:   0.45,
+                  flexShrink: 0,
+                }} />
+              )
+            )}
+          </div>
+        </div>
+
+        {showModal && (
+          <StampModal
+            onSave={handleStampSave}
+            onClose={() => setShowModal(false)}
+            fieldType="stamp"
+            fieldLabel={field.label || "Stamp Field"}
+            existingStamp={displayValue || fieldValue}
+            isEdit={!!displayValue}
+          />
+        )}
+      </>
+    );
+  }
+);
+
+export default StampInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/TextInputField.jsx b/src/components/inputFields/TextInputField.jsx
new file mode 100644
index 0000000..b9770a6
--- /dev/null
+++ b/src/components/inputFields/TextInputField.jsx
@@ -0,0 +1,356 @@
+// src/components/fields/TextInputField.jsx
+import React, { useState, useEffect, useRef } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+const TextInputField = React.memo(
+  ({
+    field,
+    value,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    goToField,
+    visibilityMap,
+  }) => {
+    const Icon     = FieldIcons[field.type];
+    const inputRef = useRef(null); // ← ref to imperatively focus the <input>
+
+    const [localValue,      setLocalValue]      = useState(value || field.defaultValue || "");
+    const [isFocused,       setIsFocused]       = useState(false);
+    const [isHovered,       setIsHovered]       = useState(false);
+    const [validationError, setValidationError] = useState("");
+    const [debounceTimer,   setDebounceTimer]   = useState(null);
+
+    const isRequired  = field.required;
+    const showTooltip = isHovered;
+
+    // ── FONT ──────────────────────────────────────────────────────────────────
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const textStyle = {
+      fontFamily:     fontProps.fontFamily,
+      fontWeight:     fontProps.fontWeight,
+      fontStyle:      fontProps.fontStyle,
+      textDecoration: fontProps.textDecoration,
+      color:          fontProps.color,
+    };
+
+    const appliedFontSize =
+      parseFloat(responsiveStyle.fontSize) ||
+      parseFloat(field.fontSize)           ||
+      fontSize                             ||
+      12;
+
+    // ── Sync external value ───────────────────────────────────────────────────
+    useEffect(() => {
+      if (!isFocused && value !== localValue) {
+        setLocalValue(value || field.defaultValue || "");
+      }
+    }, [value, field.defaultValue, isFocused]);
+
+    // ── DOM error helpers ─────────────────────────────────────────────────────
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError   = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError   = () => !!getWrapper()?.hasAttribute("data-error");
+
+    // ── Validation ────────────────────────────────────────────────────────────
+    const validateValue = (val) => {
+      if (!field.validation || val === "") return "";
+      if (field.validation === "email") {
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val))
+          return field?.error || "Please enter a valid email address";
+      }
+      if (field.validation === "phone") {
+        if (!/^[\d\s\-+()]+$/.test(val))
+          return field?.error || "Please enter a valid phone number";
+      }
+      return "";
+    };
+
+    // ── Visibility ────────────────────────────────────────────────────────────
+    if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+    // ── Handlers ──────────────────────────────────────────────────────────────
+
+    // FIX 1: Click anywhere on wrapper → imperatively focus the real <input>.
+    // Previously, handleFocus() only updated React state. The browser cursor
+    // never appeared because .focus() was never called on the DOM element.
+    const handleWrapperClick = () => {
+      if (field.readOnly) return;
+      inputRef.current?.focus();
+    };
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      clearError();
+      setValidationError("");
+      if (isRequired) goToField?.(field.id);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+      const hasValue = localValue?.trim();
+      if (field.required && !hasValue) {
+        setError();
+        setValidationError(field?.error || "This field is required");
+      } else if (hasValue) {
+        const err = validateValue(localValue);
+        if (err) { setError(); setValidationError(err); }
+        else      { clearError(); setValidationError(""); }
+      } else {
+        clearError();
+        setValidationError("");
+      }
+    };
+
+    const handleChange = (e) => {
+      const maxLength = parseInt(field.fieldSize) || 255;
+      let newValue = e.target.value;
+      if (newValue.length > maxLength) newValue = newValue.slice(0, maxLength);
+
+      setLocalValue(newValue);
+      setValidationError("");
+      clearError();
+
+      if (debounceTimer) clearTimeout(debounceTimer);
+
+      const timer = setTimeout(() => {
+        const err     = validateValue(newValue);
+        const isValid = !err;
+        if (err && newValue !== "") { setValidationError(err); setError(); }
+        else                        { setValidationError(""); clearError(); }
+        handleFieldClick?.(
+          field.id, field.documentId, field.pageNumber,
+          field.type, newValue,
+          undefined, undefined, undefined, undefined,
+          false, undefined, isValid
+        );
+      }, 400);
+
+      setDebounceTimer(timer);
+    };
+
+    // ── Display value ─────────────────────────────────────────────────────────
+    const currentField       = fieldState;
+    const shouldDisplayField =
+      field.type === "text"                          &&
+      currentField?.update                           &&
+      currentField?.documentId === field.documentId &&
+      currentField?.pageNumber === field.pageNumber &&
+      currentField?.value;
+
+    const displayValue = shouldDisplayField ? currentField?.value : localValue;
+
+    // ── Derived UI ────────────────────────────────────────────────────────────
+    const maxLength = parseInt(field.fieldSize) || 255;
+
+    const iconSize =
+      Math.min(parseFloat(responsiveStyle.width), parseFloat(responsiveStyle.height)) * 0.45;
+
+    const tooltipFontSize = Math.max(7, Math.min(12, appliedFontSize * 0.85));
+    const tooltipPadV     = Math.max(1, appliedFontSize * 0.18);
+    const tooltipPadH     = Math.max(3, appliedFontSize * 0.45);
+    const tooltipGap      = Math.max(3, appliedFontSize * 0.35);
+    const tooltipBottom   = Math.max(3, appliedFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : field.type.charAt(0).toUpperCase() + field.type.slice(1);
+
+    // ── Border style ──────────────────────────────────────────────────────────
+    const getBorderStyle = () => {
+      if (hasError() || validationError) return {
+        border:          "1.5px solid #dc2626",
+        boxShadow:       "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      if (isFocused) return {
+        border:          "1.5px solid #005AB5",
+        boxShadow:       "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (isHovered && !field.readOnly) return {
+        border:          "1px dashed #005AB5",
+        boxShadow:       "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (field.readOnly) return {
+        border:          "1px solid #e2e8f0",
+        boxShadow:       "none",
+        backgroundColor: "#f7fafc",
+      };
+      return {
+        border:          "1px dashed #7ab8f5",
+        boxShadow:       "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          ...textStyle,
+          fontSize: `${appliedFontSize}px`,
+          zIndex:   showTooltip ? 50 : 10,
+          cursor:   field.readOnly ? "default" : "text",
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={handleWrapperClick}   // ← FIX 1: whole area click → focus input
+      >
+
+        {/* ── Tooltip ───────────────────────────────────────────────────────── */}
+        {(showTooltip || validationError) && (
+          <div
+            style={{
+              position:      "absolute",
+              bottom:        `calc(100% + ${tooltipBottom}px)`,
+              left:          0,
+              whiteSpace:    "nowrap",
+              pointerEvents: "none",
+              zIndex:        99,
+            }}
+          >
+            <span
+              style={{
+                display:         "inline-flex",
+                alignItems:      "center",
+                gap:             `${tooltipGap}px`,
+                fontSize:        `${tooltipFontSize}px`,
+                fontWeight:      500,
+                padding:         `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius:    "3px",
+                backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                border:          validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                color:           validationError ? "#dc2626" : "#374151",
+                boxShadow:       "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily:      "system-ui, -apple-system, sans-serif",
+                fontStyle:       "normal",
+                textDecoration:  "none",
+              }}
+            >
+              {validationError ? (
+                <span style={{ fontWeight: 500 }}>{validationError}</span>
+              ) : (
+                <>
+                  <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                    {isRequired ? "Required" : "Optional"}
+                  </span>
+                  <span style={{ color: "#d1d5db" }}>·</span>
+                  <span>{labelText}</span>
+                  {field.fieldSize && (
+                    <>
+                      <span style={{ color: "#d1d5db" }}>·</span>
+                      <span style={{ color: "#9ca3af", fontSize: `${tooltipFontSize * 0.85}px` }}>
+                        Max {maxLength} chars
+                      </span>
+                    </>
+                  )}
+                </>
+              )}
+            </span>
+          </div>
+        )}
+
+        {/* ── Field container ───────────────────────────────────────────────── */}
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="text-input dragout"
+          style={{
+            position:   "relative",  // ← anchor for absolute icon
+            width:      "100%",
+            height:     "100%",
+            ...getBorderStyle(),
+            margin:     0,
+            padding:    0,
+            display:    "flex",
+            alignItems: "flex-end",
+            overflow:   "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing:  "border-box",
+          }}
+        >
+
+          {/*
+            FIX 2: Icon is now position:absolute — it is NOT a flex sibling
+            of the input anymore.
+
+            BEFORE (broken):
+              [icon][_____input_____]
+               cursor always appeared after the icon ↑
+
+            AFTER (fixed):
+              [_____input_____]   ← input occupies full width from left:0
+              [icon]              ← icon floats on top via absolute, bottom-left
+               cursor at position 0 ✓
+               icon disappears when user starts typing (displayValue exists) ✓
+               pointer-events:none so clicks pass through to the input below ✓
+          */}
+          {!displayValue && Icon && (
+            <Icon
+              style={{
+                position:      "absolute",
+                left:          "2px",
+                bottom:        "2px",
+                width:         `${iconSize}px`,
+                height:        `${iconSize}px`,
+                opacity:       0.4,
+                pointerEvents: "none",  // clicks fall through to <input>
+                zIndex:        0,       // behind input text, above background
+              }}
+            />
+          )}
+
+          {/* ── Input ─────────────────────────────────────────────────────── */}
+          <input
+            ref={inputRef}              // ← FIX 1: imperative focus target
+            type="text"
+            value={localValue}
+            onChange={!field.readOnly ? handleChange : undefined}
+            onFocus={!field.readOnly  ? handleFocus  : undefined}
+            onBlur={!field.readOnly   ? handleBlur   : undefined}
+            maxLength={maxLength}
+             dir = "ltr"
+            style={{
+              ...textStyle,
+              fontSize:        `${appliedFontSize}px`,
+              border:          "none",
+              outline:         "none",
+              width:           "100%",   // full width — icon does not displace it
+              backgroundColor: "transparent",
+              alignSelf:       "flex-end",
+              lineHeight:      1,
+              padding:         0,
+              margin:          0,
+              position:        "relative",
+              zIndex:          1,        // above icon layer so text renders on top
+              cursor:          field.readOnly ? "default" : "text",
+             
+            }}
+            disabled={field.readOnly  || false}
+            required={field.required}
+            placeholder={field.placeholder || ""}
+            readOnly={field.readOnly}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TextInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/TextareaInputField.jsx b/src/components/inputFields/TextareaInputField.jsx
new file mode 100644
index 0000000..de53777
--- /dev/null
+++ b/src/components/inputFields/TextareaInputField.jsx
@@ -0,0 +1,473 @@
+import React, { useState, useEffect, useRef } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+const TextareaInputField = React.memo(
+  ({
+    field,
+    value,
+    onChange,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    goToField,
+    visibilityMap
+  }) => {
+    if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+    const Icon = FieldIcons[field.type];
+    const textareaRef = useRef(null);
+    const [localValue, setLocalValue] = useState(value || field.defaultValue || "");
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [validationError, setValidationError] = useState("");
+    const [debounceTimer, setDebounceTimer] = useState(null);
+     const isRequired = field.required;
+
+    // ── FONT ──────────────────────────────────────────────────────────────────
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const textStyle = {
+      fontFamily: fontProps.fontFamily,
+      fontWeight: fontProps.fontWeight,
+      fontStyle: fontProps.fontStyle,
+      textDecoration: fontProps.textDecoration,
+      color: fontProps.color,
+    };
+
+    const appliedFontSize = parseFloat(responsiveStyle.fontSize) || parseFloat(fontSize) || 12;
+
+    useEffect(() => {
+      if (!isFocused && value !== localValue) {
+        setLocalValue(value || field.defaultValue || "");
+      }
+    }, [value, field.defaultValue, isFocused]);
+
+    const clearError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.removeAttribute("data-error");
+    };
+
+    const setError = () => {
+      const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+      if (wrapper) wrapper.setAttribute("data-error", "true");
+    };
+
+    const hasError = () => {
+      if (typeof document !== 'undefined') {
+        const wrapper = document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+        return wrapper?.hasAttribute('data-error');
+      }
+      return false;
+    };
+
+    const validateValue = (val) => {
+      if (!field.validation || val === "") return "";
+
+      // Text validation - check for allowed characters
+      if (field.validation === "text") {
+        const textRegex = /^[a-zA-Z\s\-'\n\r]+$/;
+        if (val && !textRegex.test(val)) {
+          return field?.error || "Only letters, spaces, hyphens, and apostrophes allowed";
+        }
+      }
+
+      return "";
+    };
+
+    const handleChange = (e) => {
+      let newValue = e.target.value;
+      const textarea = textareaRef.current;
+
+      // Enforce fieldSize limit (max length)
+      const maxLength = parseInt(field.fieldSize) || 255;
+      if (newValue.length > maxLength) {
+        newValue = newValue.slice(0, maxLength);
+      }
+
+      // Check if the new value would cause overflow beyond visible area
+      if (textarea) {
+        const previousValue = localValue;
+
+        // Temporarily set new value to measure if it overflows
+        textarea.value = newValue;
+
+        // Hard stop at border — no buffer allowed
+        const wouldOverflow = textarea.scrollHeight > textarea.clientHeight;
+
+        if (wouldOverflow) {
+          // Revert to previous value — do NOT update state
+          textarea.value = previousValue;
+          return;
+        }
+
+        setLocalValue(newValue);
+      } else {
+        setLocalValue(newValue);
+      }
+
+      setValidationError("");
+      clearError();
+
+      if (debounceTimer) clearTimeout(debounceTimer);
+
+      const timer = setTimeout(() => {
+        const validationErr = validateValue(newValue);
+        const isValid = !validationErr;
+
+        if (validationErr && newValue !== "") {
+          setValidationError(validationErr);
+          setError();
+        } else {
+          setValidationError("");
+          clearError();
+        }
+
+        handleFieldClick?.(
+          field.id,
+          field.documentId,
+          field.pageNumber,
+          field.type,
+          newValue,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          false,
+          undefined,
+          isValid
+        );
+      }, 400);
+
+      setDebounceTimer(timer);
+      handleFieldClick?.(field.id, field.documentId, field.pageNumber, field.type, newValue);
+    };
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      clearError();
+      setValidationError("");
+      if (isRequired) {
+        goToField?.(field.id);
+      }
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+
+      // Validate on blur - set error if required and empty or validation fails
+      const hasValue = localValue && localValue.trim();
+
+      if (field.required && !hasValue) {
+        setError();
+        setValidationError(field?.error);
+      } else if (hasValue) {
+        const validationErr = validateValue(localValue);
+        if (validationErr) {
+          setError();
+          setValidationError(validationErr);
+        } else {
+          clearError();
+          setValidationError("");
+        }
+      } else {
+        clearError();
+        setValidationError("");
+      }
+    };
+
+    useEffect(() => {
+      return () => {
+        if (debounceTimer) clearTimeout(debounceTimer);
+      };
+    }, [debounceTimer]);
+
+    const shouldDisplayField =
+      field.type === "textarea" &&
+      fieldState[field.id]?.update &&
+      fieldState[field.id]?.documentId === field.documentId &&
+      fieldState[field.id]?.pageNumber === field.pageNumber &&
+      fieldState[field.id]?.value;
+
+    const displayValue = shouldDisplayField ? fieldState[field.id].value : localValue;
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.4;
+
+    const {
+      display, alignItems, justifyContent,
+      overflow: _overflow, backgroundColor: _bg,
+      "--scale-x": _sx, "--scale-y": _sy,
+      _scaleX, _scaleY,
+      ...wrapperStyle
+    } = responsiveStyle;
+
+    // Responsive tooltip sizes
+   
+    const showTooltip = isHovered || validationError;
+    const baseFontSize = appliedFontSize;
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : field.type.charAt(0).toUpperCase() + field.type.slice(1);
+
+    // Check if field has any value
+    const hasAnyValue = () => {
+      return !!(displayValue && displayValue.trim());
+    };
+
+    // Get max length from fieldSize
+    const maxLength = parseInt(field.fieldSize) || 255;
+
+    // Calculate responsive padding based on font size to prevent text from touching borders
+    const verticalPadding = Math.max(2, Math.min(8, appliedFontSize * 0.2));
+    const horizontalPadding = Math.max(3, Math.min(10, appliedFontSize * 0.25));
+
+    // Custom border styles based on focus, hover, error states, and readOnly
+    const getBorderStyle = () => {
+      // Error state
+      if (hasError() || validationError) {
+        return {
+          border: "1.5px solid #dc2626",
+          boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+          backgroundColor: hasAnyValue ? "transparent" : "#FEF2F2",
+        };
+      }
+
+      // Focus state
+      if (isFocused && !field.readOnly) {
+        return {
+          border: "1.5px solid #005AB5",
+          boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+          backgroundColor: hasAnyValue ? "transparent" : "#EDF6FF",
+        };
+      }
+
+      // Hover state - only if not readOnly
+      if (isHovered && !field.readOnly) {
+        return {
+          border: "1px dashed #005AB5",
+          boxShadow: "none",
+          backgroundColor: hasAnyValue ? "transparent" : "#EDF6FF",
+        };
+      }
+
+      // Read-only state
+      if (field.readOnly) {
+        return {
+          border: "1px solid #e2e8f0",
+          boxShadow: "none",
+          backgroundColor: "#f7fafc",
+        };
+      }
+
+      // If field has value and is not focused and not hovered and no error
+      // if (hasAnyValue && !isFocused && !isHovered && !hasError()) {
+      //   return {
+      //     border: "1px solid transparent",
+      //     boxShadow: "none",
+      //     backgroundColor: "transparent",
+      //   };
+      // }
+
+      // Default state (empty field)
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: hasAnyValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    const borderStyle = getBorderStyle();
+
+    // Handle wrapper click to focus textarea
+    const handleWrapperClick = () => {
+      if (field.readOnly) return;
+      textareaRef.current?.focus();
+    };
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          top: wrapperStyle.top,
+          left: wrapperStyle.left,
+          width: wrapperStyle.width,
+          height: wrapperStyle.height,
+          zIndex: showTooltip ? 50 : 10,
+          ...textStyle,
+          cursor: field.readOnly ? "default" : "text",
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={handleWrapperClick}
+      >
+        {/* Floating label tooltip */}
+        {(showTooltip || validationError) && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                border: validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                color: validationError ? "#dc2626" : "#374151",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                fontStyle: "normal",
+                textDecoration: "none",
+              }}
+            >
+              {validationError ? (
+                <span style={{ fontWeight: 500 }}>{validationError}</span>
+              ) : (
+                <>
+                  <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                    {isRequired ? "Required" : "Optional"}
+                  </span>
+                  <span style={{ color: "#d1d5db" }}>·</span>
+                  <span>{labelText}</span>
+                  {hasAnyValue() && (
+                    <>
+                      <span style={{ color: "#d1d5db" }}>·</span>
+                      <span
+                        style={{
+                          color: fontProps.color,
+                          fontSize: `${tooltipFontSize * 0.9}px`,
+                          maxWidth: "150px",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                      >
+                        {/* Content preview can be uncommented if needed */}
+                      </span>
+                    </>
+                  )}
+                  {field.fieldSize && (
+                    <>
+                      <span style={{ color: "#d1d5db" }}>·</span>
+                      <span style={{ color: "#9ca3af", fontSize: `${tooltipFontSize * 0.85}px` }}>
+                        Max {maxLength} chars
+                      </span>
+                    </>
+                  )}
+                </>
+              )}
+            </span>
+          </div>
+        )}
+
+        {/* Inner field wrapper */}
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="textarea-field text-input dragout"
+          style={{
+            width: "100%",
+            height: "100%",
+            ...borderStyle,
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "flex-start",
+            overflow: "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing: "border-box",
+            position: "relative",
+          }}
+        >
+          {!displayValue && Icon && (
+            <Icon
+              style={{
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                opacity: 0.45,
+                flexShrink: 0,
+                position: "absolute",
+                left: `${horizontalPadding}px`,
+                top: `${verticalPadding}px`,
+                pointerEvents: "none",
+                zIndex: 1,
+              }}
+            />
+          )}
+          <textarea
+            ref={textareaRef}
+            name={field.id}
+            value={localValue}
+            onChange={!field.readOnly ? handleChange : undefined}
+            onFocus={!field.readOnly ? handleFocus : undefined}
+            onBlur={!field.readOnly ? handleBlur : undefined}
+            maxLength={maxLength}
+            required={field.required}
+            disabled={field.readOnly || false}
+            readOnly={field.readOnly}
+            dir="ltr"
+            style={{
+              width: "100%",
+              height: "100%",
+              ...textStyle,
+              fontSize: `${appliedFontSize}px`,
+              lineHeight: "1.3",
+              textAlign: field.textAlign || "left",
+              verticalAlign: "top",
+              margin: 0,
+              border: "none",
+              outline: "none",
+              boxSizing: "border-box",
+              resize: "none",
+              overflow: "hidden",
+              display: "block",
+              backgroundColor: "transparent",
+              // Responsive padding to prevent text from touching borders
+              paddingTop: `${verticalPadding}px`,
+              paddingBottom: `${verticalPadding}px`,
+              paddingLeft: (!displayValue && Icon)
+                ? `${iconSize + horizontalPadding + 2}px` // Space for icon
+                : `${horizontalPadding}px`,
+              paddingRight: `${horizontalPadding}px`,
+              // Text wrapping to prevent overflow
+              wordWrap: "break-word",
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              whiteSpace: "pre-wrap",
+            }}
+            data-id={field.id}
+            placeholder={field.placeholder || ""}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TextareaInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/TimeInputField.jsx b/src/components/inputFields/TimeInputField.jsx
new file mode 100644
index 0000000..bd99d94
--- /dev/null
+++ b/src/components/inputFields/TimeInputField.jsx
@@ -0,0 +1,228 @@
+import React, { useEffect, useState } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+
+const getTimeZoneShort = () => {
+  const date = new Date();
+  const parts = new Intl.DateTimeFormat("en-IN", {
+    timeZoneName: "short",
+  }).formatToParts(date);
+
+  const tzPart = parts.find((p) => p.type === "timeZoneName");
+  return tzPart?.value || "";
+};
+
+const TimeInputField = React.memo(
+  ({
+    field,
+    responsiveStyle,
+    fontSize,
+    goToField,
+  }) => {
+    const Icon = FieldIcons[field.type];
+
+    const [timeDisplay, setTimeDisplay] = useState("");
+    const [isHovered, setIsHovered] = useState(false);
+
+    // ✅ Format time
+    const formatTime = (date, format) => {
+      let hours = date.getHours();
+      let minutes = date.getMinutes();
+      const pad = (n) => (n < 10 ? "0" + n : n);
+
+      if (format === "hhmm") {
+        return `${pad(hours)}${pad(minutes)}`;
+      } else if (format === "hh:mm") {
+        return `${pad(hours)}:${pad(minutes)}`;
+      } else if (format === "hh:mm xm") {
+        const ampm = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12 || 12;
+        return `${pad(hours)}:${pad(minutes)} ${ampm}`;
+      } else {
+        return `${pad(hours)}:${pad(minutes)}`;
+      }
+    };
+
+    // ✅ Get browser timezone
+    const getTimeZone = () => {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    };
+
+    useEffect(() => {
+      const updateTime = () => {
+        const now = new Date();
+        const formatted = formatTime(now, field.format || "hh:mm");
+        const zone = getTimeZoneShort();
+        setTimeDisplay(`${formatted} ${zone}`);
+      };
+
+      updateTime();
+      const interval = setInterval(updateTime, 1000);
+
+      return () => clearInterval(interval);
+    }, [field.format]);
+
+    const hasValue = !!timeDisplay;
+
+    // CRITICAL: Get the font styling directly from field
+    const appliedFontColor = field.fontColor || "#000000";
+    const appliedFontSize = parseFloat(responsiveStyle.fontSize) || parseFloat(field.fontSize) || fontSize || 12;
+    const appliedFontFamily = field.fontFamily || "Times New Roman";
+    const appliedFontWeight = field.bold ? "600" : "400";
+    const appliedFontStyle = field.italic ? "italic" : "normal";
+    const appliedTextDecoration = field.underLine ? "underline" : "none";
+
+    // ✅ SAME BORDER LOGIC AS YOUR SIGNDATE
+    const borderStyle = hasValue
+      ? isHovered
+        ? {
+          border: "1px dashed #005AB5",
+          backgroundColor: "transparent",
+        }
+        : {
+          border: "none",
+          backgroundColor: "transparent",
+        }
+      : isHovered
+        ? {
+          border: "1px dashed #005AB5",
+          backgroundColor: "#EDF6FF",
+        }
+        : {
+          border: "1px dashed #7ab8f5",
+          backgroundColor: "#EDF6FF",
+        };
+
+    const iconSize =
+      Math.min(
+        parseFloat(responsiveStyle.width),
+        parseFloat(responsiveStyle.height)
+      ) * 0.5;
+
+    const baseFontSize =
+      parseFloat(responsiveStyle.fontSize) || fontSize || 12;
+
+    const tooltipFontSize = Math.max(7, Math.min(12, baseFontSize * 0.85));
+    const tooltipPadV = Math.max(1, baseFontSize * 0.18);
+    const tooltipPadH = Math.max(3, baseFontSize * 0.45);
+    const tooltipGap = Math.max(3, baseFontSize * 0.35);
+    const tooltipBottom = Math.max(3, baseFontSize * 0.1);
+
+    const isRequired = field.required;
+    const labelText = field.label || "Time";
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          zIndex: isHovered ? 50 : 10,
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {/* ✅ Tooltip */}
+        {isHovered && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: "#fff",
+                border: "1px solid #e2e8f0",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                color: "#374151",
+              }}
+            >
+              <span
+                style={{
+                  color: isRequired ? "#ef4444" : "#9ca3af",
+                  fontWeight: 600,
+                }}
+              >
+                {isRequired ? "Required" : "Optional"}
+              </span>
+              <span style={{ color: "#d1d5db" }}>·</span>
+              <span>{labelText}</span>
+            </span>
+          </div>
+        )}
+
+        {/* ✅ Input UI */}
+        <div
+          className="text-input dragout"
+          style={{
+            width: "100%",
+            height: "100%",
+            ...borderStyle,
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            alignItems: "flex-end",
+            justifyContent: "flex-start",
+            fontSize: `${appliedFontSize}px`,
+            fontFamily: appliedFontFamily,
+            fontWeight: appliedFontWeight,
+            fontStyle: appliedFontStyle,
+            color: appliedFontColor,
+            textDecoration: appliedTextDecoration,
+            overflow: "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing: "border-box",
+          }}
+        >
+          {!timeDisplay && Icon && (
+            <Icon
+              style={{
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                opacity: 0.45,
+                marginLeft: "2px",
+              }}
+            />
+          )}
+
+          <input
+            type="text"
+            value={timeDisplay}
+            dir="ltr"
+            readOnly
+            style={{
+              fontSize: `${appliedFontSize}px`,
+              fontFamily: appliedFontFamily,
+              fontWeight: appliedFontWeight,
+              fontStyle: appliedFontStyle,
+              color: appliedFontColor,
+              textDecoration: appliedTextDecoration,
+              border: "none",
+              outline: "none",
+              width: "100%",
+              backgroundColor: "transparent",
+              // padding: "0 2px",
+              alignSelf: "flex-end",     // ← pins input to bottom of flex container
+              lineHeight: 1,
+            }}
+            placeholder="Current Time"
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TimeInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/TitlesInputField.jsx b/src/components/inputFields/TitlesInputField.jsx
new file mode 100644
index 0000000..18270c2
--- /dev/null
+++ b/src/components/inputFields/TitlesInputField.jsx
@@ -0,0 +1,319 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FieldIcons } from "../../assets/icons/icons";
+import { getFontProps } from "../../services/fontNormalizer";
+import { useFontLoader } from "../../hooks/useFontLoader";
+
+const TitlesInputField = React.memo(
+  ({
+    field,
+    value,
+    responsiveStyle,
+    fontSize,
+    handleFieldClick,
+    fieldState,
+    goToField,
+    visibilityMap
+  }) => {
+    const Icon = FieldIcons[field.type];
+    const inputRef = useRef(null); // ← ref to imperatively focus the <input>
+
+    const [localValue, setLocalValue] = useState(value || field.defaultValue || "");
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [validationError, setValidationError] = useState("");
+    const [debounceTimer, setDebounceTimer] = useState(null);
+
+    const isRequired = field.required;
+    const showTooltip = isHovered;
+
+    // ── FONT ──────────────────────────────────────────────────────────────────
+    const fontProps = getFontProps(field);
+    useFontLoader(fontProps.fontFamily, fontProps.fontWeight, fontProps.fontStyle);
+
+    const textStyle = {
+      fontFamily: fontProps.fontFamily,
+      fontWeight: fontProps.fontWeight,
+      fontStyle: fontProps.fontStyle,
+      textDecoration: fontProps.textDecoration,
+      color: fontProps.color,
+    };
+
+    const appliedFontSize =
+      parseFloat(responsiveStyle.fontSize) ||
+      parseFloat(field.fontSize) ||
+      fontSize ||
+      12;
+
+
+    useEffect(() => {
+      if (!isFocused && value !== localValue) {
+        setLocalValue(value || field.defaultValue || "");
+      }
+    }, [value, field.defaultValue, isFocused]);
+
+    // ── DOM error helpers ─────────────────────────────────────────────────────
+    const getWrapper = () =>
+      document.querySelector(`.field-wrapper[data-field-id="${field.id}"]`);
+
+    const clearError = () => getWrapper()?.removeAttribute("data-error");
+    const setError = () => getWrapper()?.setAttribute("data-error", "true");
+    const hasError = () => !!getWrapper()?.hasAttribute("data-error");
+
+    if (visibilityMap && visibilityMap[field.id] === false) return null;
+
+    const handleWrapperClick = () => {
+      if (field.readOnly) return;
+      inputRef.current?.focus();
+    };
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      clearError();
+      setValidationError("");
+      if (isRequired) goToField?.(field.id);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+      const hasValue = localValue?.trim();
+      if (field.required && !hasValue) {
+        setError();
+        setValidationError(field?.error || "This field is required");
+      } else {
+        clearError();
+        setValidationError("");
+      }
+    };
+
+
+    const handleChange = (e) => {
+      const maxLength = parseInt(field.fieldSize) || 255;
+      let newValue = e.target.value;
+      if (newValue.length > maxLength) newValue = newValue.slice(0, maxLength);
+
+      setLocalValue(newValue);
+      setValidationError("");
+      clearError();
+
+      if (debounceTimer) clearTimeout(debounceTimer);
+
+      const timer = setTimeout(() => {
+        handleFieldClick?.(
+          field.id,
+          field.documentId,
+          field.pageNumber,
+          field.type,
+          newValue
+        );
+      }, 400);
+
+      setDebounceTimer(timer);
+    };
+
+
+    const currentField = fieldState;
+    const shouldDisplayField =
+      field.type === "titles" &&
+      currentField?.update &&
+      currentField?.documentId === field.documentId &&
+      currentField?.pageNumber === field.pageNumber &&
+      currentField?.value;
+
+    const displayValue = shouldDisplayField ? currentField?.value : localValue;
+
+    const iconSize = Math.min(
+      parseFloat(responsiveStyle.width),
+      parseFloat(responsiveStyle.height)
+    ) * 0.45;
+
+    const maxLength = parseInt(field.fieldSize) || 255;
+
+    // Responsive tooltip sizes derived from responsiveStyle.fontSize
+    const tooltipFontSize = Math.max(7, Math.min(12, appliedFontSize * 0.85));
+    const tooltipPadV = Math.max(1, appliedFontSize * 0.18);
+    const tooltipPadH = Math.max(3, appliedFontSize * 0.45);
+    const tooltipGap = Math.max(3, appliedFontSize * 0.35);
+    const tooltipBottom = Math.max(3, appliedFontSize * 0.1);
+
+    const labelText = field.label
+      ? field.label
+      : field.type.charAt(0).toUpperCase() + field.type.slice(1);
+
+
+    // Check if field has any value
+    const hasAnyValue = () => {
+      return !!(displayValue && displayValue.trim());
+    };
+
+
+    // Custom border styles based on focus, hover, and error states
+    const getBorderStyle = () => {
+      if (hasError() || validationError) return {
+        border: "1.5px solid #dc2626",
+        boxShadow: "0 0 0 2px rgba(220,38,38,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#FEF2F2",
+      };
+      if (isFocused) return {
+        border: "1.5px solid #005AB5",
+        boxShadow: "0 0 0 2px rgba(0,90,181,0.15)",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (isHovered && !field.readOnly) return {
+        border: "1px dashed #005AB5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+      if (field.readOnly) return {
+        border: "1px solid #e2e8f0",
+        boxShadow: "none",
+        backgroundColor: "#f7fafc",
+      };
+      return {
+        border: "1px dashed #7ab8f5",
+        boxShadow: "none",
+        backgroundColor: displayValue ? "transparent" : "#EDF6FF",
+      };
+    };
+
+    return (
+      <div
+        className="field-wrapper"
+        data-field-id={field.id}
+        style={{
+          position: "absolute",
+          ...responsiveStyle,
+          ...textStyle,
+          fontSize: `${appliedFontSize}px`,
+          zIndex: showTooltip ? 50 : 10,
+          cursor: field.readOnly ? "default" : "text",
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={handleWrapperClick}
+      >
+        {/* Floating label tooltip */}
+        {(showTooltip || validationError) && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: `calc(100% + ${tooltipBottom}px)`,
+              left: 0,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 99,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: `${tooltipGap}px`,
+                fontSize: `${tooltipFontSize}px`,
+                fontWeight: 500,
+                padding: `${tooltipPadV}px ${tooltipPadH}px`,
+                borderRadius: "3px",
+                backgroundColor: validationError ? "#FEF2F2" : "#fff",
+                border: validationError ? "1px solid #dc2626" : "1px solid #e2e8f0",
+                color: validationError ? "#dc2626" : "#374151",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                fontStyle: "normal",
+                textDecoration: "none",
+              }}
+            >
+              {validationError ? (
+                <span style={{ fontWeight: 500 }}>{validationError}</span>
+              ) : (
+                <>
+                  <span style={{ color: isRequired ? "#ef4444" : "#9ca3af", fontWeight: 600 }}>
+                    {isRequired ? "Required" : "Optional"}
+                  </span>
+                  <span style={{ color: "#d1d5db" }}>·</span>
+                  <span>{labelText}</span>
+                  {field.fieldSize && (
+                    <>
+                      <span style={{ color: "#d1d5db" }}>·</span>
+                      <span style={{ color: "#9ca3af", fontSize: `${tooltipFontSize * 0.85}px` }}>
+                        Max {maxLength} chars
+                      </span>
+                    </>
+                  )}
+                </>
+              )}
+            </span>
+          </div>
+        )}
+
+        {/* Input wrapper */}
+        <div
+          data-id={field.id}
+          data-page-number={field.pageNumber}
+          data-document-id={field.documentId}
+          data-type={field.type}
+          className="text-input dragout"
+          style={{
+            position: "relative",  // ← anchor for absolute icon
+            width: "100%",
+            height: "100%",
+            ...getBorderStyle(),
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            alignItems: "flex-end",
+            overflow: "hidden",
+            transition: "border 0.15s ease, box-shadow 0.2s ease",
+            boxSizing: "border-box",
+          }}
+        // onClick={handleFocus}
+        >
+          {!displayValue && Icon && (
+            <Icon
+              style={{
+                position: "absolute",
+                left: "2px",
+                bottom: "2px",
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                opacity: 0.4,
+                pointerEvents: "none",  // clicks fall through to <input>
+                zIndex: 0,       // behind input text, above background
+              }}
+            />
+          )}
+
+          <input
+            ref={inputRef}              // ← FIX 1: imperative focus target
+            type="text"
+            value={localValue}
+            onChange={!field.readOnly ? handleChange : undefined}
+            onFocus={!field.readOnly ? handleFocus : undefined}
+            onBlur={!field.readOnly ? handleBlur : undefined}
+            maxLength={maxLength}
+            dir="ltr"
+            style={{
+              ...textStyle,
+              fontSize: `${appliedFontSize}px`,
+              border: "none",
+              outline: "none",
+              width: "100%",   // full width — icon does not displace it
+              backgroundColor: "transparent",
+              alignSelf: "flex-end",
+              lineHeight: 1,
+              padding: 0,
+              margin: 0,
+              position: "relative",
+              zIndex: 1,        // above icon layer so text renders on top
+              cursor: field.readOnly ? "default" : "text",
+            }}
+            disabled={field.readOnly || false}
+            required={field.required}
+            placeholder={field.placeholder || ""}
+            readOnly={field.readOnly}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TitlesInputField;
\ No newline at end of file
diff --git a/src/components/inputFields/index.js b/src/components/inputFields/index.js
new file mode 100644
index 0000000..3a06439
--- /dev/null
+++ b/src/components/inputFields/index.js
@@ -0,0 +1,13 @@
+export { default as SelectInputField } from './SelectInputField';
+export { default as DefaultInputField } from './DefaultInputField';
+export { default as RadioInputField } from './RadioInputField';
+export { default as CheckboxInputField } from './CheckboxInputField';
+export { default as DropDownInputField } from './DropDownInputField';
+export { default as CustomTagInputField } from './CustomTagInputField';
+export { default as TextareaInputField } from './TextareaInputField';
+export { default as TextInputField } from './TextInputField';
+export { default as SignatureInputField } from './SignatureInputField';
+// Add more as they are created
+// export { default as SignatureInputField } from './SignatureInputField';
+
+export * from './utils';
\ No newline at end of file
diff --git a/src/components/inputFields/utils.js b/src/components/inputFields/utils.js
new file mode 100644
index 0000000..5da7f18
--- /dev/null
+++ b/src/components/inputFields/utils.js
@@ -0,0 +1,134 @@
+// Utility functions for input fields
+
+// Date regex patterns
+const DATE_REGEX_PATTERNS = {
+  "DD/MM/YY": /^\d{2}\/\d{2}\/\d{2}$/,
+  "MM/DD/YY": /^\d{2}\/\d{2}\/\d{2}$/,
+  "MM/DD/YYYY": /^\d{2}\/\d{2}\/\d{4}$/,
+  "DD/MM/YYYY": /^\d{2}\/\d{2}\/\d{4}$/,
+  "YYYY/MM/DD": /^\d{4}\/\d{2}\/\d{2}$/,
+  "YYYY-MM-DD": /^\d{4}-\d{2}-\d{2}$/,
+  "DD MMM YYYY": /^\d{2} [A-Z][a-z]{2} \d{4}$/,
+  "Day, DD Month YYYY": /^[A-Za-z]+, \d{2} [A-Za-z]+ \d{4}$/,
+  "Month DD, YYYY": /^[A-Za-z]+ \d{2}, \d{4}$/,
+  "DD-MMM-YYYY": /^\d{2}-[A-Z][a-z]{2}-\d{4}$/,
+  "MMM DD, YYYY": /^[A-Z][a-z]{2} \d{2}, \d{4}$/,
+};
+
+export const parsePixelValue = (value) => {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return parseFloat(value.replace("px", "")) || 0;
+  return 0;
+};
+
+export const getFontScaleFactor = (width) => {
+  if (width <= 480) return 0.8;
+  if (width <= 768) return 0.9;
+  if (width <= 1024) return 1.0;
+  return 1.1;
+};
+
+export const getRadioScale = (containerWidth) => {
+  if (containerWidth <= 360) return 1;
+  if (containerWidth <= 480) return 0.6;
+  if (containerWidth <= 768) return 0.95;
+  return 1.0;
+};
+
+export const getCheckboxScale = (containerWidth) => {
+  if (containerWidth <= 360) return 1.5;
+  if (containerWidth <= 480) return 1.3;
+  if (containerWidth <= 768) return 0.95;
+  return 1.0;
+};
+
+export const getMinSize = (containerWidth) => {
+  if (containerWidth <= 360) return 4;
+  if (containerWidth <= 480) return 6;
+  if (containerWidth <= 600) return 7;
+  if (containerWidth <= 768) return 8;
+  if (containerWidth <= 1024) return 12;
+  return 15;
+};
+
+export const detectDateFormat =(dateStr) => {
+  for (const [format, regex] of Object.entries(DATE_REGEX_PATTERNS)) {
+    if (regex.test(dateStr)) {
+      return format;
+    }
+  }
+  return null;
+}
+
+
+export const  formatDate = (date, format) => {
+  if (!(date instanceof Date)) return "";
+
+  const pad = (n) => n.toString().padStart(2, "0");
+
+  const monthShortNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  switch (format) {
+    case "DD/MM/YY":
+      return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${date
+        .getFullYear()
+        .toString()
+        .slice(2)}`;
+    case "MM/DD/YY":
+      return `${pad(date.getMonth() + 1)}/${pad(date.getDate())}/${date
+        .getFullYear()
+        .toString()
+        .slice(2)}`;
+    case "MM/DD/YYYY":
+      return `${pad(date.getMonth() + 1)}/${pad(
+        date.getDate()
+      )}/${date.getFullYear()}`;
+    case "DD/MM/YYYY":
+      return `${pad(date.getDate())}/${pad(
+        date.getMonth() + 1
+      )}/${date.getFullYear()}`;
+    case "YYYY/MM/DD":
+      return `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(
+        date.getDate()
+      )}`;
+    case "YYYY-MM-DD":
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
+        date.getDate()
+      )}`;
+    case "DD MMM YYYY":
+      return `${pad(date.getDate())} ${monthShortNames[date.getMonth()]
+        } ${date.getFullYear()}`;
+    case "Day, DD Month YYYY":
+      return `${date.toLocaleDateString("en-US", { weekday: "long" })}, ${pad(
+        date.getDate()
+      )} ${date.toLocaleDateString("en-US", {
+        month: "long",
+      })} ${date.getFullYear()}`;
+    case "Month DD, YYYY":
+      return `${date.toLocaleDateString("en-US", { month: "long" })} ${pad(
+        date.getDate()
+      )}, ${date.getFullYear()}`;
+    case "DD-MMM-YYYY":
+      return `${pad(date.getDate())}-${monthShortNames[date.getMonth()]
+        }-${date.getFullYear()}`;
+    case "MMM DD, YYYY":
+      return `${monthShortNames[date.getMonth()]} ${pad(
+        date.getDate()
+      )}, ${date.getFullYear()}`;
+    default:
+      return date.toLocaleDateString();
+  }
+}
\ No newline at end of file
diff --git a/src/components/temp.jsx b/src/components/temp.jsx
new file mode 100644
index 0000000..ebc89ea
Binary files /dev/null and b/src/components/temp.jsx differ
diff --git a/src/constant/language.js b/src/constant/language.js
new file mode 100644
index 0000000..0c8f8ea
--- /dev/null
+++ b/src/constant/language.js
@@ -0,0 +1,21 @@
+export const languageSupport = [
+  { label: "Chinese (Simplified)", value: "zh_CN" },
+  { label: "Chinese (Traditional)", value: "zh_TW" },
+  { label: "Danish", value: "da" },
+  { label: "Dutch", value: "nl_NL" },
+  { label: "English", value: "en" },
+  { label: "Finnish", value: "fi" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Italian", value: "it" },
+  { label: "Japanese", value: "ja" },
+  { label: "Korean", value: "ko" },
+  { label: "Norwegian", value: "no" },
+  { label: "Portuguese (Brazil)", value: "pt_BR" },
+  { label: "Russian", value: "ru" },
+  { label: "Spanish", value: "es" },
+  { label: "Spanish (Mexico)", value: "es_MX" },
+  { label: "Swedish", value: "sv" },
+  { label: "Thai", value: "th" },
+  { label: "Hebrew", value: "he" }
+];
\ No newline at end of file
diff --git a/src/helper/DrawSignatureCanvas.jsx b/src/helper/DrawSignatureCanvas.jsx
new file mode 100644
index 0000000..e338826
--- /dev/null
+++ b/src/helper/DrawSignatureCanvas.jsx
@@ -0,0 +1,277 @@
+import { X } from "lucide-react";
+import React, { useRef, useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+const DrawSignatureCanvas = ({ onSignatureChange, initialSignatures }) => {
+  const canvasRef1 = useRef(null);
+  const canvasRef2 = useRef(null);
+  const { t } = useTranslation();
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [activeCanvas, setActiveCanvas] = useState(null);
+  const [canvasReady, setCanvasReady] = useState(false);
+  const [hasDrawn, setHasDrawn] = useState(false);
+  const [drawnCanvases, setDrawnCanvases] = useState({
+    full: false,
+    initials: false,
+  });
+
+  const isImageData = (val) =>
+    typeof val === "string" && val.startsWith("data:image");
+
+  const setupCanvas = useCallback((canvas) => {
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const rect = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 2;
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+  }, []);
+
+  // ✅ Add non-passive touch listeners to prevent scroll while drawing
+  useEffect(() => {
+    const preventScroll = (e) => e.preventDefault();
+    const canvases = [canvasRef1.current, canvasRef2.current];
+
+    canvases.forEach((canvas) => {
+      if (canvas) {
+        canvas.addEventListener("touchstart", preventScroll, { passive: false });
+        canvas.addEventListener("touchmove", preventScroll, { passive: false });
+      }
+    });
+
+    return () => {
+      canvases.forEach((canvas) => {
+        if (canvas) {
+          canvas.removeEventListener("touchstart", preventScroll);
+          canvas.removeEventListener("touchmove", preventScroll);
+        }
+      });
+    };
+  }, [canvasReady]);
+
+  useEffect(() => {
+    if (canvasRef1.current) setupCanvas(canvasRef1.current);
+    if (canvasRef2.current) setupCanvas(canvasRef2.current);
+    setCanvasReady(true);
+  }, []);
+
+  useEffect(() => {
+    if (!canvasReady) return;
+    if (!initialSignatures) return;
+    const hasImageData =
+      isImageData(initialSignatures.fullSignature) ||
+      isImageData(initialSignatures.initials);
+    if (!hasImageData) return;
+
+    loadInitialSignatures();
+    setDrawnCanvases({
+      full: isImageData(initialSignatures.fullSignature),
+      initials: isImageData(initialSignatures.initials),
+    });
+  }, [canvasReady, initialSignatures]);
+
+  const loadInitialSignatures = () => {
+    if (!initialSignatures) return;
+
+    if (isImageData(initialSignatures.fullSignature) && canvasRef1.current) {
+      const img1 = new Image();
+      img1.onload = () => {
+        if (!canvasRef1.current) return;
+        const ctx1 = canvasRef1.current.getContext("2d");
+        if (!ctx1) return;
+        const rect = canvasRef1.current.getBoundingClientRect();
+        ctx1.clearRect(0, 0, rect.width, rect.height);
+        ctx1.drawImage(img1, 0, 0, rect.width, rect.height);
+      };
+      img1.src = initialSignatures.fullSignature;
+    }
+
+    if (isImageData(initialSignatures.initials) && canvasRef2.current) {
+      const img2 = new Image();
+      img2.onload = () => {
+        if (!canvasRef2.current) return;
+        const ctx2 = canvasRef2.current.getContext("2d");
+        if (!ctx2) return;
+        const rect = canvasRef2.current.getBoundingClientRect();
+        ctx2.clearRect(0, 0, rect.width, rect.height);
+        ctx2.drawImage(img2, 0, 0, rect.width, rect.height);
+      };
+      img2.src = initialSignatures.initials;
+    }
+  };
+
+  const getCoordinates = (e, canvas) => {
+    const rect = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    let x, y;
+    if ("touches" in e) {
+      const touch = e.touches[0];
+      x = (touch.clientX - rect.left) * (canvas.width / (rect.width * dpr));
+      y = (touch.clientY - rect.top) * (canvas.height / (rect.height * dpr));
+    } else {
+      x = (e.clientX - rect.left) * (canvas.width / (rect.width * dpr));
+      y = (e.clientY - rect.top) * (canvas.height / (rect.height * dpr));
+    }
+    return { x, y };
+  };
+
+  const startDrawing = (e, canvas) => {
+    if (!canvas) return;
+    setIsDrawing(true);
+    setHasDrawn(false);
+    setActiveCanvas(canvas === canvasRef1.current ? "full" : "initials");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = getCoordinates(e, canvas);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+  };
+
+  const draw = (e, canvas) => {
+    if (!isDrawing || !canvas) return;
+    setHasDrawn(true);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = getCoordinates(e, canvas);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  };
+
+  const stopDrawing = () => {
+  if (!isDrawing) return;
+  setIsDrawing(false);
+  if (!hasDrawn) return;
+
+  // ✅ Compute updated drawn state first
+  const updated = { ...drawnCanvases, [activeCanvas]: true };
+
+  // ✅ Capture data URLs before any state update
+  const fullSignature = canvasRef1.current
+    ? canvasRef1.current.toDataURL("image/png")
+    : null;
+  const initialsData = canvasRef2.current
+    ? canvasRef2.current.toDataURL("image/png")
+    : null;
+
+  // ✅ Update state separately — no side effects inside updater
+  setDrawnCanvases(updated);
+
+  // ✅ Call parent callback outside of setState
+  onSignatureChange({
+    fullSignature: updated.full ? fullSignature : null,
+    initials: updated.initials ? initialsData : null,
+  });
+};
+
+  const clearCanvas = () => {
+    if (canvasRef1.current) {
+      const ctx1 = canvasRef1.current.getContext("2d");
+      if (ctx1) {
+        const rect = canvasRef1.current.getBoundingClientRect();
+        ctx1.clearRect(
+          0, 0,
+          rect.width * (window.devicePixelRatio || 1),
+          rect.height * (window.devicePixelRatio || 1)
+        );
+      }
+    }
+    if (canvasRef2.current) {
+      const ctx2 = canvasRef2.current.getContext("2d");
+      if (ctx2) {
+        const rect = canvasRef2.current.getBoundingClientRect();
+        ctx2.clearRect(
+          0, 0,
+          rect.width * (window.devicePixelRatio || 1),
+          rect.height * (window.devicePixelRatio || 1)
+        );
+      }
+    }
+    setDrawnCanvases({ full: false, initials: false });
+    onSignatureChange({ fullSignature: null, initials: null });
+  };
+
+  return (
+    <>
+      <div className="mb-4 flex justify-between items-center">
+        <p className="text-xs text-gray-800 hidden sm:block">
+         {t('signatureModal.drawTab.description')}<span className="text-red-600">{t('signatureModal.drawTab.required')}</span> {t('signatureModal.drawTab.requiredFields')}
+        </p>
+
+        <div className="flex items-center gap-3 text-xs">
+          <span className={`flex items-center gap-1 ${drawnCanvases.full ? "text-green-600" : "text-gray-400"}`}>
+            <span className={`inline-block w-2 h-2 rounded-full ${drawnCanvases.full ? "bg-green-500" : "bg-gray-300"}`} />
+            {t('signatureModal.drawTab.signature')}
+          </span>
+          <span className={`flex items-center gap-1 ${drawnCanvases.initials ? "text-green-600" : "text-gray-400"}`}>
+            <span className={`inline-block w-2 h-2 rounded-full ${drawnCanvases.initials ? "bg-green-500" : "bg-gray-300"}`} />
+            {t('signatureModal.drawTab.initials')}
+          </span>
+        </div>
+
+        <div className="flex gap-2">
+          <p
+            className="px-3 py-1.5 text-xs text-red-600 cursor-pointer flex items-center justify-between"
+            onClick={clearCanvas}
+          >
+            <span className="me-1"><X size={16} /></span>
+            {t('signatureModal.drawTab.clearSignature')}
+          </p>
+        </div>
+      </div>
+
+      {/* ✅ overflow-hidden prevents layout shift during touch draw */}
+      <div className="flex-1 overflow-hidden">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
+          <div className="lg:col-span-8">
+            <label className="block text-xs font-medium text-gray-900 mb-1">
+              {t('signatureModal.drawTab.fullNameBox.label')}{" "}
+              {!drawnCanvases.full && <span className="text-orange-500">{t('signatureModal.drawTab.fullNameBox.required')}</span>}
+            </label>
+            <div className={`border-2 border-dashed rounded-md bg-white transition-colors ${drawnCanvases.full ? "border-green-400" : "border-gray-300"}`}>
+              {/* ✅ touch-none stops browser scroll/zoom hijacking the canvas */}
+              <canvas
+                ref={canvasRef1}
+                className="w-full h-[150px] cursor-crosshair touch-none"
+                onMouseDown={(e) => startDrawing(e, canvasRef1.current)}
+                onMouseMove={(e) => draw(e, canvasRef1.current)}
+                onMouseUp={stopDrawing}
+                onMouseLeave={stopDrawing}
+                onTouchStart={(e) => startDrawing(e, canvasRef1.current)}
+                onTouchMove={(e) => draw(e, canvasRef1.current)}
+                onTouchEnd={stopDrawing}
+              />
+            </div>
+          </div>
+          <div className="lg:col-span-4">
+            <label className="block text-xs font-medium text-gray-900 mb-1">
+              {t('signatureModal.drawTab.initialsBox.label')}{" "}
+              {!drawnCanvases.initials && <span className="text-orange-500">{t('signatureModal.drawTab.initialsBox.required')}</span>}
+            </label>
+            <div className={`border-2 border-dashed rounded-md bg-white transition-colors ${drawnCanvases.initials ? "border-green-400" : "border-gray-300"}`}>
+              {/* ✅ touch-none stops browser scroll/zoom hijacking the canvas */}
+              <canvas
+                ref={canvasRef2}
+                className="w-full h-[150px] cursor-crosshair touch-none"
+                onMouseDown={(e) => startDrawing(e, canvasRef2.current)}
+                onMouseMove={(e) => draw(e, canvasRef2.current)}
+                onMouseUp={stopDrawing}
+                onMouseLeave={stopDrawing}
+                onTouchStart={(e) => startDrawing(e, canvasRef2.current)}
+                onTouchMove={(e) => draw(e, canvasRef2.current)}
+                onTouchEnd={stopDrawing}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DrawSignatureCanvas;
\ No newline at end of file
diff --git a/src/helper/Loader.jsx b/src/helper/Loader.jsx
new file mode 100644
index 0000000..ba841ca
--- /dev/null
+++ b/src/helper/Loader.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { FileText, PenTool } from "lucide-react";
+import SMELoader from "../assets/SMELoader.gif"
+
+const Loader = ({transparentbg=false}) => {
+  return (
+    <div className={`fixed inset-0 z-[60] flex items-center justify-center ${transparentbg ? "bg-white/70 backdrop-blur-[2px]" : "bg-white"}`}>
+
+      <img
+        src={SMELoader}
+        className="w-15 md:w-24 lg:w-25 2xl:w-50"
+        loading="eager"
+      />
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/src/helper/Toaster.jsx b/src/helper/Toaster.jsx
new file mode 100644
index 0000000..fddab13
--- /dev/null
+++ b/src/helper/Toaster.jsx
@@ -0,0 +1,81 @@
+import { useState, useEffect } from "react";
+import { CheckCircle, XCircle, Info, X } from "lucide-react";
+
+const Toaster = ({ toastStatus, toastMessage, onClose }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
+
+  useEffect(() => {
+    if (toastStatus && toastMessage) {
+      setIsVisible(true);
+      setIsExiting(false);
+    }
+  }, [toastStatus, toastMessage]);
+
+  const handleClose = () => {
+    setIsExiting(true);
+    setTimeout(() => {
+      setIsVisible(false);
+      if (onClose) onClose();
+    }, 200);
+  };
+
+  if (!toastStatus || !toastMessage || !isVisible) return null;
+
+  const config = {
+    success: {
+      bg: "bg-white",
+      border: "border-green-500",
+      icon: <CheckCircle className="w-5 h-5 text-green-500" />,
+      iconBg: "bg-green-50",
+    },
+    error: {
+      bg: "bg-white",
+      border: "border-red-500",
+      icon: <XCircle className="w-5 h-5 text-red-500" />,
+      iconBg: "bg-red-50",
+    },
+    info: {
+      bg: "bg-white",
+      border: "border-blue-500",
+      icon: <Info className="w-5 h-5 text-blue-500" />,
+      iconBg: "bg-blue-50",
+    },
+  };
+
+  const currentConfig = config[toastStatus] || config.info;
+
+  return (
+    <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-[1000] pointer-events-none" style={{ direction: 'ltr' }}>
+      <div
+        className={`pointer-events-auto ${currentConfig.bg} ${
+          currentConfig.border
+        } border-l-4 rounded-lg shadow-xl px-4 py-3 flex items-center gap-3 min-w-[300px] max-w-[500px] transition-all duration-200 ${
+          isExiting
+            ? "opacity-0 scale-95 -translate-y-2"
+            : "opacity-100 scale-100 translate-y-0"
+        }`}
+        style={{
+          animation: isExiting ? "none" : "slideIn 0.2s ease-out",
+        }}
+      >
+        <div
+          className={`${currentConfig.iconBg} rounded-full p-1.5 flex-shrink-0`}
+        >
+          {currentConfig.icon}
+        </div>
+        <span className="text-gray-800 font-medium flex-grow">
+          {toastMessage}
+        </span>
+        {/* <button
+          onClick={handleClose}
+          className="text-gray-400 hover:text-gray-600 transition-colors flex-shrink-0"
+        >
+          <X className="w-4 h-4" />
+        </button> */}
+      </div>
+    </div>
+  );
+};
+
+export default Toaster;
diff --git a/src/helper/navigator.js b/src/helper/navigator.js
new file mode 100644
index 0000000..f3a8578
--- /dev/null
+++ b/src/helper/navigator.js
@@ -0,0 +1,11 @@
+let navigateFn = null;
+
+export const setNavigator = (fn) => {
+  navigateFn = fn;
+};
+
+export const navigateTo = (path, options = {}) => {
+  if (navigateFn) {
+    navigateFn(path, options);
+  }
+};
\ No newline at end of file
diff --git a/src/hooks/useDocActions.js b/src/hooks/useDocActions.js
new file mode 100644
index 0000000..c6fe537
--- /dev/null
+++ b/src/hooks/useDocActions.js
@@ -0,0 +1,9 @@
+
+import { useDocStore } from "../store";
+
+export const useDocActions = () =>
+  useDocStore((state) => ({
+    setToast: state.setToast,
+    setDocData: state.setDocData,
+    updateFormJson: state.updateFormJson,
+  }));
\ No newline at end of file
diff --git a/src/hooks/useFieldActiveState.js b/src/hooks/useFieldActiveState.js
new file mode 100644
index 0000000..8fdfd23
--- /dev/null
+++ b/src/hooks/useFieldActiveState.js
@@ -0,0 +1,26 @@
+
+import { useState, useEffect } from "react";
+
+export function useFieldActiveState(fieldId) {
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    const wrapper = document.querySelector(
+      `.field-wrapper[data-field-id="${fieldId}"]`
+    );
+    if (!wrapper) return;
+
+    const observer = new MutationObserver(() => {
+      setIsActive(wrapper.hasAttribute("data-active"));
+    });
+
+    observer.observe(wrapper, { attributes: true, attributeFilter: ["data-active"] });
+
+    // Set initial state
+    setIsActive(wrapper.hasAttribute("data-active"));
+
+    return () => observer.disconnect();
+  }, [fieldId]);
+
+  return isActive;
+}
\ No newline at end of file
diff --git a/src/hooks/useFontLoader.js b/src/hooks/useFontLoader.js
new file mode 100644
index 0000000..eebe68e
--- /dev/null
+++ b/src/hooks/useFontLoader.js
@@ -0,0 +1,37 @@
+// src/hooks/useFontLoader.js
+import { useState, useEffect } from "react";
+import { fontService } from "../services/FontService";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// useFontLoader(fontFamily, weight, style)
+//
+// Now accepts weight + style so FontService loads only the exact variant
+// needed — not all variants. Matches the updated FontService.load() signature.
+//
+// Starts synchronously ready when:
+//   - font is native (Arial, Times New Roman, etc.)
+//   - this exact variant was already loaded (Tier 4 preload hit)
+//   - font is unknown (CSS fallback handles it)
+// ─────────────────────────────────────────────────────────────────────────────
+export function useFontLoader(fontFamily, weight = "400", style = "normal") {
+  const [ready, setReady] = useState(
+    () => fontService.isReady(fontFamily, weight, style)
+  );
+
+  useEffect(() => {
+    if (fontService.isReady(fontFamily, weight, style)) {
+      setReady(true);
+      return;
+    }
+
+    let alive = true;
+
+    fontService.load(fontFamily, weight, style).then(() => {
+      if (alive) setReady(true);
+    });
+
+    return () => { alive = false; };
+  }, [fontFamily, weight, style]);
+
+  return ready;
+}
\ No newline at end of file
diff --git a/src/hooks/useLocalizedLabel.js b/src/hooks/useLocalizedLabel.js
new file mode 100644
index 0000000..9cbfbc0
--- /dev/null
+++ b/src/hooks/useLocalizedLabel.js
@@ -0,0 +1,22 @@
+// hooks/useLocalizedLabel.js
+import i18n from "../i18n"; // ✅ import the i18n instance directly
+import { languageSupport } from "../constant/language";
+
+export const useLocalizedLabel = () => {
+
+  const getLocalizedLabel = (langValue) => {
+    if (!langValue) return "—";
+
+    // ✅ i18n.t is always current — no stale closure
+    const translated = i18n.t(`languages.${langValue}`, { defaultValue: null });
+
+    if (translated && translated !== `languages.${langValue}`) {
+      return translated;
+    }
+
+    const found = languageSupport.find((l) => l.value === langValue);
+    return found ? found.label : langValue;
+  };
+
+  return { getLocalizedLabel };
+};
\ No newline at end of file
diff --git a/src/i18n.js b/src/i18n.js
new file mode 100644
index 0000000..b06232d
--- /dev/null
+++ b/src/i18n.js
@@ -0,0 +1,50 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+import { languageSupport } from "./constant/language";
+
+const supportedLngs = languageSupport.map((lang) => lang.value);
+
+// RTL languages
+const rtlLanguages = ["he"];
+
+i18n
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    backend: {
+      loadPath: `${window.location.origin}/locales/{{lng}}/translation.json`,
+
+      //prevent mobile browser caching stale bundles
+      requestOptions: {
+        cache: "no-store",
+      },
+    },
+
+    lng: "en",
+    fallbackLng: "en",
+
+    supportedLngs: supportedLngs,
+
+    // force reload even if namespace was previously loaded
+    load: "currentOnly",
+
+    //  don't reuse cached resources across language switches
+    reloadOnLanguageChange: true,
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    react: {
+      useSuspense: true,
+    },
+  });
+
+// Helper function to check if a language is RTL
+export const isRtlLanguage = (lang) => {
+  return rtlLanguages.includes(lang);
+};
+
+
+export default i18n;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..c3d171d
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,130 @@
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  themes: light --default;
+}
+
+@theme {
+  --color-regal-blue: #005AB5;
+  --color-docs-bg: #F5F6FA;
+  --color-t-c: #077DEC;
+}
+
+/* @font-face {
+  font-family: "Great Vibes";
+  src: url("./assets/fonts/GreatVibes-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+} */
+
+@font-face {
+  font-family: "Great Vibes";
+  src: url("/fonts/great-vibes/great-vibes-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@layer utilities {
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
+}
+
+@layer utilities {
+  .loader {
+    background: linear-gradient(135deg,
+        transparent calc(50% - 0.5em),
+        #000 0 calc(50% + 0.5em),
+        transparent 0) right/300% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: loader-wipe 2s infinite linear;
+  }
+
+  @keyframes loader-wipe {
+    100% {
+      background-position: left;
+    }
+  }
+}
+
+
+
+.toast {
+  transition: opacity 0.3s ease-in-out;
+}
+
+
+.arrow-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 20px 8px 16px;
+  background-color: #1a6fd4;
+  color: white;
+  font-weight: 600;
+  clip-path: polygon(0% 0%,
+      calc(100% - 14px) 0%,
+      100% 50%,
+      calc(100% - 14px) 100%,
+      0% 100%);
+}
+
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+
+/* Red highlight for empty required fields on submit */
+.field-wrapper[data-error="true"] .text-input {
+  border: 2px solid #ef4444 !important;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
+  background-color: #fef2f2 !important;
+  animation: shake 0.4s ease;
+}
+
+/* Blue active border always wins — even over error */
+.field-wrapper[data-active="true"] .text-input,
+.field-wrapper[data-active="true"][data-error="true"] .text-input {
+  border: 2px solid #005AB5 !important;
+  box-shadow: 0 0 0 3px rgba(0, 90, 181, 0.25) !important;
+  background-color: #EDF6FF !important;
+}
+
+@keyframes shake {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(-4px);
+  }
+
+  40% {
+    transform: translateX(4px);
+  }
+
+  60% {
+    transform: translateX(-3px);
+  }
+
+  80% {
+    transform: translateX(3px);
+  }
+}
\ No newline at end of file
diff --git a/src/layout/AppLayout.jsx b/src/layout/AppLayout.jsx
new file mode 100644
index 0000000..d5d14ff
--- /dev/null
+++ b/src/layout/AppLayout.jsx
@@ -0,0 +1,188 @@
+import { useEffect, useRef, useState } from "react";
+import { Outlet, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import Loader from "../helper/Loader";
+import { useDocStore } from "../store";
+import { fetchDocData } from "../services/fetchDocData";
+import { fetchReassignData } from "../services/reassignService";
+import { setNavigator } from "../helper/navigator";
+import Toaster from "../helper/Toaster";
+import { resolveRoute } from "./routeResolver";
+import { fetchAuditTrailsData } from "../services/fetchAuditTrailsData";
+import { initSession, startSessionPing } from "../services/sessionService";
+
+const SESSION_KEY = "app_session_id";
+
+const SAFE_ROUTES = ["/error", "/access-denied", "/session-expired", "/"];
+const BYPASS_ROUTES = ["/reassign"];
+const SKIP_FETCH_ROUTES = ["/status", "/cancelled", "/expired",];
+const INDEPENDENT_ROUTES = ["/audit-trails-info", "/preview"];
+
+// Routes that need data before anything should render
+const NEEDS_FETCH = (pathname) => !SAFE_ROUTES.includes(pathname);
+
+const AppLayout = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [loading, setLoading] = useState(() => NEEDS_FETCH(location.pathname));
+    // const [sessionReady, setSessionReady] = useState(false);
+
+    const bootstrapCalled = useRef(false);
+    const pingCleanupRef = useRef(null);
+    const pathnameRef = useRef(location.pathname);
+
+    const sessionReadyRef = useRef(false);
+    const fetchCalled = useRef(false);        //  guards fetch
+
+    const uuid = searchParams.get("uuid");
+    const { formJson, toastMessage, toastStatus, clearToast } = useDocStore();
+
+    // Keep pathnameRef in sync
+    pathnameRef.current = location.pathname;
+
+    // Register navigate globally
+    setNavigator(navigate);
+
+    // Toast cleanup
+    useEffect(() => {
+        if (!toastMessage) return;
+        const timer = setTimeout(() => clearToast(), 2000);
+        return () => clearTimeout(timer);
+    }, [toastMessage]);
+
+    // Ping cleanup on unmount
+    useEffect(() => {
+        return () => pingCleanupRef.current?.();
+    }, []);
+
+    // Master effect — handles session, data fetch, guards
+    useEffect(() => {
+        const pathname = location.pathname;
+
+        // Stop ping when on skip routes 
+        if (SKIP_FETCH_ROUTES.includes(pathname)) {
+            pingCleanupRef.current?.();
+            pingCleanupRef.current = null;
+        }
+
+        // Safe routes — just turn off loader
+        if (SAFE_ROUTES.includes(pathname)) {
+            setLoading(false);
+            return;
+        }
+
+        // UUID guard
+        if (!uuid) {
+            navigate("/error", {
+                replace: true,
+                state: {
+                    status: 400,
+                    message: "Invalid or missing token.",
+                    errorCode: "MISSING_UUID",
+                },
+            });
+            return;
+        }
+
+        // Guard: don't fetch twice for the same route visit
+        if (fetchCalled.current) return;
+        fetchCalled.current = true;
+
+        const run = async () => {
+            try {
+                setLoading(true);
+
+                // --- Session bootstrap (only once, only on /sign) ---
+                const needsSession =
+                    pathname === "/sign";
+
+                if (needsSession && !bootstrapCalled.current) {
+                    bootstrapCalled.current = true;
+
+                    const newSessionId = await initSession();
+
+                    if (newSessionId !== uuid) {
+                        setSearchParams({ uuid: newSessionId }, { replace: true });
+                    }
+
+                    // Start ping only on /sign (not on /status or independent routes)
+                    if (pathnameRef.current === "/sign") {
+                        pingCleanupRef.current = startSessionPing(newSessionId);
+                    }
+
+                    // Use ref, not state — no re-render triggered
+                    sessionReadyRef.current = true;
+                }
+
+                // --- Data fetching ---
+                if (INDEPENDENT_ROUTES.includes(pathname)) {
+                    if (pathname === "/preview") {
+                        const data = await fetchDocData("/preview");
+                        if (data?.status !== "DRAFT") {
+                            navigate("/access-denied", {
+                                replace: true,
+                                state: { errorCode: "PREVIEW_UNAVAILABLE" },
+                            });
+                        }
+                    } else {
+                        const data = await fetchAuditTrailsData(uuid);
+                        if (data?.success === false) {
+                            navigate("/access-denied", {
+                                replace: true,
+                                state: { errorCode: "AUDIT_TRAIL_HIDDEN" },
+                            });
+                        }
+                    }
+                    return;
+                }
+
+                if (SKIP_FETCH_ROUTES.includes(pathname)) {
+                    if (!formJson?.status && uuid) {
+                        await fetchDocData("/sign");
+                    }
+                    return;
+                }
+
+                // /sign waits for session
+                if (pathname === "/sign" && !sessionReadyRef.current) return;
+
+                if (pathname === "/reassign") {
+                    await fetchReassignData();
+                } else {
+                    await fetchDocData(pathname);
+                }
+
+            } catch (err) {
+                console.error("AppLayout run error:", err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        run();
+    }, [uuid, location.pathname]);
+
+    // Route resolution
+    useEffect(() => {
+        if (BYPASS_ROUTES.includes(location.pathname)) return;
+        if (INDEPENDENT_ROUTES.includes(location.pathname)) return;
+        if (!formJson?.status) return;
+
+        const allowedRoute = resolveRoute(formJson);
+        if (location.pathname !== allowedRoute) {
+            navigate(`${allowedRoute}?uuid=${uuid}`, { replace: true });
+        }
+    }, [formJson?.status]);
+
+    return (
+        <>
+            {loading && <Loader transparentbg={false} />}
+            {toastStatus && toastMessage && (
+                <Toaster toastStatus={toastStatus} toastMessage={toastMessage} />
+            )}
+            <Outlet />
+        </>
+    );
+};
+
+export default AppLayout;
\ No newline at end of file
diff --git a/src/layout/routeResolver.jsx b/src/layout/routeResolver.jsx
new file mode 100644
index 0000000..dc9b99e
--- /dev/null
+++ b/src/layout/routeResolver.jsx
@@ -0,0 +1,27 @@
+// utils/routeResolver.js
+
+export const STATUS_ROUTE_MAP = {
+  DRAFT: "/preview",
+  SENT: "/sign",
+  VIEWED: "/sign",
+  COMPLETE: "/status",
+  DECLINED: "/status",
+  CANCELLED: "/status",
+  EXPIRED: "/expired",
+  REASSIGN: "/reassign-info",
+};
+
+export const resolveRoute = (formJson) => {
+  if (!formJson || !formJson.status) {
+    return "/error";
+  }
+
+  const { status, role } = formJson;
+
+  //  SPECIAL CASE
+  if (role === "CC" && status === "COMPLETE") {
+    return "/sign";
+  }
+
+  return STATUS_ROUTE_MAP[status] || "/error";
+};
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..b5cfd2f
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,28 @@
+// import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import i18n from './i18n';
+import { I18nextProvider } from 'react-i18next';
+import { setupLanguageListener, updateHtmlLanguageAttributes } from './services/languageUtils.js';
+
+// Initialize language on app start
+// updateHtmlLanguageAttributes(i18n.language || 'en');
+
+
+// Set up language change listener
+// const cleanup = setupLanguageListener((result) => {
+//   // Optional: Additional logic after language change
+//   console.log('✅ Language change complete:', result);
+// });
+
+// Listen for language changes from i18n
+// i18n.on('languageChanged', cleanup);
+
+createRoot(document.getElementById('root')).render(
+  // <StrictMode>
+  <I18nextProvider i18n={i18n}>
+    <App />
+  </I18nextProvider>
+  // </StrictMode>,
+)
diff --git a/src/modals/AttachmentModal.jsx b/src/modals/AttachmentModal.jsx
new file mode 100644
index 0000000..3996d8d
--- /dev/null
+++ b/src/modals/AttachmentModal.jsx
@@ -0,0 +1,448 @@
+import React, { useState, useEffect, useRef } from "react";
+import { X, Trash } from "lucide-react";
+import UploadLogo from "../assets/upload-filled.png";
+import api from "../api/Axios";
+import { useSearchParams } from "react-router-dom";
+import Toaster from "../helper/Toaster";
+import { useDocStore } from "../store";
+import { useTranslation } from "react-i18next";
+
+const AttachmentModal = ({
+  onClose,
+  onSave,
+  onDelete,
+  uid,
+  transaction,
+  existingFile,
+}) => {
+  const [searchParams] = useSearchParams();
+  const uuid = searchParams.get("uuid");
+  const docFormJson = useDocStore((state) => state.formJson);
+  const { t } = useTranslation();
+  const [file, setFile] = useState(existingFile || null);
+  const [uploading, setUploading] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
+  const [toastStatus, setToastStatus] = useState("");
+  const [isSaved, setIsSaved] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef(null);
+
+  console.log("filefile", file);
+  const isDraft = docFormJson?.status === 'DRAFT';
+
+  const maxSize = 10 * 1024 * 1024;
+
+  useEffect(() => {
+    if (existingFile) setFile(existingFile);
+  }, [existingFile]);
+
+  const processFile = async (selectedFile) => {
+    if (!selectedFile) return;
+
+    if (selectedFile.size > maxSize) {
+      setToastMessage("File size exceeds 10MB. Please upload a smaller file.");
+      setToastStatus("error");
+
+      setTimeout(() => {
+        setToastMessage("");
+        setToastStatus("");
+      }, 3000);
+      return
+    }
+
+    setUploading(true);
+    setToastMessage("");
+    setToastStatus("");
+
+
+    // DRAFT MODE (NO API)
+
+    if (isDraft) {
+      const localFile = {
+        FileName: selectedFile.name,
+        ContentDocumentId: `LOCAL_${Date.now()}`, // fake ID
+        fileObject: selectedFile,
+      };
+
+      setFile(localFile);
+      setIsSaved(true);
+      setUploading(false);
+      onSave(localFile);
+
+      setToastMessage("File added");
+      setToastStatus("success");
+
+      setTimeout(() => {
+        setToastMessage("");
+        setToastStatus("");
+      }, 3000);
+
+      return; //  NO API CALL
+    }
+
+    try {
+      const reader = new FileReader();
+
+      reader.onload = async (event) => {
+        const base64File = event.target.result;
+
+        const payload = {
+          extension: selectedFile.name.split(".").pop(),
+          file: base64File,
+          fileName: selectedFile.name,
+          ouid: null,
+          recipientId: null,
+          transactionId: transaction,
+          uid: uid,
+        };
+
+        try {
+          const res = await api.post("/sign/upload", payload, {
+            headers: {
+              "X-AUTH-TYPE": "TRANSACTIONAL",
+              "ngrok-skip-browser-warning": "69420",
+              "Access-Control-Allow-Origin": "*",
+              Authorization: `${uuid}`,
+            },
+          });
+
+          const fileData = res.data;
+          const uploaded = {
+            FileName: fileData.FileName,
+            ContentDocumentId: fileData.ContentDocumentId,
+          };
+
+          setToastMessage("File uploaded successfully!");
+          setToastStatus("success");
+          setIsSaved(true); //  mark file as saved
+          setFile(uploaded);
+          onSave(uploaded);
+
+          setTimeout(() => {
+            setToastMessage("");
+            setToastStatus("");
+          }, 3000);
+        } catch (err) {
+          console.error("Upload failed:", err);
+          if (err.response?.status === 413) {
+            setToastMessage(
+              "File too large! Please upload a file smaller than 10MB."
+            );
+            setToastStatus("error");
+          } else {
+            setToastMessage("Upload failed. Please try again.");
+            setToastStatus("error");
+          }
+        } finally {
+          setUploading(false);
+          // Auto-hide toast after 3 seconds
+        }
+      };
+
+      reader.onerror = () => {
+        console.error("File reading failed");
+        setUploading(false);
+        setToastMessage("Failed to read file.");
+        setToastStatus("error");
+      };
+
+      reader.readAsDataURL(selectedFile);
+    } catch (err) {
+      console.error("Unexpected upload error:", err);
+      setToastMessage("Unexpected error during upload.");
+      setToastStatus("error");
+      setUploading(false);
+    }
+  };
+
+  const handleFileUpload = async (e) => {
+    const selectedFile = e.target.files[0]
+    await processFile(selectedFile)
+  }
+
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const droppedFile = e.dataTransfer.files[0];
+    if (droppedFile) {
+      await processFile(droppedFile);
+    }
+  };
+
+  const handleDeleteFile = async () => {
+    if (deleting) return; //  Prevent multiple clicks
+    setDeleting(true);
+
+    // DRAFT MODE → NO API
+    if (isDraft) {
+      setFile(null);
+      setIsSaved(false);
+      onDelete?.(uid);
+
+      setToastMessage("File removed");
+      setToastStatus("success");
+
+      setDeleting(false);
+      return;
+    }
+
+    try {
+      if (!file?.ContentDocumentId) {
+        setFile(null);
+        setIsSaved(false);
+        onDelete?.(uid);
+        setToastMessage("File removed.");
+        setToastStatus("success");
+
+        setTimeout(() => {
+          setToastMessage("");
+          setToastStatus("");
+        }, 3000);
+        return;
+      }
+
+      const payload = {
+        contentDocumentId: file.ContentDocumentId,
+        ouid: null,
+        recipientId: null,
+        transactionId: transaction,
+        uid: uid,
+      };
+
+      await api.post(`/sign/delete`, payload, {
+        headers: {
+          "X-AUTH-TYPE": "TRANSACTIONAL",
+          "ngrok-skip-browser-warning": "69420",
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `${uuid}`,
+        },
+      });
+
+      setFile(null);
+      setIsSaved(false);
+      onDelete?.(uid);
+
+      setToastMessage("File deleted successfully!");
+      setToastStatus("success");
+    } catch (err) {
+      console.error("Error deleting file:", err);
+      setToastMessage("Failed to delete file. Please try again.");
+      setToastStatus("error");
+    } finally {
+      setDeleting(false); // Reset delete state
+      setTimeout(() => {
+        setToastMessage("");
+        setToastStatus("");
+      }, 3000);
+    }
+  };
+
+  const handleDone = () => {
+    if (file && isSaved) {
+      //  File uploaded and saved — close modal
+      onSave(file);
+      onClose();
+    } else {
+      //  No file yet — show message
+      setToastMessage("Please upload a file before proceeding.");
+      setToastStatus("error");
+
+      // Hide toast after 3s
+      setTimeout(() => {
+        setToastMessage("");
+        setToastStatus("");
+      }, 3000);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-black/20 backdrop-blur-[2px]">
+      {toastStatus && toastMessage && (
+        <Toaster toastStatus={toastStatus} toastMessage={toastMessage} />
+      )}
+      <div className="bg-white rounded-2xl shadow-lg w-full max-w-[50vw] p-6 relative">
+        <h2 className="text-xl font-semibold mb-1">{t('attachmentModal.title')}</h2>
+        <p className="text-gray-500 text-sm mb-6">
+          {file ? t('attachmentModal.subtitle.hasFile')
+            : t('attachmentModal.subtitle.noFile')}
+        </p>
+
+        {uploading ? (
+          <div className="flex flex-col items-center justify-center border-2 border-dashed border-gray-200 rounded-xl py-10 bg-gradient-to-r from-gray-50 via-gray-100 to-gray-50 bg-[length:200%_100%] animate-[shimmer_2s_infinite]">
+            <div className="w-10 h-10 bg-gray-300 rounded-full mb-3 animate-pulse"></div>
+            <div className="h-5 bg-gray-300 rounded w-48 mb-2 animate-pulse"></div>
+            <div className="h-3 bg-gray-200 rounded w-36 animate-pulse"></div>
+            <p className="mt-4 text-gray-600 font-medium text-sm animate-pulse">
+              {t('attachmentModal.uploading.status')}
+            </p>
+          </div>
+        ) : !file ? (
+          // Drag and Drop Upload Interface
+          <div
+            onClick={() => fileInputRef.current?.click()}
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+            className={`
+              flex flex-col items-center justify-center 
+              border-2 border-dashed rounded-xl py-10 
+              cursor-pointer transition-all duration-200
+              ${isDragging
+                ? "border-blue-500 bg-blue-50 scale-[1.02]"
+                : "border-gray-300 hover:border-blue-400 hover:bg-gray-50"
+              }
+            `}
+          >
+            <div className="w-12 h-12 mb-3 text-blue-500">
+              {isDragging ? (
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  className="w-full h-full"
+                >
+                  <path d="M12 5v14M5 12h14" />
+                  <path d="M17 8l-5-5-5 5M17 16l-5 5-5-5" />
+                </svg>
+              ) : (
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  className="w-full h-full"
+                >
+                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" />
+                </svg>
+              )}
+            </div>
+            <p className="text-gray-700 font-medium">
+              {isDragging ? t('attachmentModal.uploadArea.dragging')
+                : t('attachmentModal.uploadArea.default')}
+            </p>
+            <p className="text-xs text-gray-500 mt-2">
+              {t('attachmentModal.uploadArea.fileTypes')}
+            </p>
+            <button
+              type="button"
+              className="mt-4 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              {t('attachmentModal.uploadArea.browseButton')}
+            </button>
+            <input
+              ref={fileInputRef}
+              id={`file-upload-${uid}`}
+              type="file"
+              className="hidden"
+              onChange={handleFileUpload}
+              accept=".pdf,.docx,.jpg,.jpeg,.png,.txt"
+            />
+          </div>
+        ) : (
+          // Uploaded File Display
+          <div className="flex items-center justify-between rounded-lg p-4 bg-gray-50">
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <div className="w-10 h-10 bg-blue-100 rounded flex items-center justify-center flex-shrink-0">
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  className="text-blue-600"
+                >
+                  <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z" />
+                  <path d="M13 2v7h7" />
+                </svg>
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 truncate">
+                  {file.FileName}
+                </p>
+                <p className="text-xs text-gray-500 mt-1">
+                  {t('attachmentModal.uploadedFile.status')}
+                </p>
+              </div>
+            </div>
+
+            <button
+              onClick={handleDeleteFile}
+              disabled={deleting}
+              className={`ml-3 transition-colors flex-shrink-0 ${deleting
+                ? "text-gray-400 cursor-not-allowed"
+                : "text-red-500 hover:text-red-700"
+                }`}
+              aria-label={t('attachmentModal.accessibility.deleteFile')}
+              title={t('attachmentModal.uploadedFile.deleteButton')}
+            >
+              {!deleting ? (
+                <Trash size={18} />
+              ) : (
+                <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
+              )}
+            </button>
+          </div>
+        )}
+
+        <div className="flex justify-end mt-6 space-x-3">
+          <button
+            onClick={onClose}
+            disabled={uploading}
+            className={`px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors ${uploading ? "opacity-50 cursor-not-allowed" : ""
+              }`}
+          >
+            {t('attachmentModal.buttons.close')}
+          </button>
+
+          {/* <button
+            disabled={uploading || deleting}
+            onClick={handleDone}
+            className={`px-5 py-2 rounded-lg font-medium transition-colors ${uploading || deleting
+                ? "bg-gray-300 text-gray-600 cursor-not-allowed"
+                : isSaved
+                  ? "bg-regal-blue hover:bg-blue-700 text-white"
+                  : file
+                    ? "bg-blue-600 hover:bg-blue-700 text-white"
+                    : "bg-gray-300 text-gray-600 cursor-not-allowed"
+              }`}
+          >
+            {uploading
+              ? "Uploading..."
+              : deleting
+                ? "Deleting..."
+                : isSaved
+                  ? "File Saved!"
+                  : file
+                    ? "Done"
+                    : "Upload File"}
+          </button> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AttachmentModal;
diff --git a/src/modals/CancelTransactionModal.jsx b/src/modals/CancelTransactionModal.jsx
new file mode 100644
index 0000000..b9e09c4
--- /dev/null
+++ b/src/modals/CancelTransactionModal.jsx
@@ -0,0 +1,173 @@
+import { LoaderCircle } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from "react-i18next";
+import { useDocStore } from '../store';
+
+
+const CancelTransactionModal = ({ isOpen, onClose, onConfirm, isLoading, showInPersonScreenCancelTransaction }) => {
+  const { t } = useTranslation();
+  const { formJson, transaction } = useDocStore();
+  const [cancellationReason, setCancellationReason] = useState('');
+  const [error, setError] = useState('');
+
+
+  const handleClose = () => {
+    setCancellationReason('');
+    setError('');
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    if (!cancellationReason.trim()) {
+      setError(t("cancelModal.errors.reasonRequired"));
+      return;
+    }
+    onConfirm(cancellationReason);
+    setCancellationReason('');
+    setError('');
+  };
+
+  const handleContinue = () => {
+    let redirectUrl = `${formJson?.instance_url}/${transaction?.parentId}`
+    window.open(redirectUrl, "_top");
+  };
+
+  if (showInPersonScreenCancelTransaction ) {
+    return (
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
+      // onClick={handleContinue}
+      >
+        <div
+          className="relative bg-base-100 rounded-2xl shadow-xl w-full max-w-md mx-4 p-8"
+          onClick={(e) => e.stopPropagation()}
+        >
+
+          {/* Success Icon + Title */}
+          <div className="flex flex-col items-center mb-5">
+            <div className="bg-success/10 p-3 rounded-full mb-3">
+              <svg
+                className="text-success w-7 h-7"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M5 13l4 4L19 7"
+                />
+              </svg>
+            </div>
+            <h3 className="text-xl font-semibold text-base-content">
+              {t("cancelModal.inPersonSuccess.title")}
+            </h3>
+          </div>
+
+          {/* Success Message */}
+          <p className="text-center text-sm text-base-content/70 mb-5 leading-relaxed">
+             {t("cancelModal.inPersonSuccess.message")}
+          </p>
+
+          {/* Additional Info */}
+          <p className="text-center text-sm text-base-content/60 mb-6">
+            {t("cancelModal.inPersonSuccess.passBackDevice", { senderName: transaction?.senderName })}
+          </p>
+
+          {/* Continue Button */}
+          <div className="flex gap-3">
+            <button
+              onClick={handleContinue}
+              className="btn bg-regal-blue text-white flex-1 rounded-md hover:bg-blue-800"
+            >
+              {t("cancelModal.inPersonSuccess.continueButton")}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
+      onClick={handleClose}
+    >
+      <div
+        className="relative bg-base-100 rounded-2xl shadow-xl w-full max-w-md mx-4 p-8"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close button */}
+        <button
+          onClick={handleClose}
+          className="absolute right-3 top-3 btn btn-sm btn-circle btn-ghost"
+          disabled={isLoading}
+        >
+          ✕
+        </button>
+
+        {/* Icon + Title */}
+        <div className="flex flex-col items-center mb-5">
+          <div className="bg-error/10 p-3 rounded-full mb-3">
+            <svg
+              className="text-error w-7 h-7"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              viewBox="0 0 24 24"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="15" y1="9" x2="9" y2="15" />
+              <line x1="9" y1="9" x2="15" y2="15" />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold text-base-content">
+            {t("cancelModal.title")}
+          </h3>
+        </div>
+
+        {/* Description */}
+        <p className="text-center text-sm text-base-content/70 mb-5 leading-relaxed">
+          {t("cancelModal.description")}
+        </p>
+
+        {/* Textarea */}
+        <textarea
+          value={cancellationReason}
+          onChange={(e) => setCancellationReason(e.target.value)}
+         className="textarea textarea-bordered w-full h-28 resize-none mb-5 text-sm outline-none focus:outline-none focus:ring-0 focus:border-gray-400"
+          placeholder={t("cancelModal.placeholder")}
+        />
+
+        {/* Error message */}
+        {error && (
+          <p className="text-red-500 text-xs mb-3 text-center">{error}</p>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-3">
+          <button onClick={handleClose} className="btn btn-outline flex-1 rounded-md" disabled={isLoading}>
+            {t("cancelModal.buttons.no")}
+          </button>
+          <button onClick={handleConfirm} className="btn bg-regal-blue text-white flex-1 rounded-md hover:bg-blue-800 flex items-center justify-center gap-2" disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <LoaderCircle className="animate-spin text-white text-lg" />
+
+              </>
+            ) : (
+              t("cancelModal.buttons.yes")
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CancelTransactionModal;
\ No newline at end of file
diff --git a/src/modals/ElectronicRecordandSignatureDisclosure.jsx b/src/modals/ElectronicRecordandSignatureDisclosure.jsx
new file mode 100644
index 0000000..e16fc28
--- /dev/null
+++ b/src/modals/ElectronicRecordandSignatureDisclosure.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ElectronicRecordandSignatureDisclosure = () => {
+  return (
+    <div>ElectronicRecordandSignatureDisclosure</div>
+  )
+}
+
+export default ElectronicRecordandSignatureDisclosure
\ No newline at end of file
diff --git a/src/modals/MessageInPersonSignerModal.jsx b/src/modals/MessageInPersonSignerModal.jsx
new file mode 100644
index 0000000..af0b5ee
--- /dev/null
+++ b/src/modals/MessageInPersonSignerModal.jsx
@@ -0,0 +1,246 @@
+
+import { Trans, useTranslation } from "react-i18next";
+import api from "../api/Axios";
+import { useDocStore } from "../store";
+
+const MessageInPersonSignerModal = ({ isOpen, onClose }) => {
+    const { t } = useTranslation();
+    const { redirectUrl, transaction, isLastInPersonSigner } = useDocStore();
+
+    //   const redirectUrl = `${formJson?.instance_url}/apex/hic_signeasy__SmeCompleteInSigning?id==${transaction?.transactionId}&parentId=${transaction?.parentId}&recipientMore=true`;
+
+
+    console.log(redirectUrl);
+
+    const continueInPerson = async () => {
+        try {
+            const res = await api.get('/sign/continue/InPerson');
+
+            if (res?.status === 200) {
+                console.log('In-Person signing completed successfully');
+                return true;
+            } else {
+                console.error('Failed to complete in-person signing:', res?.data?.message);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error completing in-person signing:', error);
+            throw error;
+        }
+    };
+
+    const handleContinue = async () => {
+        // Close the modal first
+        if (onClose) {
+            onClose(false);
+        }
+
+        try {
+            // Wait for API call if last in-person signer
+            if (isLastInPersonSigner) {
+                await continueInPerson();
+            }
+
+            // Redirect after API call completes (or immediately if not last signer)
+            if (redirectUrl) {
+                setTimeout(() => {
+                    window.open(redirectUrl, "_top");
+                    // clearRedirectUrl(); // Clean up after redirect
+                }, 100);
+            }
+        } catch (error) {
+            console.error('Error in handleContinue:', error);
+            // Handle error - maybe show toast or keep modal open
+        }
+    };
+
+    const handleClose = () => {
+        if (isProcessing) return; // Prevent closing while processing
+
+        if (onClose) {
+            onClose(false);
+        }
+        // clearRedirectUrl();
+    };
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
+            onClick={handleClose}
+        >
+            <div
+                className="relative bg-base-100 rounded-2xl shadow-xl w-full max-w-md mx-4 overflow-hidden animate-[scaleIn_0.3s_ease-out]"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Close button */}
+                {/* <button
+                    onClick={handleClose}
+                    className="absolute right-3 top-3 btn btn-sm btn-circle btn-ghost z-10 text-gray-500 hover:text-gray-700"
+                >
+                    ✕
+                </button> */}
+
+                {/* Header with gradient */}
+                <div className="relative px-6 py-4 border-b border-gray-100 bg-gradient-to-r bg-regal-blue">
+                    {/* Decorative circle */}
+                    <div className="absolute top-0 right-0 w-32 h-32 bg-green-100 rounded-full opacity-20 -mr-16 -mt-16"></div>
+                    <div className="absolute bottom-0 left-0 w-24 h-24 bg-emerald-100 rounded-full opacity-20 -ml-12 -mb-12"></div>
+
+                    <h3 className="font-bold text-white text-xl text-center">
+                        {t('inPersonComplete.title')}
+                    </h3>
+                    <p className="text-white text-sm text-center mt-0.5">
+                        {t('inPersonComplete.subtitle')}
+                    </p>
+                </div>
+
+                {/* Body */}
+                <div className="flex flex-col items-center gap-4 px-6 py-6 bg-white">
+
+                    {/* Success Icon with Ping Animation */}
+                    <div className="relative">
+                        {/* Ping animation rings */}
+                        <div className="absolute inset-0 rounded-full animate-ping-slow">
+                            <div className="absolute inset-0 rounded-full bg-green-400 opacity-75"></div>
+                        </div>
+                        <div className="absolute inset-0 rounded-full animate-ping-medium" style={{ animationDelay: '0.5s' }}>
+                            <div className="absolute inset-0 rounded-full bg-green-300 opacity-50"></div>
+                        </div>
+                        <div className="absolute inset-0 rounded-full animate-ping-fast" style={{ animationDelay: '1s' }}>
+                            <div className="absolute inset-0 rounded-full bg-green-200 opacity-25"></div>
+                        </div>
+
+                        {/* Main icon */}
+                        <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center shadow-lg animate-[pop_0.4s_ease-out]">
+                            <svg
+                                className="w-8 h-8 text-white"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth={2.5}
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M5 13l4 4L19 7"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+
+                    {/* Success Message */}
+                    <div className="text-center space-y-2 w-full">
+                        <h4 className="text-base font-semibold text-gray-800">
+                            {t('inPersonComplete.thankYou')}
+                        </h4>
+                        <p className="text-sm text-gray-600 leading-relaxed">
+                            {t('inPersonComplete.message')}
+                        </p>
+                        <div className="mt-3 p-2.5 bg-amber-50 rounded-lg border border-amber-100">
+                            <p className="text-xs text-amber-800 flex items-center justify-center gap-2">
+                                <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                                </svg>
+                                <Trans
+                                i18nKey="inPersonComplete.passDevice"
+                                values={{ senderName: transaction?.senderName }}
+                            />
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="px-6 py-3.5 border-t border-gray-100 bg-gray-50">
+                    <button
+                        onClick={handleContinue}
+                        className="w-full btn bg-gradient-to-r bg-regal-blue hover:to-blue-800 text-white border-none shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-[1.02] py-2"
+                    >
+                        <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                        {t('inPersonComplete.continueButton')}
+                    </button>
+                </div>
+            </div>
+
+            {/* Custom Animations */}
+            <style>
+                {`
+          @keyframes scaleIn {
+            0% { 
+              transform: scale(0.9); 
+              opacity: 0; 
+            }
+            100% { 
+              transform: scale(1); 
+              opacity: 1; 
+            }
+          }
+
+          @keyframes pop {
+            0% { 
+              transform: scale(0.5); 
+              opacity: 0; 
+            }
+            50% { 
+              transform: scale(1.1); 
+            }
+            100% { 
+              transform: scale(1); 
+              opacity: 1; 
+            }
+          }
+
+          @keyframes ping-slow {
+            0% {
+              transform: scale(0.8);
+              opacity: 0.8;
+            }
+            100% {
+              transform: scale(1.5);
+              opacity: 0;
+            }
+          }
+
+          @keyframes ping-medium {
+            0% {
+              transform: scale(0.8);
+              opacity: 0.6;
+            }
+            100% {
+              transform: scale(1.5);
+              opacity: 0;
+            }
+          }
+
+          @keyframes ping-fast {
+            0% {
+              transform: scale(0.8);
+              opacity: 0.4;
+            }
+            100% {
+              transform: scale(1.5);
+              opacity: 0;
+            }
+          }
+
+          .animate-ping-slow {
+            animation: ping-slow 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+          }
+
+          .animate-ping-medium {
+            animation: ping-medium 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+          }
+
+          .animate-ping-fast {
+            animation: ping-fast 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+          }
+        `}
+            </style>
+        </div>
+    );
+};
+
+export default MessageInPersonSignerModal;
\ No newline at end of file
diff --git a/src/modals/ReusableModal.jsx b/src/modals/ReusableModal.jsx
new file mode 100644
index 0000000..67270fc
--- /dev/null
+++ b/src/modals/ReusableModal.jsx
@@ -0,0 +1,241 @@
+// ReusableModal.jsx
+import { useEffect } from 'react';
+
+const ReusableModal = ({
+    isOpen,
+    onClose,
+    onContinue,
+    title,
+    subtitle,
+    icon: Icon,
+    iconBgColor = "from-green-400 to-emerald-500",
+    message,
+    noteMessage,
+    buttonText = "Continue",
+    showCloseButton = true,
+    closeOnOutsideClick = true,
+    children
+}) => {
+    
+    // Handle escape key press
+    useEffect(() => {
+        const handleEsc = (e) => {
+            if (e.key === 'Escape' && closeOnOutsideClick) {
+                onClose();
+            }
+        };
+        
+        if (isOpen) {
+            document.addEventListener('keydown', handleEsc);
+            // Prevent body scroll when modal is open
+            document.body.style.overflow = 'hidden';
+        }
+        
+        return () => {
+            document.removeEventListener('keydown', handleEsc);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose, closeOnOutsideClick]);
+
+    const handleClose = () => {
+        if (closeOnOutsideClick) {
+            onClose();
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
+            onClick={handleClose}
+        >
+            <div
+                className="relative bg-base-100 rounded-2xl shadow-xl w-full max-w-md mx-4 overflow-hidden animate-[scaleIn_0.3s_ease-out]"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Close button */}
+                {/* {showCloseButton && (
+                    <button
+                        onClick={onClose}
+                        className="absolute right-3 top-3 btn btn-sm btn-circle btn-ghost z-10 text-gray-500 hover:text-gray-700"
+                    >
+                        ✕
+                    </button>
+                )} */}
+
+                {/* Header with gradient */}
+                <div className="relative px-6 py-4 border-b border-gray-100 bg-gradient-to-r bg-regal-blue">
+                    {/* Decorative circles */}
+                    <div className="absolute top-0 right-0 w-32 h-32 bg-green-100 rounded-full opacity-20 -mr-16 -mt-16"></div>
+                    <div className="absolute bottom-0 left-0 w-24 h-24 bg-emerald-100 rounded-full opacity-20 -ml-12 -mb-12"></div>
+
+                    <h3 className="font-bold text-white text-xl text-center">
+                        {title}
+                    </h3>
+                    {subtitle && (
+                        <p className="text-white text-sm text-center mt-0.5">
+                            {subtitle}
+                        </p>
+                    )}
+                </div>
+
+                {/* Body */}
+                <div className="flex flex-col items-center gap-4 px-6 py-6 bg-white">
+                    {/* Icon with Ping Animation */}
+                    <div className="relative">
+                        {/* Ping animation rings */}
+                        <div className="absolute inset-0 rounded-full animate-ping-slow">
+                            <div className="absolute inset-0 rounded-full bg-green-400 opacity-75"></div>
+                        </div>
+                        <div className="absolute inset-0 rounded-full animate-ping-medium" style={{ animationDelay: '0.5s' }}>
+                            <div className="absolute inset-0 rounded-full bg-green-300 opacity-50"></div>
+                        </div>
+                        <div className="absolute inset-0 rounded-full animate-ping-fast" style={{ animationDelay: '1s' }}>
+                            <div className="absolute inset-0 rounded-full bg-green-200 opacity-25"></div>
+                        </div>
+
+                        {/* Main icon */}
+                        <div className={`relative w-16 h-16 rounded-full bg-gradient-to-br ${iconBgColor} flex items-center justify-center shadow-lg animate-[pop_0.4s_ease-out]`}>
+                            {Icon ? (
+                                <Icon className="w-8 h-8 text-white" />
+                            ) : (
+                                <svg
+                                    className="w-8 h-8 text-white"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    strokeWidth={2.5}
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M5 13l4 4L19 7"
+                                    />
+                                </svg>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Message Content */}
+                    <div className="text-center space-y-2 w-full">
+                        {message && (
+                            <>
+                                <h4 className="text-base font-semibold text-gray-800">
+                                    {message.title || message}
+                                </h4>
+                                {message.description && (
+                                    <p className="text-sm text-gray-600 leading-relaxed">
+                                        {message.description}
+                                    </p>
+                                )}
+                            </>
+                        )}
+                        
+                        {/* Custom children content */}
+                        {children}
+                        
+                        {/* Note Message */}
+                        {noteMessage && (
+                            <div className="mt-3 p-2.5 bg-amber-50 rounded-lg border border-amber-100">
+                                <p className="text-xs text-amber-800 flex items-center justify-center gap-2">
+                                    <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                                    </svg>
+                                    <span>{noteMessage}</span>
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Footer */}
+                {/* <div className="px-6 py-3.5 border-t border-gray-100 bg-gray-50">
+                    <button
+                        onClick={onContinue}
+                        className="w-full btn bg-gradient-to-r bg-regal-blue hover:to-blue-800 text-white border-none shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-[1.02] py-2"
+                    >
+                        {buttonText}
+                    </button>
+                </div> */}
+            </div>
+
+            {/* Global Animations */}
+            <style>
+                {`
+                    @keyframes scaleIn {
+                        0% { 
+                            transform: scale(0.9); 
+                            opacity: 0; 
+                        }
+                        100% { 
+                            transform: scale(1); 
+                            opacity: 1; 
+                        }
+                    }
+
+                    @keyframes pop {
+                        0% { 
+                            transform: scale(0.5); 
+                            opacity: 0; 
+                        }
+                        50% { 
+                            transform: scale(1.1); 
+                        }
+                        100% { 
+                            transform: scale(1); 
+                            opacity: 1; 
+                        }
+                    }
+
+                    @keyframes ping-slow {
+                        0% {
+                            transform: scale(0.8);
+                            opacity: 0.8;
+                        }
+                        100% {
+                            transform: scale(1.5);
+                            opacity: 0;
+                        }
+                    }
+
+                    @keyframes ping-medium {
+                        0% {
+                            transform: scale(0.8);
+                            opacity: 0.6;
+                        }
+                        100% {
+                            transform: scale(1.5);
+                            opacity: 0;
+                        }
+                    }
+
+                    @keyframes ping-fast {
+                        0% {
+                            transform: scale(0.8);
+                            opacity: 0.4;
+                        }
+                        100% {
+                            transform: scale(1.5);
+                            opacity: 0;
+                        }
+                    }
+
+                    .animate-ping-slow {
+                        animation: ping-slow 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+                    }
+
+                    .animate-ping-medium {
+                        animation: ping-medium 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+                    }
+
+                    .animate-ping-fast {
+                        animation: ping-fast 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+                    }
+                `}
+            </style>
+        </div>
+    );
+};
+
+export default ReusableModal;
\ No newline at end of file
diff --git a/src/modals/SignatureInitialsModal.jsx b/src/modals/SignatureInitialsModal.jsx
new file mode 100644
index 0000000..650723e
--- /dev/null
+++ b/src/modals/SignatureInitialsModal.jsx
@@ -0,0 +1,627 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { X, Upload, Check, RefreshCw } from "lucide-react";
+import DrawSignatureCanvas from "../helper/DrawSignatureCanvas";
+import UploadLogo from "../assets/upload-filled.png";
+import Toaster from "../helper/Toaster";
+import { useDocStore } from "../store";
+import { useTranslation } from "react-i18next";
+
+const generateInitials = (name = "") => {
+  return name
+    .trim()
+    .split(" ")
+    .filter(Boolean)
+    .map((word) => word[0].toUpperCase())
+    .join("");
+};
+
+const SignatureInitialsModal = ({
+  onSave,
+  onClose,
+  fieldType = "signature",
+  fieldLabel = "Signature",
+  existingSignature = "",
+  existingInitial = "",
+  isEdit = false,
+  activeTab: initialActiveTab,
+}) => {
+  const { recipientInfo, setRecipientInfo } = useDocStore();
+  const setToast = useDocStore((state) => state.setToast);
+  const { t } = useTranslation();
+
+  console.log("existingSignature", existingSignature, "existingInitial", existingInitial);
+
+  const resolvedInitialTab =
+    initialActiveTab && ["select", "draw", "upload"].includes(initialActiveTab)
+      ? initialActiveTab
+      : "select";
+
+  const [activeTab, setActiveTab] = useState(resolvedInitialTab);
+  const [fullName, setFullName] = useState(recipientInfo?.fullName || "");
+  const [initials, setInitials] = useState(
+    recipientInfo?.initials || generateInitials(recipientInfo?.fullName || "")
+  );
+  const [selectedStyle, setSelectedStyle] = useState(0);
+  const [agree, setAgree] = useState(false);
+  const [initialsManuallyEdited, setInitialsManuallyEdited] = useState(false);
+
+  const [selectSignature, setSelectSignature] = useState(null);
+  const [selectInitials, setSelectInitials] = useState(null);
+  const [drawSignature, setDrawSignature] = useState(null);
+  const [drawInitials, setDrawInitials] = useState(null);
+  const [uploadSignature, setUploadSignature] = useState(null);
+  const [uploadInitials, setUploadInitials] = useState(null);
+  const [toastMessage, setToastMessage] = useState("");
+  const [toastStatus, setToastStatus] = useState("");
+  const signatureFileRef = useRef(null);
+  const initialFileRef = useRef(null);
+
+  // Store original values for cancel functionality
+  const [originalFullName, setOriginalFullName] = useState(recipientInfo?.fullName || "");
+  const [originalInitials, setOriginalInitials] = useState(recipientInfo?.initials || "");
+
+
+  useEffect(() => {
+    const tab =
+      initialActiveTab && ["select", "draw", "upload"].includes(initialActiveTab)
+        ? initialActiveTab
+        : "select";
+
+    setActiveTab(tab);
+
+    if (tab === "draw") {
+      console.log("existingSignature", existingSignature);
+      setDrawSignature(existingSignature);
+      setDrawInitials(existingInitial);
+    } else if (tab === "upload") {
+      setUploadSignature(existingSignature);
+      setUploadInitials(existingInitial);
+    }
+  }, [isEdit, initialActiveTab]);
+
+  useEffect(() => {
+    if (recipientInfo?.fullName) {
+      setFullName(recipientInfo.fullName);
+      setOriginalFullName(recipientInfo.fullName);
+      if (!initialsManuallyEdited) {
+        const generatedInitials = recipientInfo.initials || generateInitials(recipientInfo.fullName);
+        setInitials(generatedInitials);
+        setOriginalInitials(generatedInitials);
+      }
+    }
+  }, [recipientInfo?.fullName, recipientInfo?.initials]);
+
+  const signatureStyles = [
+    {
+      id: 0,
+      style: {
+        fontFamily: '"Great Vibes", cursive',
+        fontSize: "20px",
+      },
+    },
+  ];
+
+  const initialStyles = [
+    {
+      id: 0,
+      style: {
+        fontFamily: '"Great Vibes", cursive',
+        fontSize: "24px",
+      },
+    },
+  ];
+
+  const handleFileUpload = (e, type) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const validTypes = ["image/png", "image/jpeg", "image/jpg"];
+    if (!validTypes.includes(file.type)) {
+      setToast("Please upload a PNG or JPG file", "error")
+      return;
+    }
+
+    if (file.size > 300 * 1024) {
+      setToast("File size must be less than 300KB", "error")
+      return;
+    }
+
+    // Validate dimensions
+    const img = new Image();
+    const objectUrl = URL.createObjectURL(file);
+
+    img.onload = () => {
+      URL.revokeObjectURL(objectUrl);
+
+      const isSignature = type === "signature";
+      const expectedWidth = isSignature ? 300 : 100;
+      const expectedHeight = isSignature ? 100 : 100;
+
+      // Allow some tolerance (±5px)
+      const widthTolerance = 5;
+      const heightTolerance = 5;
+
+      const isWidthValid = Math.abs(img.width - expectedWidth) <= widthTolerance;
+      const isHeightValid = Math.abs(img.height - expectedHeight) <= heightTolerance;
+
+      if (!isWidthValid || !isHeightValid) {
+        setToastMessage(
+          `${isSignature ? "Signature" : "Initials"} must be ${expectedWidth}x${expectedHeight}px (current: ${img.width}x${img.height}px)`
+        );
+        setToastStatus("error");
+        setTimeout(() => {
+          setToastMessage("");
+          setToastStatus("");
+        }, 3000);
+
+        // Clear the file input
+        if (type === "signature" && signatureFileRef.current) {
+          signatureFileRef.current.value = "";
+        } else if (type === "initial" && initialFileRef.current) {
+          initialFileRef.current.value = "";
+        }
+        return;
+      }
+
+      // If dimensions are valid, read the file
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (type === "signature") {
+          setUploadSignature(event.target.result);
+        } else {
+          setUploadInitials(event.target.result);
+        }
+      };
+      reader.readAsDataURL(file);
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      setToast("Unable to load image. Please try another file.", "error")
+    };
+
+    img.src = objectUrl;
+  };
+
+  const buildSignaturePayload = (name, fontFamily) => {
+    const initials = generateInitials(name);
+    return {
+      fullName: name,
+      initials,
+      fontFamily,
+      signatureStyle: {
+        fontFamily,
+        fontSize: "28px",
+        fontWeight: "bold",
+      },
+    };
+  };
+
+  const generateTextSignature = (isSignature = true) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = 300;
+    canvas.height = 100;
+    const ctx = canvas.getContext("2d");
+
+    // ctx.fillStyle = "white";
+    // ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const styles = isSignature ? signatureStyles : initialStyles;
+    const text = isSignature ? fullName : initials;
+    const selectedStyleObj = styles[selectedStyle];
+
+    ctx.fillStyle = "black";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+
+    const fontFamily = selectedStyleObj.style.fontFamily || "Arial";
+    const fontSize = selectedStyleObj.style.fontSize || "20px";
+    const fontWeight = selectedStyleObj.style.fontWeight || "normal";
+
+    ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+    ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+
+    return canvas.toDataURL();
+  };
+
+  const canAdopt = () => {
+    if (activeTab === "select") {
+      // Both full name and initials must have values
+      return fullName.trim().length > 0 && initials.trim().length > 0;
+    };
+    if (activeTab === "draw") {
+      // Both must be non-null AND must be actual image data (not empty canvas)
+      return (
+        drawSignature &&
+        drawInitials &&
+        drawSignature.startsWith("data:image") &&
+        drawInitials.startsWith("data:image")
+      );
+    };
+    if (activeTab === "upload") return uploadSignature && uploadInitials;
+    return false;
+  };
+
+  const handleAdopt = () => {
+    // Validate based on active tab
+    if (activeTab === "select") {
+      if (!fullName.trim()) {
+        setToast("Please enter your full name", "error");
+        return;
+      }
+      if (!initials.trim()) {
+        setToast("Please enter your initials", "error");
+        return;
+      }
+    }
+
+    if (activeTab === "draw" && (!fullName.trim())) {
+      setToast("Please enter your full name in select tab first", "error");
+      return;
+    }
+
+    if (activeTab === "upload" && (!fullName.trim())) {
+      setToast("Please enter your full name in select tab first", "error");
+      return;
+    }
+
+    let sig, ini;
+
+    switch (activeTab) {
+      case "select":
+        sig = {
+          text: fullName,
+          fontFamily: '"Great Vibes", cursive',
+          fontSize: "23px",
+        };
+        ini = {
+          text: initials,
+          fontFamily: '"Great Vibes", cursive',
+          fontSize: "23px",
+        };
+        break;
+      case "draw":
+        sig = drawSignature;
+        ini = drawInitials;
+        break;
+      case "upload":
+        sig = uploadSignature;
+        ini = uploadInitials;
+        break;
+      default:
+        return;
+    }
+
+    if (!sig || !ini) {
+      alert("Please provide both a signature and initials.");
+      return;
+    }
+
+    // ✅ FIX 1: Update Zustand store correctly
+    setRecipientInfo({
+      fullName: fullName,
+      initials: initials,
+    });
+
+    onSave(sig, ini, activeTab);
+  };
+
+  const handleDrawChange = useCallback(({ fullSignature, initials }) => {
+    setDrawSignature(fullSignature);
+    setDrawInitials(initials);
+  }, []);
+
+  const clearSignatureUpload = () => {
+    setUploadSignature(null);
+    if (signatureFileRef.current) signatureFileRef.current.value = "";
+  };
+
+  const clearInitialsUpload = () => {
+    setUploadInitials(null);
+    if (initialFileRef.current) initialFileRef.current.value = "";
+  };
+
+  const tabs = [
+    { id: "select", label: "Select", icon: Check },
+    { id: "draw", label: "Draw", icon: "✏️" },
+    { id: "upload", label: "Upload", icon: Upload },
+  ];
+
+  const handleCancel = () => {
+    // Reset local state to original values
+    setFullName(originalFullName);
+    setInitials(originalInitials);
+    setInitialsManuallyEdited(false);
+
+    // // Reset other states based on tab
+    // if (activeTab === "draw") {
+    //   setDrawSignature(existingSignature);
+    //   setDrawInitials(existingInitial);
+    // } else if (activeTab === "upload") {
+    //   setUploadSignature(existingSignature);
+    //   setUploadInitials(existingInitial);
+    // } else if (activeTab === "select") {
+    //   setSelectSignature(null);
+    //   setSelectInitials(null);
+    // }
+
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-[2px] flex items-center justify-center z-110 p-2 sm:p-4">
+      {toastStatus && toastMessage && (
+        <Toaster toastStatus={toastStatus} toastMessage={toastMessage} />
+      )}
+
+      <div className="bg-white rounded-lg w-full 
+      max-w-[95vw] sm:max-w-[85vw] md:max-w-[75vw] lg:max-w-[65vw] xl:max-w-[75vw] 2xl:max-w-[45vw]
+      max-h-[95dvh] flex flex-col border border-gray-100 shadow-lg">
+
+        {/* ── Header ── */}
+        <div className="flex items-center justify-between p-4 sm:p-5  shrink-0">
+          <div>
+            <h2 className="text-base sm:text-lg font-semibold text-gray-900">
+              {fieldType === "signature" ? t('signatureModal.title.signature') : t('signatureModal.title.initial')}{" "}
+              {isEdit ? t('signatureModal.title.edit') : t('signatureModal.title.styleSelection')}
+            </h2>
+            <p className="text-xs sm:text-sm text-gray-500 mt-0.5">
+              {t(`signatureModal.subtitle`)}
+            </p>
+          </div>
+          <button
+            onClick={handleCancel}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            <X className="w-5 h-5 text-gray-700" />
+          </button>
+        </div>
+
+        {/* ── Tabs ── */}
+        <div className="flex border-b overflow-x-auto shrink-0">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => {
+                setActiveTab(tab.id);
+                if (tab.id === "select" && fullName && initials) {
+                  setSelectSignature(generateTextSignature(true));
+                  setSelectInitials(generateTextSignature(false));
+                }
+              }}
+              className={`flex-1 flex items-center justify-center gap-1.5 px-3 sm:px-5 py-2.5 sm:py-3 text-xs sm:text-sm font-medium transition-colors relative min-w-[80px] whitespace-nowrap ${activeTab === tab.id
+                ? "text-blue-600 border-b-2 border-blue-600 bg-blue-50"
+                : "text-gray-600 hover:text-blue-600 hover:bg-gray-50"
+                }`}
+            >
+              {typeof tab.icon === "string" ? (
+                <span className="text-base sm:text-lg">{tab.icon}</span>
+              ) : (
+                <tab.icon className="w-4 h-4" />
+              )}
+              <span>{t(`signatureModal.tabs.${tab.id}`)}</span>
+            </button>
+          ))}
+        </div>
+
+        {/* ── Body (scrollable) ── */}
+        <div className="flex-1 overflow-y-auto p-4 sm:p-6">
+
+          {/* Select tab */}
+          {activeTab === "select" && (
+            <>
+              <p className="text-xs sm:text-sm text-gray-500 mb-4">
+                 {t('signatureModal.selectTab.description')} {" "}
+                <span className="text-red-500">*</span>  {t('signatureModal.selectTab.requiredFields')} 
+              </p>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+                <div>
+                  <label className="block text-xs sm:text-sm font-medium text-gray-800 mb-1.5">
+                    {t('signatureModal.selectTab.fullName.label')} <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    style={{
+                      fontFamily: '"Great Vibes", cursive',
+                      fontSize: "clamp(18px, 3vw, 28px)",
+                    }}
+                    value={fullName}
+                    onChange={(e) => {
+                      const name = e.target.value;
+                      setFullName(name);
+                      if (!initialsManuallyEdited) {
+                        setInitials(generateInitials(name));
+                      }
+                    }}
+                    className="w-full px-3 py-2 border border-gray-300 text-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder={t('signatureModal.selectTab.fullName.placeholder')}
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs sm:text-sm font-medium text-gray-800 mb-1.5">
+                    {t('signatureModal.selectTab.initials.label')} <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    style={{
+                      fontFamily: '"Great Vibes", cursive',
+                      fontSize: "clamp(18px, 3vw, 28px)",
+                    }}
+                    value={initials}
+                    onChange={(e) => {
+                      setInitials(e.target.value);
+                      setInitialsManuallyEdited(true);
+                    }}
+                    className="w-full px-3 py-2 border border-gray-300 text-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder={t('signatureModal.selectTab.initials.label')}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Upload tab - instructions */}
+          {activeTab === "upload" && (
+            <div className="mb-4">
+              <p className="text-xs sm:text-sm text-gray-600">
+                {t('signatureModal.uploadTab.requiredMessage')}
+              </p>
+              <p className="text-xs sm:text-sm text-gray-500 mt-1">
+                {t('signatureModal.uploadTab.requirements')}
+              </p>
+            </div>
+          )}
+
+          {/* Draw tab */}
+          {activeTab === "draw" && (
+            <DrawSignatureCanvas
+              onSignatureChange={handleDrawChange}
+              initialSignatures={{
+                fullSignature: drawSignature,
+                initials: drawInitials,
+              }}
+            />
+          )}
+
+          {/* Upload tab - file inputs */}
+          {activeTab === "upload" && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {/* Signature upload */}
+              <div>
+                {!uploadSignature ? (
+                  <div className="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-blue-400 transition-colors">
+                    <img
+                      src={UploadLogo}
+                      className="w-10 h-10 mx-auto mb-2"
+                      alt={t('signatureModal.uploadTab.signature.uploadLabel')}
+                    />
+                    <p className="text-sm font-medium text-gray-800 mb-1">
+                      {t('signatureModal.uploadTab.signature.uploadLabel')}
+                    </p>
+                    <p className="text-xs text-gray-400 mb-3">
+                      {t('signatureModal.uploadTab.signature.uploadHint')}
+                    </p>
+                    <input
+                      ref={signatureFileRef}
+                      type="file"
+                      accept=".png,.jpg,.jpeg"
+                      onChange={(e) => handleFileUpload(e, "signature")}
+                      className="hidden"
+                    />
+                    <button
+                      onClick={() => signatureFileRef.current?.click()}
+                      className="text-xs text-white bg-blue-600 hover:bg-blue-700 px-4 py-1.5 rounded-md transition-colors"
+                    >
+                      {t('signatureModal.uploadTab.signature.browseButton')}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="relative">
+                    <p className="text-xs sm:text-sm font-medium text-gray-800 mb-1.5">
+                      {t('signatureModal.uploadTab.signature.uploadedLabel')}
+                    </p>
+                    <img
+                      src={uploadSignature}
+                      alt={t('signatureModal.uploadTab.signature.altText')}
+                      className="w-full h-20 object-contain border border-green-500 rounded-md"
+                    />
+                    <button
+                      onClick={clearSignatureUpload}
+                      className="absolute top-6 right-2 p-1.5 bg-white border border-gray-200 rounded-full shadow-sm hover:bg-gray-100 transition-colors"
+                      title={t('signatureModal.uploadTab.signature.changeButton')}
+                      aria-label={t('signatureModal.uploadTab.signature.changeButton')}
+                    >
+                      <RefreshCw className="w-4 h-4 text-blue-600" />
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              {/* Initials upload */}
+              <div>
+                {!uploadInitials ? (
+                  <div className="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-blue-400 transition-colors">
+                    <img
+                      src={UploadLogo}
+                      className="w-10 h-10 mx-auto mb-2"
+                      alt={t('signatureModal.uploadTab.initials.uploadLabel')}
+                    />
+                    <p className="text-sm font-medium text-gray-800 mb-1">
+                      {t('signatureModal.uploadTab.initials.uploadLabel')}
+                    </p>
+                    <p className="text-xs text-gray-400 mb-3">
+                      {t('signatureModal.uploadTab.initials.uploadHint')}
+                    </p>
+                    <input
+                      ref={initialFileRef}
+                      type="file"
+                      accept=".png,.jpg,.jpeg"
+                      onChange={(e) => handleFileUpload(e, "initial")}
+                      className="hidden"
+                    />
+                    <button
+                      onClick={() => initialFileRef.current?.click()}
+                      className="text-xs text-white bg-blue-600 hover:bg-blue-700 px-4 py-1.5 rounded-md transition-colors"
+                    >
+                      {t('signatureModal.uploadTab.initials.browseButton')}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="relative">
+                    <p className="text-xs sm:text-sm font-medium text-gray-800 mb-1.5">
+                      {t('signatureModal.uploadTab.initials.uploadedLabel')}
+                    </p>
+                    <img
+                      src={uploadInitials}
+                      alt={t('signatureModal.uploadTab.initials.altText')}
+                      className="w-full h-20 object-contain border border-green-500 rounded-md"
+                    />
+                    <button
+                      onClick={clearInitialsUpload}
+                      className="absolute top-6 right-2 p-1.5 bg-white border border-gray-200 rounded-full shadow-sm hover:bg-gray-100 transition-colors"
+                      title={t('signatureModal.uploadTab.initials.changeButton')}
+                      aria-label={t('signatureModal.uploadTab.initials.changeButton')}
+                    >
+                      <RefreshCw className="w-4 h-4 text-blue-600" />
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* ── Footer ── */}
+        <div className="shrink-0 flex items-center justify-between gap-3 p-4 sm:p-5  rounded-b-lg">
+          {/* Left side — optional info text */}
+          <p className="text-xs text-gray-400 hidden sm:block">
+            {t('signatureModal.footer.agreementText')}
+          </p>
+
+          {/* Right side — action buttons */}
+          <div className="flex items-center gap-3 w-full sm:w-auto">
+            <button
+              onClick={handleCancel}
+              className="flex-1 sm:flex-none text-xs sm:text-sm text-gray-700 border border-gray-300 rounded-md px-5 py-2.5 hover:bg-gray-100 transition-colors font-medium"
+            >
+              {t('signatureModal.footer.cancelButton')}
+            </button>
+            <button
+              onClick={handleAdopt}
+              disabled={!canAdopt()}
+              className={`flex-1 sm:flex-none text-xs sm:text-sm rounded-md font-semibold px-5 py-2.5 transition-colors whitespace-nowrap ${canAdopt()
+                ? "bg-blue-600 text-white hover:bg-blue-700"
+                : "bg-gray-200 text-gray-400 cursor-not-allowed"
+                }`}
+            >
+              {t('signatureModal.footer.adoptButton')}
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default SignatureInitialsModal;
\ No newline at end of file
diff --git a/src/modals/StampModal.jsx b/src/modals/StampModal.jsx
new file mode 100644
index 0000000..b9fa9be
--- /dev/null
+++ b/src/modals/StampModal.jsx
@@ -0,0 +1,226 @@
+import React, { useState, useRef, useCallback } from "react";
+import { Trash2, Upload, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+const StampModal = React.memo(
+  ({
+    onSave,
+    onClose,
+    fieldType,
+    fieldLabel,
+    existingStamp,
+    isEdit,
+    activeTab,
+  }) => {
+    const { t } = useTranslation();
+    const [stampImage, setStampImage] = useState(existingStamp || "");
+    const [error, setError] = useState("");
+    const [dragActive, setDragActive] = useState(false);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const fileInputRef = useRef(null);
+
+    const validImageTypes = ["image/jpeg", "image/png", "image/gif"];
+    const maxSize = 400 * 1024; // 400kb max
+
+    const handleFile = useCallback(
+      (file) => {
+        if (!file) return;
+
+        // Validate file type
+        if (!validImageTypes.includes(file.type)) {
+          setError(t('stampModal.errors.invalidFileType'));
+          return;
+        }
+
+        // Validate file size
+        if (file.size > maxSize) {
+          setError(t('stampModal.errors.fileTooLarge'));
+          return;
+        }
+
+        setIsProcessing(true);
+        setError("");
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const imageData = e.target.result;
+          setStampImage(imageData);
+          setIsProcessing(false);
+          setError("");
+          // DO NOT auto-save here - wait for user to click Save
+          onSave(imageData, activeTab || "upload");
+        };
+        reader.onerror = () => {
+          setError(t('stampModal.errors.uploadFailed'));
+          setIsProcessing(false);
+        };
+        reader.readAsDataURL(file);
+      },
+      [t]
+    );
+
+    const handleFileChange = (event) => {
+      const file = event.target.files[0];
+      if (file) {
+        handleFile(file);
+      }
+      // Reset the input so the same file can be uploaded again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    };
+
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(true);
+    };
+
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+    };
+
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+      const file = e.dataTransfer.files[0];
+      if (file) {
+        handleFile(file);
+      }
+    };
+
+    const handleSave = () => {
+      if (!stampImage) {
+        setError(t('stampModal.errors.noImageSelected'));
+        return;
+      }
+      // Call the parent's onSave function
+      onSave(stampImage, activeTab || "upload");
+      // Close the modal after save
+      onClose();
+    };
+
+    const handleClear = () => {
+      setStampImage("");
+      setError("");
+      setIsProcessing(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+       onSave("", activeTab || "upload");
+    };
+
+    const handleClose = () => {
+      // Optionally ask for confirmation if there are unsaved changes
+      if (stampImage && !isProcessing) {
+        // You could add a confirmation dialog here
+        // For now, just close without saving
+      }
+      onClose();
+    };
+
+    return (
+      <div className="fixed inset-0 bg-black/20 backdrop-blur-[2px] flex items-center justify-center z-110 p-4">
+        <div className="bg-white rounded-xl w-full max-w-xl max-h-[90vh] overflow-y-auto shadow-2xl border border-gray-200 animate-fadeIn scale-95">
+          {/* Header */}
+          <div className="flex justify-between items-center p-5 border-b border-gray-100">
+            <h2 className="text-xl font-semibold text-gray-800">
+              {isEdit ? t('stampModal.title.edit') : t('stampModal.title.add')}
+            </h2>
+            {/* <button
+              onClick={handleClose}
+              className="text-gray-500 hover:text-gray-700 transition"
+              aria-label={t('stampModal.closeButton')}
+            >
+              <X className="w-6 h-6" />
+            </button> */}
+          </div>
+
+          {/* Body */}
+          <div className="px-5 pt-4 text-sm text-gray-500">
+            {t('stampModal.fileRequirements')}
+          </div>
+          <div className="p-5 space-y-4">
+            {!stampImage ? (
+              <div
+                className={`border-2 ${
+                  dragActive ? "border-blue-400" : "border-gray-300"
+                } border-dashed rounded-lg p-10 flex flex-col items-center justify-center text-gray-500 cursor-pointer transition ${
+                  isProcessing ? "opacity-50 pointer-events-none" : ""
+                }`}
+                onClick={() => fileInputRef.current?.click()}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                {isProcessing ? (
+                  <>
+                    <div className="w-12 h-12 mb-3 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+                    <p className="text-sm font-medium text-blue-600">
+                      {t('stampModal.processing')}
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <Upload className="w-12 h-12 mb-3 text-gray-400" />
+                    <p className="text-sm font-medium">
+                      {t('stampModal.dragDropLabel')}
+                    </p>
+                  </>
+                )}
+                <input
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif"
+                  ref={fileInputRef}
+                  onChange={handleFileChange}
+                  className="hidden"
+                />
+              </div>
+            ) : (
+              <div className="relative flex justify-center">
+                <img
+                  src={stampImage}
+                  alt={t('stampModal.previewAltText')}
+                  className="max-w-full max-h-52 rounded-lg shadow border border-gray-200"
+                />
+                <button
+                  onClick={handleClear}
+                  className="absolute -top-3 right-0 cursor-pointer bg-white rounded-full p-1 shadow hover:bg-gray-100 transition"
+                  title={t('stampModal.changeImageButton')}
+                  aria-label={t('stampModal.changeImageButton')}
+                >
+                  <Trash2 className="w-5 h-5 text-red-600" />
+                </button>
+              </div>
+            )}
+
+            {error && <p className="mt-1 text-sm text-red-600 text-center">{error}</p>}
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end gap-3 px-5 py-4 border-t border-gray-100 bg-gray-50">
+            <button
+              onClick={handleClose}
+              className="px-4 py-2 text-sm font-medium cursor-pointer bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition"
+              // disabled={isProcessing || !stampImage}
+            >
+              {t('stampModal.clearButton')}
+            </button>
+            {/* <button
+              onClick={handleSave}
+              className="px-4 py-2 text-sm font-medium cursor-pointer bg-blue-600 text-white rounded-md hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={!stampImage || isProcessing}
+            >
+              {isEdit ? t('stampModal.updateButton') : t('stampModal.saveButton')}
+            </button> */}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+export default StampModal;
\ No newline at end of file
diff --git a/src/modals/TermsAndConditionsModal.jsx b/src/modals/TermsAndConditionsModal.jsx
new file mode 100644
index 0000000..2988291
--- /dev/null
+++ b/src/modals/TermsAndConditionsModal.jsx
@@ -0,0 +1,332 @@
+import { useEffect, useState } from "react";
+import SMELogo from "../assets/sme-logo.png";
+import api from "../api/Axios";
+import { useDocStore } from "../store";
+import { languageSupport } from "../constant/language";
+import { useTranslation } from "react-i18next";
+import { Trans } from "react-i18next";
+import { changeLanguage } from "../services/changeLanguage";
+import { useLocalizedLabel } from "../hooks/useLocalizedLabel";
+import axios from "axios";
+
+
+const TermsAndConditionsModal = ({ uuid, showLanguageBasedTermsAndConditions, setShowLanguageBasedTermsAndConditions }) => {
+  console.log(uuid, "Line 18");
+  const { formJson } = useDocStore();
+  const setToast = useDocStore((state) => state.setToast);
+  const updateFormJson = useDocStore((state) => state.updateFormJson);
+  const currentLanguage = useDocStore((state) => state.currentLanguage);
+  const setLanguage = useDocStore((state) => state.setLanguage); // Get setLanguage from store
+  const { t } = useTranslation();
+  const [showTermsAndConditions, setShowTermsAndConditions] = useState(!showLanguageBasedTermsAndConditions);
+  const [htmlContent, setHtmlContent] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [agreeLoading, setAgreeLoading] = useState(false);
+  const [cachedPDF, setCachedPDF] = useState(null);
+  const [pdfLoader, setPdfLoader] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const isProUser = formJson?.isProUser
+  const { getLocalizedLabel } = useLocalizedLabel();
+
+  // Fetch terms and conditions when showLanguageBasedTermsAndConditions is true
+  useEffect(() => {
+    if (showLanguageBasedTermsAndConditions) {
+      setShowTermsAndConditions(false); // skip intro instantly
+      setIsLoading(true); // show shimmer immediately
+      fetchPrivacyPolicy();
+    }
+  }, [showLanguageBasedTermsAndConditions, currentLanguage]); // Use currentLanguage from store
+
+  const handleAgree = async () => {
+    setAgreeLoading(true);
+    console.log("Line 18 → current uuid:", uuid);
+    try {
+      const res = await api.put(
+        `/sign/accept`,
+        {}, // no body
+        {
+          headers: {
+            Authorization: `${uuid}`,
+          },
+        }
+      );
+
+      if (res) {
+        updateFormJson({
+          term_and_condition_accepted: true,
+        });
+        setToast("You accepted the terms and conditions.", "success");
+      }
+
+    } catch (error) {
+      console.error("Error accepting terms:", error);
+      setToast("Failed to accept terms. Please try again.", "error");
+    } finally {
+      setAgreeLoading(false);
+    }
+  };
+
+  const fetchPrivacyPolicy = async () => {
+    // Prevent multiple API calls
+    // if ( showTermsAndConditions) {
+    //   setShowTermsAndConditions(false);
+    //   return;
+    // }
+
+    try {
+      let currentSelectedLanguage = currentLanguage.value === 'he' ? 'en' : currentLanguage.value
+      setIsLoading(true);
+      const res = await axios.get(`https://signmadeasy.app/api/static/privacy-policy/${currentSelectedLanguage}.html`, {
+        headers: {
+          // "X-AUTH-TYPE": "TRANSACTIONAL",
+          "ngrok-skip-browser-warning": "69420",
+          "Access-Control-Allow-Origin": "*",
+          // Authorization: `${uuid}`,
+        },
+        responseType: "text",
+      });
+      setHtmlContent(res.data);
+      setShowTermsAndConditions(false);
+    } catch (error) {
+      console.error("Failed to fetch privacy policy:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handlePDFDownload = async () => {
+    try {
+      setPdfLoader(true);
+
+      // If already cached, reuse it
+      if (cachedPDF) {
+        const link = document.createElement("a");
+        link.href = cachedPDF;
+        link.download = "privacy-policy.pdf";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        setPdfLoader(false);
+        return;
+      }
+
+      let currentSelectedLanguage = currentLanguage.value === 'he' ? 'en' : currentLanguage.value
+      // Fetch file as blob (IMPORTANT)
+      const res = await axios.get(`https://signmadeasy.app/api/static/privacy-policy/${currentSelectedLanguage}.pdf`, {
+        responseType: "blob", // ensures binary download
+        headers: {
+          // "X-AUTH-TYPE": "TRANSACTIONAL",
+          "ngrok-skip-browser-warning": "69420",
+          "Access-Control-Allow-Origin": "*",
+          // Authorization: `${uuid}`,
+        },
+      });
+
+      // Create object URL and trigger download
+      const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
+      setCachedPDF(blobUrl); // store for next time
+
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      link.download = "privacy-policy.pdf";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (error) {
+      console.error("Failed to download PDF:", error);
+      alert("Failed to download PDF. Please try again.");
+    } finally {
+      setPdfLoader(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (showLanguageBasedTermsAndConditions) {
+      setShowLanguageBasedTermsAndConditions(false);
+      return;
+    }
+    setShowTermsAndConditions(true);
+  };
+
+  const handleLanguageChange = async (e) => {
+    const selectedValue = e.target.value;
+    const selectedLanguage = languageSupport.find(
+      (lang) => lang.value === selectedValue
+    );
+
+    if (!selectedLanguage || loading) return;
+
+    try {
+      setLoading(true);
+
+      const res = await changeLanguage(selectedLanguage.value);
+
+      if (res?.status === 202) {
+        setLanguage(selectedLanguage);
+      } else {
+        console.error("Unexpected status:", res.status);
+      }
+    } catch (err) {
+      console.error("Failed to change language", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-100 flex items-center justify-center p-3 sm:p-4 bg-black/30 sm:backdrop-blur-[2px]">
+      <div
+        className={`relative w-full bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col transition-all duration-300
+          ${showTermsAndConditions
+            ? "h-auto max-h-[80vh] max-w-[90vw] sm:max-w-[500px] md:max-w-[550px]" // Small modal for terms
+            : "h-[calc(100%-75px)] max-w-[90vw] sm:max-w-[700px] lg:max-w-[900px] xl:max-w-[1100px]" // Large modal for content
+          }
+        `}
+      >
+        {/* Header */}
+        <div
+          className="relative bg-t-c p-3 sm:p-4 flex justify-between items-center flex-shrink-0"
+          style={{
+            backgroundImage: `repeating-linear-gradient(
+              45deg,
+              transparent,
+              transparent 10px,
+              rgba(255,255,255,.05) 10px,
+              rgba(255,255,255,.05) 20px
+            )`,
+          }}
+        >
+          <div className="flex items-center gap-2 sm:gap-3">
+            <img
+              src={formJson?.logo_url ?? SMELogo}
+              alt="SME Logo"
+              className=" h-6 sm:h-8 object-contain"
+            />
+          </div>
+        </div>
+
+        {/* Content */}
+        <div
+          className={`flex-1 overflow-y-auto  p-3 sm:p-6 min-h-0 `}
+        >
+          {isLoading ? (
+            <div className="space-y-3 sm:space-y-4 animate-pulse">
+              <div className="h-5 sm:h-6 bg-gray-300 rounded w-1/2 sm:w-1/3"></div>
+              <div className="h-3 sm:h-4 bg-gray-300 rounded w-full"></div>
+              <div className="h-3 sm:h-4 bg-gray-300 rounded w-5/6"></div>
+              <div className="h-3 sm:h-4 bg-gray-300 rounded w-2/3"></div>
+              <div className="h-3 sm:h-4 bg-gray-300 rounded w-full"></div>
+              <div className="h-3 sm:h-4 bg-gray-300 rounded w-4/5"></div>
+              <div className="h-3 sm:h-4 bg-gray-300 rounded w-3/4"></div>
+            </div>
+          ) : showTermsAndConditions ? (
+            <div>
+              <p className="text-sm sm:text-base text-gray-700 font-medium mb-3 sm:mb-4 leading-relaxed">
+                <Trans
+                  i18nKey="terms.agreementText"
+                  components={[
+                    <strong />,
+                    <span
+                      className="text-regal-blue font-semibold cursor-pointer hover:underline"
+                      onClick={fetchPrivacyPolicy}
+                    />
+                  ]}
+                />
+              </p>
+
+              <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">
+                <strong>{t("terms.note")}</strong> {t("terms.noteText")}
+              </p>
+            </div>
+          ) : (
+            htmlContent && (
+              <iframe
+                title="html-result"
+                srcDoc={htmlContent}
+                className="w-full h-full min-h-[250px] sm:min-h-[300px] border-0 rounded-lg"
+                style={{ direction: 'ltr' }}
+              />
+            )
+          )}
+        </div>
+
+        {/* Footer */}
+        <div
+          className={`flex flex-row sm:flex-row items-stretch sm:items-center justify-between gap-3 sm:gap-4 px-3 sm:px-4 py-3 border-t border-gray-200 bg-gray-50 flex-shrink-0 ${isLoading ? "opacity-50 pointer-events-none" : ""
+            }`}
+        >
+          {showTermsAndConditions ? (
+            <>
+              <div className="form-control w-full sm:w-auto">
+                {isProUser && <select
+                  value={currentLanguage.value}
+                  onChange={handleLanguageChange}
+                  disabled={loading}
+                  className="h-10 select select-bordered select-sm sm:select-md rounded-lg 
+      border-gray-300 focus:outline-none focus:border-blue-500 
+      focus:ring-1 focus:ring-blue-500 disabled:opacity-50"
+                >
+                  {loading && (
+                    <div className="w-4 h-4 border-2 border-gray-500 border-t-transparent rounded-full animate-spin" />
+                  )}
+                  {languageSupport.map((language) => (
+                    <option key={language.value} value={language.value}>
+                      {getLocalizedLabel(language.value)}
+                    </option>
+                  ))}
+                </select>}
+
+              </div>
+
+              <button
+                onClick={handleAgree}
+                disabled={agreeLoading || isLoading}
+                className={`px-6 sm:px-8 py-2 rounded-lg font-medium text-white transition duration-200 shadow-md w-full sm:w-auto
+                  ${agreeLoading || isLoading
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-t-c hover:bg-blue-500 cursor-pointer"
+                  }
+                `}
+              >
+                {agreeLoading ? (
+                  <div className="flex items-center justify-center gap-2">
+                    <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+                    <span className="text-sm sm:text-base">{t("buttons.processing")}</span>
+                  </div>
+                ) : (
+                  t("buttons.agree")
+                )}
+              </button>
+            </>
+          ) : (
+            <div className="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-3">
+              <button
+                onClick={() => handleClose()}
+                className="px-6 sm:px-8 py-2 cursor-pointer bg-gray-400 text-white rounded-lg font-medium hover:bg-gray-500 transition duration-200 shadow-md hover:shadow-lg w-full sm:w-auto order-2 sm:order-1"
+              >
+                {t("buttons.close")}
+              </button>
+              <button
+                onClick={handlePDFDownload}
+                disabled={pdfLoader}
+                className={`px-6 sm:px-8 py-2 bg-t-c cursor-pointer text-white rounded-lg font-medium transition duration-200 shadow-md hover:shadow-lg w-full sm:w-auto order-1 sm:order-2 ${pdfLoader ? "opacity-70 cursor-not-allowed" : ""
+                  }`}
+              >
+                {pdfLoader ? (
+                  <div className="flex items-center justify-center gap-2">
+                    <span className="animate-spin border-2 border-white border-t-transparent rounded-full w-4 h-4"></span>
+                    <span className="text-sm sm:text-base">{t("buttons.downloading")}</span>
+                  </div>
+                ) : (
+                  t("buttons.downloadPdf")
+                )}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TermsAndConditionsModal;
\ No newline at end of file
diff --git a/src/pages/AccessDenied.jsx b/src/pages/AccessDenied.jsx
new file mode 100644
index 0000000..07d0cfa
--- /dev/null
+++ b/src/pages/AccessDenied.jsx
@@ -0,0 +1,115 @@
+import { useLocation, useSearchParams } from "react-router-dom";
+import { useEffect } from "react";
+import bgComplete from "../assets/bgComplete.png";
+import AccessDeniedGif from "../assets/AccessDeniedGif.gif";
+import SMELogo from "../assets/SMELogoCompScreens.png";
+import { Trans } from "react-i18next";
+import FootertPrivacyPolicy from "../components/FootertPrivacyPolicy";
+
+// Error config map — add new errorCodes here
+const ERROR_CONFIG = {
+  AUDIT_TRAIL_HIDDEN: {
+    title: "Access Denied",
+    message: "You do not have permission to view the audit trail.",
+  },
+  MISSING_UUID: {
+    title: "Invalid Link",
+    message: "The link you followed is invalid or has expired.",
+  },
+  PREVIEW_UNAVAILABLE: {
+    title: "Preview Unavailable",
+    message: "Documents can be previewed only when the transaction status is Draft.",
+  },
+  DEFAULT: {
+    title: "Access Denied",
+    message: "You do not have permission to access this page.",
+  },
+};
+
+export default function AccessDenied() {
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+
+  // Read state sent via navigate(..., { state: { ... } })
+  const { errorCode } = location.state || {};
+  const uuid = location.state?.uuid || searchParams.get("uuid");
+
+  const config = ERROR_CONFIG[errorCode] || ERROR_CONFIG.DEFAULT;
+  const displayMessage = config.message;
+  const displayTitle = config.title;
+
+  useEffect(() => {
+    const head = document.head;
+    const preloadsToRemove = [];
+    const criticalAssets = [
+      { href: bgComplete, as: "image" },
+      { href: SMELogo, as: "image" },
+      { href: AccessDeniedGif, as: "image" },
+    ];
+    criticalAssets.forEach(({ href, as }) => {
+      const link = document.createElement("link");
+      link.rel = "preload";
+      link.href = href;
+      link.as = as;
+      link.setAttribute("fetchpriority", "high");
+      head.appendChild(link);
+      preloadsToRemove.push(link);
+    });
+    return () => {
+      preloadsToRemove.forEach((link) => {
+        if (head.contains(link)) head.removeChild(link);
+      });
+    };
+  }, []);
+
+  return (
+    <div
+      className="relative min-h-[100dvh] flex flex-col overflow-hidden animate-fadeIn"
+      style={{
+        backgroundImage: `url(${bgComplete})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      <style>{`
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        .animate-fadeIn { animation: fadeIn 0.3s ease-in; }
+        .animate-slideUp { animation: slideUp 0.4s ease-out; }
+      `}</style>
+
+      <header className="px-4 py-2 flex justify-center sm:justify-start items-center bg-white/80 backdrop-blur-sm shadow-md z-10 animate-slideUp">
+        <img src={SMELogo} className="w-40 h-8" loading="eager" alt="SME Logo" />
+      </header>
+
+      <main className="flex flex-col items-center text-center px-4 flex-grow justify-center animate-slideUp">
+
+        {/* Dynamic title */}
+        <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-800 mb-4">
+          <span className="bg-gradient-to-r from-red-500 to-red-400 bg-clip-text text-transparent">
+            {displayTitle}
+          </span>
+        </h1>
+
+        <div className="my-1 transform transition-transform hover:scale-105 duration-300">
+          <img
+            src={AccessDeniedGif}
+            alt="Access Denied"
+            className="w-48 md:w-56 lg:w-62 mx-auto"
+            loading="eager"
+            fetchPriority="high"
+          />
+        </div>
+
+        {/* Dynamic message */}
+        <p className="md:max-w-[45vw] mx-auto text-sm sm:text-base text-gray-800 leading-relaxed text-center">
+          {displayMessage}
+        </p>
+
+      </main>
+
+      <FootertPrivacyPolicy/>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/AuditTrails.jsx b/src/pages/AuditTrails.jsx
new file mode 100644
index 0000000..9c269c7
--- /dev/null
+++ b/src/pages/AuditTrails.jsx
@@ -0,0 +1,11 @@
+import AuditTrailsBody from "../components/AuditTrailsModules/AuditTrailsBody"
+
+const AuditTrails = () => {
+  return (
+    <>
+    <AuditTrailsBody/>
+    </>
+  )
+}
+
+export default AuditTrails
\ No newline at end of file
diff --git a/src/pages/CompletionScreen.jsx b/src/pages/CompletionScreen.jsx
new file mode 100644
index 0000000..951d3d5
--- /dev/null
+++ b/src/pages/CompletionScreen.jsx
@@ -0,0 +1,579 @@
+import React, { useEffect, useRef, useState } from "react";
+import confetti from "canvas-confetti";
+import bgComplete from "../assets/bgComplete.png";
+import DMELogo from "../assets/DMELogo.png";
+import FMELogo from "../assets/FMELogo.png";
+import SMELogo from "../assets/SMELogoCompScreens.png";
+import CompleteGif from "../assets/CompleteGif.gif";
+import DeniedGif from "../assets/DeniedGif.gif";
+import api from "../api/Axios";
+import Toaster from "../helper/Toaster";
+import { useSearchParams } from "react-router-dom";
+import CompletionScreenShimmerUI from "../ShimmerUI/CompletionScreenShimmerUI";
+import { useDocStore } from "../store";
+import { Trans, useTranslation } from "react-i18next";
+import { ChevronDown } from "lucide-react";
+import { downloadPdfApi } from "../services/downloadDocument";
+import FootertPrivacyPolicy from "../components/FootertPrivacyPolicy";
+import LanguageDropdown from "../components/LanguageDropdown";
+import SMELogoIcon from '../assets/SMELogo.png';
+import { isRtlLanguage } from "../i18n";
+
+const STATUS_CONFIG = {
+  COMPLETE: {
+    hit: "All Done! ",
+    title: "Thanks for signing",
+    message:
+      "Your document is now complete and securely stored. We've emailed you a copy.",
+    textColorSuccess: true,
+  },
+  DECLINED: {
+    hit: "Action Canceled! ",
+    title: "Maybe Next Time!",
+    message:
+      "Your request has been declined successfully.",
+    textColorSuccess: false,
+  },
+  CANCELLED: {
+    hit: "Action Canceled! ",
+    title: "Maybe Next Time!",
+    message:
+      "Your request has been declined successfully.",
+    textColorSuccess: false,
+  },
+};
+
+const CompletionScreen = () => {
+
+  const { formJson } = useDocStore();
+  const status = formJson?.status;
+  const { t , i18n} = useTranslation();
+   const isRtl = isRtlLanguage(i18n.language);
+
+  const config = status
+    ? {
+      hit: t(`completion.${status.toLowerCase()}.hit`),
+      title: t(`completion.${status.toLowerCase()}.title`),
+      message: t(`completion.${status.toLowerCase()}.message`),
+      textColorSuccess: status === "COMPLETE"
+    }
+    : null;
+
+  const [searchParams] = useSearchParams();
+  const uuid = searchParams.get("uuid");
+  const [loading, setLoading] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
+  const [toastStatus, setToastStatus] = useState("");
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+  const [loadedImages, setLoadedImages] = useState({
+    bg: false,
+    logo: false,
+    main: false,
+    frame1: false,
+    frame2: false,
+    fme: false,
+    dme: false,
+  });
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState('PDF'); // Default option
+  const dropdownRef = useRef(null);
+  const buttonRef = useRef(null);
+  const textColorSuccess = config?.textColorSuccess ?? false;
+
+  // programmatically add preload links
+  useEffect(() => {
+    const head = document.head;
+    const preloadsToRemove = [];
+
+    const criticalAssets = [
+      { href: bgComplete, as: "image", priority: "high" },
+      { href: SMELogo, as: "image", priority: "high" },
+      { href: "/completion-screen-frame-1.png", as: "image", priority: "low" },
+    ];
+
+    // Conditionally preload the critical asset based on status
+    if (config?.textColorSuccess) {
+      criticalAssets.push({ href: CompleteGif, as: "image", priority: "high" });
+    } else if (status === "DECLINED") {
+      criticalAssets.push({ href: DeniedGif, as: "image", priority: "high" });
+    }
+
+    criticalAssets.forEach(({ href, as, priority }) => {
+      const link = document.createElement("link");
+      link.rel = "preload";
+      link.href = href;
+      link.as = as;
+      if (priority) link.setAttribute("fetchpriority", priority);
+      head.appendChild(link);
+      preloadsToRemove.push(link);
+    });
+
+    // Clean up function to remove these links if the user navigates away
+    return () => {
+      preloadsToRemove.forEach(link => head.removeChild(link));
+    };
+  }, [status, config]);
+
+  // Preload critical images
+  useEffect(() => {
+    const imagesToPreload = [
+      { src: bgComplete, key: "bg" },
+      { src: SMELogo, key: "logo" },
+      {
+        src: textColorSuccess ? CompleteGif : DeniedGif,
+        key: "main",
+      },
+      { src: "/completion-screen-frame-1.png", key: "frame1" },
+      { src: FMELogo, key: "fme" },
+      { src: DMELogo, key: "dme" },
+    ];
+
+    let loadedCount = 0;
+    const totalImages = imagesToPreload.length;
+
+    imagesToPreload.forEach(({ src, key }) => {
+      const img = new Image();
+      img.onload = () => {
+        loadedCount++;
+        setLoadedImages((prev) => ({ ...prev, [key]: true }));
+
+        // Mark as loaded when critical images are ready (bg, logo, main)
+        if (loadedCount >= 3) {
+          setImagesLoaded(true);
+        }
+      };
+      img.onerror = () => {
+        loadedCount++;
+        setLoadedImages((prev) => ({ ...prev, [key]: true }));
+        if (loadedCount >= 3) {
+          setImagesLoaded(true);
+        }
+      };
+      img.src = src;
+    });
+
+    // Fallback timeout
+    const timeout = setTimeout(() => {
+      setImagesLoaded(true);
+    }, 3000);
+
+    return () => clearTimeout(timeout);
+  }, [textColorSuccess]);
+
+  useEffect(() => {
+    if (!imagesLoaded) return;
+
+    const duration = 3000;
+    const end = Date.now() + duration;
+
+    const interval = setInterval(() => {
+      if (Date.now() > end) {
+        clearInterval(interval);
+        return;
+      }
+
+      confetti({
+        particleCount: 5,
+        angle: 90,
+        spread: 30,
+        startVelocity: 8,
+        origin: {
+          x: Math.random(),
+          y: 0,
+        },
+        scalar: 1,
+        zIndex: 9999,
+      });
+    }, 50);
+
+    return () => clearInterval(interval);
+  }, [imagesLoaded]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) &&
+        buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // ✅ Early return AFTER all hooks
+  const criticalImageLoaded =
+    config?.textColorSuccess ? loadedImages.main : true; // Assuming 'main' is your gif
+
+  if (!status || !config || !criticalImageLoaded) {
+    return <CompletionScreenShimmerUI />;
+  }
+
+  const { hit, title, message } = config;
+
+  const handleDownloadFile = async () => {
+    try {
+      setLoading(true);
+      setToastMessage("");
+      setToastStatus("");
+
+      // Call the API based on type
+      if (selectedOption === 'Audit Trails') {
+        await downloadPdfApi("audit");
+      } else {
+        await downloadPdfApi("pdf");
+      }
+
+      setToastStatus("success");
+      setToastMessage(t("completion.downloadSuccess"));
+
+      setTimeout(() => {
+        setToastMessage("");
+        setToastStatus("");
+      }, 2000);
+    } catch (error) {
+      console.error("File download failed:", error);
+      setToastMessage(t("completion.downloadError"));
+      setToastStatus("error");
+
+      setTimeout(() => {
+        setToastMessage("");
+        setToastStatus("");
+      }, 2000);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+  // Handle download with selected option
+  const handleDownloadWithOption = async (option) => {
+    setSelectedOption(option);
+    setIsDropdownOpen(false);
+  };
+
+  // Toggle dropdown
+  const toggleDropdown = () => {
+    if (!loading) {
+      setIsDropdownOpen(!isDropdownOpen);
+    }
+  };
+
+  // Loading skeleton screen
+  // if (!status || !config || !imagesLoaded) {
+  //   return <CompletionScreenShimmerUI />;
+  // }
+  const getSelectedOptionLabel = (option) => {
+    switch (option) {
+      case 'PDF':
+        return t("completion.downloadOptions.pdf");
+      case 'Audit Trails':
+        return t("completion.downloadOptions.audit");
+      default:
+        return option;
+    }
+  };
+
+  const handleAppNavigation = (app) => {
+    if (app === 'DME') {
+      // window.location.replace('https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000GbAJDUA3')
+      window.location.href = 'https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000GbAJDUA3'
+    } else {
+      // window.location.replace('https://appexchange.salesforce.com/appxListingDetail?listingId=9bbf17ec-e4cb-4a4d-9273-a14a356a7d7c')
+      window.location.href = 'https://appexchange.salesforce.com/appxListingDetail?listingId=9bbf17ec-e4cb-4a4d-9273-a14a356a7d7c'
+    }
+  }
+
+  return (
+    <>
+      {toastStatus && toastMessage && (
+        <Toaster toastStatus={toastStatus} toastMessage={toastMessage} />
+      )}
+      <div
+        className="relative min-h-[100dvh] flex flex-col bg-gradient-to-b from-white to-blue-50 overflow-hidden animate-fadeIn"
+        style={{
+          backgroundImage: `url(${bgComplete})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+        }}
+      >
+        <style>{`
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          .animate-fadeIn {
+            animation: fadeIn 0.3s ease-in;
+          }
+          .animate-slideUp {
+            animation: slideUp 0.4s ease-out;
+          }
+          @keyframes slideUp {
+            from {
+              opacity: 0;
+              transform: translateY(20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+        `}</style>
+
+        <div>
+          <img
+            className={`absolute z-0 top-[5%] right-0 transition-opacity duration-300 ${loadedImages.frame1 ? "opacity-100" : "opacity-0"
+              }`}
+            src="/completion-screen-frame-1.png"
+            alt=""
+            loading="lazy"
+          />
+          <img
+            className={`absolute z-0 top-[5%] left-0 rotate-y-180 transition-opacity duration-300 ${loadedImages.frame1 ? "opacity-100" : "opacity-0"
+              }`}
+            src="/completion-screen-frame-1.png"
+            alt=""
+            loading="lazy"
+          />
+        </div>
+
+        {/* Header */}
+        <header className="px-4 py-2 flex justify-between sm:justify-between items-center bg-regal-blue shadow-md z-10 animate-slideUp">
+          <div className="flex items-center gap-2  ">
+            <img
+              src={formJson?.logo_url ?? SMELogoIcon}
+              className="h-7 w-auto object-contain block md:hidden"
+              alt="SME Logo"
+            />
+
+            <img
+              src={formJson?.logo_url ?? SMELogo}
+              className="h-7 w-auto object-contain hidden md:block"
+              alt="SME Logo"
+            />
+          </div>
+          <div className="">
+           {formJson.isProUser &&  <LanguageDropdown />}
+          </div>
+        </header>
+
+        {/* Main content */}
+        <main className="flex flex-col items-center text-center px-4 flex-grow animate-slideUp">
+          <h1 className="text-xl md:text-3xl 2xl:text-5xl 2xl:mt-10 font-bold mt-15 md:mt-6">
+            <span
+              className={`mx-3 ${textColorSuccess ? "text-t-c" : "text-red-400"}`}
+            >
+              {hit}
+            </span>
+            {title}
+          </h1>
+          <p className="mt-1.5 max-w-xl 2xl:mt-4">{message}</p>
+
+          {textColorSuccess &&
+            <div className="relative">
+              <div className="flex gap-0.5 relative z-50 font-semibold mt-8 md:mt-4 2xl:mt-6 text-md 2xl:text-xl">
+                {/* Main Download Button */}
+                <button
+                  onClick={() => handleDownloadFile()}
+                  disabled={loading}
+                  className={`px-8 py-2  font-medium transition-all duration-150 shadow-md active:scale-95 active:shadow-sm ${loading
+                    ? "bg-gray-400 cursor-not-allowed text-white"
+                    : "bg-t-c hover:bg-blue-500 text-white cursor-pointer"
+                    } ${isRtl ? "rounded-r-lg" :"rounded-l-lg"}`}
+                >
+                  {loading ? (
+                    <span className="flex items-center gap-2">
+                      <span className="loading loading-spinner loading-sm"></span>
+                      <span>
+                        {t("completion.downloading")}{" "}
+                        {getSelectedOptionLabel(selectedOption)}...
+                      </span>
+                    </span>
+                  ) : (
+                    <span>
+                      {t("completion.download")} (
+                      {getSelectedOptionLabel(selectedOption)})
+                    </span>
+                  )}
+                </button>
+
+                {/* Dropdown Toggle Button */}
+                <button
+                  ref={buttonRef}
+                  onClick={toggleDropdown}
+                  disabled={loading}
+                  className={`px-2 py-2  font-medium transition-all duration-150 shadow-md active:scale-95 active:shadow-sm ${loading
+                    ? "bg-gray-400 cursor-not-allowed text-white"
+                    : "bg-t-c hover:bg-blue-500 text-white cursor-pointer"
+                    } ${isRtl ? "rounded-l-lg" :"rounded-r-lg"}`}
+                >
+                  <ChevronDown
+                    size={16}
+                    className={`transition-transform duration-200 ${isDropdownOpen ? "rotate-180" : ""
+                      }`}
+                  />
+                </button>
+
+                {/* Dropdown Menu */}
+                {isDropdownOpen && !loading && (
+                  <div
+                    ref={dropdownRef}
+                    className="absolute top-9 left-[calc(100%-190px)] mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden"
+                    style={{
+                      animation: 'dropdownFadeIn 0.2s ease'
+                    }}
+                  >
+                    <ul className="py-1 ">
+                      <li>
+                        <button
+                          onClick={() => handleDownloadWithOption('PDF')}
+                          className={`w-full text-left px-4 py-2 text-sm cursor-pointer hover:bg-blue-50 transition-colors duration-150 ${selectedOption === 'PDF' ? 'bg-blue-100 text-blue-700 font-medium' : 'text-gray-700'
+                            }`}
+                        >
+                          <span className="flex items-center gap-2">
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                            </svg>
+                            {t("completion.downloadOptions.pdf")}
+                          </span>
+                        </button>
+                      </li>
+
+                      {!formJson?.hide_audit_trail && <li>
+                        <button
+                          onClick={() => !formJson?.hide_audit_trail && handleDownloadWithOption('Audit Trails')}
+                          disabled={formJson?.hide_audit_trail}
+                          className={`w-full text-left px-4 py-2 text-sm transition-colors duration-150 
+      ${formJson?.hide_audit_trail
+                              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                              : selectedOption === 'Audit Trails'
+                                ? 'bg-blue-100 text-blue-700 font-medium hover:bg-blue-50 cursor-pointer'
+                                : 'text-gray-700 hover:bg-blue-50 cursor-pointer'
+                            }`}
+                        >
+                          <span className="flex items-center gap-2">
+                            <svg
+                              className="w-4 h-4"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                              />
+                            </svg>
+
+                            {t("completion.downloadOptions.audit")}
+                          </span>
+                        </button>
+                      </li>}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>}
+
+          {/* Illustration */}
+          <div className="mt-3 2xl:mt-10">
+            {textColorSuccess ? (
+              <img
+                src={CompleteGif}
+                alt={t("completion.complete.title")}
+                className="w-50 md:w-34 lg:w-42 2xl:w-70"
+                loading="eager"
+              />
+            ) : (
+              <img
+                src={DeniedGif}
+                alt={t("completion.declined.title")}
+                className="w-30 md:w-34 lg:w-42 2xl:w-70"
+                loading="eager"
+              />
+            )}
+          </div>
+
+          {/* Apps Section */}
+          <section className="relative z-10 top-3 2xl:top-10 w-full">
+            <h2 className="text-xl font-semibold text-gray-800 mb-3 2xl:text-2xl">
+              {t("completion.appsTitle")}
+            </h2>
+            <div className="w-full flex flex-col sm:flex-row gap-2 justify-center items-center 2xl:gap-4 2xl:mt-6">
+              {/* Forms Made Easy */}
+              <div
+                className={`bg-white rounded-lg shadow p-4 2xl:p-6 transition-opacity duration-300 ${loadedImages.fme ? "opacity-100" : "opacity-0"
+                  }`}
+              >
+                <div>
+                  <p className="text-sm font-semibold text-left mb-2 2xl:text-lg">
+                    {t("completion.formsTitle")}
+                  </p>
+                  <div className="w-full">
+                    <div className="w-full flex flex-row justify-between items-center">
+                      <img
+                        src={FMELogo}
+                        className="w-[40%] 2xl:w-[60%]"
+                        alt={t("completion.formsTitle")}
+                        loading="lazy"
+                      />
+                      <button className="text-xs sm:text-sm md:text-md sm:mt-0 bg-blue-600 text-white px-5 py-2 rounded-md hover:bg-blue-700 transition cursor-pointer active:scale-95 active:shadow-sm" onClick={() => handleAppNavigation('FME')}>
+                        {t("completion.tryNow")}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Docs Made Easy */}
+              <div
+                className={`bg-white rounded-lg shadow p-4 2xl:p-6 transition-opacity duration-300 ${loadedImages.fme ? "opacity-100" : "opacity-0"
+                  }`}
+              >
+                <div>
+                  <p className="text-sm font-semibold text-left mb-2 2xl:text-lg">
+                    {t("completion.docsTitle")}
+                  </p>
+                  <div className="w-full">
+                    <div className="w-full flex flex-row justify-between items-center">
+                      <img
+                        src={DMELogo}
+                        className="w-[40%] 2xl:w-[60%]"
+                        alt={t("completion.docsTitle")}
+                        loading="lazy"
+                      />
+                      <button className="text-xs sm:text-sm md:text-md sm:mt-0 bg-blue-600 text-white px-5 py-2 rounded-md hover:bg-blue-700 transition cursor-pointer active:scale-95 active:shadow-sm" onClick={() => handleAppNavigation('DME')}>
+                        {t("completion.tryNow")}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+
+        {/* Footer */}
+        <FootertPrivacyPolicy />
+      </div>
+    </>
+  );
+};
+
+{/* Add animation styles */ }
+<style jsx>{`
+        @keyframes dropdownFadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+export default CompletionScreen;
diff --git a/src/pages/EmailTemplateEditorPage.jsx b/src/pages/EmailTemplateEditorPage.jsx
new file mode 100644
index 0000000..a9bb6e5
--- /dev/null
+++ b/src/pages/EmailTemplateEditorPage.jsx
@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import EmailTemplateEditor from '../components/EmailTemplateEditorModules/EmailTemplateEditor';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+const EmailTemplateEditorPage = () => {
+    const navigate = useNavigate()
+    const [originalHTML, setOriginalHTML] = useState('');
+    const [resetConfig, setResetConfig] = useState('');
+    const [jsonConfig, setJsonConfig] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [authDataSF, setAuthDataSF] = useState(null);
+
+    useEffect(() => {
+        window.parent.postMessage({ type: 'IFRAME_READY' }, '*');
+
+        const handleMessage = async (event) => {
+            const data = event.data;
+            const authData = data?.message;
+
+            console.log(authData, "Auth Data");
+
+            if (!authData) {
+                navigate("/error", {
+                    replace: true,
+                    state: {
+                        status: 400,
+                        message: "Invalid or missing token.",
+                        errorCode: "MISSING_Data",
+                    },
+                });
+                return;
+            }
+
+            if (data?.type === 'SF_AUTH') {
+                console.log("SF AUTH or Development Mode");
+                setAuthDataSF(authData);
+
+                try {
+                    setIsLoading(true);
+                    setError(null);
+
+                    const res = await axios.get(
+                        `${import.meta.env.VITE_BASE_API_URL}/email/template?businessUnitId=${authData?.buid}`,
+                        // `${import.meta.env.VITE_BASE_API_URL}/email/template?businessUnitId=${"a02Io000002cBopIAE"}`,
+                        {
+                            headers: {
+                                'X-AUTH-TYPE': 'USER',
+                                'Authorization': `Bearer ${authData?.token}`,
+                                // 'Authorization': `Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJNREJFU1c4d01EQXdNREJNYTJZNVRVRkQiLCJpYXQiOjE3Nzg1Njk3MjEsImV4cCI6MTc4MTE2MTcyMX0.u-eifjN4k3jcyQbsekOqoGwc0WJiKUl7zOGqBXoy5g8`,
+                                "ngrok-skip-browser-warning": "69420",
+                            }
+                        }
+                    );
+
+                    console.log(res.data, "API Response");
+
+                    let bodyHtml = res.data.body;
+                    let resetConfig = res.data.body;
+                    let serverConfigData = res.data.config;
+
+                    console.log("Server Config Data:", serverConfigData);
+
+                    let configData = null;
+
+                    // Parse server config if it exists
+                    if (serverConfigData) {
+                        try {
+                            configData = typeof serverConfigData === 'string'
+                                ? JSON.parse(serverConfigData)
+                                : serverConfigData;
+                            console.log("✅ Parsed Server Config:", configData);
+                        } catch (err) {
+                            console.error("❌ Error parsing server config:", err);
+                        }
+                    }
+
+                    setOriginalHTML(bodyHtml);
+
+                    // Use server config directly
+                    if (configData && Object.keys(configData).length > 0) {
+                        console.log("📦 Using Server Config directly:", configData);
+                        setJsonConfig(configData);
+                        setResetConfig(configData)
+                    } else {
+                        console.error("❌ No server config found");
+                        setError("No configuration found in server response");
+                        setJsonConfig(null);
+                    }
+
+                } catch (err) {
+                    console.error('Fetch failed:', err);
+                    setError(err.message);
+                    setJsonConfig(null);
+                } finally {
+                    setIsLoading(false);
+                }
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    return (
+        <EmailTemplateEditor
+            originalHTML={originalHTML}
+            jsonConfig={jsonConfig}
+            setJsonConfig={setJsonConfig}
+            isLoading={isLoading}
+            error={error}
+            authDataSF={authDataSF}
+            resetConfig={resetConfig}
+        />
+    );
+};
+
+export default EmailTemplateEditorPage;
\ No newline at end of file
diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx
new file mode 100644
index 0000000..26325aa
--- /dev/null
+++ b/src/pages/ErrorPage.jsx
@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { CloudAlert } from "lucide-react";
+import bgComplete from "../assets/bgComplete.png";
+import { clearSession } from "../services/sessionService";
+
+const STATUS_CONFIG = {
+  400: { title: "Bad Request",   color: "text-yellow-500" },
+  401: { title: "Unauthorized",  color: "text-orange-500" },
+  403: { title: "Access Denied", color: "text-orange-600" },
+  404: { title: "Not Found",     color: "text-blue-500"   },
+  500: { title: "Server Error",  color: "text-red-500"    },
+};
+
+const ErrorPage = () => {
+  const location = useLocation();
+  const { status = 500, message, errorCode } = location.state || {};
+  const config = STATUS_CONFIG[status] || { title: "Something Went Wrong", color: "text-red-500" };
+
+  // useEffect(() => {
+  //   clearSession()
+  // }, [])
+
+  return (
+    <div
+      className="flex flex-col items-center justify-center min-h-screen text-center p-6"
+      style={{
+        backgroundImage: `url(${bgComplete})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      {/* <h1 className={`text-7xl font-bold mb-2 ${config.color}`}>{status}</h1> */}
+
+      <h2 className={`text-3xl font-semibold text-gray-800 mb-4 flex gap-3 items-center ${config.color}`}>
+        <CloudAlert className={`w-8 h-8 ${config.color}`} />
+        {config.title}
+      </h2>
+
+      <p className="text-gray-700 max-w-md font-medium mb-3">
+        {message || "We're experiencing some issues. Please try again later."}
+      </p>
+
+      {errorCode && (
+        <span className="text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full font-mono">
+          {errorCode}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default ErrorPage;
\ No newline at end of file
diff --git a/src/pages/ExpiredPage.jsx b/src/pages/ExpiredPage.jsx
new file mode 100644
index 0000000..1c633b8
--- /dev/null
+++ b/src/pages/ExpiredPage.jsx
@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react";
+import bgComplete from "../assets/bgComplete.png";
+import AccessDeniedGif from "../assets/AccessDeniedGif.gif";
+import SMELogo from "../assets/SMELogoCompScreens.png";
+import FootertPrivacyPolicy from "../components/FootertPrivacyPolicy";
+import ExpiredPageShimmerUI from "../ShimmerUI/ExpiredPageShimmerUI";
+
+export default function ExpiredPage() {
+  const displayTitle = "Transaction Expired";
+
+  const displayMessage =
+    "This transaction has reached its expiration period and is no longer active. Please contact the document sender or system administrator for further assistance.";
+
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+
+  useEffect(() => {
+    const images = [bgComplete, SMELogo, AccessDeniedGif];
+
+    let loadedCount = 0;
+
+    images.forEach((src) => {
+      const img = new Image();
+
+      img.onload = () => {
+        loadedCount++;
+
+        if (loadedCount === images.length) {
+          setImagesLoaded(true);
+        }
+      };
+
+      img.onerror = () => {
+        loadedCount++;
+
+        if (loadedCount === images.length) {
+          setImagesLoaded(true);
+        }
+      };
+
+      img.src = src;
+    });
+
+    const timeout = setTimeout(() => {
+      setImagesLoaded(true);
+    }, 3000);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  // Prevent blank screen
+  if (!imagesLoaded) {
+    return <ExpiredPageShimmerUI />;
+  }
+
+  return (
+    <div
+      className="relative min-h-[100dvh] flex flex-col overflow-hidden animate-fadeIn"
+      style={{
+        backgroundImage: `url(${bgComplete})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      <style>{`
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .animate-fadeIn {
+          animation: fadeIn 0.3s ease-in;
+        }
+
+        .animate-slideUp {
+          animation: slideUp 0.4s ease-out;
+        }
+      `}</style>
+
+      {/* Header */}
+      <header className="px-4 py-2 flex justify-center sm:justify-start items-center bg-white/80 backdrop-blur-sm shadow-md z-10 animate-slideUp">
+        <img
+          src={SMELogo}
+          className="w-40 h-8"
+          loading="eager"
+          alt="SME Logo"
+        />
+      </header>
+
+      {/* Main */}
+      <main className="flex flex-col items-center text-center px-4 flex-grow justify-center animate-slideUp">
+        <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-800 mb-4">
+          <span className="bg-gradient-to-r from-red-500 to-red-400 bg-clip-text text-transparent">
+            {displayTitle}
+          </span>
+        </h1>
+
+        <div className="my-2">
+          <img
+            src={AccessDeniedGif}
+            alt="Expired"
+            className="w-48 md:w-56 lg:w-64 mx-auto"
+            loading="eager"
+          />
+        </div>
+
+        <p className="md:max-w-[45vw] mx-auto text-sm sm:text-base text-gray-700 leading-relaxed text-center">
+          {displayMessage}
+        </p>
+      </main>
+
+      <FootertPrivacyPolicy />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..a85a4c7
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,610 @@
+import { useState, lazy, Suspense, useEffect, useRef } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import api from "../api/Axios";
+import DocFormOverlayShimmerUI from "../ShimmerUI/DocFormOverlayShimmerUI";
+import { useDocStore } from "../store";
+import { clearSession } from "../services/sessionService";
+import Loader from "../helper/Loader";
+
+const DocFormOverlay = lazy(() => import("../components/DocFormOverlay"));
+
+const Home = () => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const uuid = searchParams.get("uuid");
+  const {
+    formJson,
+    inputFields,
+    documents,
+    recipientInfo,
+    setRecipientInfo,
+    transaction,
+  } = useDocStore();
+  const languageLoading = useDocStore((state) => state.languageLoading);
+  const updateFormJson = useDocStore((state) => state.updateFormJson)
+  const setRedirectUrl = useDocStore((state) => state.setRedirectUrl)
+  const setIsLastInPersonSigner = useDocStore((state) => state.setIsLastInPersonSigner)
+  const [submitting, setSubmitting] = useState(false);
+  // const [documents, setDocuments] = useState([]);
+  // const [transaction, setTransaction] = useState({})
+
+  const [showInPersonSignerModal, setShowInPersonSignerModal] = useState(false)
+
+
+
+
+  const generateInitials = (name = "") => {
+    return name
+      .trim()
+      .split(" ")
+      .filter(Boolean)
+      .map((w) => w[0].toUpperCase())
+      .join("");
+  };
+
+
+  const maskValue = (value, maskChar = "*") => {
+    if (value == null) return "";
+    return maskChar.repeat(String(value).length);
+  };
+
+  const getSubType = (wbtType) => {
+    return wbtType === "BOOLEAN" ? "checkbox" : "text";
+  };
+
+  const getWritebackType = (wbtType) => {
+    const typeMap = {
+      STRING: "text",
+      EMAIL: "text",
+      PHONE: "text",
+      INTEGER: "number",
+      DOUBLE: "number",
+      BOOLEAN: "checkbox",
+      PICKLIST: "text",
+      ENCRYPTEDSTRING: "text",
+      LOOKUP: "lookup",
+    };
+    return typeMap[wbtType] || "text";
+  };
+
+  const getValue = (wbtType, rawValue) => {
+    if (wbtType === "BOOLEAN") {
+      return rawValue === "true" || rawValue === true;
+    }
+    if (wbtType === "DOUBLE" || wbtType === "INTEGER") {
+      const num = String(rawValue);
+      return isNaN(num) ? rawValue : num;
+    }
+    return rawValue ?? "";
+  };
+
+
+  const parsePx = (val) => {
+    if (val == null) return 0;
+
+    if (typeof val === "number") return val;
+
+    const parsed = parseFloat(val);
+    return isNaN(parsed) ? 0 : parsed;
+  };
+
+
+  const setToast = useDocStore((state) => state.setToast)
+
+
+  const formatTime = (date, format = "hh:mm") => {
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
+
+    const pad = (n) => (n < 10 ? "0" + n : n);
+
+    if (format === "hhmm") {
+      return `${pad(hours)}${pad(minutes)}`;
+    } else if (format === "hh:mm") {
+      return `${pad(hours)}:${pad(minutes)}`;
+    } else if (format === "hh:mm xm") {
+      const ampm = hours >= 12 ? "PM" : "AM";
+      hours = hours % 12 || 12;
+      return `${pad(hours)}:${pad(minutes)} ${ampm}`;
+    }
+
+    return `${pad(hours)}:${pad(minutes)}`;
+  };
+
+  const cleanNumber = (value) => {
+    if (value === null || value === undefined) return value;
+
+    // remove commas + trim
+    const cleaned = value.toString().replace(/,/g, "").trim();
+
+    // if not a valid number, return original
+    if (isNaN(cleaned)) return value;
+
+    return cleaned; // ✅ STRING (not Number)
+  };;
+
+  const cleanFont = (font) => {
+    if (!font) return "Times New Roman";
+
+    return font
+      .replace(/"/g, "")          // remove quotes
+      .split(",")[0]              // take first font
+      .trim();
+  };
+
+  const buildStyle = (field, state, overrides = {}) => {
+    return {
+      link: ["attachment"].includes(state?.type) ? state?.link : ["signature", "initial"].includes(state?.type) &&
+        !formJson?.hide_audit_trail 
+        ? `${import.meta.env.VITE_SITE_API_URL}/audit-trails-info?uuid=${uuid}` || ""
+        : "",
+      value: (() => {
+        let val =
+          typeof state?.value === "object"
+            ? state?.value?.text
+            : state?.value ?? "";
+
+        //  Handle number type
+        if (state?.type === "number") {
+          return cleanNumber(val);
+        }
+
+        //  Convert checkbox / radio boolean → string
+        if (state?.type === "checkbox") {
+          return String(val); // true → "true"
+        }
+
+        return val;
+      })(),
+      name: overrides.name ?? null,
+
+      font: cleanFont(
+        overrides.font ||
+        field.fontFamily ||
+        state?.value?.fontFamily ||
+        "Times New Roman"
+      ),
+
+      color: field.fontColor || "Black",
+      bold: field.bold || false,
+      italic: field.italic || false,
+      underline: field.underLine || false,
+
+      pageNumber: field.pageNumber ?? state?.pageNumber ?? 0,
+
+      dimensions: {
+        left: Math.round(parsePx(field.left)),
+        top: Math.round(parsePx(field.top)),
+        width: Math.round(parsePx(field.width)),
+        height: Math.round(parsePx(field.height)),
+      },
+      textSize: String(parseFloat(field.fontSize || 13)),
+    };
+  };
+
+  // ── Format-aware mask utility (mirrors WritebackInputField display logic) ──
+  const maskValueFormatted = (value, field) => {
+    if (!value || value.trim() === "") return value;
+
+    const maskChar = field.mask || "*";
+    const maskType = field.maskType || "all";
+
+    const hideAll = (val) => maskChar.repeat(val.length);
+
+    const showLastFour = (val) => {
+      if (val.length <= 4) return val;
+      return maskChar.repeat(val.length - 4) + val.slice(-4);
+    };
+
+    const formatSIN = (val) => {
+      const cleaned = val.replace(/-/g, "");
+      const visiblePart = cleaned.slice(-3);
+      const hiddenCount = Math.max(0, cleaned.length - 3);
+      let masked = maskChar.repeat(hiddenCount) + visiblePart;
+      if (masked.length > 9) masked = masked.slice(-9);
+      if (masked.length <= 3) return masked;
+      if (masked.length <= 6) return `${masked.slice(0, 3)}-${masked.slice(3)}`;
+      return `${masked.slice(0, 3)}-${masked.slice(3, 6)}-${masked.slice(6, 9)}`;
+    };
+
+    const formatSSN = (val) => {
+      const cleaned = val.replace(/-/g, "");
+      const visiblePart = cleaned.slice(-4);
+      const hiddenCount = Math.max(0, cleaned.length - 4);
+      let masked = maskChar.repeat(hiddenCount) + visiblePart;
+      if (masked.length > 9) masked = masked.slice(-9);
+      if (masked.length <= 3) return masked;
+      if (masked.length <= 5) return `${masked.slice(0, 3)}-${masked.slice(3)}`;
+      return `${masked.slice(0, 3)}-${masked.slice(3, 5)}-${masked.slice(5, 9)}`;
+    };
+
+    const formatCreditCard = (val) => {
+      const cleaned = val.replace(/-/g, "");
+      const visiblePart = cleaned.slice(-4);
+      const hiddenCount = Math.max(0, cleaned.length - 4);
+      let masked = maskChar.repeat(hiddenCount) + visiblePart;
+      if (masked.length > 16) masked = masked.slice(-16);
+      const groups = [];
+      for (let i = 0; i < masked.length; i += 4) groups.push(masked.slice(i, i + 4));
+      return groups.join("-");
+    };
+
+    const formatNINO = (val) => {
+      const cleaned = val.replace(/-/g, "").toUpperCase();
+      let masked = maskChar.repeat(cleaned.length);
+      if (masked.length > 9) masked = masked.slice(-9);
+      if (masked.length <= 2) return masked;
+      if (masked.length <= 4) return `${masked.slice(0, 2)}-${masked.slice(2)}`;
+      if (masked.length <= 6) return `${masked.slice(0, 2)}-${masked.slice(2, 4)}-${masked.slice(4)}`;
+      if (masked.length <= 8) return `${masked.slice(0, 2)}-${masked.slice(2, 4)}-${masked.slice(4, 6)}-${masked.slice(6)}`;
+      return `${masked.slice(0, 2)}-${masked.slice(2, 4)}-${masked.slice(4, 6)}-${masked.slice(6, 8)}-${masked.slice(8, 9)}`;
+    };
+
+    switch (maskType) {
+      case "sin": return formatSIN(value);
+      case "ssn": return formatSSN(value);
+      case "creditCard": return formatCreditCard(value);
+      case "nino": return formatNINO(value);
+      case "lastFour": return showLastFour(value);
+      case "all":
+      default: return hideAll(value);
+    }
+  };
+
+  //  MAIN FUNCTION
+  const handleSubmit = async (fieldState, visibilityMap) => {
+    setSubmitting(true);
+
+    if (!uuid) {
+      alert("Access Denied: Missing UUID");
+      return;
+    }
+
+    let res;
+
+    try {
+
+      //  3. Get documents with input fields
+      let documentsWithFields = [
+        ...new Set(inputFields.map((f) => f.documentId)),
+      ];
+
+      // 2. If no documents in inputFields, check if documents prop exists
+      let allDocumentIds = [];
+
+      if (documentsWithFields.length === 0 && documents && documents.length > 0) {
+        // Use the documents from props as fallback
+        allDocumentIds = documents.map((doc) => doc.contentDocumentId);
+      } else {
+        // IMPORTANT: Include ALL documents, even those without fields
+        if (documents && documents.length > 0) {
+          // Get all document IDs from the documents prop
+          allDocumentIds = documents.map((doc) => doc.contentDocumentId);
+        } else {
+          // Fallback to just documents with fields
+          allDocumentIds = documentsWithFields;
+        }
+      }
+
+      const documentsMap = {};
+      // Initialize ALL documents with empty arrays
+      allDocumentIds.forEach((docId) => {
+        documentsMap[docId] = [];
+      });
+
+      // 4. MAIN LOOP (IMPORTANT: use inputFields, NOT fieldState)
+      inputFields.forEach((field) => {
+        const fieldId = field.id;
+        const state = fieldState[fieldId];
+
+        console.log(state, "line 275")
+        // ── Skip hidden fields — don't send to server ──
+        if (visibilityMap[fieldId] === false) return;
+
+        // console.log("fieldId", fieldId, "state", state)
+
+        if (!state) return;
+
+        const docId = field.documentId;
+
+        // =========================
+        //  RADIO
+        // =========================
+        if (state.type === "radio") {
+          // ── Skip if radio cluster is hidden ──
+          if (visibilityMap[fieldId] === false) return;
+          const selectedOption = field.options?.find(
+            (o) => o.id === state.value
+          );
+
+          // ── Skip if selected option is hidden ──
+          if (!selectedOption || visibilityMap[selectedOption.id] === false) return;
+
+          documentsMap[docId].push({
+            type: "radio",
+            subType: "text",
+            style: {
+              link: "",
+              value: true,
+              name: null,
+              font: "Times New Roman",
+              color: "Black",
+              bold: false,
+              italic: false,
+              underline: false,
+              pageNumber: selectedOption.pageNumber ?? 0,
+              dimensions: {
+                left: Math.round(parsePx(selectedOption.left)),
+                top: Math.round(parsePx(selectedOption.top)),
+                width: Math.round(parsePx(selectedOption.width)),
+                height: Math.round(parsePx(selectedOption.height)),
+              },
+              textSize: parseFloat(field.fontSize || 13),
+            },
+            writeback: {},
+          });
+
+          return;
+        }
+
+        // =========================
+        //  TIME (AUTO-GENERATE)
+        // =========================
+        if (field.type === "time") {
+          const now = new Date();
+          const formattedTime = formatTime(now, field.format || "hh:mm");
+
+          documentsMap[docId].push({
+            type: "time",
+            subType: "text",
+            style: {
+              link: "",
+              value: formattedTime,
+              name: null,
+              font: field.fontFamily || "AlbertSans",
+              color: field.fontColor || "#000000",
+              bold: field.bold || false,
+              italic: field.italic || false,
+              underline: field.underLine || false,
+              pageNumber: field.pageNumber ?? 0,
+              dimensions: {
+                left: Math.round(parsePx(field.left)),
+                top: Math.round(parsePx(field.top)),
+                width: Math.round(parsePx(field.width)),
+                height: Math.round(parsePx(field.height)),
+              },
+              textSize: parseFloat(field.fontSize || 13),
+            },
+            writeback: {},
+          });
+
+          return; // 🚀 IMPORTANT: stop here
+        }
+
+        // =========================
+        //  WRITEBACK (CORE)
+        // =========================
+        if (state.type === "writeback") {
+          const subType = getSubType(field.wbtType);
+          const value = getValue(field.wbtType, state.value);
+          const writebackType = getWritebackType(field.wbtType);
+
+          documentsMap[docId].push({
+            type: "writeback",
+            subType,
+            style: {
+              link: "",
+              value:
+                field.wbtType === "ENCRYPTEDSTRING"
+                  ? maskValueFormatted(value, field)
+                  : value,
+              name: null,
+              font: field.fontFamily || "Times New Roman",
+              color: field.fontColor || "Black",
+              bold: field.bold || false,
+              italic: field.italic || false,
+              underline: field.underLine || false,
+              pageNumber: field.pageNumber ?? state.pageNumber ?? 0,
+              dimensions: {
+                left: Math.round(parsePx(field.left)),
+                top: Math.round(parsePx(field.top)),
+                width: Math.round(parsePx(field.width)),
+                height: Math.round(parsePx(field.height)),
+              },
+              textSize: parseFloat(field.fontSize || 13),
+            },
+            writeback: {
+              fieldName: field.value || "",
+              type: writebackType,
+              value,
+            },
+          });
+
+          return;
+        }
+
+        // =========================
+        // ATTACHMENT
+        // =========================
+        if (state.type === "attachment") {
+          const label = field.label || "";
+          const uploadedFileName = state?.value || "";
+
+          documentsMap[docId].push({
+            type: "attachment",
+            subType: "text",
+            style: {
+              link: state?.link || "",
+              value: uploadedFileName ? `${label}:::${uploadedFileName.length >= 18 ? uploadedFileName.slice(0, 18) + '...' : uploadedFileName}` : "",
+              name: null,
+              font: cleanFont(field.fontFamily || "Times New Roman"),
+              color: field.fontColor || "Black",
+              bold: field.bold || false,
+              italic: field.italic || false,
+              underline: field.underLine || false,
+              pageNumber: field.pageNumber ?? state?.pageNumber ?? 0,
+              dimensions: {
+                left: Math.round(parsePx(field.left)),
+                top: Math.round(parsePx(field.top)),
+                width: Math.round(parsePx(field.width)),
+                height: Math.round(parsePx(field.height)),
+              },
+              textSize: String(parseFloat(field.fontSize || 13)),
+            },
+            writeback: {},
+          });
+
+          return;
+        }
+
+
+        // =========================
+        // ✅ NORMAL FIELDS
+        // =========================
+        let subType = "text";
+
+        if (["signature", "initial"].includes(state.type)) {
+          subType =
+            typeof state.value === "string" ? "image" : "text";
+        }
+
+        let fullName = recipientInfo?.fullName;
+        let nameValue = null;
+
+        if (state.type === "signature") {
+          nameValue = fullName;
+        } else if (state.type === "initial") {
+          const names = fullName?.trim().split(" ") || [];
+          if (names.length >= 2) {
+            nameValue = `${names[0][0]} ${names[names.length - 1][0]}`;
+          }
+        }
+
+        documentsMap[docId].push({
+          type: state.type,
+          subType,
+          style: buildStyle(field, state, {
+            name: nameValue,
+            font:
+              ["signature", "initial"].includes(state.type)
+                ? state.value?.fontFamily
+                : field.fontFamily,
+            textSize:
+              ["signature", "initial"].includes(state.type)
+                ? 17.4
+                : parseFloat(field.fontSize || 13),
+          }),
+          writeback: {},
+        });
+      });
+
+      // 5. FINAL PAYLOAD (ORDER FIXED)
+      const payload = {
+        documents: allDocumentIds.map((docId) => ({
+          items: documentsMap[docId] || [],  // Will be empty array for docs with no fields
+        })),
+      };
+
+      console.log("payload", payload);
+
+      // return
+
+      //  6. API CALL
+      res = await api.post(`/sign`, payload, {
+        headers: {
+          "X-AUTH-TYPE": "TRANSACTIONAL",
+          "ngrok-skip-browser-warning": "69420",
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `${uuid}`,
+          "Content-Type": "application/json",
+        },
+      });
+
+      console.log("Document submitted successfully:", res.data);
+
+      let resData = res?.data
+      let redirectUrl;
+      // Determine which redirect URL to use
+      if (resData?.extra?.more) {
+        redirectUrl = `${formJson?.instance_url}/apex/hic_signeasy__SmeCompleteInSigning?parentId=${transaction?.parentId}&id=${transaction?.transactionId}&recipientMore=true`;
+      } else if (formJson?.role === 'InPersonSigner') {
+        redirectUrl = `${formJson?.instance_url}/apex/hic_signeasy__SmeSignInPersonComplete?uuid=${formJson?.uuid}&Id=${transaction?.parentId}`;
+        setIsLastInPersonSigner(true)
+      }
+
+      // clearSession()
+
+      if (redirectUrl) {
+        setRedirectUrl(redirectUrl);
+        setToast("Document submitted successfully!", "success");
+        setShowInPersonSignerModal(true);
+        setSubmitting(false);
+        return;
+      }
+
+      if (formJson?.redirect_url) {
+        window.location.replace(formJson?.redirect_url);
+        return;
+      }
+
+      if (resData?.success === true) {
+        updateFormJson({
+          status: "COMPLETE",
+        });
+        setToast("Document completed successfully!", "success");
+      } else {
+        setToast("Something went wrong. Please try again.", "error");
+      }
+
+
+    } catch (error) {
+      console.error("Submission failed:", error);
+      setToast(error.customMessage || "Submission failed", "error");
+    } finally {
+      // Only set submitting to false if we're not showing the modal
+      // The modal case already set it to false
+      if (!res?.data?.extra?.more) {
+        setSubmitting(false);
+      }
+    }
+  };
+
+
+  if (!formJson) {
+    return <DocFormOverlayShimmerUI />;
+  }
+
+  if (languageLoading) {
+    return <Loader transparentbg={false} />;
+  }
+
+  return (
+    <Suspense
+      fallback={
+        <>
+          <DocFormOverlayShimmerUI />
+        </>
+      }
+    >
+      {
+
+        documents.length > 0 ? (
+          <DocFormOverlay
+            inputFields={inputFields}
+            documents={documents}
+            uuid={uuid}
+            onSubmit={handleSubmit}
+            submitting={submitting}
+            transaction={transaction}
+            showInPersonSignerModal={showInPersonSignerModal}
+            setShowInPersonSignerModal={setShowInPersonSignerModal}
+          />
+        ) : ""
+      }
+    </Suspense>
+  );
+};
+
+export default Home;
+
diff --git a/src/pages/ReassignInfoPage.jsx b/src/pages/ReassignInfoPage.jsx
new file mode 100644
index 0000000..d1b15f5
--- /dev/null
+++ b/src/pages/ReassignInfoPage.jsx
@@ -0,0 +1,13 @@
+// pages/ReassignInfoPage.jsx
+
+import ReassignInfoMessgae from "../components/ReassignModules/ReassignInfoMessgae";
+
+const ReassignInfoPage = () => {
+  return (
+    <>
+    <ReassignInfoMessgae/>
+    </>
+  );
+};
+
+export default ReassignInfoPage;
\ No newline at end of file
diff --git a/src/pages/ReassignPage.jsx b/src/pages/ReassignPage.jsx
new file mode 100644
index 0000000..8b21789
--- /dev/null
+++ b/src/pages/ReassignPage.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ReassignForm from '../components/ReassignModules/ReassignForm'
+
+const ReassignPage = () => {
+  return (
+    <>
+    <ReassignForm/>
+    </>
+  )
+}
+
+export default ReassignPage
\ No newline at end of file
diff --git a/src/pages/SessionExpired.jsx b/src/pages/SessionExpired.jsx
new file mode 100644
index 0000000..a237cce
--- /dev/null
+++ b/src/pages/SessionExpired.jsx
@@ -0,0 +1,159 @@
+import { LockKeyhole, Loader2 } from "lucide-react";
+import { useLocation, useSearchParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import bgComplete from "../assets/bgComplete.png";
+import { clearSession } from "../services/sessionService";
+import AccessDeniedGif from "../assets/AccessDeniedGif.gif";
+import SMELogo from "../assets/SMELogoCompScreens.png";
+import { Trans, useTranslation } from "react-i18next";
+import FootertPrivacyPolicy from "../components/FootertPrivacyPolicy";
+
+export default function SessionExpired() {
+  const baseURL = import.meta.env.VITE_BASE_API_URL;
+  const { t } = useTranslation();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+
+  //  uuid from interceptor state, fallback to URL param
+  const uuid = location.state?.uuid || searchParams.get("uuid");
+
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    const head = document.head;
+    const preloadsToRemove = [];
+
+    const criticalAssets = [
+      { href: bgComplete, as: "image", priority: "high" },
+      { href: SMELogo, as: "image", priority: "high" },
+      { href: AccessDeniedGif, as: "image", priority: "high" },
+    ];
+
+    criticalAssets.forEach(({ href, as, priority }) => {
+      const link = document.createElement("link");
+
+      link.rel = "preload";
+      link.href = href;
+      link.as = as;
+
+      if (priority) {
+        link.setAttribute("fetchpriority", priority);
+      }
+
+      head.appendChild(link);
+      preloadsToRemove.push(link);
+    });
+
+    return () => {
+      preloadsToRemove.forEach((link) => {
+        if (head.contains(link)) {
+          head.removeChild(link);
+        }
+      });
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        className="relative min-h-[100dvh] flex flex-col bg-gradient-to-b from-white to-blue-50 overflow-hidden animate-fadeIn"
+        style={{
+          backgroundImage: `url(${bgComplete})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+        }}
+      >
+        <style>{`
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        .animate-fadeIn {
+          animation: fadeIn 0.3s ease-in;
+        }
+        .animate-slideUp {
+          animation: slideUp 0.4s ease-out;
+        }
+        .animate-float {
+          animation: float 3s ease-in-out infinite;
+        }
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes float {
+          0%, 100% {
+            transform: translateY(0px);
+          }
+          50% {
+            transform: translateY(-10px);
+          }
+        }
+        @keyframes pulse {
+          0%, 100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.5;
+          }
+        }
+      `}</style>
+
+
+
+        {/* Header with Logo */}
+        <header className="px-4 py-2 flex justify-center sm:justify-start items-center bg-white/80 backdrop-blur-sm shadow-md z-10 animate-slideUp">
+          <div className="flex items-center gap-2">
+            <img
+              src={SMELogo}
+              className="w-40 h-8"
+              loading="eager"
+            />
+          </div>
+        </header>
+
+        {/* Main Content */}
+        <main className="flex flex-col items-center text-center px-4 flex-grow justify-center animate-slideUp">
+          {/* Glassmorphic Card */}
+
+
+          {/* Title */}
+          <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-800 mb-4 flex flex-col sm:flex-row gap-3 items-center justify-center">
+            <span className="bg-gradient-to-r bg-red-400  bg-clip-text text-transparent">
+              {t("session-expired.title")}
+            </span>
+          </h1>
+
+
+          {/* Animated GIF */}
+          <div className="my-1 transform transition-transform hover:scale-105 duration-300">
+            <img
+              src={AccessDeniedGif}
+              alt="Session Expired"
+              className="w-48 md:w-56 lg:w-62 mx-auto"
+              loading="eager"
+            />
+          </div>
+
+          <p className="md:max-w-[45vw] mx-auto text-sm sm:text-base text-gray-700 leading-relaxed text-center" dir="ltr">
+            {t("session-expired.description")}
+          </p>
+
+
+        </main>
+
+        {/* Footer */}
+        <FootertPrivacyPolicy />
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/services/FontService.js b/src/services/FontService.js
new file mode 100644
index 0000000..5443909
--- /dev/null
+++ b/src/services/FontService.js
@@ -0,0 +1,124 @@
+// src/services/FontService.js
+import { FONT_CATALOG, NATIVE_FONTS } from "./fontCatalog";
+
+class FontService {
+  #loaded  = new Set(); // "FamilyName:variantKey"
+  #pending = new Map();
+
+  isNative(fontFamily) {
+    return NATIVE_FONTS.has(fontFamily);
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Resolve which catalog variant key matches this weight + style combo.
+  // Falls back gracefully: boldItalic → bold → italic → normal
+  // ─────────────────────────────────────────────────────────────────────────
+  #variantKey(fontFamily, weight, style) {
+    const variants = FONT_CATALOG[fontFamily];
+    if (!variants) return null;
+
+    const isBold   = parseInt(weight) >= 600;
+    const isItalic = style === "italic";
+
+    if (isBold && isItalic && variants.boldItalic) return "boldItalic";
+    if (isBold             && variants.bold)       return "bold";
+    if (isItalic           && variants.italic)     return "italic";
+    return "normal";
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // isReady — checks only the specific variant needed, not all variants.
+  // This is what useFontLoader calls synchronously to avoid flash.
+  // ─────────────────────────────────────────────────────────────────────────
+  isReady(fontFamily, weight = "400", style = "normal") {
+    if (!fontFamily)               return true;
+    if (this.isNative(fontFamily)) return true;
+    if (!FONT_CATALOG[fontFamily]) return true; // unknown → CSS fallback handles it
+
+    const key = this.#variantKey(fontFamily, weight, style);
+    return this.#loaded.has(`${fontFamily}:${key}`);
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Internal: load one specific variant file via FontFace API
+  // ─────────────────────────────────────────────────────────────────────────
+  async #loadVariant(fontFamily, variantKey, config) {
+    const cacheKey = `${fontFamily}:${variantKey}`;
+    if (this.#loaded.has(cacheKey))  return;
+    if (this.#pending.has(cacheKey)) return this.#pending.get(cacheKey);
+
+    const promise = new FontFace(fontFamily, `url(${config.url})`, {
+      weight:  config.weight ?? "400",
+      style:   config.style  ?? "normal",
+      display: "swap",
+    })
+      .load()
+      .then((face) => {
+        document.fonts.add(face);
+        this.#loaded.add(cacheKey);
+      })
+      .catch(() => {
+        this.#loaded.add(cacheKey); // mark attempted — never retry
+        console.warn(`[FontService] Failed: ${fontFamily} (${variantKey})`);
+      })
+      .finally(() => {
+        this.#pending.delete(cacheKey);
+      });
+
+    this.#pending.set(cacheKey, promise);
+    return promise;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // load — fetches ONLY the one variant this field needs.
+  //
+  // field.bold=false, field.italic=false  → "normal"     → 1 file
+  // field.bold=true,  field.italic=false  → "bold"       → 1 file
+  // field.bold=false, field.italic=true   → "italic"     → 1 file
+  // field.bold=true,  field.italic=true   → "boldItalic" → 1 file
+  //
+  // This is exactly what was wrong in your screenshot: all 4 variants loaded
+  // every time because the old code used Promise.all over all catalog keys.
+  // ─────────────────────────────────────────────────────────────────────────
+  async load(fontFamily, weight = "400", style = "normal") {
+    if (!fontFamily)               return;
+    if (this.isNative(fontFamily)) return;
+
+    const variants = FONT_CATALOG[fontFamily];
+    if (!variants) return;
+
+    const key    = this.#variantKey(fontFamily, weight, style);
+    const config = variants[key];
+    if (!config) return;
+
+    await this.#loadVariant(fontFamily, key, config);
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // preloadAll — Tier 4: called the moment API fields arrive.
+  // Accepts the full normalized field array so it knows each field's actual
+  // bold/italic — no redundant variant loads.
+  // ─────────────────────────────────────────────────────────────────────────
+  preloadAll(fields = []) {
+    // Deduplicate by exact variant — "Albert Sans:bold:normal" loaded once
+    const seen   = new Set();
+    const unique = [];
+
+    for (const { fontFamily, weight, style } of fields) {
+      if (!fontFamily) continue;
+      const dedupeKey = `${fontFamily}:${weight}:${style}`;
+      if (seen.has(dedupeKey)) continue;
+      seen.add(dedupeKey);
+      unique.push({ fontFamily, weight, style });
+    }
+
+    // Non-blocking parallel fetch — only the variants actually used
+    return Promise.all(
+      unique.map(({ fontFamily, weight, style }) =>
+        this.load(fontFamily, weight, style)
+      )
+    );
+  }
+}
+
+export const fontService = new FontService();
\ No newline at end of file
diff --git a/src/services/auditTranslationCache.js b/src/services/auditTranslationCache.js
new file mode 100644
index 0000000..45b07ed
--- /dev/null
+++ b/src/services/auditTranslationCache.js
@@ -0,0 +1,51 @@
+// translationCache.js
+
+const cache = new Map();
+const CACHE_DURATION = 1000 * 60 * 30; // 30 minutes
+
+export function getCachedTranslation(key) {
+  const entry = cache.get(key);
+  
+  if (entry && (Date.now() - entry.timestamp) < CACHE_DURATION) {
+    return entry.translation;
+  }
+  
+  if (entry) {
+    cache.delete(key); // Remove expired entry
+  }
+  
+  return null;
+}
+
+export function setCachedTranslation(key, translation) {
+  cache.set(key, {
+    translation: translation,
+    timestamp: Date.now()
+  });
+}
+
+export function clearTranslationCache() {
+  cache.clear();
+}
+
+// Optional: Clear cache when language changes
+export function setupCacheCleanup(i18n) {
+  i18n.on('languageChanged', () => {
+    clearTranslationCache();
+  });
+}
+
+// Export cache stats for debugging
+export function getCacheStats() {
+  const languages = new Set();
+  for (const value of cache.values()) {
+    if (value.language) {
+      languages.add(value.language);
+    }
+  }
+  
+  return {
+    size: cache.size,
+    languages: Array.from(languages)
+  };
+}
\ No newline at end of file
diff --git a/src/services/auditTranslator.js b/src/services/auditTranslator.js
new file mode 100644
index 0000000..06f347d
--- /dev/null
+++ b/src/services/auditTranslator.js
@@ -0,0 +1,177 @@
+// auditTranslator.js
+// import { TFunction } from "react-i18next";
+
+import { languageSupport } from "../constant/language";
+
+// Language name mapping for display
+export const LANGUAGE_NAME_MAP = {
+  zh_CN: "Chinese (Simplified)",
+  zh_TW: "Chinese (Traditional)",
+  da: "Danish",
+  nl_NL: "Dutch",
+  en: "English",
+  fi: "Finnish",
+  fr: "French",
+  de: "German",
+  it: "Italian",
+  ja: "Japanese",
+  ko: "Korean",
+  no: "Norwegian",
+  pt_BR: "Portuguese (Brazil)",
+  ru: "Russian",
+  es: "Spanish",
+  es_MX: "Spanish (Mexico)",
+  sv: "Swedish",
+  th: "Thai",
+};
+
+// Audit action patterns
+const AUDIT_PATTERNS = [
+  {
+    regex: /^Transaction was created by (.*?) <(.*?)>$/,
+    templateKey: "audit.transaction.created",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Transaction was sent by (.*?) <(.*?)>$/,
+    templateKey: "audit.transaction.sent",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Transaction was cancelled by (.*?) <(.*?)>\.$/,
+    templateKey: "audit.transaction.cancelled",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Transaction was edited by (.*?) <(.*?)>\.?$/,
+    templateKey: "audit.transaction.edited",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^In Person transaction was started by (.*?) <(.*?)>\.$/,
+    templateKey: "audit.inperson.started",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Facilitator Process was accepted by (.*?) <(.*?)>\.$/,
+    templateKey: "audit.facilitator.accepted",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Transaction was viewed by (.*?) <(.*?)>\.?$/,
+    templateKey: "audit.transaction.viewed",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Transaction signature was declined by (.*?) <(.*?)>$/,
+    templateKey: "audit.signature.declined",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^In Person Signing Verification was accepted by (.*?) <(.*?)>\.$/,
+    templateKey: "audit.inperson.verification",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex:
+      /^Electronic Record and Signature Disclosure was accepted by (.*?) <(.*?)>$/,
+    templateKey: "audit.ers.accepted",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^(.*?) <(.*?)> updated their language to (.*?)$/,
+    templateKey: "audit.language.updated",
+    params: ["userName", "userEmail", "language"],
+  },
+  {
+    regex: /^Transaction was Signed by (.*?) <(.*?)>$/,
+    templateKey: "audit.transaction.signed",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Invitation email sent to (.*?) <(.*?)>$/,
+    templateKey: "audit.invitation.sent",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Invitation to view document is sent to (.*?) <(.*?)>$/,
+    templateKey: "audit.invitation.view",
+    params: ["userName", "userEmail"],
+  },
+  {
+    regex: /^Signer was reassigned by (.*?) <(.*?)> to (.*?) <(.*?)>$/,
+    templateKey: "audit.reassigned.to",
+    params: ["fromName", "fromEmail", "toName", "toEmail"],
+  },
+  {
+    regex: /^(.*?) <(.*?)> was reassigned by (.*?) <(.*?)> to (.*?) <(.*?)>$/,
+    templateKey: "audit.reassigned.complex",
+    params: [
+      "personName",
+      "personEmail",
+      "fromName",
+      "fromEmail",
+      "toName",
+      "toEmail",
+    ],
+  },
+  {
+    regex: /^Invitation email re-sent to (.*?) <(.*?)> by (.*?) <(.*?)>\.$/,
+    templateKey: "audit.invitation.resent",
+    params: ["recipientName", "recipientEmail", "senderName", "senderEmail"],
+  },
+];
+
+/**
+ * Parse audit action and extract parameters
+ */
+function parseAuditAction(action) {
+  // console.log("RAW ACTION:", JSON.stringify(action));
+  for (const pattern of AUDIT_PATTERNS) {
+    const match = action.match(pattern.regex);
+    if (match) {
+      const params = {};
+      pattern.params.forEach((param, index) => {
+        let value = match[index + 1];
+
+        // Special handling for language names
+        if (param === "language") {
+          const found = languageSupport.find((l) => l.value === value);
+          value = found ? found.label : LANGUAGE_NAME_MAP[value] || value;
+        }
+
+        params[param] = value;
+      });
+
+      return {
+        templateKey: pattern.templateKey,
+        params,
+      };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Translate audit action based on current language
+ */
+export function translateAuditAction(action, t) {
+  const parsed = parseAuditAction(action);
+
+  // console.log("PARSED:", JSON.stringify(parsed));
+
+  if (parsed) {
+    try {
+      const result = t(parsed.templateKey, parsed.params);
+      // console.log("TRANSLATED:", result);
+      return t(parsed.templateKey, parsed.params);
+    } catch (error) {
+      console.warn(`Translation failed for key: ${parsed.templateKey}`, error);
+      return action; // Fallback to original
+    }
+  }
+
+  // Return original action if no pattern matches
+  return action;
+}
diff --git a/src/services/changeLanguage.js b/src/services/changeLanguage.js
new file mode 100644
index 0000000..c04d411
--- /dev/null
+++ b/src/services/changeLanguage.js
@@ -0,0 +1,11 @@
+import api from "../api/Axios";
+
+export const changeLanguage = async (lang) => {
+  try {
+    const res = await api.put(`/sign?lang=${lang}`);
+    return res;
+  } catch (error) {
+    console.error("Language API error:", error);
+    throw error;
+  }
+};
\ No newline at end of file
diff --git a/src/services/downloadDocument.js b/src/services/downloadDocument.js
new file mode 100644
index 0000000..5336b1a
--- /dev/null
+++ b/src/services/downloadDocument.js
@@ -0,0 +1,41 @@
+import api from "../api/Axios";
+
+export const downloadPdfApi = async (type = "audit") => {
+  const newURL =
+    type === "audit" ? "download/audit" : "/download/document";
+  try {
+    const response = await api.get(newURL, {
+      responseType: "blob", // REQUIRED
+    });
+
+    const blob = response.data;
+
+    const url = window.URL.createObjectURL(blob);
+
+    const contentDisposition = response.headers["content-disposition"];
+    let filename = "download";
+    if (contentDisposition) {
+      // Handle UTF-8 format first (more reliable)
+      const utf8Match = contentDisposition.match(/filename\*=UTF-8''(.+)/);
+      const normalMatch = contentDisposition.match(/filename="(.+)"/);
+
+      if (utf8Match && utf8Match[1]) {
+        filename = decodeURIComponent(utf8Match[1]);
+      } else if (normalMatch && normalMatch[1]) {
+        filename = decodeURIComponent(normalMatch[1]);
+      }
+    }
+
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error("Download failed:", error);
+    throw error;
+  }
+};
diff --git a/src/services/fetchAuditTrailsData.js b/src/services/fetchAuditTrailsData.js
new file mode 100644
index 0000000..7646224
--- /dev/null
+++ b/src/services/fetchAuditTrailsData.js
@@ -0,0 +1,19 @@
+import api from "../api/Axios";
+import { languageSupport } from "../constant/language";
+import { useDocStore } from "../store";
+
+export const fetchAuditTrailsData = async () => {
+  const { setAuditData } = useDocStore.getState();
+  const { setLanguage } = useDocStore.getState();
+  const res = await api.get("/audit");
+  const data = res?.data;
+  console.log(data);
+  const currentLanguage = res?.data?.language;
+  setAuditData(data);
+  const matchedLang =
+    languageSupport.find((lang) => lang.value === currentLanguage) ||
+    languageSupport[4]; // fallback (English)
+  setLanguage(matchedLang);
+
+  return res.data;
+};
diff --git a/src/services/fetchDocData.js b/src/services/fetchDocData.js
new file mode 100644
index 0000000..219a0a1
--- /dev/null
+++ b/src/services/fetchDocData.js
@@ -0,0 +1,97 @@
+// src/services/docService.js
+import api from "../api/Axios";
+import { languageSupport } from "../constant/language";
+import { useDocStore } from "../store";
+import { fontService } from "./FontService";
+import { normalizeFontFamily } from "./fontNormalizer";
+
+const getEndPointUrl = (path) => {
+  if (path?.toLowerCase() === "/preview") return "preview";
+  return "sign/fetch";
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// normalizeField — clean server data at the edge, one place
+// ─────────────────────────────────────────────────────────────────────────────
+const normalizeField = (tag, recipient) => {
+  const base = {
+    ...tag,
+    fontFamily: normalizeFontFamily(tag.fontFamily), // "AlbertSans" → "Albert Sans"
+  };
+
+  switch (tag.type) {
+    case "names":
+      return { ...base, defaultValue: recipient?.fullName || tag.defaultValue };
+    case "email":
+      return { ...base, defaultValue: recipient?.email || tag.defaultValue };
+    default:
+      return base;
+  }
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// fetchDocData
+//
+// TIER 4 — preloadAll now passes objects with fontFamily + weight + style
+// so FontService loads ONLY the exact variants used in this document.
+//
+// If the doc has 10 "Albert Sans" fields all with bold:false, italic:false
+// → exactly 1 network request for albert-sans-regular.woff2
+// ─────────────────────────────────────────────────────────────────────────────
+export const fetchDocData = async (path) => {
+  const { setDocData } = useDocStore.getState();
+  const { setLanguage } = useDocStore.getState();
+
+  console.log(getEndPointUrl(path) , "Line 45")
+
+  const res = await api.get(`/${getEndPointUrl(path)}`);
+  const data = res?.data;
+  const currentLanguage = res?.data?.language;
+
+  const parsedTags = JSON.parse(data?.docTag || "[]");
+  const recipient = JSON.parse(data?.recipientDetails || "{}");
+
+  const generateInitials = (name = "") =>
+    name
+      .trim()
+      .split(" ")
+      .filter(Boolean)
+      .map((w) => w[0].toUpperCase())
+      .join("");
+
+  const normalizedFields =
+    data?.status !== "COMPLETE"
+      ? parsedTags.map((tag) => normalizeField(tag, recipient))
+      : [];
+
+  // ── TIER 4: preload only the variants actually used ────────────────────────
+  // Build font descriptors from real field data — bold/italic per field
+  const fontDescriptors = normalizedFields.map((f) => ({
+    fontFamily: f.fontFamily,
+    weight: f.bold ? "700" : "400",
+    style: f.italic ? "italic" : "normal",
+  }));
+
+  fontService.preloadAll(fontDescriptors); // non-blocking, races with PDF image load
+
+  setDocData({
+    formJson: data,
+    inputFields: normalizedFields,
+    recipientInfo: {
+      fullName: recipient?.fullName || "",
+      initials: generateInitials(recipient?.fullName || ""),
+      email: recipient?.email || "",
+    },
+    documents: data?.images || [],
+    transaction: data?.transaction || {},
+    status: data?.status,
+    termAndConditionAccepted: data?.term_and_condition_accepted,
+  });
+  const matchedLang =
+    languageSupport.find((lang) => lang.value === currentLanguage) ||
+    languageSupport[4]; // fallback (English)
+
+  setLanguage(matchedLang);
+
+  return data;
+};
diff --git a/src/services/fontCatalog.js b/src/services/fontCatalog.js
new file mode 100644
index 0000000..7862856
--- /dev/null
+++ b/src/services/fontCatalog.js
@@ -0,0 +1,145 @@
+export const FONT_CATALOG = {
+  //  Key = normalized name (what FontFace registers + what CSS looks up)
+  "Albert Sans": {
+    normal: {
+      url: "/fonts/albert-sans/albert-sans-regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    italic: {
+      url: "/fonts/albert-sans/albert-sans-italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    bold: {
+      url: "/fonts/albert-sans/albert-sans-700.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    boldItalic: {
+      url: "/fonts/albert-sans/albert-sans-700italic.woff2",
+      weight: "700",
+      style: "italic",
+    },
+  },
+  "Comic Neue": {
+    normal: {
+      url: "/fonts/comic-neue/comic-neue-regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    bold: {
+      url: "/fonts/comic-neue/comic-neue-bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    italic: {
+      url: "/fonts/comic-neue/comic-neue-italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    boldItalic: {
+      url: "/fonts/comic-neue/comic-neue-700italic.woff2",
+      weight: "700",
+      style: "italic",
+    },
+  },
+  "Noto Serif": {
+    normal: {
+      url: "/fonts/noto-serif/noto-serif-regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    bold: {
+      url: "/fonts/noto-serif/noto-serif-bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    italic: {
+      url: "/fonts/noto-serif/noto-serif-italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    boldItalic: {
+      url: "/fonts/noto-serif/noto-serif-700italic.woff2",
+      weight: "700",
+      style: "italic",
+    },
+  },
+  "Open Sans": {
+    normal: {
+      url: "/fonts/open-sans/open-sans-regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    bold: {
+      url: "/fonts/open-sans/open-sans-bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    italic: {
+      url: "/fonts/open-sans/open-sans-italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    boldItalic: {
+      url: "/fonts/open-sans/open-sans-700italic.woff2",
+      weight: "700",
+      style: "italic",
+    },
+  },
+  "Space Mono": {
+    normal: {
+      url: "/fonts/space-mono/space-mono-regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    bold: {
+      url: "/fonts/space-mono/space-mono-bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    italic: {
+      url: "/fonts/space-mono/space-mono-italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    boldItalic: {
+      url: "/fonts/space-mono/space-mono-700italic.woff2",
+      weight: "700",
+      style: "italic",
+    },
+  },
+  "Roboto": {
+    normal: {
+      url: "/fonts/roboto/roboto-regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    italic: {
+      url: "/fonts/roboto/roboto-italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    bold: {
+      url: "/fonts/roboto/roboto-700.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    boldItalic: {
+      url: "/fonts/roboto/roboto-700italic.woff2",
+      weight: "700",
+      style: "italic",
+    },
+  },
+};
+
+export const NATIVE_FONTS = new Set([
+  "Arial",
+  "Times New Roman",
+  "Calibri",
+  "Georgia",
+  "Verdana",
+  "Courier New",
+  "Tahoma",
+]);
diff --git a/src/services/fontNormalizer.js b/src/services/fontNormalizer.js
new file mode 100644
index 0000000..7809e8c
--- /dev/null
+++ b/src/services/fontNormalizer.js
@@ -0,0 +1,63 @@
+
+const SERVER_TO_FONT_NAME = {
+  // AlbertSans variants the server might send
+  'AlbertSans':    'Albert Sans',
+  'albertsans':    'Albert Sans',
+  'albert-sans':   'Albert Sans',
+  'Albert Sans':   'Albert Sans',  // already correct
+
+  // ComicNeue variants
+  'ComicNeue':     'Comic Neue',
+  'comicneue':     'Comic Neue',
+  'comic-neue':    'Comic Neue',
+  'Comic Neue':    'Comic Neue',
+
+  // NotoSerif variants
+  'NotoSerif':     'Noto Serif',
+  'notoserif':     'Noto Serif',
+  'noto-serif':    'Noto Serif',
+  'Noto Serif':    'Noto Serif',
+
+  // OpenSans variants
+  'OpenSans':      'Open Sans',
+  'opensans':      'Open Sans',
+  'open-sans':     'Open Sans',
+  'Open Sans':     'Open Sans',
+
+  // SpaceMono variants
+  'SpaceMono':     'Space Mono',
+  'spacemono':     'Space Mono',
+  'space-mono':    'Space Mono',
+  'Space Mono':    'Space Mono',
+
+  // These are already correct — native browser fonts
+  'Arial':         'Arial',
+  'Times New Roman': 'Times New Roman',
+  'Calibri':       'Calibri',
+  'Roboto':        'Roboto',
+  'Georgia':       'Georgia',
+};
+
+/**
+ * Normalize server font name → correct CSS font-family name
+ * Falls back to the raw value if unknown (CSS will use fallback stack)
+ */
+export function normalizeFontFamily(serverValue) {
+  if (!serverValue) return 'Arial';
+  return SERVER_TO_FONT_NAME[serverValue] ?? serverValue;
+}
+
+/**
+ * Derive all CSS font properties from a field JSON object
+ * Single source of truth — call this once per field, use the result everywhere
+ */
+export function getFontProps(field) {
+  return {
+    fontFamily:     normalizeFontFamily(field.fontFamily),
+    fontWeight:     field.bold      ? '700'       : '400',
+    fontStyle:      field.italic    ? 'italic'    : 'normal',
+    textDecoration: field.underLine ? 'underline' : 'none',
+    color:          field.fontColor || '#000000',
+    fontSize:       field.fontSize  || '13px',
+  };
+}
\ No newline at end of file
diff --git a/src/services/languageUtils.js b/src/services/languageUtils.js
new file mode 100644
index 0000000..d33127b
--- /dev/null
+++ b/src/services/languageUtils.js
@@ -0,0 +1,68 @@
+// src/utils/languageUtils.js
+import { isRtlLanguage } from '../i18n';
+
+/**
+ * Updates HTML document attributes based on the current language
+ * @param {string} lang - The language code (e.g., 'en', 'he')
+ */
+export const updateHtmlLanguageAttributes = (lang) => {
+  const html = document.documentElement;
+  const dir = isRtlLanguage(lang) ? "rtl" : "ltr";
+
+  if (html.lang === lang && html.dir === dir) {
+    return;
+  }
+
+  html.lang = lang;
+  html.dir = dir;
+
+  html.classList.toggle("rtl", dir === "rtl");
+  html.classList.toggle("ltr", dir === "ltr");
+};
+
+/**
+ * Gets the current language direction
+ * @param {string} lang - The language code
+ * @returns {string} 'rtl' or 'ltr'
+ */
+export const getLanguageDirection = (lang) => {
+  return isRtlLanguage(lang) ? 'rtl' : 'ltr';
+};
+
+/**
+ * Checks if a language is RTL
+ * @param {string} lang - The language code
+ * @returns {boolean} true if RTL, false otherwise
+ */
+export const isRTL = (lang) => {
+  return isRtlLanguage(lang);
+};
+
+/**
+ * Gets the current HTML language and direction
+ * @returns {Object} { lang, dir, isRtl }
+ */
+export const getCurrentHtmlAttributes = () => {
+  const lang = document.documentElement.lang || 'en';
+  const dir = document.documentElement.dir || 'ltr';
+  const isRtl = dir === 'rtl';
+  
+  return { lang, dir, isRtl };
+};
+
+/**
+ * Sets up language change listener
+ * @param {Function} callback - Optional callback function to run after language change
+ * @returns {Function} Cleanup function
+ */
+export const setupLanguageListener = (callback) => {
+  const handleLanguageChange = (lng) => {
+    const result = updateHtmlLanguageAttributes(lng);
+    if (callback) {
+      callback(result);
+    }
+  };
+  
+  // Return cleanup function
+  return handleLanguageChange;
+};
\ No newline at end of file
diff --git a/src/services/reassignService.js b/src/services/reassignService.js
new file mode 100644
index 0000000..92466bf
--- /dev/null
+++ b/src/services/reassignService.js
@@ -0,0 +1,18 @@
+import api from "../api/Axios";
+import { languageSupport } from "../constant/language";
+import { useDocStore } from "../store";
+
+export const fetchReassignData = async () => {
+  const { setReassignData } = useDocStore.getState();
+   const { setLanguage } = useDocStore.getState();
+  const res = await api.get("/sign/reassign");
+  const data = res?.data;
+  const currentLanguage = data?.recipient?.language;
+  setReassignData(data);
+  const matchedLang =
+    languageSupport.find((lang) => lang.value === currentLanguage) ||
+    languageSupport[4]; // fallback (English)
+
+  setLanguage(matchedLang);
+  return res.data;
+};
diff --git a/src/services/sessionService.js b/src/services/sessionService.js
new file mode 100644
index 0000000..f333fa1
--- /dev/null
+++ b/src/services/sessionService.js
@@ -0,0 +1,47 @@
+import api from "../api/Axios";
+
+const SESSION_KEY = "app_session_id";
+
+/**
+ * Returns existing sessionId from sessionStorage if present (e.g. on refresh),
+ * otherwise calls GET /sign/session to create a new one and stores it.
+ */
+export const initSession = async () => {
+  // ✅ Refresh case — session already exists, skip API call
+  // const existing = sessionStorage.getItem(SESSION_KEY);
+  // if (existing) {
+  //   console.log("Session restored from storage:", existing);
+  //   return existing;
+  // }
+
+  // ✅ First load — create a new session
+  const response = await api.get("/sign/session");
+  const sessionId = response?.data;
+
+  if (!sessionId) {
+    throw new Error("Session init failed: no sessionId returned.");
+  }
+
+  // sessionStorage.setItem(SESSION_KEY, sessionId);
+  return sessionId;
+};
+
+export const startSessionPing = (sessionId) => {
+  const PING_INTERVAL_MS = 2 * 60 * 1000; // 2 min
+//   const PING_INTERVAL_MS =  10 * 1000;
+
+  const ping = () => {
+    api
+      .get(`/sign/session/ping`, { params: { sessionId } })
+      .catch((err) => {
+        console.warn("Session ping failed:", err?.response?.status);
+      });
+  };
+
+  ping();
+  const intervalId = setInterval(ping, PING_INTERVAL_MS);
+  return () => clearInterval(intervalId);
+};
+
+// Call this on logout or session expiry to force a fresh session next visit
+export const clearSession = () => sessionStorage.removeItem(SESSION_KEY);
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..59d8938
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+import createDocFormDataSlice from "./slices/DocFormData";
+import createToastSlice from "./slices/createToastSlice";
+import createReassignSlice from "./slices/reassignSlice";
+import createAuditSlice from "./slices/auditSlice";
+import createAiSummarySlice from "./slices/aiDocumentSummarySlice";
+import createMultiLanguageSlice from "./slices/multiLanguageSlice";
+
+export const useDocStore = create(
+  devtools(
+    (...a) => ({
+      ...createDocFormDataSlice(...a),
+      ...createToastSlice(...a),
+      ...createReassignSlice(...a),
+      ...createAuditSlice(...a),
+      ...createAiSummarySlice(...a),
+      ...createMultiLanguageSlice(...a),
+    }),
+    {
+      name: "Doc Store", // Show in devtools
+    },
+  ),
+);
diff --git a/src/store/slices/DocFormData.js b/src/store/slices/DocFormData.js
new file mode 100644
index 0000000..5cb36dd
--- /dev/null
+++ b/src/store/slices/DocFormData.js
@@ -0,0 +1,105 @@
+// store/slices/DocFormData.js
+
+const createDocFormDataSlice = (set) => ({
+  formJson: null,
+  inputFields: [],
+  recipientInfo: {
+    fullName: "",
+    initials: "",
+    email: "",
+  },
+  documents: [],
+  transaction: {},
+  status: "",
+  isLoaded: false,
+  redirectUrl: "",
+  isLastInPersonSigner: false, //  NEW: Flag for last in-person signer
+
+  // ✅ BULK SET (API)
+  setDocData: (data) =>
+    set(
+      {
+        formJson: data.formJson,
+        inputFields: data.inputFields,
+        recipientInfo: data.recipientInfo,
+        documents: data.documents,
+        transaction: data.transaction,
+        status: data.status,
+        isLoaded: true,
+      },
+      false,
+      "doc/setDocData",
+    ),
+
+  updateFormJson: (partialData) =>
+    set(
+      (state) => ({
+        formJson: {
+          ...(state.formJson || {}),
+          ...partialData,
+        },
+      }),
+      false,
+      "doc/updateFormJson",
+    ),
+
+  // ✅ SIMPLE: Set redirect URL
+  setRedirectUrl: (url) =>
+    set({ redirectUrl: url }, false, "doc/setRedirectUrl"),
+
+  // ✅ SIMPLE: Clear redirect URL
+  clearRedirectUrl: () =>
+    set({ redirectUrl: "" }, false, "doc/clearRedirectUrl"),
+
+  // ✅ NEW: Set last in-person signer flag
+  setIsLastInPersonSigner: (value) =>
+    set({ isLastInPersonSigner: value }, false, "doc/setIsLastInPersonSigner"),
+
+  setRecipientInfo: (data) =>
+    set(
+      (state) => ({
+        recipientInfo: {
+          ...state.recipientInfo,
+          ...data,
+        },
+      }),
+      false,
+      "doc/setRecipientInfo",
+    ),
+
+  updateRecipientField: (key, value) =>
+    set(
+      (state) => ({
+        recipientInfo: {
+          ...state.recipientInfo,
+          [key]: value,
+        },
+      }),
+      false,
+      "doc/updateRecipientField",
+    ),
+
+  setInputFields: (fields) =>
+    set({ inputFields: fields }, false, "doc/setInputFields"),
+
+  reset: () =>
+    set(
+      {
+        formJson: null,
+        inputFields: [],
+        recipientInfo: {
+          fullName: "",
+          initials: "",
+          email: "",
+        },
+        documents: [],
+        transaction: {},
+        status: "",
+        isLoaded: false,
+      },
+      false,
+      "doc/reset",
+    ),
+});
+
+export default createDocFormDataSlice;
diff --git a/src/store/slices/aiDocumentSummarySlice.js b/src/store/slices/aiDocumentSummarySlice.js
new file mode 100644
index 0000000..dc03d48
--- /dev/null
+++ b/src/store/slices/aiDocumentSummarySlice.js
@@ -0,0 +1,18 @@
+const createAiSummarySlice = (set) => ({
+  aiSummaryList: [],   // ✅ store full array
+  aiLoading: false,
+
+  setAiSummaryList: (data) =>
+    set(
+      {
+        aiSummaryList: data,
+      },
+      false,
+      "aiSummary/setList"
+    ),
+
+  setAiLoading: (status) =>
+    set({ aiLoading: status }, false, "aiSummary/loading"),
+});
+
+export default createAiSummarySlice;
\ No newline at end of file
diff --git a/src/store/slices/auditSlice.js b/src/store/slices/auditSlice.js
new file mode 100644
index 0000000..fdf96b9
--- /dev/null
+++ b/src/store/slices/auditSlice.js
@@ -0,0 +1,29 @@
+const createAuditSlice = (set) => ({
+  uid: "",
+  status: "",
+  completedOn: "",
+  isProUser: true,
+  language: "en",
+  docs: null,
+  audit: null,
+  isLoaded: false,
+
+  setAuditData: (data) =>
+    set(
+      {
+        uid: data.uid || "",
+        status: data.status || null,
+        completedOn: data.completedOn || null,
+        isProUser: data.isProUser ?? true,
+        language: data.language || "en",
+        docs: data.docs || null,
+        audit: data.audit || null,
+        isLoaded: true,
+      },
+      false,
+      "doc/setAuditTrailsData",
+    ),
+  setAuditLoading: (loading) => set({ isLoaded: !loading }, false, "doc/setLoading"),
+});
+
+export default createAuditSlice;
diff --git a/src/store/slices/createToastSlice.js b/src/store/slices/createToastSlice.js
new file mode 100644
index 0000000..064e3ee
--- /dev/null
+++ b/src/store/slices/createToastSlice.js
@@ -0,0 +1,30 @@
+
+
+const createToastSlice = (set) => ({
+  toastMessage: "",
+  toastStatus: "",
+
+  //  SET TOAST
+  setToast: (message, status = "success") =>
+    set(
+      {
+        toastMessage: message,
+        toastStatus: status,
+      },
+      false,
+      "toast/setToast"
+    ),
+
+  //  CLEAR TOAST
+  clearToast: () =>
+    set(
+      {
+        toastMessage: "",
+        toastStatus: "",
+      },
+      false,
+      "toast/clearToast"
+    ),
+});
+
+export default createToastSlice
\ No newline at end of file
diff --git a/src/store/slices/multiLanguageSlice.js b/src/store/slices/multiLanguageSlice.js
new file mode 100644
index 0000000..38322b8
--- /dev/null
+++ b/src/store/slices/multiLanguageSlice.js
@@ -0,0 +1,48 @@
+import i18n from "../../i18n";
+import { languageSupport } from "../../constant/language";
+import { updateHtmlLanguageAttributes } from "../../services/languageUtils";
+
+const MIN_LOADER_TIME = 300;
+
+const nextPaint = () =>
+  new Promise((resolve) =>
+    requestAnimationFrame(() => requestAnimationFrame(resolve))
+  );
+
+const createMultiLanguageSlice = (set, get) => ({
+  currentLanguage: languageSupport[4],
+  languageLoading: false,
+
+  setLanguageLoading: (loading) => set({ languageLoading: loading }),
+
+  setLanguage: async (lang) => {
+    if (get().languageLoading) return;
+
+    // 1) Set loading true
+    set({ languageLoading: true });
+
+    // 2) Start the minimum timer in the SAME synchronous tick as the state update.
+    //    React cannot batch set(true) and set(false) together because set(false)
+    //    arrives minimum 300ms later — well outside any batching window.
+    const minDelay = new Promise((resolve) => setTimeout(resolve, MIN_LOADER_TIME));
+
+    // 3) parallel with the timer
+    const work = (async () => {
+      await nextPaint();                       // loader actually paint first
+      await i18n.changeLanguage(lang.value);   // fetch + activate (handles cache internally)
+      updateHtmlLanguageAttributes(lang.value); // RTL/LTR flip happens behind the loader
+      set({ currentLanguage: lang });
+      await nextPaint();                       // let the new layout settle before revealing
+    })();
+
+    try {
+      await Promise.all([work, minDelay]);     // wait for whichever is slower
+    } catch (err) {
+      console.error("Language switch failed:", err);
+    } finally {
+      set({ languageLoading: false });
+    }
+  },
+});
+
+export default createMultiLanguageSlice;
\ No newline at end of file
diff --git a/src/store/slices/reassignSlice.js b/src/store/slices/reassignSlice.js
new file mode 100644
index 0000000..b337e6d
--- /dev/null
+++ b/src/store/slices/reassignSlice.js
@@ -0,0 +1,131 @@
+
+
+const createReassignSlice = (set) => ({
+  // Initial state
+  instanceUrl: "",
+  logoUrl: null,
+  isProUser: null,
+  recipient: {
+    id: "",
+    name: "",
+    role: "Signer",
+    language: "en",
+    status: "VIEWED"
+  },
+  transaction: {
+    id: "",
+    status: "SENT"
+  },
+  status: "",
+  isLoaded: false,
+
+
+
+  //  SET REASSIGN DATA (from API)
+  setReassignData: (data) =>
+    set(
+      {
+        instanceUrl: data.instanceUrl || "",
+        logoUrl: data.logoUrl || null,
+        isProUser: data.isProUser ?? null,
+        recipient: {
+          id: data.recipient?.id || "",
+          name: data.recipient?.name || "",
+          role: data.recipient?.role || "Signer",
+          language: data.recipient?.language || "en",
+          status: data.recipient?.status || "VIEWED"
+        },
+        transaction: {
+          id: data.transaction?.id || "",
+          status: data.transaction?.status || "SENT"
+        },
+        status: data.status || "",
+        isLoaded: true,
+      },
+      false,
+      "doc/setReassignData",
+    ),
+
+  //  UPDATE SPECIFIC REASSIGN FIELDS
+  updateReassignField: (key, value) =>
+    set(
+      (state) => ({
+        [key]: value,
+      }),
+      false,
+      "doc/updateReassignField",
+    ),
+
+  //  UPDATE RECIPIENT INFO IN REASSIGN
+  updateReassignRecipient: (key, value) =>
+    set(
+      (state) => ({
+        recipient: {
+          ...state.recipient,
+          [key]: value,
+        },
+      }),
+      false,
+      "doc/updateReassignRecipient",
+    ),
+
+  //  UPDATE TRANSACTION INFO IN REASSIGN
+  updateReassignTransaction: (key, value) =>
+    set(
+      (state) => ({
+        transaction: {
+          ...state.transaction,
+          [key]: value,
+        },
+      }),
+      false,
+      "doc/updateReassignTransaction",
+    ),
+
+
+  //  RESET REASSIGN DATA
+  resetReassign: () =>
+    set(
+      {
+        instanceUrl: "",
+        logoUrl: null,
+        isProUser: true,
+        recipient: {
+          id: "",
+          name: "",
+          role: "Signer",
+          language: "en",
+          status: "VIEWED"
+        },
+        transaction: {
+          id: "",
+          status: "SENT"
+        },
+        status: "",
+        isLoaded: false,
+      },
+      false,
+      "doc/resetReassign",
+    ),
+
+  reset: () =>
+    set(
+      {
+        formJson: null,
+        inputFields: [],
+        recipientInfo: {
+          fullName: "",
+          initials: "",
+          email: "",
+        },
+        documents: [],
+        transaction: {},
+        status: "",
+        isLoaded: false,
+      },
+      false,
+      "doc/reset",
+    ),
+});
+
+export default createReassignSlice;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..cc9d714
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), svgr(), tailwindcss()],
+  server: {
+    port: 5174,
+    allowedHosts: [
+      "symphystic-zack-exsertile.ngrok-free.dev",
+      "brian-merest-unirritably.ngrok-free.dev",
+      "enabled-upright-boxer.ngrok-free.app"
+    ],
+  },
+  // esbuild: {
+  //   // This will remove all console.* calls and debugger statements
+  //   drop: ["console", "debugger"],
+  // },
+});