diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..84103b8
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,11 @@
+node_modules
+dist
+.git
+.gitignore
+*.log
+playwright-report
+test-results
+coverage
+e2e/.auth
+.moai
+.claude
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..2322540
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.env b/.env
index 731b3da..09e8294 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VITE_REACT_APP_API_URL=http://localhost
+VITE_REACT_APP_API_URL=https://localhost
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..6ed8a82
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+# URL of your Sylius API (no trailing slash)
+# Dev:  https://localhost
+# Prod: https://api.myshop.com
+VITE_REACT_APP_API_URL=https://localhost
diff --git a/.env.test.example b/.env.test.example
new file mode 100644
index 0000000..356ab2d
--- /dev/null
+++ b/.env.test.example
@@ -0,0 +1,17 @@
+# Test environment variables
+# Copy this file to .env.test.local and fill in the values
+# Used by: make docker-test-e2e (passed via --env-file .env.test.local)
+
+# Base URL for Playwright E2E tests
+# Local dev server (pnpm dev):      https://localhost:5173
+# Docker E2E (set automatically):   https://app:4174
+PLAYWRIGHT_BASE_URL=http://localhost:5173
+
+# Test user credentials for E2E authentication
+PLAYWRIGHT_TEST_EMAIL=test@example.com
+PLAYWRIGHT_TEST_PASSWORD=your-test-password
+
+# Sylius API base URL
+# Local (pointing to your Sylius instance): https://localhost
+# Docker E2E: overridden automatically by compose.test.yml to https://api-proxy
+VITE_REACT_APP_API_URL=https://localhost
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000..a8e5650
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,71 @@
+name: Tests
+
+on:
+  push:
+    branches: [main, dev, feat/**]
+  pull_request:
+    branches: [main, dev]
+
+jobs:
+  unit-tests:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run unit tests
+        run: pnpm test:unit --run
+
+  e2e-tests:
+    name: E2E Tests
+    needs: unit-tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Build app
+        run: pnpm build
+
+      - name: Run E2E tests
+        run: pnpm test:e2e
+        env:
+          PLAYWRIGHT_BASE_URL: ${{ env.PLAYWRIGHT_BASE_URL || 'http://localhost:5173' }}
+          PLAYWRIGHT_TEST_EMAIL: ${{ secrets.PLAYWRIGHT_TEST_EMAIL }}
+          PLAYWRIGHT_TEST_PASSWORD: ${{ secrets.PLAYWRIGHT_TEST_PASSWORD }}
+          VITE_REACT_APP_API_URL: ${{ secrets.VITE_REACT_APP_API_URL }}
+          CI: true
+
+      - name: Upload Playwright report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
diff --git a/.gitignore b/.gitignore
index a547bf3..88db6b0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.pnpm-store
 dist
 dist-ssr
 *.local
@@ -22,3 +23,15 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# AI directories and files
+.claude
+.moai
+
+# Test artifacts
+playwright-report/
+test-results/
+.auth/
+
+# Local TLS certificates (generated by mkcert, machine-specific)
+docker/app/certs/*.pem
\ No newline at end of file
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..cb2c84d
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+pnpm lint-staged
diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..8ae9a73
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://raw.githubusercontent.com/anthropics/claude-code/main/.mcp.schema.json",
+  "mcpServers": {
+    "context7": {
+      "$comment": "Up-to-date documentation and code examples via Context7",
+      "command": "/bin/bash",
+      "args": ["-l", "-c", "exec npx -y @upstash/context7-mcp@latest"]
+    },
+    "sequential-thinking": {
+      "$comment": "Step-by-step reasoning for complex problems",
+      "command": "/bin/bash",
+      "args": ["-l", "-c", "exec npx -y @modelcontextprotocol/server-sequential-thinking"]
+    },
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
+    }
+  },
+  "staggeredStartup": {
+    "enabled": true,
+    "delayMs": 500,
+    "connectionTimeout": 15000
+  }
+}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..2bd4ae0
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+dist/
+node_modules/
+pnpm-lock.yaml
+*.generated.*
+schema/
+public/
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..eeb4765
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..220e0f5
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,129 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+- Vitest v4 unit test suite — 48 tests across schemas, utilities, and UI components (SPEC-TEST-001)
+  - `src/schemas/__tests__/` — auth, account, review schema validation (28 tests)
+  - `src/lib/__tests__/` — `formError`, `applyServerErrors`, `clearServerErrors` utilities (6 tests)
+  - `src/components/ui/__tests__/` — `FieldError`, `PasswordStrength` components (14 tests)
+- Playwright v1.58 E2E test suite with Page Object Model pattern (SPEC-TEST-001)
+  - Auth flows: login, register, logout
+  - Form validation: inline errors, onBlur/onSubmit behaviour
+  - Account pages: profile update, change password
+  - Auth fixture with JWT seed via Sylius API (`e2e/fixtures/auth.ts`)
+- Docker multi-stage test infrastructure (`docker/Dockerfile.test`) with isolated stages per concern (SPEC-TEST-001)
+- `docker/compose.test.yml` — fully self-contained test environment (unit-tests, app-serve, e2e-tests services)
+- `docker/compose.yml` — React dev container with hot-reload (node:22-alpine)
+- `docker/Dockerfile` — multi-stage app image (dev, builder, production)
+- `Makefile` — unified command interface for development, Docker, and all test scenarios
+- GitHub Actions CI workflow (`.github/workflows/test.yml`) — unit job (blocking) then E2E job on `main`, `dev`, and `feat/**` branches
+- `FieldError` component (`src/components/ui/field-error.tsx`) — accessible inline field error with `id`, `aria-live` (SPEC-UPDATE-001)
+- `applyServerErrors` utility — maps Sylius API error payloads to TanStack Form server errors (SPEC-UPDATE-001)
+- `clearServerErrors` utility — clears `onServer` errors before re-submission to unblock `canSubmit` (SPEC-UPDATE-001)
+- `onBlur` validators on all form fields using the same Zod schemas as `onSubmit` (SPEC-UPDATE-001)
+- `aria-describedby` linking all inputs to their `FieldError` component (SPEC-UPDATE-001)
+
+### Changed
+
+- All form fields updated with `aria-invalid` driven by TanStack Form field state (SPEC-UPDATE-001)
+- `submitForm()` utility extended to call `clearServerErrors` before submission (SPEC-UPDATE-001)
+
+## [0.4.0] - 2026-03-09
+
+### Added
+
+- `@tanstack/react-form` v1.28.4 and `zod` v3.25.76 as production dependencies (SPEC-REFACTOR-001)
+- `src/schemas/` directory with centralized Zod schemas: `auth.ts`, `address.ts`, `account.ts`, `review.ts`, `index.ts`
+- `formError()` utility in `src/lib/utils.ts` — safely extracts error message from TanStack Form v1 error values (handles both Zod `ZodIssue` objects and plain strings)
+- `noValidate` attribute on all form elements — disables browser-native HTML5 validation in favour of TanStack Form inline errors
+- `aria-invalid` attribute on all validated inputs and `SelectTrigger` components across 10 form pages (accessibility improvement)
+- Form-level pre-fill timing guard (`canInitialize`) on `AddressPage` — waits for async customer/order data before populating form fields
+
+### Changed
+
+- All 10 form pages migrated from raw `useState` to TanStack Form `useForm` + `form.Field` render-prop pattern (SPEC-REFACTOR-001)
+  - Auth pages: `LoginPage`, `RegisterPage`, `ForgotPasswordPage`, `ResetPasswordPage`
+  - Account pages: `ProfilePage`, `ChangePasswordPage`, `AddAddressPage`, `EditAddressPage`
+  - Checkout: `AddressPage`
+  - Product: `AddReviewPage`
+- `AddressForm` refactored to receive TanStack Form field API via render-prop — parent `useForm` instance now controls validation and submission for account address pages
+- `AddressPage` nested address fields (`billingAddress.*`, `shippingAddress.*`) validated via form-level `validators.onSubmit` using `addressSchema.safeParse()` with `{ fields: {} }` error map format
+- `RegisterPage` password strength indicator and show/hide toggles preserved; strength score computed via `useMemo` from `useStore`-subscribed password value
+- Zod schemas replace all hand-written `if` checks, `validateAddress()` function, and `Record<string, string>` form data objects; TypeScript types derived via `z.infer<>` enforce type safety between form values and API payloads
+
+### Removed
+
+- `validateAddress()` ad-hoc validation function (replaced by `addressSchema`)
+- All `useState`-based manual field tracking and error state across migrated pages
+- `@tanstack/zod-form-adapter` runtime dependency (TanStack Form v1 uses native StandardSchema — adapter installed but not used)
+
+## [0.3.0] - 2026-03-01
+
+### Added
+
+- Prettier v3 with `prettier-plugin-tailwindcss` for automatic Tailwind class sorting
+- Husky v9 pre-commit git hook running lint-staged automatically
+- lint-staged: runs `eslint --fix` + `prettier --write` on staged `.ts/.tsx` files
+- `.editorconfig` for consistent editor settings (UTF-8, LF, 2-space indent)
+- `pnpm format` script for manual full-codebase formatting
+
+### Changed
+
+- ESLint config updated: added `eslint-config-prettier` (disables formatting rules conflicting with Prettier)
+- ESLint config: `react-refresh/only-export-components` disabled for `src/components/ui/` and `src/context/` (legitimate multi-export pattern)
+- `react-hooks/exhaustive-deps` warnings fixed in `ProductList.tsx` and `ProductPage.tsx` by moving fetch functions inside `useEffect`/`useCallback`
+- Entire codebase reformatted with Prettier baseline (formatting-only, no logic changes)
+
+## [0.2.0] - 2026-03-01
+
+### Added
+
+- TailwindCSS v4 via `@tailwindcss/vite` Vite plugin
+- shadcn/ui component library with Base UI (`base-vega` style)
+- New UI components: `Button`, `Input`, `Textarea`, `Select`, `Table`, `Badge`, `Alert`, `Checkbox`, `Accordion`, `Breadcrumb`, `Card`, `Sheet`, `NavigationMenu`, `DropdownMenu`, `Separator`, `Label`, `Sonner` toasts
+- `@base-ui/react` as the primitives layer (replaces Radix UI)
+- Mobile navigation via shadcn/ui `Sheet` component (React-controlled, replaces Bootstrap offcanvas)
+- Desktop navigation via shadcn/ui `NavigationMenu` with hover dropdowns
+- Flash messages replaced by Sonner toast notifications
+- `input-group`, `navigation-menu`, `separator`, `textarea` shadcn/ui components added
+- `@theme` block with brand color token `--color-primary: #22B99A` and Bootstrap-compatible `--breakpoint-lg: 992px`
+- `.link-reset` utility class ported to Tailwind `@layer components`
+- Proper TypeScript types for cart/order product rows (removes all `any` types)
+- pnpm as the package manager
+
+### Changed
+
+- All UI styling migrated from Bootstrap 5 to TailwindCSS v4
+- All native HTML elements (`<input>`, `<button>`, `<select>`, `<table>`, `<textarea>`, `<input type="checkbox">`) replaced with shadcn/ui components
+- Navbar fully migrated to shadcn/ui Sheet (mobile) + NavigationMenu (desktop)
+- Bootstrap grid classes replaced with Tailwind equivalents
+- ESLint configuration updated to flat config (`eslint.config.js`) with TypeScript and React plugins
+- `schema/` directory excluded from ESLint to avoid linting auto-generated files
+- `catch (err: any)` patterns replaced with `catch (err: unknown)` for type safety
+
+### Removed
+
+- Bootstrap 5 package and all Bootstrap CSS/JS imports
+- `@types/bootstrap` package
+- `sass` package and all SCSS files (`main.scss`)
+- `@radix-ui/react-*` packages (replaced by `@base-ui/react`)
+- `FlashMessages.tsx` component (replaced by Sonner)
+- All `data-bs-*` HTML attributes
+- All Bootstrap class names (`btn-*`, `col-*`, `form-control`, `d-flex`, etc.)
+
+## [0.1.0] - 2025-01-01
+
+### Added
+
+- Initial headless Sylius frontend implementation
+- Product listing, product detail, cart, checkout, and account pages
+- TanStack Query for data fetching
+- React Router for client-side navigation
+- TypeScript support
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..2a88e3c
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,373 @@
+# MoAI Execution Directive
+
+## 1. Core Identity
+
+MoAI is the Strategic Orchestrator for Claude Code. All tasks must be delegated to specialized agents.
+
+### HARD Rules (Mandatory)
+
+- [HARD] Language-Aware Responses: All user-facing responses MUST be in user's conversation_language
+- [HARD] Parallel Execution: Execute all independent tool calls in parallel when no dependencies exist
+- [HARD] No XML in User Responses: Never display XML tags in user-facing responses
+- [HARD] Markdown Output: Use Markdown for all user-facing communication
+- [HARD] Approach-First Development: Explain approach and get approval before writing code (See Section 7)
+- [HARD] Multi-File Decomposition: Split work when modifying 3+ files (See Section 7)
+- [HARD] Post-Implementation Review: List potential issues and suggest tests after coding (See Section 7)
+- [HARD] Reproduction-First Bug Fix: Write reproduction test before fixing bugs (See Section 7)
+
+Core principles (1-4) are defined in @.claude/rules/moai/core/moai-constitution.md. Development safeguards (5-8) are detailed in Section 7.
+
+### Recommendations
+
+- Agent delegation recommended for complex tasks requiring specialized expertise
+- Direct tool usage permitted for simpler operations
+- Appropriate Agent Selection: Optimal agent matched to each task
+
+---
+
+## 2. Request Processing Pipeline
+
+### Phase 1: Analyze
+
+Analyze user request to determine routing:
+
+- Assess complexity and scope of the request
+- Detect technology keywords for agent matching (framework names, domain terms)
+- Identify if clarification is needed before delegation
+
+Core Skills (load when needed):
+
+- Skill("moai-foundation-claude") for orchestration patterns
+- Skill("moai-foundation-core") for SPEC system and workflows
+- Skill("moai-workflow-project") for project management
+
+### Phase 2: Route
+
+Route request based on command type:
+
+- **Workflow Subcommands**: /moai project, /moai plan, /moai run, /moai sync
+- **Utility Subcommands**: /moai (default), /moai fix, /moai loop
+- **Feedback Subcommand**: /moai feedback
+- **Direct Agent Requests**: Immediate delegation when user explicitly requests an agent
+
+### Phase 3: Execute
+
+Execute using explicit agent invocation:
+
+- "Use the expert-backend subagent to develop the API"
+- "Use the manager-ddd subagent to implement with DDD approach"
+- "Use the Explore subagent to analyze the codebase structure"
+
+### Phase 4: Report
+
+Integrate and report results:
+
+- Consolidate agent execution results
+- Format response in user's conversation_language
+
+---
+
+## 3. Command Reference
+
+### Unified Skill: /moai
+
+Definition: Single entry point for all MoAI development workflows.
+
+Subcommands: plan, run, sync, project, fix, loop, feedback
+Default (natural language): Routes to autonomous workflow (plan -> run -> sync pipeline)
+
+Allowed Tools: Full access (Task, AskUserQuestion, TaskCreate, TaskUpdate, TaskList, TaskGet, Bash, Read, Write, Edit, Glob, Grep)
+
+---
+
+## 4. Agent Catalog
+
+### Selection Decision Tree
+
+1. Read-only codebase exploration? Use the Explore subagent
+2. External documentation or API research? Use WebSearch, WebFetch, Context7 MCP tools
+3. Domain expertise needed? Use the expert-[domain] subagent
+4. Workflow coordination needed? Use the manager-[workflow] subagent
+5. Complex multi-step tasks? Use the manager-strategy subagent
+
+### Manager Agents (8)
+
+spec, ddd, tdd, docs, quality, project, strategy, git
+
+### Expert Agents (8)
+
+backend, frontend, security, devops, performance, debug, testing, refactoring
+
+### Builder Agents (3)
+
+agent, skill, plugin
+
+### Team Agents (8) - Experimental
+
+researcher, analyst, architect, designer, backend-dev, frontend-dev, tester, quality (requires CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1)
+
+Both `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1` env var AND `workflow.team.enabled: true` in `.moai/config/sections/workflow.yaml` are required.
+
+For detailed agent descriptions, capabilities, and creation guidelines, see @.claude/rules/moai/development/agent-authoring.md.
+
+---
+
+## 5. SPEC-Based Workflow
+
+MoAI uses DDD (Domain-Driven Development) as its development methodology.
+
+### MoAI Command Flow
+
+- /moai plan "description" → manager-spec subagent
+- /moai run SPEC-XXX → manager-ddd subagent (ANALYZE-PRESERVE-IMPROVE)
+- /moai sync SPEC-XXX → manager-docs subagent
+
+For detailed workflow specifications, see @.claude/rules/moai/workflow/spec-workflow.md
+
+### Agent Chain for SPEC Execution
+
+- Phase 1: manager-spec → understand requirements
+- Phase 2: manager-strategy → create system design
+- Phase 3: expert-backend → implement core features
+- Phase 4: expert-frontend → create user interface
+- Phase 5: manager-quality → ensure quality standards
+- Phase 6: manager-docs → create documentation
+
+For team-based parallel execution of these phases, see @.claude/skills/moai/workflows/team-plan.md and @.claude/skills/moai/workflows/team-run.md.
+
+---
+
+## 6. Quality Gates
+
+For TRUST 5 framework details, see @.claude/rules/moai/core/moai-constitution.md
+
+### LSP Quality Gates
+
+MoAI-ADK implements LSP-based quality gates:
+
+**Phase-Specific Thresholds:**
+- **plan**: Capture LSP baseline at phase start
+- **run**: Zero errors, zero type errors, zero lint errors required
+- **sync**: Zero errors, max 10 warnings, clean LSP required
+
+**Configuration:** @.moai/config/sections/quality.yaml
+
+---
+
+## 7. Safe Development Protocol
+
+### Development Safeguards (4 HARD Rules)
+
+These rules ensure code quality and prevent regressions in the project codebase.
+
+**Rule 1: Approach-First Development**
+
+Before writing any non-trivial code:
+- Explain the implementation approach clearly
+- Describe which files will be modified and why
+- Get user approval before proceeding
+- Exceptions: Typo fixes, single-line changes, obvious bug fixes
+
+**Rule 2: Multi-File Change Decomposition**
+
+When modifying 3 or more files:
+- Split work into logical units using TodoList
+- Execute changes file-by-file or by logical grouping
+- Analyze file dependencies before parallel execution
+- Report progress after each unit completion
+
+**Rule 3: Post-Implementation Review**
+
+After writing code, always provide:
+- List of potential issues (edge cases, error scenarios, concurrency)
+- Suggested test cases to verify the implementation
+- Known limitations or assumptions made
+- Recommendations for additional validation
+
+**Rule 4: Reproduction-First Bug Fixing**
+
+When fixing bugs:
+- Write a failing test that reproduces the bug first
+- Confirm the test fails before making changes
+- Fix the bug with minimal code changes
+- Verify the reproduction test passes after the fix
+
+### Go-Specific Guidelines
+
+For Go development:
+- Run `go test -race ./...` for concurrency safety
+- Use table-driven tests for comprehensive coverage
+- Maintain 85%+ test coverage per package
+- Run `go vet` and `golangci-lint` before commits
+
+---
+
+## 8. User Interaction Architecture
+
+### Critical Constraint
+
+Subagents invoked via Task() operate in isolated, stateless contexts and cannot interact with users directly.
+
+### Correct Workflow Pattern
+
+- Step 1: MoAI uses AskUserQuestion to collect user preferences
+- Step 2: MoAI invokes Task() with user choices in the prompt
+- Step 3: Subagent executes based on provided parameters
+- Step 4: Subagent returns structured response
+- Step 5: MoAI uses AskUserQuestion for next decision
+
+### Team Coordination Pattern
+
+In team mode, MoAI bridges user interaction and teammate coordination:
+
+- MoAI uses AskUserQuestion for user decisions (teammates cannot)
+- MoAI uses SendMessage for teammate-to-teammate coordination
+- Teammates share TaskList for self-coordinated work distribution
+- MoAI synthesizes teammate results before presenting to user
+
+### AskUserQuestion Constraints
+
+- Maximum 4 options per question
+- No emoji characters in question text, headers, or option labels
+- Questions must be in user's conversation_language
+
+---
+
+## 9. Configuration Reference
+
+User and language configuration:
+
+@.moai/config/sections/user.yaml
+@.moai/config/sections/language.yaml
+
+### Project Rules
+
+MoAI-ADK uses Claude Code's official rules system at `.claude/rules/moai/`:
+
+- **Core rules**: TRUST 5 framework, documentation standards
+- **Workflow rules**: Progressive disclosure, token budget, workflow modes
+- **Development rules**: Skill frontmatter schema, tool permissions
+- **Language rules**: Path-specific rules for 16 programming languages
+
+### Language Rules
+
+- User Responses: Always in user's conversation_language
+- Internal Agent Communication: English
+- Code Comments: Per code_comments setting (default: English)
+- Commands, Agents, Skills Instructions: Always English
+
+---
+
+## 10. Web Search Protocol
+
+For anti-hallucination policy, see @.claude/rules/moai/core/moai-constitution.md
+
+### Execution Steps
+
+1. Initial Search: Use WebSearch with specific, targeted queries
+2. URL Validation: Use WebFetch to verify each URL
+3. Response Construction: Only include verified URLs with sources
+
+### Prohibited Practices
+
+- Never generate URLs not found in WebSearch results
+- Never present information as fact when uncertain
+- Never omit "Sources:" section when WebSearch was used
+
+---
+
+## 11. Error Handling
+
+### Error Recovery
+
+- Agent execution errors: Use expert-debug subagent
+- Token limit errors: Execute /clear, then guide user to resume
+- Permission errors: Review settings.json manually
+- Integration errors: Use expert-devops subagent
+- MoAI-ADK errors: Suggest /moai feedback
+
+### Resumable Agents
+
+Resume interrupted agent work using agentId:
+
+- "Resume agent abc123 and continue the security analysis"
+
+---
+
+## 12. MCP Servers & UltraThink
+
+MoAI-ADK integrates multiple MCP servers for specialized capabilities:
+
+- **Sequential Thinking**: Complex problem analysis, architecture decisions, technology trade-offs. Activate with `--ultrathink` flag. See Skill("moai-workflow-thinking").
+- **Context7**: Up-to-date library documentation lookup via resolve-library-id and get-library-docs.
+- **Pencil**: UI/UX design editing for .pen files (used by expert-frontend and team-designer agents).
+- **claude-in-chrome**: Browser automation for web-based tasks.
+
+For MCP configuration and usage patterns, see @.claude/rules/moai/core/mcp-integration.md.
+
+---
+
+## 13. Progressive Disclosure System
+
+MoAI-ADK implements a 3-level Progressive Disclosure system:
+
+**Level 1** (Metadata): ~100 tokens per skill, always loaded
+**Level 2** (Body): ~5K tokens, loaded when triggers match
+**Level 3** (Bundled): On-demand, Claude decides when to access
+
+### Benefits
+
+- 67% reduction in initial token load
+- On-demand loading of full skill content
+- Backward compatible with existing definitions
+
+---
+
+## 14. Parallel Execution Safeguards
+
+For core parallel execution principles, see @.claude/rules/moai/core/moai-constitution.md.
+
+- **File Write Conflict Prevention**: Analyze overlapping file access patterns and build dependency graphs before parallel execution
+- **Agent Tool Requirements**: All implementation agents MUST include Read, Write, Edit, Grep, Glob, Bash, TaskCreate, TaskUpdate, TaskList, TaskGet
+- **Loop Prevention**: Maximum 3 retries per operation with failure pattern detection and user intervention
+- **Platform Compatibility**: Always prefer Edit tool over sed/awk
+- **Team File Ownership**: In team mode, each teammate owns specific file patterns to prevent write conflicts
+
+---
+
+## 15. Agent Teams (Experimental)
+
+MoAI supports optional Agent Teams mode for parallel phase execution.
+
+### Activation
+
+- Claude Code v2.1.32 or later
+- Set `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1` in settings.json env
+- Set `workflow.team.enabled: true` in `.moai/config/sections/workflow.yaml`
+
+### Mode Selection
+
+- `--team`: Force Agent Teams mode
+- `--solo`: Force sub-agent mode
+- No flag (default): System auto-selects based on complexity thresholds (domains >= 3, files >= 10, or score >= 7)
+
+### Team APIs
+
+TeamCreate, SendMessage, TaskCreate/Update/List/Get, TeamDelete
+
+Call TeamDelete only after all teammates have shut down to release team resources.
+
+### Team Hook Events
+
+TeammateIdle (exit 2 = keep working), TaskCompleted (exit 2 = reject completion)
+
+For complete Agent Teams documentation including team API reference, agent roster, file ownership strategy, team workflows, and configuration, see @.claude/rules/moai/workflow/spec-workflow.md and @.moai/config/sections/workflow.yaml.
+
+---
+
+Version: 13.1.0 (Agent Teams Integration)
+Last Updated: 2026-02-10
+Language: English
+Core Rule: MoAI is an orchestrator; direct implementation is prohibited
+
+For detailed patterns on plugins, sandboxing, headless mode, and version management, see Skill("moai-foundation-claude").
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..2daa898
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,127 @@
+# Contributing to FrontWing
+
+## Branching Strategy
+
+We use a dual-branch workflow to ensure stability:
+
+- **main**: Production-ready code. No direct commits allowed.
+- **dev**: Primary integration branch. All work starts here.
+
+### Workflow
+
+1. Always branch off from `dev`.
+2. Create a new branch: `git checkout -b type/branch-name`.
+3. Open a Pull Request (PR) against the `dev` branch.
+4. Once tested, `dev` is merged into `main` for releases.
+
+---
+
+## Branch Naming Conventions
+
+- `feat/` — new features (e.g., `feat/product-search`)
+- `fix/` — bug fixes (e.g., `fix/cart-quantity`)
+- `chore/` — maintenance (e.g., `chore/update-dependencies`)
+- `docs/` — documentation changes
+
+---
+
+## Commit Message Conventions
+
+We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification:
+
+```
+type(scope): description
+```
+
+**Common types:** `feat`, `fix`, `chore`, `docs`, `test`, `refactor`, `ci`
+
+**Examples:**
+
+```
+feat(cart): add coupon code support
+fix(auth): clear server errors before re-submit
+test(schemas): add birthday validation edge cases
+chore(deps): update pnpm to v10.30
+```
+
+---
+
+## Development Environment
+
+**Requirements:** Node.js v22+, pnpm v10+, Docker (optional)
+
+### Local setup
+
+```bash
+pnpm install
+pnpm dev         # http://localhost:5173
+```
+
+### Docker setup
+
+```bash
+make up       # Start dev container with hot-reload
+make logs     # Follow logs
+make shell    # Open shell inside the container
+make stop     # Stop container
+make rebuild  # Rebuild after dependency changes
+```
+
+> Copy `.env.example` to `.env` and set `VITE_REACT_APP_API_URL` to your Sylius API URL.
+
+---
+
+## Running Tests
+
+### Unit tests
+
+```bash
+make test-unit           # Run once (CI mode)
+make test-unit-coverage  # With coverage report
+```
+
+### E2E tests
+
+Requires a running Sylius API and a valid test account. Copy `.env.test.example` to `.env.test.local` and fill in your credentials:
+
+```bash
+make test-e2e            # Build and run E2E tests
+make test-e2e-report     # Open last HTML report
+```
+
+### All tests
+
+```bash
+make test    # Unit + E2E
+```
+
+### All available commands
+
+```bash
+make help
+```
+
+---
+
+## Code Quality
+
+Before submitting a PR, ensure your changes pass all checks:
+
+```bash
+make lint          # ESLint
+make format        # Prettier
+make test-unit     # Unit tests
+```
+
+The pre-commit hook (Husky + lint-staged) runs ESLint and Prettier automatically on staged files.
+
+---
+
+## CI
+
+GitHub Actions runs on every push to `main`, `dev`, and `feat/**` branches:
+
+1. **unit** — Vitest (blocking)
+2. **e2e** — Playwright (requires unit to pass, uploads HTML report on failure)
+
+Required repository secrets: `PLAYWRIGHT_BASE_URL`, `PLAYWRIGHT_TEST_EMAIL`, `PLAYWRIGHT_TEST_PASSWORD`, `VITE_REACT_APP_API_URL`.
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..5a13707
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,145 @@
+.DEFAULT_GOAL := help
+COMPOSE          := docker compose -f docker/app/compose.yml
+COMPOSE_PROD     := docker compose -f docker/app/compose.prod.yml
+COMPOSE_TEST     := docker compose -f docker/test/compose.test.yml
+ENV_TEST_FILE    := .env.test.local
+COMPOSE_TEST_E2E := $(COMPOSE_TEST) $(if $(wildcard $(ENV_TEST_FILE)),--env-file $(ENV_TEST_FILE),)
+CERT_KEY         := docker/app/certs/localhost-key.pem
+CERT_CRT         := docker/app/certs/localhost.pem
+SYLIUS_SSL_DIR   := ../Sylius-Standard/docker/nginx/ssl
+
+# ── Colors ──────────────────────────────────────────────────────────────────
+BOLD  := \033[1m
+RESET := \033[0m
+CYAN  := \033[36m
+
+##@ Development
+
+.PHONY: up
+up: ## Start dev container
+	$(COMPOSE) up
+
+.PHONY: up-d
+up-d: ## Start dev container (detached)
+	$(COMPOSE) up -d
+
+.PHONY: stop
+stop: ## Stop dev container
+	$(COMPOSE) stop
+
+.PHONY: restart
+restart: ## Restart dev container
+	$(COMPOSE) restart
+
+.PHONY: logs
+logs: ## Follow dev container logs
+	$(COMPOSE) logs -f
+
+.PHONY: shell
+shell: ## Open shell in dev container
+	$(COMPOSE) exec app sh
+
+.PHONY: build
+build: ## Build Docker image
+	$(COMPOSE) build
+
+.PHONY: rebuild
+rebuild: ## Rebuild Docker image (no cache)
+	$(COMPOSE) build --no-cache
+
+##@ Production
+
+.PHONY: build-prod
+build-prod: ## Build production Docker image (requires VITE_REACT_APP_API_URL)
+	$(COMPOSE_PROD) build
+
+.PHONY: up-prod
+up-prod: ## Start production container
+	$(COMPOSE_PROD) up -d
+
+.PHONY: stop-prod
+stop-prod: ## Stop production container
+	$(COMPOSE_PROD) stop
+
+##@ Code Quality
+
+.PHONY: lint
+lint: ## Run ESLint
+	$(COMPOSE) run --rm --no-deps tools pnpm lint
+
+.PHONY: lint-fix
+lint-fix: ## Run ESLint with auto-fix
+	$(COMPOSE) run --rm --no-deps tools pnpm lint:fix
+
+.PHONY: format
+format: ## Format code with Prettier
+	$(COMPOSE) run --rm --no-deps tools pnpm format
+
+##@ Tests
+
+.PHONY: test
+test: test-unit test-e2e ## Run all tests (unit + E2E)
+
+.PHONY: test-unit
+test-unit: ## Run unit tests once
+	$(COMPOSE_TEST) run --rm unit-tests
+
+.PHONY: test-unit-watch
+test-unit-watch: ## Run unit tests in watch mode (local only)
+	pnpm test:unit
+
+.PHONY: test-unit-coverage
+test-unit-coverage: ## Run unit tests with coverage
+	$(COMPOSE_TEST) run --rm unit-tests pnpm test:unit:coverage
+
+.PHONY: test-e2e
+test-e2e: ## Run E2E tests (reads .env.test.local)
+	$(COMPOSE_TEST_E2E) build api-proxy app e2e-tests
+	$(COMPOSE_TEST_E2E) run --rm e2e-tests
+
+.PHONY: test-e2e-report
+test-e2e-report: ## Open last Playwright HTML report
+	pnpm test:e2e:report
+
+.PHONY: test-build
+test-build: ## Build all test Docker images
+	$(COMPOSE_TEST) build
+
+.PHONY: test-down
+test-down: ## Stop and remove test containers
+	$(COMPOSE_TEST) down --remove-orphans
+
+##@ Setup
+
+.PHONY: init
+init: certs build ## Initialize project (TLS certificates + Docker image)
+
+.PHONY: certs
+certs: ## Generate local TLS certificates with mkcert (also copies to Sylius nginx ssl dir)
+	@command -v mkcert >/dev/null 2>&1 || \
+		{ echo "mkcert not found. Install: brew install mkcert (macOS) / apt install mkcert (Linux)"; exit 1; }
+	@if [ -f $(CERT_KEY) ] && [ -f $(CERT_CRT) ]; then \
+		echo "Certificates already exist. Delete $(CERT_KEY) and $(CERT_CRT) to regenerate."; \
+	else \
+		mkcert -install; \
+		mkcert -key-file $(CERT_KEY) -cert-file $(CERT_CRT) localhost 127.0.0.1; \
+	fi
+	@if [ -d $(SYLIUS_SSL_DIR) ]; then \
+		cp $(CERT_KEY) $(SYLIUS_SSL_DIR)/localhost-key.pem; \
+		cp $(CERT_CRT) $(SYLIUS_SSL_DIR)/localhost.pem; \
+		echo "Certificates copied to $(SYLIUS_SSL_DIR) — restart Sylius nginx to apply."; \
+	else \
+		echo "Sylius ssl dir not found at $(SYLIUS_SSL_DIR) — skipping Sylius cert copy."; \
+	fi
+
+##@ Utilities
+
+.PHONY: clean
+clean: ## Remove build artifacts and test outputs
+	rm -rf dist coverage playwright-report test-results e2e/.auth
+
+.PHONY: help
+help: ## Show this help
+	@awk 'BEGIN {FS = ":.*##"; printf "\n$(BOLD)Usage:$(RESET)\n  make $(CYAN)<target>$(RESET)\n"} \
+	/^[a-zA-Z0-9_-]+:.*?##/ { printf "  $(CYAN)%-28s$(RESET) %s\n", $$1, $$2 } \
+	/^##@/ { printf "\n$(BOLD)%s$(RESET)\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
diff --git a/README.md b/README.md
index 340d666..06e5159 100644
--- a/README.md
+++ b/README.md
@@ -1,71 +1,227 @@
-# Sylius FrontWing (React + Remix + Vite)
+# FrontWing — Headless Sylius Frontend
 
-This is a headless frontend project for [Sylius](https://sylius.com), built with **React**, **Remix**, and **Vite**.  
-The goal is to provide a modern, fast, and flexible frontend for Sylius-based eCommerce platforms using a fully decoupled architecture.
+A modern, headless React 19 frontend for [Sylius](https://sylius.com) e-commerce platform, built with Vite 7, TypeScript 5.9, TailwindCSS v4, and shadcn/ui.
 
-> ⚠️ **Note**: This project is currently under active development and is not production-ready yet. While many core features and Sylius pages are already implemented, some functionalities are still being finalized.
+> ℹ️ **Status**: This project is in active development. Core e-commerce features are implemented and functional, with ongoing improvements and optimizations.
 
 ---
 
-## ✨ Features
+## Tech Stack
+
+- **React** 19 — UI library
+- **Vite** 7 — Build tool and development server
+- **TypeScript** 5.9 — Type-safe development
+- **TailwindCSS** v4 — Utility-first CSS with `@tailwindcss/vite` plugin
+- **shadcn/ui** — Component library with Base UI (`base-vega` style) primitives
+- **TanStack Form** v1 + **Zod** v3 — Form state management and schema validation
+- **TanStack Query** — Server state management
+- **react-router-dom** — Client-side routing
+- **pnpm** — Package manager
+- **Sonner** — Toast notifications
+- **Vitest** v4 — Unit testing
+- **Playwright** v1.58 — End-to-end testing
 
-- 🧩 Modular, component-based architecture in React
-- ⚡ Blazing fast development experience with Vite and HMR
-- 🛒 Integration with Sylius API (v2) for:
-    - Homepage and category listing
-    - Product detail pages
-    - Cart management
-    - Checkout flow
-    - Customer account area (dashboard, orders, profile, address book)
-- 🎨 Styling based on **Bootstrap 5**
-- 🔄 Client-side routing powered by Remix
+---
+
+## Features
+
+- 🧩 Component-driven architecture with shadcn/ui
+- ⚡ Lightning-fast Vite development with HMR
+- 🎨 TailwindCSS v4 styling + shadcn/ui components
+- 🛒 Full Sylius API v2 integration:
+  - Homepage and category listing
+  - Product detail pages with reviews
+  - Shopping cart with discount support
+  - Multi-step checkout flow
+  - Customer account (dashboard, order history, profile, address book)
+- 📝 Accessible form validation (onBlur + onSubmit, `aria-invalid`, `aria-describedby`)
+- 📱 Responsive mobile-first design
+- ♿ Accessibility-focused component patterns
+- 🔄 Client-side routing with React Router
+- 🧪 Unit tests (Vitest) and E2E tests (Playwright)
+
+---
+
+## UI Library
+
+This project uses **shadcn/ui** component library backed by **Base UI** (`base-vega` style) primitives, providing production-ready components with full TypeScript support and accessibility out of the box. Available components include Button, Input, Textarea, Select, Table, Badge, Alert, Checkbox, Accordion, Breadcrumb, Card, Sheet (mobile navigation), NavigationMenu (desktop navigation), DropdownMenu, Separator, Label, and Sonner for toast notifications.
 
 ---
 
-## 📦 Tech Stack
+## Getting Started
+
+**Requirements:** Docker, make
+
+Set `VITE_REACT_APP_API_URL` in your environment or `.env` file, then:
+
+```bash
+make up
+```
+
+Open https://localhost:5173 in your browser. The dev container runs Vite with hot-reload over HTTPS.
+
+**First-time setup (one-time per machine):**
+
+```bash
+brew install mkcert   # macOS
+# apt install mkcert  # Linux
+
+make init             # generates TLS certificates + builds Docker image
+```
+
+`make init` runs `make certs` then `make build`. The certificates are generated locally, trusted by your browser, and gitignored. Without them, Vite falls back to a self-signed certificate (`@vitejs/plugin-basic-ssl`).
+
+**Sylius API — trusted HTTPS (optional but recommended):**
+
+If your Sylius backend runs on `https://localhost`, its nginx must also use a mkcert certificate to avoid `ERR_CERT_AUTHORITY_INVALID` errors in the browser.
 
-- **React**
-- **Remix**
-- **Vite**
-- **Bootstrap 5**
-- **TanStack Query (React Query)**
-- **TypeScript**
+`make certs` handles this automatically: after generating the FrontWing dev certificate it copies both files to `../Sylius-Standard/docker/nginx/ssl/`. You then need to restart the Sylius nginx container once:
 
-## 🚧 Development Roadmap
+```bash
+make certs   # generates certs + copies to Sylius ssl dir
+cd ../Sylius-Standard && docker compose restart nginx
+```
+
+> The copy is skipped silently if `../Sylius-Standard/docker/nginx/ssl/` does not exist (e.g. Sylius is hosted elsewhere). You can override the path with `make certs SYLIUS_SSL_DIR=/path/to/ssl`.
 
-The following features are planned as next milestones:
+**Common commands:**
+
+```bash
+make up-d       # Start in background
+make logs       # Follow container logs
+make shell      # Open shell in container
+make stop       # Stop container
+make rebuild    # Rebuild image (after dependency changes)
+```
 
-- [ ] Implement **server-side rendering (SSR)**
-- [ ] Add **i18n** and multilingual support
-- [ ] Add **frontend form validation**
-- [ ] Optimize **API queries**
+> **IDE IntelliSense (TypeScript, ESLint):** install Node.js v22+ and pnpm v10+ locally, then run `pnpm install`. The app still runs in Docker — the local `node_modules` is only needed for editor tooling.
 
 ---
 
-## 🏁 Getting Started
+## Production
+
+FrontWing ships a multi-stage Dockerfile with a `production` target: Vite compiles the static assets, then nginx serves them on port 80.
+
+> **Important:** `VITE_REACT_APP_API_URL` is embedded at **build time** by Vite. It must be set before building the image — it cannot be changed at runtime.
+
+**Quick start:**
+
+```bash
+VITE_REACT_APP_API_URL=https://api.myshop.com make build-prod
+make up-prod   # serves on http://localhost:80
+```
 
-> ✅ **Requirement:** Node.js **v20** or higher
+Or with an `.env` file:
 
-Make sure you have a Sylius backend with the API enabled.
+```bash
+cp .env.example .env
+# set VITE_REACT_APP_API_URL=https://api.myshop.com in .env
+make build-prod
+make up-prod
+```
 
-Create a fork of this repository and clone it to your local machine
+**Production commands:**
 
 ```bash
-npm install
-npm run dev
+make build-prod   # Build production image
+make up-prod      # Start production container (detached)
+make stop-prod    # Stop production container
 ```
-Then open http://localhost:5137 in your browser.
 
-## 💬 Join the Community
-If you have questions, want to share feedback, or discuss Sylius headless use cases,
-join the Sylius Slack community and come say hi in the `#react-front` channel:
+The production nginx config (`docker/app/nginx.conf`) serves the SPA on port 80 with gzip, security headers, and SPA fallback routing. SSL termination is expected to be handled by an upstream reverse proxy (e.g., Traefik, Caddy, cloud load balancer).
+
+> **Note:** mkcert certificates are only needed for local development. In production, the Sylius API is expected to be served with a valid public certificate.
+
+---
+
+## Code Quality
+
+```bash
+make lint       # Run ESLint
+make lint-fix   # Run ESLint with auto-fix
+make format     # Format code with Prettier
+```
+
+These commands run inside Docker — no local pnpm installation required.
+
+---
+
+## Testing
+
+All tests run in Docker.
+
+### Unit tests (Vitest)
+
+```bash
+make test-unit           # Run once
+make test-unit-coverage  # With coverage report
+```
+
+### E2E tests (Playwright)
+
+E2E tests use an isolated Docker stack: the app is built and served over HTTP (port 4174) and requests to the Sylius API go through a reverse proxy on the internal Docker network.
+
+```bash
+make test-e2e         # Build and run E2E tests
+make test-e2e-report  # Open last HTML report
+```
+
+**Environment variables required for E2E:**
+
+| Variable                   | Description           | Docker default     |
+| -------------------------- | --------------------- | ------------------ |
+| `PLAYWRIGHT_TEST_EMAIL`    | Test account email    | —                  |
+| `PLAYWRIGHT_TEST_PASSWORD` | Test account password | —                  |
+| `VITE_REACT_APP_API_URL`   | Sylius API base URL   | `http://api-proxy` |
+| `PLAYWRIGHT_BASE_URL`      | Frontend URL          | `http://app:4174`  |
+
+Copy `.env.test.example` to `.env.test.local` and fill in your credentials — the Makefile picks it up automatically:
+
+```bash
+cp .env.test.example .env.test.local
+# edit .env.test.local
+make test-e2e
+```
+
+### All tests
+
+```bash
+make test       # Unit + E2E
+make help       # Full list of available commands
+```
+
+---
+
+## Development Roadmap
+
+Planned features and improvements:
+
+- [ ] Server-side rendering (SSR) optimization
+- [ ] Internationalization (i18n) and multilingual support
+- [ ] API query optimization
+- [ ] Performance monitoring and analytics
+- [ ] Extended test coverage — pages, hooks, and deeper E2E scenarios
+
+---
+
+## Community
+
+Have questions or want to contribute? Join the Sylius Slack community in the `#react-front` channel:
 
 👉 https://sylius.com/slack
 
-## 📄 License
-FrontWing is completely free and released under the [MIT License](https://github.com/Sylius/Sylius/blob/master/LICENSE).
+---
+
+## License
+
+FrontWing is released under the [MIT License](https://github.com/Sylius/Sylius/blob/master/LICENSE).
+
+## Contributing
+
+Contributions are welcome! Feel free to:
 
+- Open an issue for bugs or feature requests
+- Submit pull requests with improvements
+- Share feedback and ideas
 
-## 🤝 Contributing
-This project is still evolving, but contributions are welcome!
-Feel free to open an issue, suggest improvements, or submit a pull request.
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for the full contribution guide.
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..66d0e6b
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-vega",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/docker-compose.yaml b/docker-compose.yaml
deleted file mode 100644
index 3946d32..0000000
--- a/docker-compose.yaml
+++ /dev/null
@@ -1,14 +0,0 @@
-version: '3.8'
-
-services:
-  react-app:
-    image: node:20-alpine
-    container_name: react-app
-    working_dir: /app
-    volumes:
-      - ./:/app
-    ports:
-      - "3000:3000"
-    command: sh -c "npm install && npm start"
-    stdin_open: true
-    tty: true
diff --git a/docker/app/Dockerfile b/docker/app/Dockerfile
new file mode 100644
index 0000000..56b6e6d
--- /dev/null
+++ b/docker/app/Dockerfile
@@ -0,0 +1,57 @@
+ARG PNPM_VERSION=10.32.1
+
+# ── Stage 1: base dependencies ────────────────────────────
+FROM node:22-alpine AS deps
+ARG PNPM_VERSION
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable && corepack prepare pnpm@${PNPM_VERSION} --activate
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+# ── Stage 2: development server (source mounted as volume) ─
+FROM deps AS dev
+EXPOSE 5173
+CMD ["pnpm", "dev"]
+
+# ── Stage 3: unit tests ────────────────────────────────────
+FROM deps AS unit-tests
+COPY . .
+CMD ["pnpm", "test:unit", "--run"]
+
+# ── Stage 4: build ─────────────────────────────────────────
+FROM deps AS builder
+COPY . .
+ARG VITE_REACT_APP_API_URL
+RUN pnpm build
+
+# ── Stage 5: production (nginx) ────────────────────────────
+FROM nginx:alpine AS production
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY docker/app/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+
+# ── Stage 6: test serve (nginx, port 4174) ─────────────────
+FROM nginx:alpine AS app-serve
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY docker/test/nginx.test.conf /etc/nginx/conf.d/default.conf
+EXPOSE 4174
+HEALTHCHECK --interval=5s --timeout=5s --retries=15 --start-period=20s \
+  CMD wget -qO /dev/null http://127.0.0.1:4174 || exit 1
+
+# ── Stage 7: api-proxy (HTTP → Sylius) ─────────────────────
+FROM nginx:alpine AS api-proxy
+COPY docker/test/nginx.proxy.conf /etc/nginx/conf.d/default.conf
+
+# ── Stage 8: E2E tests (Playwright) ────────────────────────
+FROM mcr.microsoft.com/playwright:v1.58.2-noble AS e2e-tests
+ARG PNPM_VERSION
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable && corepack prepare pnpm@${PNPM_VERSION} --activate
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+COPY . .
+CMD ["pnpm", "test:e2e"]
diff --git a/docker/app/certs/.gitkeep b/docker/app/certs/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/docker/app/compose.prod.yml b/docker/app/compose.prod.yml
new file mode 100644
index 0000000..8d41ada
--- /dev/null
+++ b/docker/app/compose.prod.yml
@@ -0,0 +1,15 @@
+name: frontwing-prod
+
+services:
+  app:
+    image: frontwing-app-prod
+    build:
+      context: ../..
+      dockerfile: docker/app/Dockerfile
+      target: production
+      args:
+        COREPACK_ENABLE_DOWNLOAD_PROMPT: 0
+        VITE_REACT_APP_API_URL: ${VITE_REACT_APP_API_URL}
+    ports:
+      - "80:80"
+    restart: unless-stopped
diff --git a/docker/app/compose.yml b/docker/app/compose.yml
new file mode 100644
index 0000000..0a4e925
--- /dev/null
+++ b/docker/app/compose.yml
@@ -0,0 +1,33 @@
+name: frontwing
+
+services:
+  app:
+    image: frontwing-app-dev
+    build:
+      context: ../..
+      dockerfile: docker/app/Dockerfile
+      target: dev
+    container_name: frontwing-app
+    ports:
+      - "5173:5173"
+    volumes:
+      - ../..:/app
+      - /app/node_modules
+      - ./certs:/certs:ro
+    environment:
+      COREPACK_ENABLE_DOWNLOAD_PROMPT: 0
+      NODE_ENV: development
+      VITE_REACT_APP_API_URL: ${VITE_REACT_APP_API_URL:-https://localhost}
+    stdin_open: true
+    tty: true
+
+  tools:
+    build:
+      context: ../..
+      dockerfile: docker/app/Dockerfile
+      target: dev
+    volumes:
+      - ../..:/app
+      - /app/node_modules
+    profiles:
+      - tools
diff --git a/docker/app/nginx.conf b/docker/app/nginx.conf
new file mode 100644
index 0000000..f416432
--- /dev/null
+++ b/docker/app/nginx.conf
@@ -0,0 +1,17 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
+}
diff --git a/docker/test/compose.test.yml b/docker/test/compose.test.yml
new file mode 100644
index 0000000..447f25b
--- /dev/null
+++ b/docker/test/compose.test.yml
@@ -0,0 +1,55 @@
+name: frontwing-test
+
+services:
+  unit-tests:
+    build:
+      context: ../..
+      dockerfile: docker/app/Dockerfile
+      target: unit-tests
+    volumes:
+      - ../../coverage:/app/coverage
+
+  api-proxy:
+    build:
+      context: ../..
+      dockerfile: docker/app/Dockerfile
+      target: api-proxy
+    networks:
+      - default
+      - sylius
+
+  app:
+    image: frontwing-app-test
+    build:
+      context: ../..
+      dockerfile: docker/app/Dockerfile
+      target: app-serve
+      args:
+        VITE_REACT_APP_API_URL: ${VITE_REACT_APP_API_URL:-http://api-proxy}
+    ports:
+      - "4174:4174"
+    depends_on:
+      - api-proxy
+
+  e2e-tests:
+    build:
+      context: ../..
+      dockerfile: docker/app/Dockerfile
+      target: e2e-tests
+    depends_on:
+      app:
+        condition: service_healthy
+    environment:
+      PLAYWRIGHT_BASE_URL: http://app:4174
+      PLAYWRIGHT_TEST_EMAIL: ${PLAYWRIGHT_TEST_EMAIL:-}
+      PLAYWRIGHT_TEST_PASSWORD: ${PLAYWRIGHT_TEST_PASSWORD:-}
+      VITE_REACT_APP_API_URL: ${VITE_REACT_APP_API_URL:-http://api-proxy}
+      CI: "true"
+    volumes:
+      - ../../playwright-report:/app/playwright-report
+
+networks:
+  default: {}
+  sylius:
+    external: true
+    name: sylius-standard_default
diff --git a/docker/test/nginx.proxy.conf b/docker/test/nginx.proxy.conf
new file mode 100644
index 0000000..6cc1862
--- /dev/null
+++ b/docker/test/nginx.proxy.conf
@@ -0,0 +1,27 @@
+server {
+    listen 80;
+
+    location / {
+        if ($request_method = OPTIONS) {
+            add_header 'Access-Control-Allow-Origin' $http_origin always;
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS' always;
+            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, X-Requested-With' always;
+            add_header 'Access-Control-Allow-Credentials' 'true' always;
+            add_header 'Access-Control-Max-Age' 86400;
+            return 204;
+        }
+
+        proxy_pass https://nginx;
+        proxy_ssl_verify off;
+        proxy_set_header Host localhost;
+
+        # Strip upstream CORS headers to avoid duplicates
+        proxy_hide_header Access-Control-Allow-Origin;
+        proxy_hide_header Access-Control-Allow-Methods;
+        proxy_hide_header Access-Control-Allow-Headers;
+        proxy_hide_header Access-Control-Allow-Credentials;
+
+        add_header 'Access-Control-Allow-Origin' $http_origin always;
+        add_header 'Access-Control-Allow-Credentials' 'true' always;
+    }
+}
diff --git a/docker/test/nginx.test.conf b/docker/test/nginx.test.conf
new file mode 100644
index 0000000..53f5e45
--- /dev/null
+++ b/docker/test/nginx.test.conf
@@ -0,0 +1,17 @@
+server {
+    listen 4174;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
+}
diff --git a/e2e/fixtures/auth.ts b/e2e/fixtures/auth.ts
new file mode 100644
index 0000000..c742808
--- /dev/null
+++ b/e2e/fixtures/auth.ts
@@ -0,0 +1,104 @@
+import { test as base, type Page } from "@playwright/test";
+import * as fs from "fs";
+
+const authFile = new URL("../.auth/user.json", import.meta.url).pathname;
+
+export async function globalSetup() {
+  const email = process.env.PLAYWRIGHT_TEST_EMAIL || "test@example.com";
+  const password = process.env.PLAYWRIGHT_TEST_PASSWORD || "Password123!";
+  const baseURL = process.env.PLAYWRIGHT_BASE_URL || "http://localhost:5173";
+  const apiUrl = process.env.VITE_REACT_APP_API_URL || "http://localhost:8000";
+
+  try {
+    const response = await fetch(`${apiUrl}/api/v2/shop/customers/token`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email,
+        password,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Auth failed: ${response.statusText}`);
+    }
+
+    const data: { token: string; customer: string } = await response.json();
+
+    // Ensure .auth directory exists
+    const authDir = new URL("../.auth", import.meta.url).pathname;
+    if (!fs.existsSync(authDir)) {
+      fs.mkdirSync(authDir, { recursive: true });
+    }
+
+    // Save storage state with JWT token
+    const storageState = {
+      cookies: [],
+      origins: [
+        {
+          origin: baseURL,
+          localStorage: [
+            {
+              name: "jwtToken",
+              value: data.token,
+            },
+            {
+              name: "userUrl",
+              value: data.customer,
+            },
+          ],
+        },
+      ],
+    };
+
+    fs.writeFileSync(authFile, JSON.stringify(storageState, null, 2));
+    console.log("Auth setup complete: JWT token saved to .auth/user.json");
+  } catch (error) {
+    console.error("Global setup failed:", error);
+    throw error;
+  }
+}
+
+type AuthFixtures = {
+  authenticatedPage: Page;
+};
+
+export const authenticatedTest = base.extend<AuthFixtures>({
+  authenticatedPage: async ({ page }, use) => {
+    // Load storage state if it exists
+    if (fs.existsSync(authFile)) {
+      await page.context().addInitScript(() => {
+        const storageState = JSON.parse(localStorage.getItem("__playwright_state__") || "{}");
+        if (storageState.jwtToken) {
+          localStorage.setItem("jwtToken", storageState.jwtToken);
+        }
+      });
+    }
+    await use(page);
+  },
+});
+
+export default globalSetup;
+
+// Export base test with storage state for authenticated tests
+export const test = base.extend({
+  page: async ({ page }, use) => {
+    if (fs.existsSync(authFile)) {
+      await page.context().addInitScript(() => {
+        // Manually inject storage state from file
+      });
+      const state = JSON.parse(fs.readFileSync(authFile, "utf-8"));
+      if (state.origins && state.origins[0]?.localStorage) {
+        for (const item of state.origins[0].localStorage) {
+          await page.evaluate(({ key, value }) => localStorage.setItem(key, value), {
+            key: item.name,
+            value: item.value,
+          });
+        }
+      }
+    }
+    await use(page);
+  },
+});
diff --git a/e2e/pages/BasePage.ts b/e2e/pages/BasePage.ts
new file mode 100644
index 0000000..78d5da8
--- /dev/null
+++ b/e2e/pages/BasePage.ts
@@ -0,0 +1,27 @@
+import { Page } from "@playwright/test";
+
+export class BasePage {
+  constructor(readonly page: Page) {}
+
+  async goto(path: string) {
+    await this.page.goto(path);
+    await this.waitForPageLoad();
+  }
+
+  async waitForPageLoad() {
+    // Wait for page to be in stable state
+    await this.page.waitForLoadState("networkidle");
+  }
+
+  async waitForSelector(selector: string, timeout = 5000) {
+    await this.page.locator(selector).waitFor({ timeout });
+  }
+
+  async isVisible(selector: string) {
+    return this.page.locator(selector).isVisible();
+  }
+
+  async getText(selector: string) {
+    return this.page.locator(selector).textContent();
+  }
+}
diff --git a/e2e/pages/ChangePasswordPage.ts b/e2e/pages/ChangePasswordPage.ts
new file mode 100644
index 0000000..8832773
--- /dev/null
+++ b/e2e/pages/ChangePasswordPage.ts
@@ -0,0 +1,60 @@
+import { BasePage } from "./BasePage";
+
+export class ChangePasswordPage extends BasePage {
+  async goto() {
+    await super.goto("/account/change-password");
+    // CustomerContext's useEffect fires after the initial render, starting a customer
+    // fetch that takes ~5s in Docker. networkidle fires before this fetch even begins,
+    // leaving customer=null when the form submits. Wait for the Logout button instead —
+    // it only appears after the customer fetch completes, guaranteeing customer is non-null.
+    await this.page.locator('button:has-text("Logout")').waitFor({ timeout: 15000 });
+  }
+
+  async fillCurrentPassword(value: string) {
+    await this.page.locator('input[aria-describedby="currentPassword-error"]').fill(value);
+  }
+
+  async fillNewPassword(value: string) {
+    await this.page.locator('input[aria-describedby="newPassword-error"]').fill(value);
+  }
+
+  async fillConfirmation(value: string) {
+    const input = this.page.locator('input[aria-describedby="confirmation-error"]');
+    await input.fill(value);
+    // Trigger blur so TanStack Form re-runs the onBlur validator with the filled value,
+    // clearing any stale "Passwords do not match" error that was set when newPassword
+    // blurred (via onBlurListenTo) before confirmation was filled.
+    await input.blur();
+  }
+
+  async submit() {
+    await this.page.locator('button[id="save-changes"]').click();
+  }
+
+  async getFieldError(fieldName: string) {
+    const errorSpan = this.page.locator(`#${fieldName}-error`);
+    if (await errorSpan.isVisible()) {
+      return await errorSpan.textContent();
+    }
+    return null;
+  }
+
+  async isFieldErrorVisible(fieldName: string) {
+    return this.page.locator(`#${fieldName}-error`).isVisible();
+  }
+
+  async getSuccessMessage() {
+    // Wait for flash message from FlashMessagesContext
+    const successMessage = this.page.locator(
+      '[role="alert"]:has-text("Password changed successfully"), [class*="toast"]:has-text("Password changed")'
+    );
+    if (await successMessage.isVisible({ timeout: 5000 })) {
+      return await successMessage.textContent();
+    }
+    return null;
+  }
+
+  async waitForSuccessMessage(timeout = 5000) {
+    await this.page.locator('[role="alert"]').first().waitFor({ timeout });
+  }
+}
diff --git a/e2e/pages/LoginPage.ts b/e2e/pages/LoginPage.ts
new file mode 100644
index 0000000..334340e
--- /dev/null
+++ b/e2e/pages/LoginPage.ts
@@ -0,0 +1,48 @@
+import { BasePage } from "./BasePage";
+
+export class LoginPage extends BasePage {
+  async goto() {
+    await super.goto("/login");
+  }
+
+  async fillEmail(value: string) {
+    await this.page.locator("#_username").fill(value);
+  }
+
+  async fillPassword(value: string) {
+    await this.page.locator("#_password").fill(value);
+  }
+
+  async submit() {
+    await this.page.locator('button[type="submit"]').click();
+  }
+
+  async getEmailError() {
+    const errorSpan = this.page.locator("#email-error");
+    if (await errorSpan.isVisible()) {
+      return await errorSpan.textContent();
+    }
+    return null;
+  }
+
+  async getPasswordError() {
+    const errorSpan = this.page.locator("#password-error");
+    if (await errorSpan.isVisible()) {
+      return await errorSpan.textContent();
+    }
+    return null;
+  }
+
+  async isEmailErrorVisible() {
+    return this.page.locator("#email-error").isVisible();
+  }
+
+  async isPasswordErrorVisible() {
+    return this.page.locator("#password-error").isVisible();
+  }
+
+  async isAnyFieldInvalid() {
+    const invalidFields = this.page.locator('[aria-invalid="true"]');
+    return (await invalidFields.count()) > 0;
+  }
+}
diff --git a/e2e/pages/ProfilePage.ts b/e2e/pages/ProfilePage.ts
new file mode 100644
index 0000000..622412f
--- /dev/null
+++ b/e2e/pages/ProfilePage.ts
@@ -0,0 +1,64 @@
+import { BasePage } from "./BasePage";
+
+export class ProfilePage extends BasePage {
+  async goto() {
+    await super.goto("/account/profile/edit");
+  }
+
+  async fillFirstName(value: string) {
+    await this.page.locator('input[aria-describedby="firstName-error"]').fill(value);
+  }
+
+  async fillLastName(value: string) {
+    await this.page.locator('input[aria-describedby="lastName-error"]').fill(value);
+  }
+
+  async fillEmail(value: string) {
+    await this.page.locator('input[type="email"]').fill(value);
+  }
+
+  async fillBirthday(dateString: string) {
+    await this.page.locator('input[type="date"]').fill(dateString);
+  }
+
+  async clearBirthday() {
+    await this.page.locator('input[type="date"]').clear();
+  }
+
+  async fillPhoneNumber(value: string) {
+    const inputs = this.page.locator('input[type="text"]');
+    // Phone number is typically one of the later text inputs
+    await inputs.last().fill(value);
+  }
+
+  async submit() {
+    await this.page.locator('button[type="submit"]').click();
+  }
+
+  async getFieldError(fieldName: string) {
+    const errorSpan = this.page.locator(`#${fieldName}-error`);
+    if (await errorSpan.isVisible()) {
+      return await errorSpan.textContent();
+    }
+    return null;
+  }
+
+  async isFieldErrorVisible(fieldName: string) {
+    return this.page.locator(`#${fieldName}-error`).isVisible();
+  }
+
+  async getSuccessMessage() {
+    // Wait for flash message from FlashMessagesContext
+    const successMessage = this.page.locator(
+      '[role="alert"]:has-text("Profile updated successfully"), [class*="toast"]:has-text("Profile updated")'
+    );
+    if (await successMessage.isVisible({ timeout: 5000 })) {
+      return await successMessage.textContent();
+    }
+    return null;
+  }
+
+  async waitForSuccessMessage(timeout = 5000) {
+    await this.page.locator('[role="alert"]').first().waitFor({ timeout });
+  }
+}
diff --git a/e2e/pages/RegisterPage.ts b/e2e/pages/RegisterPage.ts
new file mode 100644
index 0000000..5fb90d4
--- /dev/null
+++ b/e2e/pages/RegisterPage.ts
@@ -0,0 +1,55 @@
+import { BasePage } from "./BasePage";
+
+export class RegisterPage extends BasePage {
+  async goto() {
+    await super.goto("/register");
+  }
+
+  async fillFirstName(value: string) {
+    await this.page.locator("#firstName").fill(value);
+  }
+
+  async fillLastName(value: string) {
+    await this.page.locator("#lastName").fill(value);
+  }
+
+  async fillEmail(value: string) {
+    await this.page.locator("#email").fill(value);
+  }
+
+  async fillPassword(value: string) {
+    await this.page.locator("#password").fill(value);
+  }
+
+  async fillConfirmPassword(value: string) {
+    await this.page.locator("#confirmPassword").fill(value);
+  }
+
+  async submit() {
+    await this.page.locator('button[type="submit"]').first().click();
+  }
+
+  async getFieldError(fieldName: string) {
+    const errorSpan = this.page.locator(`#${fieldName}-error`);
+    if (await errorSpan.isVisible()) {
+      return await errorSpan.textContent();
+    }
+    return null;
+  }
+
+  async isFieldErrorVisible(fieldName: string) {
+    return this.page.locator(`#${fieldName}-error`).isVisible();
+  }
+
+  async getPasswordStrengthText() {
+    const strengthElement = this.page.locator('[data-testid="password-strength-label"]');
+    if (await strengthElement.isVisible()) {
+      return await strengthElement.textContent();
+    }
+    return null;
+  }
+
+  async waitForPasswordStrengthIndicator() {
+    await this.page.locator('[class*="password-strength"]').waitFor({ timeout: 5000 });
+  }
+}
diff --git a/e2e/tests/auth.spec.ts b/e2e/tests/auth.spec.ts
new file mode 100644
index 0000000..42d9433
--- /dev/null
+++ b/e2e/tests/auth.spec.ts
@@ -0,0 +1,77 @@
+import { test, expect } from "@playwright/test";
+import { LoginPage } from "../pages/LoginPage";
+
+test.describe("Authentication", () => {
+  test("successful login redirects to dashboard", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+
+    const email = process.env.PLAYWRIGHT_TEST_EMAIL || "test@example.com";
+    const password = process.env.PLAYWRIGHT_TEST_PASSWORD || "Password123!";
+
+    await loginPage.fillEmail(email);
+    await loginPage.fillPassword(password);
+    await loginPage.submit();
+
+    // Wait for navigation to dashboard
+    await page.waitForURL(/\/account\/dashboard/, { timeout: 10000 });
+    expect(page.url()).toContain("/account/dashboard");
+  });
+
+  test("invalid login shows field-level error", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+
+    await loginPage.fillEmail("wrong@example.com");
+    await loginPage.fillPassword("WrongPassword123!");
+    await loginPage.submit();
+
+    // The token fetch may fail immediately (DNS abort) or return 401 — in both cases
+    // networkidle fires before React re-renders the error. Wait for the element directly.
+    await page.locator("#email-error").waitFor({ state: "visible", timeout: 10000 });
+
+    // Should show field-level error, not redirect
+    const emailError = await loginPage.getEmailError();
+    expect(emailError).toBeTruthy();
+    expect(page.url()).toContain("/login");
+  });
+
+  test("re-submission works after server error", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+
+    // First submission with wrong credentials
+    await loginPage.fillEmail("wrong@example.com");
+    await loginPage.fillPassword("WrongPassword123!");
+    await loginPage.submit();
+
+    // Token fetch may abort immediately — wait for the error element directly.
+    await page.locator("#email-error").waitFor({ state: "visible", timeout: 10000 });
+    const emailError = await loginPage.getEmailError();
+    expect(emailError).toBeTruthy();
+
+    // Now fill correct credentials and re-submit
+    const email = process.env.PLAYWRIGHT_TEST_EMAIL || "test@example.com";
+    const password = process.env.PLAYWRIGHT_TEST_PASSWORD || "Password123!";
+
+    await loginPage.fillEmail(email);
+    await loginPage.fillPassword(password);
+    await loginPage.submit();
+
+    // Should successfully redirect to dashboard (regression test for clearServerErrors)
+    // Re-submission takes longer: token fetch (~5s) + refetchCustomer (~5s) in Docker.
+    await page.waitForURL(/\/account\/dashboard/, { timeout: 20000 });
+    expect(page.url()).toContain("/account/dashboard");
+  });
+
+  test("unauthenticated access redirects to login", async ({ page, context }) => {
+    // No storageState applied in this test — fresh context has no jwtToken
+    await context.clearCookies();
+
+    await page.goto("/account/dashboard");
+
+    // Should redirect to login
+    await page.waitForURL(/\/login/, { timeout: 10000 });
+    expect(page.url()).toContain("/login");
+  });
+});
diff --git a/e2e/tests/change-password.spec.ts b/e2e/tests/change-password.spec.ts
new file mode 100644
index 0000000..8c8f09a
--- /dev/null
+++ b/e2e/tests/change-password.spec.ts
@@ -0,0 +1,83 @@
+import { test, expect } from "@playwright/test";
+import { ChangePasswordPage } from "../pages/ChangePasswordPage";
+import * as fs from "fs";
+
+const authFile = new URL("../.auth/user.json", import.meta.url).pathname;
+
+// Only run these tests if we have a valid auth file
+test.describe("Change Password (Authenticated)", () => {
+  test.use({
+    storageState: fs.existsSync(authFile) ? authFile : undefined,
+  });
+
+  test("wrong current password shows server error", async ({ page }) => {
+    const changePasswordPage = new ChangePasswordPage(page);
+    await changePasswordPage.goto();
+
+    // Fill with wrong current password
+    await changePasswordPage.fillCurrentPassword("WrongPassword123!");
+    await changePasswordPage.fillNewPassword("NewPassword123!");
+    await changePasswordPage.fillConfirmation("NewPassword123!");
+
+    // Submit form
+    await changePasswordPage.submit();
+
+    // Server response completes, but React re-renders asynchronously after networkidle.
+    // Wait for the error element directly to avoid the race condition.
+    await page.locator("#currentPassword-error").waitFor({ state: "visible", timeout: 15000 });
+
+    // Current password error should be visible
+    const currentPasswordError = await changePasswordPage.getFieldError("currentPassword");
+    expect(currentPasswordError).toBeTruthy();
+  });
+
+  test("mismatched confirmation shows inline error", async ({ page }) => {
+    const changePasswordPage = new ChangePasswordPage(page);
+    await changePasswordPage.goto();
+
+    const currentPassword = process.env.PLAYWRIGHT_TEST_PASSWORD || "Password123!";
+
+    // Fill with mismatched confirmation
+    await changePasswordPage.fillCurrentPassword(currentPassword);
+    await changePasswordPage.fillNewPassword("NewPass1!@");
+    await changePasswordPage.fillConfirmation("DifferentPass1!@");
+
+    // Submit form
+    await changePasswordPage.submit();
+
+    // Wait for validation
+    await page.waitForTimeout(500);
+
+    // Confirmation error should be visible
+    const confirmationError = await changePasswordPage.getFieldError("confirmation");
+    expect(confirmationError).toContain("do not match");
+  });
+
+  test("successful change redirects to dashboard with success message", async ({ page }) => {
+    const changePasswordPage = new ChangePasswordPage(page);
+    const currentPassword = process.env.PLAYWRIGHT_TEST_PASSWORD || "Password123!";
+    const newPassword = "NewSecurePass123!@";
+
+    // Change to new password
+    await changePasswordPage.goto();
+    await changePasswordPage.fillCurrentPassword(currentPassword);
+    await changePasswordPage.fillNewPassword(newPassword);
+    await changePasswordPage.fillConfirmation(newPassword);
+    await changePasswordPage.submit();
+
+    await page.waitForURL(/\/account\/dashboard/, { timeout: 10000 });
+    expect(page.url()).toContain("/account/dashboard");
+
+    await expect(page.locator("[data-sonner-toast]").first()).toContainText(/success/i, {
+      timeout: 5000,
+    });
+
+    // Restore original password so subsequent test runs don't break
+    await changePasswordPage.goto();
+    await changePasswordPage.fillCurrentPassword(newPassword);
+    await changePasswordPage.fillNewPassword(currentPassword);
+    await changePasswordPage.fillConfirmation(currentPassword);
+    await changePasswordPage.submit();
+    await page.waitForURL(/\/account\/dashboard/, { timeout: 10000 });
+  });
+});
diff --git a/e2e/tests/form-validation.spec.ts b/e2e/tests/form-validation.spec.ts
new file mode 100644
index 0000000..96ec2f3
--- /dev/null
+++ b/e2e/tests/form-validation.spec.ts
@@ -0,0 +1,82 @@
+import { test, expect } from "@playwright/test";
+import { LoginPage } from "../pages/LoginPage";
+
+test.describe("Form Validation (SPEC-UPDATE-001)", () => {
+  test.beforeEach(async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+  });
+
+  test("no errors on fresh page load", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+
+    // Check that no fields have aria-invalid="true"
+    const invalidFields = page.locator('[aria-invalid="true"]');
+    expect(await invalidFields.count()).toBe(0);
+
+    // Check that error spans are not visible
+    expect(await loginPage.isEmailErrorVisible()).toBe(false);
+    expect(await loginPage.isPasswordErrorVisible()).toBe(false);
+  });
+
+  test("blur on empty email shows error", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+
+    // Focus and blur email field without entering value
+    await page.locator('input[name="_username"]').focus();
+    await page.locator('input[name="_username"]').blur();
+
+    // Wait for validation
+    await page.waitForTimeout(500);
+
+    // Error should be visible
+    expect(await loginPage.isEmailErrorVisible()).toBe(true);
+    const errorText = await loginPage.getEmailError();
+    expect(errorText).toBeTruthy();
+  });
+
+  test("submit empty form shows all errors simultaneously", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+
+    // Submit without filling any fields
+    await loginPage.submit();
+
+    // Wait for validation errors
+    await page.waitForTimeout(500);
+
+    // Both errors should be visible
+    expect(await loginPage.isEmailErrorVisible()).toBe(true);
+    expect(await loginPage.isPasswordErrorVisible()).toBe(true);
+
+    // Both fields should have aria-invalid="true"
+    const emailInput = page.locator('input[name="_username"]');
+    const passwordInput = page.locator('input[name="_password"]');
+
+    expect(await emailInput.getAttribute("aria-invalid")).toBe("true");
+    expect(await passwordInput.getAttribute("aria-invalid")).toBe("true");
+  });
+
+  test("fixing a field after error clears the error", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+
+    // Submit empty form to trigger errors
+    await loginPage.submit();
+    await page.waitForTimeout(500);
+
+    // Verify email error is visible
+    expect(await loginPage.isEmailErrorVisible()).toBe(true);
+
+    // Fill email with valid value
+    await loginPage.fillEmail("test@example.com");
+
+    // Blur to trigger validation
+    await page.locator('input[name="_username"]').blur();
+    await page.waitForTimeout(500);
+
+    // Email error should be cleared
+    expect(await loginPage.isEmailErrorVisible()).toBe(false);
+
+    // Password error should still be visible
+    expect(await loginPage.isPasswordErrorVisible()).toBe(true);
+  });
+});
diff --git a/e2e/tests/profile.spec.ts b/e2e/tests/profile.spec.ts
new file mode 100644
index 0000000..2320699
--- /dev/null
+++ b/e2e/tests/profile.spec.ts
@@ -0,0 +1,78 @@
+import { test, expect } from "@playwright/test";
+import { ProfilePage } from "../pages/ProfilePage";
+import * as fs from "fs";
+
+const authFile = new URL("../.auth/user.json", import.meta.url).pathname;
+
+// Only run these tests if we have a valid auth file
+test.describe("Profile (Authenticated)", () => {
+  test.use({
+    storageState: fs.existsSync(authFile) ? authFile : undefined,
+  });
+
+  test("empty birthday shows required error", async ({ page }) => {
+    const profilePage = new ProfilePage(page);
+    await profilePage.goto();
+
+    // Wait for page to load with data
+    await page.waitForTimeout(2000);
+
+    // Clear birthday field
+    await profilePage.clearBirthday();
+
+    // Submit form
+    await profilePage.submit();
+
+    // Wait for validation
+    await page.waitForTimeout(500);
+
+    // Birthday error should be visible
+    const birthdayError = await profilePage.getFieldError("birthday");
+    expect(birthdayError).toBeTruthy();
+  });
+
+  test("future birthday shows error", async ({ page }) => {
+    const profilePage = new ProfilePage(page);
+    await profilePage.goto();
+
+    // Wait for page to load with data
+    await page.waitForTimeout(2000);
+
+    // Set future date
+    const futureDate = new Date();
+    futureDate.setFullYear(futureDate.getFullYear() + 1);
+    const futureDateString = futureDate.toISOString().split("T")[0];
+
+    await profilePage.fillBirthday(futureDateString);
+
+    // Submit form
+    await profilePage.submit();
+
+    // Wait for validation
+    await page.waitForTimeout(500);
+
+    // Birthday error should be visible
+    const birthdayError = await profilePage.getFieldError("birthday");
+    expect(birthdayError).toBeTruthy();
+  });
+
+  test("successful update shows flash message", async ({ page }) => {
+    const profilePage = new ProfilePage(page);
+    await profilePage.goto();
+
+    // Wait for page to load with data
+    await page.waitForTimeout(2000);
+
+    // Fill with valid data
+    await profilePage.fillFirstName("John");
+    await profilePage.fillLastName("Doe");
+
+    // Submit form
+    await profilePage.submit();
+
+    // Wait for success message (profile API takes ~5s in Docker)
+    await expect(page.locator("[data-sonner-toast]").first()).toContainText(/success/i, {
+      timeout: 10000,
+    });
+  });
+});
diff --git a/e2e/tests/register.spec.ts b/e2e/tests/register.spec.ts
new file mode 100644
index 0000000..2b25511
--- /dev/null
+++ b/e2e/tests/register.spec.ts
@@ -0,0 +1,49 @@
+import { test, expect } from "@playwright/test";
+import { RegisterPage } from "../pages/RegisterPage";
+
+test.describe("Registration", () => {
+  test.beforeEach(async ({ page }) => {
+    const registerPage = new RegisterPage(page);
+    await registerPage.goto();
+  });
+
+  test("mismatched passwords shows confirmation error", async ({ page }) => {
+    const registerPage = new RegisterPage(page);
+
+    await registerPage.fillFirstName("John");
+    await registerPage.fillLastName("Doe");
+    await registerPage.fillEmail("newuser@example.com");
+    await registerPage.fillPassword("Password1!");
+    await registerPage.fillConfirmPassword("Password2!");
+
+    await registerPage.submit();
+
+    // Wait for validation
+    await page.waitForTimeout(500);
+
+    // Confirmation error should be visible
+    const confirmError = await registerPage.getFieldError("confirmPassword");
+    expect(confirmError).toContain("do not match");
+  });
+
+  test("password strength indicator updates as user types", async ({ page }) => {
+    const registerPage = new RegisterPage(page);
+
+    // Type a password that scores 1/4 ("Too weak" label)
+    await registerPage.fillPassword("abcdefgh");
+    await page.waitForTimeout(300);
+
+    // Check for weak indicator text
+    let strengthText = await registerPage.getPasswordStrengthText();
+    expect(strengthText?.toLowerCase()).toContain("weak");
+
+    // Clear and type strong password
+    await page.locator("#password").clear();
+    await registerPage.fillPassword("Abcde1!@");
+    await page.waitForTimeout(300);
+
+    // Check for strong indicator text
+    strengthText = await registerPage.getPasswordStrengthText();
+    expect(strengthText?.toLowerCase()).toContain("strong");
+  });
+});
diff --git a/eslint.config.js b/eslint.config.js
index 092408a..a449c9b 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -2,10 +2,11 @@ import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
+import prettier from 'eslint-config-prettier'
 import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'schema'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
@@ -25,4 +26,22 @@ export default tseslint.config(
       ],
     },
   },
+  {
+    // shadcn/ui components and context files legitimately export both
+    // components and non-component values (variants, hooks, contexts)
+    files: ['src/components/ui/*.tsx', 'src/context/*.tsx'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
+  },
+  {
+    // Playwright E2E files are not React components — disable React-specific rules
+    files: ['e2e/**/*.ts'],
+    rules: {
+      'react-hooks/rules-of-hooks': 'off',
+      'react-refresh/only-export-components': 'off',
+    },
+  },
+  // Prettier config must be last to disable conflicting rules
+  prettier,
 )
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index e9a6a10..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,4495 +0,0 @@
-{
-  "name": "sylius-shop-ts",
-  "version": "0.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "sylius-shop-ts",
-      "version": "0.0.0",
-      "dependencies": {
-        "@tabler/icons-react": "^3.31.0",
-        "@tanstack/react-query": "^5.67.2",
-        "@testing-library/dom": "^10.4.0",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.2.0",
-        "@testing-library/user-event": "^13.5.0",
-        "@types/jest": "^27.5.2",
-        "@types/node": "^20.0.0",
-        "@types/react": "^19.0.10",
-        "@types/react-dom": "^19.0.4",
-        "bootstrap": "^5.3.3",
-        "lucide-react": "^0.511.0",
-        "openapi-fetch": "^0.13.4",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "react-loading-skeleton": "^3.5.0",
-        "react-router-dom": "^7.3.0",
-        "react-slick": "^0.30.3",
-        "slick-carousel": "^1.8.1",
-        "typescript": "^4.9.5",
-        "web-vitals": "^2.1.4",
-        "yet-another-react-lightbox": "^3.23.1"
-      },
-      "devDependencies": {
-        "@eslint/js": "^9.21.0",
-        "@types/bootstrap": "^5.2.10",
-        "@types/react": "^19.0.10",
-        "@types/react-dom": "^19.0.4",
-        "@types/react-slick": "^0.23.13",
-        "@vitejs/plugin-react": "^4.3.4",
-        "eslint": "^9.21.0",
-        "eslint-plugin-react-hooks": "^5.1.0",
-        "eslint-plugin-react-refresh": "^0.4.19",
-        "globals": "^15.15.0",
-        "openapi-typescript": "^6.7.5",
-        "sass": "^1.85.1",
-        "typescript": "~5.7.2",
-        "typescript-eslint": "^8.24.1",
-        "vite": "^6.2.0"
-      }
-    },
-    "node_modules/@adobe/css-tools": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.2.tgz",
-      "integrity": "sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A==",
-      "license": "MIT"
-    },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
-      "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.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.25.9",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.26.8",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz",
-      "integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
-      "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.26.10",
-        "@babel/helper-compilation-targets": "^7.26.5",
-        "@babel/helper-module-transforms": "^7.26.0",
-        "@babel/helpers": "^7.26.10",
-        "@babel/parser": "^7.26.10",
-        "@babel/template": "^7.26.9",
-        "@babel/traverse": "^7.26.10",
-        "@babel/types": "^7.26.10",
-        "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/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.10.tgz",
-      "integrity": "sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.26.10",
-        "@babel/types": "^7.26.10",
-        "@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.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz",
-      "integrity": "sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.26.5",
-        "@babel/helper-validator-option": "^7.25.9",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
-      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
-      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9",
-        "@babel/traverse": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
-      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
-      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.10.tgz",
-      "integrity": "sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.26.9",
-        "@babel/types": "^7.26.10"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.10.tgz",
-      "integrity": "sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.26.10"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz",
-      "integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz",
-      "integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
-      "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
-      "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.26.9",
-        "@babel/types": "^7.26.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.10.tgz",
-      "integrity": "sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.26.10",
-        "@babel/parser": "^7.26.10",
-        "@babel/template": "^7.26.9",
-        "@babel/types": "^7.26.10",
-        "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==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz",
-      "integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.2.tgz",
-      "integrity": "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.2.tgz",
-      "integrity": "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.2.tgz",
-      "integrity": "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.2.tgz",
-      "integrity": "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.2.tgz",
-      "integrity": "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.2.tgz",
-      "integrity": "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.2.tgz",
-      "integrity": "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.2.tgz",
-      "integrity": "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.2.tgz",
-      "integrity": "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.2.tgz",
-      "integrity": "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.2.tgz",
-      "integrity": "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.2.tgz",
-      "integrity": "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.2.tgz",
-      "integrity": "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.2.tgz",
-      "integrity": "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.2.tgz",
-      "integrity": "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.2.tgz",
-      "integrity": "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.2.tgz",
-      "integrity": "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.2.tgz",
-      "integrity": "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.2.tgz",
-      "integrity": "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.2.tgz",
-      "integrity": "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.2.tgz",
-      "integrity": "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.2.tgz",
-      "integrity": "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.2.tgz",
-      "integrity": "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.2.tgz",
-      "integrity": "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.2.tgz",
-      "integrity": "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.0.tgz",
-      "integrity": "sha512-RoV8Xs9eNwiDvhv7M+xcL4PWyRyIXRY/FLp3buU4h1EYfdF7unWUy3dOjPqb3C7rMUewIcqwW850PgS8h1o1yg==",
-      "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/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.19.2",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz",
-      "integrity": "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==",
-      "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.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.1.tgz",
-      "integrity": "sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "node_modules/@eslint/core": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz",
-      "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==",
-      "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.23.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.23.0.tgz",
-      "integrity": "sha512-35MJ8vCPU0ZMxo7zfev2pypqTwWTofFZO6m4KAtdoFhRpLJUpHTZZ+KB3C7Hb1d7bULYwO4lJXGCi5Se+8OMbw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
-    "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.2.8",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz",
-      "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@eslint/core": "^0.13.0",
-        "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.13.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz",
-      "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==",
-      "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/@fastify/busboy": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
-      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "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.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.2.tgz",
-      "integrity": "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.18"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "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==",
-      "dev": true,
-      "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==",
-      "dev": true,
-      "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==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/source-map": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
-      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25"
-      }
-    },
-    "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==",
-      "dev": true,
-      "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==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@parcel/watcher": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
-      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^1.0.3",
-        "is-glob": "^4.0.3",
-        "micromatch": "^4.0.5",
-        "node-addon-api": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.1",
-        "@parcel/watcher-darwin-arm64": "2.5.1",
-        "@parcel/watcher-darwin-x64": "2.5.1",
-        "@parcel/watcher-freebsd-x64": "2.5.1",
-        "@parcel/watcher-linux-arm-glibc": "2.5.1",
-        "@parcel/watcher-linux-arm-musl": "2.5.1",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
-        "@parcel/watcher-linux-arm64-musl": "2.5.1",
-        "@parcel/watcher-linux-x64-glibc": "2.5.1",
-        "@parcel/watcher-linux-x64-musl": "2.5.1",
-        "@parcel/watcher-win32-arm64": "2.5.1",
-        "@parcel/watcher-win32-ia32": "2.5.1",
-        "@parcel/watcher-win32-x64": "2.5.1"
-      }
-    },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
-      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
-      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
-      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
-      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
-      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
-      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
-      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
-      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
-      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
-      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
-      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
-      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
-      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.39.0.tgz",
-      "integrity": "sha512-lGVys55Qb00Wvh8DMAocp5kIcaNzEFTmGhfFd88LfaogYTRKrdxgtlO5H6S49v2Nd8R2C6wLOal0qv6/kCkOwA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.39.0.tgz",
-      "integrity": "sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.39.0.tgz",
-      "integrity": "sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.39.0.tgz",
-      "integrity": "sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.39.0.tgz",
-      "integrity": "sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.39.0.tgz",
-      "integrity": "sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.39.0.tgz",
-      "integrity": "sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.39.0.tgz",
-      "integrity": "sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.39.0.tgz",
-      "integrity": "sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.39.0.tgz",
-      "integrity": "sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.39.0.tgz",
-      "integrity": "sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.39.0.tgz",
-      "integrity": "sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.39.0.tgz",
-      "integrity": "sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.39.0.tgz",
-      "integrity": "sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.39.0.tgz",
-      "integrity": "sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.39.0.tgz",
-      "integrity": "sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.39.0.tgz",
-      "integrity": "sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.39.0.tgz",
-      "integrity": "sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.39.0.tgz",
-      "integrity": "sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.39.0.tgz",
-      "integrity": "sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@tabler/icons": {
-      "version": "3.31.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.31.0.tgz",
-      "integrity": "sha512-dblAdeKY3+GA1U+Q9eziZ0ooVlZMHsE8dqP0RkwvRtEsAULoKOYaCUOcJ4oW1DjWegdxk++UAt2SlQVnmeHv+g==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/codecalm"
-      }
-    },
-    "node_modules/@tabler/icons-react": {
-      "version": "3.31.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.31.0.tgz",
-      "integrity": "sha512-2rrCM5y/VnaVKnORpDdAua9SEGuJKVqPtWxeQ/vUVsgaUx30LDgBZph7/lterXxDY1IKR6NO//HDhWiifXTi3w==",
-      "dependencies": {
-        "@tabler/icons": "3.31.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/codecalm"
-      },
-      "peerDependencies": {
-        "react": ">= 16"
-      }
-    },
-    "node_modules/@tanstack/query-core": {
-      "version": "5.71.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.71.5.tgz",
-      "integrity": "sha512-XOQ5SyjCdwhxyLksGKWSL5poqyEXYPDnsrZAzJm2LgrMm4Yh6VOrfC+IFosXreDw9HNqC11YAMY3HlfHjNzuaA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/react-query": {
-      "version": "5.71.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.71.5.tgz",
-      "integrity": "sha512-WpxZWy4fDASjY+iAaXB+aY+LC95PQ34W6EWVkjJ0hdzWWbczFnr9nHvHkVDpwdR18I1NO8igNGQJFrLrgyzI8Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@tanstack/query-core": "5.71.5"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19"
-      }
-    },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@testing-library/jest-dom": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
-      "integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==",
-      "license": "MIT",
-      "dependencies": {
-        "@adobe/css-tools": "^4.4.0",
-        "aria-query": "^5.0.0",
-        "chalk": "^3.0.0",
-        "css.escape": "^1.5.1",
-        "dom-accessibility-api": "^0.6.3",
-        "lodash": "^4.17.21",
-        "redent": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=14",
-        "npm": ">=6",
-        "yarn": ">=1"
-      }
-    },
-    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
-      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
-      "license": "MIT"
-    },
-    "node_modules/@testing-library/react": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
-      "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@testing-library/dom": "^10.0.0",
-        "@types/react": "^18.0.0 || ^19.0.0",
-        "@types/react-dom": "^18.0.0 || ^19.0.0",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      },
-      "peerDependencies": {
-        "@testing-library/dom": ">=7.21.4"
-      }
-    },
-    "node_modules/@types/aria-query": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
-      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "license": "MIT"
-    },
-    "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.6.8",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
-      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
-      "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.6",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
-      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.20.7"
-      }
-    },
-    "node_modules/@types/bootstrap": {
-      "version": "5.2.10",
-      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
-      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@popperjs/core": "^2.9.2"
-      }
-    },
-    "node_modules/@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
-      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/jest": {
-      "version": "27.5.2",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz",
-      "integrity": "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==",
-      "license": "MIT",
-      "dependencies": {
-        "jest-matcher-utils": "^27.0.0",
-        "pretty-format": "^27.0.0"
-      }
-    },
-    "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/node": {
-      "version": "20.17.24",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.24.tgz",
-      "integrity": "sha512-d7fGCyB96w9BnWQrOsJtpyiSaBcAYYr75bnK6ZRjDbql2cGLj/3GsL5OYmLPNq76l7Gf2q4Rv9J2o6h5CrD9sA==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~6.19.2"
-      }
-    },
-    "node_modules/@types/react": {
-      "version": "19.0.10",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz",
-      "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "19.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
-      "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
-      "devOptional": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^19.0.0"
-      }
-    },
-    "node_modules/@types/react-slick": {
-      "version": "0.23.13",
-      "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
-      "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.29.0.tgz",
-      "integrity": "sha512-PAIpk/U7NIS6H7TEtN45SPGLQaHNgB7wSjsQV/8+KYokAb2T/gloOA/Bee2yd4/yKVhPKe5LlaUGhAZk5zmSaQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.29.0",
-        "@typescript-eslint/type-utils": "8.29.0",
-        "@typescript-eslint/utils": "8.29.0",
-        "@typescript-eslint/visitor-keys": "8.29.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
-        "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.0.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
-      }
-    },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.29.0.tgz",
-      "integrity": "sha512-8C0+jlNJOwQso2GapCVWWfW/rzaq7Lbme+vGUFKE31djwNncIpgXD7Cd4weEsDdkoZDjH0lwwr3QDQFuyrMg9g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "8.29.0",
-        "@typescript-eslint/types": "8.29.0",
-        "@typescript-eslint/typescript-estree": "8.29.0",
-        "@typescript-eslint/visitor-keys": "8.29.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
-      }
-    },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.29.0.tgz",
-      "integrity": "sha512-aO1PVsq7Gm+tcghabUpzEnVSFMCU4/nYIgC2GOatJcllvWfnhrgW0ZEbnTxm36QsikmCN1K/6ZgM7fok2I7xNw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.29.0",
-        "@typescript-eslint/visitor-keys": "8.29.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.29.0.tgz",
-      "integrity": "sha512-ahaWQ42JAOx+NKEf5++WC/ua17q5l+j1GFrbbpVKzFL/tKVc0aYY8rVSYUpUvt2hUP1YBr7mwXzx+E/DfUWI9Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.29.0",
-        "@typescript-eslint/utils": "8.29.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^2.0.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.29.0.tgz",
-      "integrity": "sha512-wcJL/+cOXV+RE3gjCyl/V2G877+2faqvlgtso/ZRbTCnZazh0gXhe+7gbAnfubzN2bNsBtZjDvlh7ero8uIbzg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.29.0.tgz",
-      "integrity": "sha512-yOfen3jE9ISZR/hHpU/bmNvTtBW1NjRbkSFdZOksL1N+ybPEE7UVGMwqvS6CP022Rp00Sb0tdiIkhSCe6NI8ow==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.29.0",
-        "@typescript-eslint/visitor-keys": "8.29.0",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^2.0.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.8.4 <5.9.0"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.29.0.tgz",
-      "integrity": "sha512-gX/A0Mz9Bskm8avSWFcK0gP7cZpbY4AIo6B0hWYFCaIsz750oaiWR4Jr2CI+PQhfW1CpcQr9OlfPS+kMFegjXA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.29.0",
-        "@typescript-eslint/types": "8.29.0",
-        "@typescript-eslint/typescript-estree": "8.29.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.29.0.tgz",
-      "integrity": "sha512-Sne/pVz8ryR03NFK21VpN88dZ2FdQXOlq3VIklbrTYEt8yXtRFr9tvUhqvCeKjqYk5FSim37sHbooT6vzBTZcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.29.0",
-        "eslint-visitor-keys": "^4.2.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
-      "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/@vitejs/plugin-react": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
-      "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
-        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
-        "@types/babel__core": "^7.20.5",
-        "react-refresh": "^0.14.2"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
-      }
-    },
-    "node_modules/@vitejs/plugin-react/node_modules/react-refresh": {
-      "version": "0.14.2",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
-      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-      "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-colors": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
-      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "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==",
-      "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==",
-      "dev": true,
-      "license": "Python-2.0"
-    },
-    "node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
-    "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/bootstrap": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.4.tgz",
-      "integrity": "sha512-q2oK3ZPDTa5I44FTyY3H76+SDTJREvOBxtX1HNLHcxMni50jMvUtOh+dgFdgpsAHtJ9bfNAWr6d6VezJHJ/7tg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "license": "MIT",
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.8"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
-      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
-      "dev": true,
-      "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.30001688",
-        "electron-to-chromium": "^1.5.73",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.1"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001703",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001703.tgz",
-      "integrity": "sha512-kRlAGTRWgPsOj7oARC9m1okJEXdL/8fekFVcxA8Hl7GH4r/sN4OJn/i6Flde373T50KS7Y37oFbMwlE8+F42kQ==",
-      "dev": true,
-      "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/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "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/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
-      "license": "MIT"
-    },
-    "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==",
-      "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==",
-      "license": "MIT"
-    },
-    "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==",
-      "dev": true,
-      "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/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/css.escape": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
-      "license": "MIT"
-    },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
-      "license": "MIT"
-    },
-    "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
-      "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/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/detect-libc": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "bin": {
-        "detect-libc": "bin/detect-libc.js"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/diff-sequences": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
-      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==",
-      "license": "MIT",
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/dom-accessibility-api": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "license": "MIT"
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.114",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.114.tgz",
-      "integrity": "sha512-DFptFef3iktoKlFQK/afbo274/XNWD00Am0xa7M8FZUepHlHT8PEuiNBoRfFHbH1okqN58AlhbJ4QTkcnXorjA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/enquire.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
-      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==",
-      "license": "MIT"
-    },
-    "node_modules/esbuild": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
-      "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.2",
-        "@esbuild/android-arm": "0.25.2",
-        "@esbuild/android-arm64": "0.25.2",
-        "@esbuild/android-x64": "0.25.2",
-        "@esbuild/darwin-arm64": "0.25.2",
-        "@esbuild/darwin-x64": "0.25.2",
-        "@esbuild/freebsd-arm64": "0.25.2",
-        "@esbuild/freebsd-x64": "0.25.2",
-        "@esbuild/linux-arm": "0.25.2",
-        "@esbuild/linux-arm64": "0.25.2",
-        "@esbuild/linux-ia32": "0.25.2",
-        "@esbuild/linux-loong64": "0.25.2",
-        "@esbuild/linux-mips64el": "0.25.2",
-        "@esbuild/linux-ppc64": "0.25.2",
-        "@esbuild/linux-riscv64": "0.25.2",
-        "@esbuild/linux-s390x": "0.25.2",
-        "@esbuild/linux-x64": "0.25.2",
-        "@esbuild/netbsd-arm64": "0.25.2",
-        "@esbuild/netbsd-x64": "0.25.2",
-        "@esbuild/openbsd-arm64": "0.25.2",
-        "@esbuild/openbsd-x64": "0.25.2",
-        "@esbuild/sunos-x64": "0.25.2",
-        "@esbuild/win32-arm64": "0.25.2",
-        "@esbuild/win32-ia32": "0.25.2",
-        "@esbuild/win32-x64": "0.25.2"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
-      "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.23.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.23.0.tgz",
-      "integrity": "sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.19.2",
-        "@eslint/config-helpers": "^0.2.0",
-        "@eslint/core": "^0.12.0",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.23.0",
-        "@eslint/plugin-kit": "^0.2.7",
-        "@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.3.0",
-        "eslint-visitor-keys": "^4.2.0",
-        "espree": "^10.3.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.19",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.19.tgz",
-      "integrity": "sha512-eyy8pcr/YxSYjBoqIFSrlbn9i/xvxUFa8CjzAYo9cFjgGXqq1hyjihcpZvxRLalpaWmueWR81xn7vuKmAFijDQ==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "eslint": ">=8.40"
-      }
-    },
-    "node_modules/eslint-scope": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
-      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
-      "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": "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/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
-      "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/eslint/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/eslint/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/eslint/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/eslint/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/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "acorn": "^8.14.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
-      "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/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/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-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "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/fastq": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
-      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "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/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/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/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "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==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "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": "15.15.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
-      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "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==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "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/immutable": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
-      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/import-fresh": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
-      "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/import-fresh/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==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "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/indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "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/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/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/jest-diff": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
-      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-get-type": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
-      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==",
-      "license": "MIT",
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-matcher-utils": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
-      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT",
-      "peer": true
-    },
-    "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==",
-      "dev": true,
-      "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==",
-      "dev": true,
-      "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-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/json2mq": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
-      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
-      "license": "MIT",
-      "dependencies": {
-        "string-convert": "^0.2.0"
-      }
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "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/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.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "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/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==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/lucide-react": {
-      "version": "0.511.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
-      "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "license": "MIT",
-      "bin": {
-        "lz-string": "bin/bin.js"
-      }
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "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/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.9",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.9.tgz",
-      "integrity": "sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg==",
-      "dev": true,
-      "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/node-addon-api": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
-    "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==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/openapi-fetch": {
-      "version": "0.13.5",
-      "resolved": "https://registry.npmjs.org/openapi-fetch/-/openapi-fetch-0.13.5.tgz",
-      "integrity": "sha512-AQK8T9GSKFREFlN1DBXTYsLjs7YV2tZcJ7zUWxbjMoQmj8dDSFRrzhLCbHPZWA1TMV3vACqfCxLEZcwf2wxV6Q==",
-      "license": "MIT",
-      "dependencies": {
-        "openapi-typescript-helpers": "^0.0.15"
-      }
-    },
-    "node_modules/openapi-typescript": {
-      "version": "6.7.6",
-      "resolved": "https://registry.npmjs.org/openapi-typescript/-/openapi-typescript-6.7.6.tgz",
-      "integrity": "sha512-c/hfooPx+RBIOPM09GSxABOZhYPblDoyaGhqBkD/59vtpN21jEuWKDlM0KYTvqJVlSYjKs0tBcIdeXKChlSPtw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-colors": "^4.1.3",
-        "fast-glob": "^3.3.2",
-        "js-yaml": "^4.1.0",
-        "supports-color": "^9.4.0",
-        "undici": "^5.28.4",
-        "yargs-parser": "^21.1.1"
-      },
-      "bin": {
-        "openapi-typescript": "bin/cli.js"
-      }
-    },
-    "node_modules/openapi-typescript-helpers": {
-      "version": "0.0.15",
-      "resolved": "https://registry.npmjs.org/openapi-typescript-helpers/-/openapi-typescript-helpers-0.0.15.tgz",
-      "integrity": "sha512-opyTPaunsklCBpTK8JGef6mfPhLSnyy5a0IN9vKtx3+4aExf+KxEqYwIy3hqkedXIB97u357uLMJsOnm3GVjsw==",
-      "license": "MIT"
-    },
-    "node_modules/openapi-typescript/node_modules/supports-color": {
-      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz",
-      "integrity": "sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
-    "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/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==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "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/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": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
-      "dev": true,
-      "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.8",
-        "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/pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "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/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/react": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
-      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
-      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
-      "license": "MIT",
-      "dependencies": {
-        "scheduler": "^0.25.0"
-      },
-      "peerDependencies": {
-        "react": "^19.0.0"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "license": "MIT"
-    },
-    "node_modules/react-loading-skeleton": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz",
-      "integrity": "sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/react-router": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.1.tgz",
-      "integrity": "sha512-Vmizn9ZNzxfh3cumddqv3kLOKvc7AskUT0dC1prTabhiEi0U4A33LmkDOJ79tXaeSqCqMBXBU/ySX88W85+EUg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/cookie": "^0.6.0",
-        "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0",
-        "turbo-stream": "2.4.0"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.1.tgz",
-      "integrity": "sha512-L3/4tig0Lvs6m6THK0HRV4eHUdpx0dlJasgCxXKnavwhh4tKYgpuZk75HRYNoRKDyDWi9QgzGXsQ1oQSBlWpAA==",
-      "license": "MIT",
-      "dependencies": {
-        "react-router": "7.4.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/react-slick": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.3.tgz",
-      "integrity": "sha512-B4x0L9GhkEWUMApeHxr/Ezp2NncpGc+5174R02j+zFiWuYboaq98vmxwlpafZfMjZic1bjdIqqmwLDcQY0QaFA==",
-      "license": "MIT",
-      "dependencies": {
-        "classnames": "^2.2.5",
-        "enquire.js": "^2.1.6",
-        "json2mq": "^0.2.0",
-        "lodash.debounce": "^4.0.8",
-        "resize-observer-polyfill": "^1.5.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/redent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-      "license": "MIT",
-      "dependencies": {
-        "indent-string": "^4.0.0",
-        "strip-indent": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
-      "license": "MIT"
-    },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/sass": {
-      "version": "1.85.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.85.1.tgz",
-      "integrity": "sha512-Uk8WpxM5v+0cMR0XjX9KfRIacmSG86RH4DCCZjLU2rFh5tyutt9siAXJ7G+YfxQ99Q6wrRMbMlVl6KqUms71ag==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
-      }
-    },
-    "node_modules/sass/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/sass/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
-      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
-      "license": "MIT"
-    },
-    "node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "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/slick-carousel": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
-      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "jquery": ">=1.8.0"
-      }
-    },
-    "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==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/source-map-support/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/string-convert": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
-      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==",
-      "license": "MIT"
-    },
-    "node_modules/strip-indent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-      "license": "MIT",
-      "dependencies": {
-        "min-indent": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "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==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/terser": {
-      "version": "5.39.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
-      "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/ts-api-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
-      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.12"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.8.4"
-      }
-    },
-    "node_modules/turbo-stream": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
-      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
-      "license": "ISC"
-    },
-    "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/typescript": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
-    "node_modules/typescript-eslint": {
-      "version": "8.29.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.29.0.tgz",
-      "integrity": "sha512-ep9rVd9B4kQsZ7ZnWCVxUE/xDLUUUsRzE0poAeNu+4CkFErLfuvPt/qtm2EpnSyfvsR0S6QzDFSrPCFBwf64fg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.29.0",
-        "@typescript-eslint/parser": "8.29.0",
-        "@typescript-eslint/utils": "8.29.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
-      }
-    },
-    "node_modules/undici": {
-      "version": "5.29.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
-      "integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@fastify/busboy": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.0"
-      }
-    },
-    "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "license": "MIT"
-    },
-    "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==",
-      "dev": true,
-      "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/vite": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
-      "integrity": "sha512-j023J/hCAa4pRIUH6J9HemwYfjB5llR2Ps0CWeikOtdR8+pAURAk0DoJC5/mm9kd+UgdnIy7d6HE4EAvlYhPhA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "esbuild": "^0.25.0",
-        "postcss": "^8.5.3",
-        "rollup": "^4.30.1"
-      },
-      "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/node_modules/rollup": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.39.0.tgz",
-      "integrity": "sha512-thI8kNc02yNvnmJp8dr3fNWJ9tCONDhp6TV35X6HkKGGs9E6q7YWCHbe5vKiTa7TAiNcFEmXKj3X/pG2b3ci0g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "1.0.7"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.39.0",
-        "@rollup/rollup-android-arm64": "4.39.0",
-        "@rollup/rollup-darwin-arm64": "4.39.0",
-        "@rollup/rollup-darwin-x64": "4.39.0",
-        "@rollup/rollup-freebsd-arm64": "4.39.0",
-        "@rollup/rollup-freebsd-x64": "4.39.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.39.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.39.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.39.0",
-        "@rollup/rollup-linux-arm64-musl": "4.39.0",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.39.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.39.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.39.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.39.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.39.0",
-        "@rollup/rollup-linux-x64-gnu": "4.39.0",
-        "@rollup/rollup-linux-x64-musl": "4.39.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.39.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.39.0",
-        "@rollup/rollup-win32-x64-msvc": "4.39.0",
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/web-vitals": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
-      "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg==",
-      "license": "Apache-2.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==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/yaml": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
-      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/yet-another-react-lightbox": {
-      "version": "3.23.1",
-      "resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.23.1.tgz",
-      "integrity": "sha512-W0eI89iSmCfSFAbDfcLYJzVXP71lIRykokqlnUw6ocw2Rx0xVhqldoR1/PrRf+XMdazrgwNWKtlcsKOYKLZ65Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "@types/react": "^16 || ^17 || ^18 || ^19",
-        "@types/react-dom": "^16 || ^17 || ^18 || ^19",
-        "react": "^16.8.0 || ^17 || ^18 || ^19",
-        "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "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"
-      }
-    }
-  }
-}
diff --git a/package.json b/package.json
index 3d69fc0..a225443 100644
--- a/package.json
+++ b/package.json
@@ -4,50 +4,83 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,json,md}\"",
+    "preview": "vite preview",
+    "prepare": "husky",
+    "test:unit": "vitest",
+    "test:unit:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:report": "playwright show-report"
   },
   "dependencies": {
-    "@tabler/icons-react": "^3.31.0",
-    "@tanstack/react-query": "^5.67.2",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^20.0.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "bootstrap": "^5.3.3",
-    "lucide-react": "^0.511.0",
-    "openapi-fetch": "^0.13.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@base-ui/react": "^1.2.0",
+    "@tabler/icons-react": "^3.36.1",
+    "@tailwindcss/vite": "^4.2.0",
+    "@tanstack/react-form": "^1.28.4",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/zod-form-adapter": "^0.42.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "next-themes": "^0.4.6",
+    "openapi-fetch": "^0.17.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-loading-skeleton": "^3.5.0",
-    "react-router-dom": "^7.3.0",
-    "react-slick": "^0.30.3",
+    "react-router-dom": "^7.13.0",
+    "react-slick": "^0.31.0",
     "slick-carousel": "^1.8.1",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "yet-another-react-lightbox": "^3.23.1"
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.0",
+    "web-vitals": "^5.1.0",
+    "yet-another-react-lightbox": "^3.29.1",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
-    "@types/bootstrap": "^5.2.10",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@playwright/test": "^1.58.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/react-slick": "^0.23.13",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9.21.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^15.15.0",
-    "openapi-typescript": "^6.7.5",
-    "sass": "^1.85.1",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "globals": "^17.3.0",
+    "husky": "^9.1.7",
+    "jsdom": "^28.1.0",
+    "lint-staged": "^16.3.1",
+    "openapi-typescript": "^7.13.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{css,json,md}": [
+      "prettier --write"
+    ]
   }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..2cadccf
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  globalSetup: "./e2e/fixtures/auth",
+  testDir: "./e2e",
+  retries: process.env.CI ? 1 : 0,
+  reporter: [["html", { open: "never" }]],
+  use: {
+    baseURL: process.env.PLAYWRIGHT_BASE_URL ?? "http://localhost:5173",
+    trace: "on-first-retry",
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..465869b
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,4722 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@base-ui/react':
+        specifier: ^1.2.0
+        version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tabler/icons-react':
+        specifier: ^3.36.1
+        version: 3.36.1(react@19.2.4)
+      '@tailwindcss/vite':
+        specifier: ^4.2.0
+        version: 4.2.0(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))
+      '@tanstack/react-form':
+        specifier: ^1.28.4
+        version: 1.28.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/react-query':
+        specifier: ^5.90.21
+        version: 5.90.21(react@19.2.4)
+      '@tanstack/zod-form-adapter':
+        specifier: ^0.42.1
+        version: 0.42.1(zod@3.25.76)
+      '@testing-library/dom':
+        specifier: ^10.4.1
+        version: 10.4.1
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@types/jest':
+        specifier: ^30.0.0
+        version: 30.0.0
+      '@types/node':
+        specifier: ^25.3.0
+        version: 25.3.0
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.575.0
+        version: 0.575.0(react@19.2.4)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      openapi-fetch:
+        specifier: ^0.17.0
+        version: 0.17.0
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
+      react-loading-skeleton:
+        specifier: ^3.5.0
+        version: 3.5.0(react@19.2.4)
+      react-router-dom:
+        specifier: ^7.13.0
+        version: 7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react-slick:
+        specifier: ^0.31.0
+        version: 0.31.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      slick-carousel:
+        specifier: ^1.8.1
+        version: 1.8.1(jquery@4.0.0)
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      tailwind-merge:
+        specifier: ^3.5.0
+        version: 3.5.0
+      tailwindcss:
+        specifier: ^4.2.0
+        version: 4.2.0
+      web-vitals:
+        specifier: ^5.1.0
+        version: 5.1.0
+      yet-another-react-lightbox:
+        specifier: ^3.29.1
+        version: 3.29.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      zod:
+        specifier: ^3.25.76
+        version: 3.25.76
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.21.0
+        version: 9.39.2
+      '@playwright/test':
+        specifier: ^1.58.2
+        version: 1.58.2
+      '@types/react':
+        specifier: ^19.2.14
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      '@types/react-slick':
+        specifier: ^0.23.13
+        version: 0.23.13
+      '@vitejs/plugin-basic-ssl':
+        specifier: ^2.0.0
+        version: 2.2.0(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))
+      '@vitejs/plugin-react':
+        specifier: ^5.1.4
+        version: 5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))
+      '@vitest/coverage-v8':
+        specifier: ^4.0.18
+        version: 4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@28.1.0)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))
+      eslint:
+        specifier: ^9.21.0
+        version: 9.39.2(jiti@2.6.1)
+      eslint-config-prettier:
+        specifier: ^10.1.8
+        version: 10.1.8(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-react-hooks:
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-react-refresh:
+        specifier: ^0.5.0
+        version: 0.5.0(eslint@9.39.2(jiti@2.6.1))
+      globals:
+        specifier: ^17.3.0
+        version: 17.3.0
+      husky:
+        specifier: ^9.1.7
+        version: 9.1.7
+      jsdom:
+        specifier: ^28.1.0
+        version: 28.1.0
+      lint-staged:
+        specifier: ^16.3.1
+        version: 16.3.1
+      openapi-typescript:
+        specifier: ^7.13.0
+        version: 7.13.0(typescript@5.9.3)
+      prettier:
+        specifier: ^3.8.1
+        version: 3.8.1
+      prettier-plugin-tailwindcss:
+        specifier: ^0.7.2
+        version: 0.7.2(prettier@3.8.1)
+      typescript:
+        specifier: ~5.9.3
+        version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.56.0
+        version: 8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2)
+      vitest:
+        specifier: ^4.0.18
+        version: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@28.1.0)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2)
+
+packages:
+
+  '@acemir/cssom@0.9.31':
+    resolution: {integrity: sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==}
+
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+
+  '@asamuzakjp/css-color@5.0.1':
+    resolution: {integrity: sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@6.8.1':
+    resolution: {integrity: sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.6':
+    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1':
+    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1':
+    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.28.6':
+    resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@base-ui/react@1.2.0':
+    resolution: {integrity: sha512-O6aEQHcm+QyGTFY28xuwRD3SEJGZOBDpyjN2WvpfWYFVhg+3zfXPysAILqtM0C1kWC82MccOE/v1j+GHXE4qIw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@base-ui/utils@0.2.5':
+    resolution: {integrity: sha512-oYC7w0gp76RI5MxprlGLV0wze0SErZaRl3AAkeP3OnNB/UBMb6RqNf6ZSIlxOc9Qp68Ab3C2VOcJQyRs7Xc7Vw==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
+
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
+  '@csstools/color-helpers@6.0.2':
+    resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
+    engines: {node: '>=20.19.0'}
+
+  '@csstools/css-calc@3.1.1':
+    resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-color-parser@4.0.2':
+    resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.0':
+    resolution: {integrity: sha512-H4tuz2nhWgNKLt1inYpoVCfbJbMwX/lQKp3g69rrrIMIYlFD9+zTykOKhNR8uGrAmbS/kT9n6hTFkmDkxLgeTA==}
+
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
+
+  '@esbuild/aix-ppc64@0.27.3':
+    resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.3':
+    resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.3':
+    resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.3':
+    resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.3':
+    resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.3':
+    resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.3':
+    resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.3':
+    resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.3':
+    resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.3':
+    resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.3':
+    resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.3':
+    resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.3':
+    resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.3':
+    resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.3':
+    resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.3':
+    resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.3':
+    resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.3':
+    resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.3':
+    resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.3':
+    resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.3':
+    resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.3':
+    resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.3':
+    resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.2':
+    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@exodus/bytes@1.15.0':
+    resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
+  '@floating-ui/core@1.7.4':
+    resolution: {integrity: sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==}
+
+  '@floating-ui/dom@1.7.5':
+    resolution: {integrity: sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==}
+
+  '@floating-ui/react-dom@2.1.7':
+    resolution: {integrity: sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@jest/diff-sequences@30.0.1':
+    resolution: {integrity: sha512-n5H8QLDJ47QqbCNn5SuFjCRDrOLEZ0h8vAHCK5RL9Ls7Xa8AQLa/YxAc9UjFqoEDM48muwtBGjtMY5cr0PLDCw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/expect-utils@30.2.0':
+    resolution: {integrity: sha512-1JnRfhqpD8HGpOmQp180Fo9Zt69zNtC+9lR+kT7NVL05tNXIi+QC8Csz7lfidMoVLPD3FnOtcmp0CEFnxExGEA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/get-type@30.1.0':
+    resolution: {integrity: sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/pattern@30.0.1':
+    resolution: {integrity: sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/schemas@30.0.5':
+    resolution: {integrity: sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/types@30.2.0':
+    resolution: {integrity: sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@parcel/watcher-android-arm64@2.5.6':
+    resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.6':
+    resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
+    engines: {node: '>= 10.0.0'}
+
+  '@playwright/test@1.58.2':
+    resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@redocly/ajv@8.17.4':
+    resolution: {integrity: sha512-BieiCML/IgP6x99HZByJSt7fJE4ipgzO7KAFss92Bs+PEI35BhY7vGIysFXLT+YmS7nHtQjZjhOQyPPEf7xGHA==}
+
+  '@redocly/config@0.22.2':
+    resolution: {integrity: sha512-roRDai8/zr2S9YfmzUfNhKjOF0NdcOIqF7bhf4MVC5UxpjIysDjyudvlAiVbpPHp3eDRWbdzUgtkK1a7YiDNyQ==}
+
+  '@redocly/openapi-core@1.34.7':
+    resolution: {integrity: sha512-gn2P0OER6qxF/+f4GqNv9XsnU5+6oszD/0SunulOvPYJDhrNkNVrVZV5waX25uqw5UDn2+roViWlRDHKFfHH0g==}
+    engines: {node: '>=18.17.0', npm: '>=9.5.0'}
+
+  '@rolldown/pluginutils@1.0.0-rc.3':
+    resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
+
+  '@rollup/rollup-android-arm-eabi@4.57.1':
+    resolution: {integrity: sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.57.1':
+    resolution: {integrity: sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.57.1':
+    resolution: {integrity: sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.57.1':
+    resolution: {integrity: sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.57.1':
+    resolution: {integrity: sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.57.1':
+    resolution: {integrity: sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.57.1':
+    resolution: {integrity: sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.57.1':
+    resolution: {integrity: sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.57.1':
+    resolution: {integrity: sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.57.1':
+    resolution: {integrity: sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.57.1':
+    resolution: {integrity: sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-loong64-musl@4.57.1':
+    resolution: {integrity: sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.57.1':
+    resolution: {integrity: sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-musl@4.57.1':
+    resolution: {integrity: sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.57.1':
+    resolution: {integrity: sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.57.1':
+    resolution: {integrity: sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.57.1':
+    resolution: {integrity: sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.57.1':
+    resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.57.1':
+    resolution: {integrity: sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openbsd-x64@4.57.1':
+    resolution: {integrity: sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.57.1':
+    resolution: {integrity: sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.57.1':
+    resolution: {integrity: sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.57.1':
+    resolution: {integrity: sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.57.1':
+    resolution: {integrity: sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.57.1':
+    resolution: {integrity: sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@sinclair/typebox@0.34.48':
+    resolution: {integrity: sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==}
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@tabler/icons-react@3.36.1':
+    resolution: {integrity: sha512-/8nOXeNeMoze9xY/QyEKG65wuvRhkT3q9aytaur6Gj8bYU2A98YVJyLc9MRmc5nVvpy+bRlrrwK/Ykr8WGyUWg==}
+    peerDependencies:
+      react: '>= 16'
+
+  '@tabler/icons@3.36.1':
+    resolution: {integrity: sha512-f4Jg3Fof/Vru5ioix/UO4GX+sdDsF9wQo47FbtvG+utIYYVQ/QVAC0QYgcBbAjQGfbdOh2CCf0BgiFOF9Ixtjw==}
+
+  '@tailwindcss/node@4.2.0':
+    resolution: {integrity: sha512-Yv+fn/o2OmL5fh/Ir62VXItdShnUxfpkMA4Y7jdeC8O81WPB8Kf6TT6GSHvnqgSwDzlB5iT7kDpeXxLsUS0T6Q==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.0':
+    resolution: {integrity: sha512-F0QkHAVaW/JNBWl4CEKWdZ9PMb0khw5DCELAOnu+RtjAfx5Zgw+gqCHFvqg3AirU1IAd181fwOtJQ5I8Yx5wtw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.0':
+    resolution: {integrity: sha512-I0QylkXsBsJMZ4nkUNSR04p6+UptjcwhcVo3Zu828ikiEqHjVmQL9RuQ6uT/cVIiKpvtVA25msu/eRV97JeNSA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.0':
+    resolution: {integrity: sha512-6TmQIn4p09PBrmnkvbYQ0wbZhLtbaksCDx7Y7R3FYYx0yxNA7xg5KP7dowmQ3d2JVdabIHvs3Hx4K3d5uCf8xg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.0':
+    resolution: {integrity: sha512-qBudxDvAa2QwGlq9y7VIzhTvp2mLJ6nD/G8/tI70DCDoneaUeLWBJaPcbfzqRIWraj+o969aDQKvKW9dvkUizw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.0':
+    resolution: {integrity: sha512-7XKkitpy5NIjFZNUQPeUyNJNJn1CJeV7rmMR+exHfTuOsg8rxIO9eNV5TSEnqRcaOK77zQpsyUkBWmPy8FgdSg==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.0':
+    resolution: {integrity: sha512-Mff5a5Q3WoQR01pGU1gr29hHM1N93xYrKkGXfPw/aRtK4bOc331Ho4Tgfsm5WDGvpevqMpdlkCojT3qlCQbCpA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.0':
+    resolution: {integrity: sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.0':
+    resolution: {integrity: sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.0':
+    resolution: {integrity: sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.0':
+    resolution: {integrity: sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.0':
+    resolution: {integrity: sha512-2UU/15y1sWDEDNJXxEIrfWKC2Yb4YgIW5Xz2fKFqGzFWfoMHWFlfa1EJlGO2Xzjkq/tvSarh9ZTjvbxqWvLLXA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.0':
+    resolution: {integrity: sha512-CrFadmFoc+z76EV6LPG1jx6XceDsaCG3lFhyLNo/bV9ByPrE+FnBPckXQVP4XRkN76h3Fjt/a+5Er/oA/nCBvQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.0':
+    resolution: {integrity: sha512-AZqQzADaj742oqn2xjl5JbIOzZB/DGCYF/7bpvhA8KvjUj9HJkag6bBuwZvH1ps6dfgxNHyuJVlzSr2VpMgdTQ==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.0':
+    resolution: {integrity: sha512-da9mFCaHpoOgtQiWtDGIikTrSpUFBtIZCG3jy/u2BGV+l/X1/pbxzmIUxNt6JWm19N3WtGi4KlJdSH/Si83WOA==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
+  '@tanstack/devtools-event-client@0.4.1':
+    resolution: {integrity: sha512-GRxmPw4OHZ2oZeIEUkEwt/NDvuEqzEYRAjzUVMs+I0pd4C7k1ySOiuJK2CqF+K/yEAR3YZNkW3ExrpDarh9Vwg==}
+    engines: {node: '>=18'}
+
+  '@tanstack/form-core@0.42.1':
+    resolution: {integrity: sha512-jTU0jyHqFceujdtPNv3jPVej1dTqBwa8TYdIyWB5BCwRVUBZEp1PiYEBkC9r92xu5fMpBiKc+JKud3eeVjuMiA==}
+
+  '@tanstack/form-core@1.28.4':
+    resolution: {integrity: sha512-2eox5ePrJ6kvA1DXD5QHk/GeGr3VFZ0uYR63UgQOe7bUg6h1JfXaIMqTjZK9sdGyE4oRNqFpoW54H0pZM7nObQ==}
+
+  '@tanstack/pacer-lite@0.1.1':
+    resolution: {integrity: sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==}
+    engines: {node: '>=18'}
+
+  '@tanstack/query-core@5.90.20':
+    resolution: {integrity: sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==}
+
+  '@tanstack/react-form@1.28.4':
+    resolution: {integrity: sha512-ZGBwl9JM2u0kol7jAWpqAkr2JSHfXJaLPsFDZWPf+ewpVkwngTTW/rGgtoDe5uVpHoDIpOhzpPCAh6O1SjGEOg==}
+    peerDependencies:
+      '@tanstack/react-start': '*'
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@tanstack/react-start':
+        optional: true
+
+  '@tanstack/react-query@5.90.21':
+    resolution: {integrity: sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg==}
+    peerDependencies:
+      react: ^18 || ^19
+
+  '@tanstack/react-store@0.9.1':
+    resolution: {integrity: sha512-YzJLnRvy5lIEFTLWBAZmcOjK3+2AepnBv/sr6NZmiqJvq7zTQggyK99Gw8fqYdMdHPQWXjz0epFKJXC+9V2xDA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/store@0.7.7':
+    resolution: {integrity: sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ==}
+
+  '@tanstack/store@0.9.1':
+    resolution: {integrity: sha512-+qcNkOy0N1qSGsP7omVCW0SDrXtaDcycPqBDE726yryiA5eTDFpjBReaYjghVJwNf1pcPMyzIwTGlYjCSQR0Fg==}
+
+  '@tanstack/zod-form-adapter@0.42.1':
+    resolution: {integrity: sha512-hPRM0lawVKP64yurW4c6KHZH6altMo2MQN14hfi+GMBTKjO9S7bW1x5LPZ5cayoJE3mBvdlahpSGT5rYZtSbXQ==}
+    peerDependencies:
+      zod: ^3.x
+
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/istanbul-lib-coverage@2.0.6':
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+
+  '@types/istanbul-lib-report@3.0.3':
+    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+
+  '@types/istanbul-reports@3.0.4':
+    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
+
+  '@types/jest@30.0.0':
+    resolution: {integrity: sha512-XTYugzhuwqWjws0CVz8QpM36+T+Dz5mTEBKhNs/esGLnCIlGdRy+Dq78NRjd7ls7r8BC8ZRMOrKlkO1hU0JOwA==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/node@25.3.0':
+    resolution: {integrity: sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react-slick@0.23.13':
+    resolution: {integrity: sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==}
+
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+
+  '@types/stack-utils@2.0.3':
+    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
+
+  '@types/yargs-parser@21.0.3':
+    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+
+  '@types/yargs@17.0.35':
+    resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
+
+  '@typescript-eslint/eslint-plugin@8.56.0':
+    resolution: {integrity: sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.56.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.56.0':
+    resolution: {integrity: sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.56.0':
+    resolution: {integrity: sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.56.0':
+    resolution: {integrity: sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.56.0':
+    resolution: {integrity: sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.56.0':
+    resolution: {integrity: sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.56.0':
+    resolution: {integrity: sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.56.0':
+    resolution: {integrity: sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.56.0':
+    resolution: {integrity: sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.56.0':
+    resolution: {integrity: sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@vitejs/plugin-basic-ssl@2.2.0':
+    resolution: {integrity: sha512-nmyQ1HGRkfUxjsv3jw0+hMhEdZdrtkvMTdkzRUaRWfiO6PCWw2V2Pz3gldCq96Tn9S8htcgdTxw/gmbLLEbfYw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@vitejs/plugin-react@5.1.4':
+    resolution: {integrity: sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
+  '@vitest/coverage-v8@4.0.18':
+    resolution: {integrity: sha512-7i+N2i0+ME+2JFZhfuz7Tg/FqKtilHjGyGvoHYQ6iLV0zahbsJ9sljC9OcFcPDbhYKCet+sG8SsVqlyGvPflZg==}
+    peerDependencies:
+      '@vitest/browser': 4.0.18
+      vitest: 4.0.18
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
+  '@vitest/expect@4.0.18':
+    resolution: {integrity: sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==}
+
+  '@vitest/mocker@4.0.18':
+    resolution: {integrity: sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.0.18':
+    resolution: {integrity: sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==}
+
+  '@vitest/runner@4.0.18':
+    resolution: {integrity: sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==}
+
+  '@vitest/snapshot@4.0.18':
+    resolution: {integrity: sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==}
+
+  '@vitest/spy@4.0.18':
+    resolution: {integrity: sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==}
+
+  '@vitest/utils@4.0.18':
+    resolution: {integrity: sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-escapes@7.3.0:
+    resolution: {integrity: sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==}
+    engines: {node: '>=18'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  ast-v8-to-istanbul@0.3.12:
+    resolution: {integrity: sha512-BRRC8VRZY2R4Z4lFIL35MwNXmwVqBityvOIwETtsCSwvjl0IdgFsy9NhdaA6j74nUdtJJlIypeRhpDam19Wq3g==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  baseline-browser-mapping@2.10.0:
+    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  caniuse-lite@1.0.30001770:
+    resolution: {integrity: sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==}
+
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  ci-info@4.4.0:
+    resolution: {integrity: sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==}
+    engines: {node: '>=8'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-truncate@5.2.0:
+    resolution: {integrity: sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==}
+    engines: {node: '>=20'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  colorette@1.4.0:
+    resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
+
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
+  cssstyle@6.2.0:
+    resolution: {integrity: sha512-Fm5NvhYathRnXNVndkUsCCuR63DCLVVwGOOwQw782coXFi5HhkXdu289l59HlXZBawsyNccXfWRYvLzcDCdDig==}
+    engines: {node: '>=20'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
+  electron-to-chromium@1.5.286:
+    resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  enhanced-resolve@5.19.0:
+    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
+    engines: {node: '>=10.13.0'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  esbuild@0.27.3:
+    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-config-prettier@10.1.8:
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-plugin-react-hooks@7.0.1:
+    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react-refresh@0.5.0:
+    resolution: {integrity: sha512-ZYvmh7VfVgqR/7wR71I3Zl6hK/C5CcxdWYKZSpHawS5JCNgE4efhQWg/+/WPpgGAp9Ngp/rRZYyaIwmPQBq/lA==}
+    peerDependencies:
+      eslint: '>=9'
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@5.0.0:
+    resolution: {integrity: sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@9.39.2:
+    resolution: {integrity: sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
+  expect@30.2.0:
+    resolution: {integrity: sha512-u/feCi0GPsI+988gU2FLcsHyAHTU0MX1Wg68NhAnN7z/+C5wqG+CY8J53N9ioe8RXgaoz0nBR/TYMf3AycUuPw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-east-asian-width@1.5.0:
+    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
+    engines: {node: '>=18'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@17.3.0:
+    resolution: {integrity: sha512-yMqGUQVVCkD4tqjOJf3TnrvaaHDMYp4VlUSObbkIiuCPe/ofdMBFIAcBbCSRFWOnos6qRiTVStDwqPLUclaxIw==}
+    engines: {node: '>=18'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  immutable@5.1.4:
+    resolution: {integrity: sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  index-to-position@1.2.0:
+    resolution: {integrity: sha512-Yg7+ztRkqslMAS2iFaU+Oa4KTSidr63OsFGlOrJoW981kIYO3CGCS3wA95P1mUi/IVSJkn0D479KTJpVpvFNuw==}
+    engines: {node: '>=18'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@5.1.0:
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
+    engines: {node: '>=18'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
+
+  jest-diff@30.2.0:
+    resolution: {integrity: sha512-dQHFo3Pt4/NLlG5z4PxZ/3yZTZ1C7s9hveiOj+GCN+uT109NC2QgsoVZsVOAvbJ3RgKkvyLGXZV9+piDpWbm6A==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-matcher-utils@30.2.0:
+    resolution: {integrity: sha512-dQ94Nq4dbzmUWkQ0ANAWS9tBRfqCrn0bV9AMYdOi/MHW726xn7eQmMeRTpX2ViC00bpNaWXq+7o4lIQ3AX13Hg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-message-util@30.2.0:
+    resolution: {integrity: sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-mock@30.2.0:
+    resolution: {integrity: sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-regex-util@30.0.1:
+    resolution: {integrity: sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-util@30.2.0:
+    resolution: {integrity: sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  jquery@4.0.0:
+    resolution: {integrity: sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==}
+
+  js-levenshtein@1.1.6:
+    resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
+    engines: {node: '>=0.10.0'}
+
+  js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsdom@28.1.0:
+    resolution: {integrity: sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json2mq@0.2.0:
+    resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-android-arm64@1.31.1:
+    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.31.1:
+    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.31.1:
+    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.31.1:
+    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.31.1:
+    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lint-staged@16.3.1:
+    resolution: {integrity: sha512-bqvvquXzFBAlSbluugR4KXAe4XnO/QZcKVszpkBtqLWa2KEiVy8n6Xp38OeUbv/gOJOX4Vo9u5pFt/ADvbm42Q==}
+    engines: {node: '>=20.17'}
+    hasBin: true
+
+  listr2@9.0.5:
+    resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
+    engines: {node: '>=20.0.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
+  lru-cache@11.2.6:
+    resolution: {integrity: sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lucide-react@0.575.0:
+    resolution: {integrity: sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magicast@0.5.2:
+    resolution: {integrity: sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  openapi-fetch@0.17.0:
+    resolution: {integrity: sha512-PsbZR1wAPcG91eEthKhN+Zn92FMHxv+/faECIwjXdxfTODGSGegYv0sc1Olz+HYPvKOuoXfp+0pA2XVt2cI0Ig==}
+
+  openapi-typescript-helpers@0.1.0:
+    resolution: {integrity: sha512-OKTGPthhivLw/fHz6c3OPtg72vi86qaMlqbJuVJ23qOvQ+53uw1n7HdmkJFibloF7QEjDrDkzJiOJuockM/ljw==}
+
+  openapi-typescript@7.13.0:
+    resolution: {integrity: sha512-EFP392gcqXS7ntPvbhBzbF8TyBA+baIYEm791Hy5YkjDYKTnk/Tn5OQeKm5BIZvJihpp8Zzr4hzx0Irde1LNGQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.x
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@8.3.0:
+    resolution: {integrity: sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==}
+    engines: {node: '>=18'}
+
+  parse5@8.0.0:
+    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  playwright-core@1.58.2:
+    resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.58.2:
+    resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier-plugin-tailwindcss@0.7.2:
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  pretty-format@30.2.0:
+    resolution: {integrity: sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  react-dom@19.2.4:
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+    peerDependencies:
+      react: ^19.2.4
+
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-loading-skeleton@3.5.0:
+    resolution: {integrity: sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
+  react-router-dom@7.13.0:
+    resolution: {integrity: sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.13.0:
+    resolution: {integrity: sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-slick@0.31.0:
+    resolution: {integrity: sha512-zo6VLT8wuSBJffg/TFPbzrw2dEnfZ/cUKmYsKByh3AgatRv29m2LoFbq5vRMa3R3A4wp4d8gwbJKO2fWZFaI3g==}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rollup@4.57.1:
+    resolution: {integrity: sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  sass@1.97.3:
+    resolution: {integrity: sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  slice-ansi@7.1.2:
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
+    engines: {node: '>=18'}
+
+  slice-ansi@8.0.0:
+    resolution: {integrity: sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==}
+    engines: {node: '>=20'}
+
+  slick-carousel@1.8.1:
+    resolution: {integrity: sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==}
+    peerDependencies:
+      jquery: '>=1.8.0'
+
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  stack-utils@2.0.6:
+    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
+    engines: {node: '>=10'}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
+  string-convert@0.2.1:
+    resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string-width@8.2.0:
+    resolution: {integrity: sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==}
+    engines: {node: '>=20'}
+
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
+
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+
+  tailwindcss@4.2.0:
+    resolution: {integrity: sha512-yYzTZ4++b7fNYxFfpnberEEKu43w44aqDMNM9MHMmcKuCH7lL8jJ4yJ7LGHv7rSwiqM0nkiobF9I6cLlpS2P7Q==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tinyrainbow@3.0.3:
+    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@7.0.25:
+    resolution: {integrity: sha512-ZjCZK0rppSBu7rjHYDYsEaMOIbbT+nWF57hKkv4IUmZWBNrBWBOjIElc0mKRgLM8bm7x/BBlof6t2gi/Oq/Asw==}
+
+  tldts@7.0.25:
+    resolution: {integrity: sha512-keinCnPbwXEUG3ilrWQZU+CqcTTzHq9m2HhoUP2l7Xmi8l1LuijAXLpAJ5zRW+ifKTNscs4NdCkfkDCBYm352w==}
+    hasBin: true
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  tough-cookie@6.0.0:
+    resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==}
+    engines: {node: '>=16'}
+
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  typescript-eslint@8.56.0:
+    resolution: {integrity: sha512-c7toRLrotJ9oixgdW7liukZpsnq5CZ7PuKztubGYlNppuTqhIoWfhgHo/7EU0v06gS2l/x0i2NEFK1qMIf0rIg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@7.18.2:
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
+
+  undici@7.22.0:
+    resolution: {integrity: sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==}
+    engines: {node: '>=20.18.1'}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  vite@7.3.1:
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      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
+
+  vitest@4.0.18:
+    resolution: {integrity: sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.0.18
+      '@vitest/browser-preview': 4.0.18
+      '@vitest/browser-webdriverio': 4.0.18
+      '@vitest/ui': 4.0.18
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  web-vitals@5.1.0:
+    resolution: {integrity: sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==}
+
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yaml-ast-parser@0.0.43:
+    resolution: {integrity: sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==}
+
+  yaml@2.8.2:
+    resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yet-another-react-lightbox@3.29.1:
+    resolution: {integrity: sha512-0cpa+wlleiy2cWNjS9qrcY0+SgZQH/4PDx2uupLMI9Ofip1f7pCgZ95PlVp/EsFsO4ufwOTea51bkLhcEXJJSg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@types/react': ^16 || ^17 || ^18 || ^19
+      '@types/react-dom': ^16 || ^17 || ^18 || ^19
+      react: ^16.8.0 || ^17 || ^18 || ^19
+      react-dom: ^16.8.0 || ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zod@4.3.6:
+    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
+
+snapshots:
+
+  '@acemir/cssom@0.9.31': {}
+
+  '@adobe/css-tools@4.4.4': {}
+
+  '@asamuzakjp/css-color@5.0.1':
+    dependencies:
+      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      lru-cache: 11.2.6
+
+  '@asamuzakjp/dom-selector@6.8.1':
+    dependencies:
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.2.6
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
+
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.0': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3(supports-color@10.2.2)
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.28.6': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.6':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/runtime@7.28.6': {}
+
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@base-ui/react@1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@base-ui/utils': 0.2.5(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/utils': 0.2.10
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tabbable: 6.4.0
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@base-ui/utils@0.2.5(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@floating-ui/utils': 0.2.10
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      reselect: 5.1.1
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@bcoe/v8-coverage@1.0.2': {}
+
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+
+  '@csstools/color-helpers@6.0.2': {}
+
+  '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.0.2
+      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.0': {}
+
+  '@csstools/css-tokenizer@4.0.0': {}
+
+  '@esbuild/aix-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm@0.27.3':
+    optional: true
+
+  '@esbuild/android-x64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.3':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.3':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3(supports-color@10.2.2)
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.3':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.3(supports-color@10.2.2)
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.2': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.1':
+    dependencies:
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@exodus/bytes@1.15.0': {}
+
+  '@floating-ui/core@1.7.4':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.5':
+    dependencies:
+      '@floating-ui/core': 1.7.4
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@floating-ui/dom': 1.7.5
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@jest/diff-sequences@30.0.1': {}
+
+  '@jest/expect-utils@30.2.0':
+    dependencies:
+      '@jest/get-type': 30.1.0
+
+  '@jest/get-type@30.1.0': {}
+
+  '@jest/pattern@30.0.1':
+    dependencies:
+      '@types/node': 25.3.0
+      jest-regex-util: 30.0.1
+
+  '@jest/schemas@30.0.5':
+    dependencies:
+      '@sinclair/typebox': 0.34.48
+
+  '@jest/types@30.2.0':
+    dependencies:
+      '@jest/pattern': 30.0.1
+      '@jest/schemas': 30.0.5
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 25.3.0
+      '@types/yargs': 17.0.35
+      chalk: 4.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@parcel/watcher-android-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher@2.5.6':
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.3
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.6
+      '@parcel/watcher-darwin-arm64': 2.5.6
+      '@parcel/watcher-darwin-x64': 2.5.6
+      '@parcel/watcher-freebsd-x64': 2.5.6
+      '@parcel/watcher-linux-arm-glibc': 2.5.6
+      '@parcel/watcher-linux-arm-musl': 2.5.6
+      '@parcel/watcher-linux-arm64-glibc': 2.5.6
+      '@parcel/watcher-linux-arm64-musl': 2.5.6
+      '@parcel/watcher-linux-x64-glibc': 2.5.6
+      '@parcel/watcher-linux-x64-musl': 2.5.6
+      '@parcel/watcher-win32-arm64': 2.5.6
+      '@parcel/watcher-win32-ia32': 2.5.6
+      '@parcel/watcher-win32-x64': 2.5.6
+    optional: true
+
+  '@playwright/test@1.58.2':
+    dependencies:
+      playwright: 1.58.2
+
+  '@redocly/ajv@8.17.4':
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  '@redocly/config@0.22.2': {}
+
+  '@redocly/openapi-core@1.34.7(supports-color@10.2.2)':
+    dependencies:
+      '@redocly/ajv': 8.17.4
+      '@redocly/config': 0.22.2
+      colorette: 1.4.0
+      https-proxy-agent: 7.0.6(supports-color@10.2.2)
+      js-levenshtein: 1.1.6
+      js-yaml: 4.1.1
+      minimatch: 5.1.6
+      pluralize: 8.0.0
+      yaml-ast-parser: 0.0.43
+    transitivePeerDependencies:
+      - supports-color
+
+  '@rolldown/pluginutils@1.0.0-rc.3': {}
+
+  '@rollup/rollup-android-arm-eabi@4.57.1':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.57.1':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.57.1':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.57.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.57.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.57.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.57.1':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.57.1':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.57.1':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.57.1':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.57.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.57.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.57.1':
+    optional: true
+
+  '@sinclair/typebox@0.34.48': {}
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@tabler/icons-react@3.36.1(react@19.2.4)':
+    dependencies:
+      '@tabler/icons': 3.36.1
+      react: 19.2.4
+
+  '@tabler/icons@3.36.1': {}
+
+  '@tailwindcss/node@4.2.0':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.0
+
+  '@tailwindcss/oxide-android-arm64@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.0':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.0':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.0
+      '@tailwindcss/oxide-darwin-arm64': 4.2.0
+      '@tailwindcss/oxide-darwin-x64': 4.2.0
+      '@tailwindcss/oxide-freebsd-x64': 4.2.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.0
+
+  '@tailwindcss/vite@4.2.0(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))':
+    dependencies:
+      '@tailwindcss/node': 4.2.0
+      '@tailwindcss/oxide': 4.2.0
+      tailwindcss: 4.2.0
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2)
+
+  '@tanstack/devtools-event-client@0.4.1': {}
+
+  '@tanstack/form-core@0.42.1':
+    dependencies:
+      '@tanstack/store': 0.7.7
+
+  '@tanstack/form-core@1.28.4':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.1
+      '@tanstack/pacer-lite': 0.1.1
+      '@tanstack/store': 0.9.1
+
+  '@tanstack/pacer-lite@0.1.1': {}
+
+  '@tanstack/query-core@5.90.20': {}
+
+  '@tanstack/react-form@1.28.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/form-core': 1.28.4
+      '@tanstack/react-store': 0.9.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+    transitivePeerDependencies:
+      - react-dom
+
+  '@tanstack/react-query@5.90.21(react@19.2.4)':
+    dependencies:
+      '@tanstack/query-core': 5.90.20
+      react: 19.2.4
+
+  '@tanstack/react-store@0.9.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/store': 0.9.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      use-sync-external-store: 1.6.0(react@19.2.4)
+
+  '@tanstack/store@0.7.7': {}
+
+  '@tanstack/store@0.9.1': {}
+
+  '@tanstack/zod-form-adapter@0.42.1(zod@3.25.76)':
+    dependencies:
+      '@tanstack/form-core': 0.42.1
+      zod: 3.25.76
+
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.28.6
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@testing-library/dom': 10.4.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
+  '@types/aria-query@5.0.4': {}
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/istanbul-lib-coverage@2.0.6': {}
+
+  '@types/istanbul-lib-report@3.0.3':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+
+  '@types/istanbul-reports@3.0.4':
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.3
+
+  '@types/jest@30.0.0':
+    dependencies:
+      expect: 30.2.0
+      pretty-format: 30.2.0
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/node@25.3.0':
+    dependencies:
+      undici-types: 7.18.2
+
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
+    dependencies:
+      '@types/react': 19.2.14
+
+  '@types/react-slick@0.23.13':
+    dependencies:
+      '@types/react': 19.2.14
+
+  '@types/react@19.2.14':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/stack-utils@2.0.3': {}
+
+  '@types/yargs-parser@21.0.3': {}
+
+  '@types/yargs@17.0.35':
+    dependencies:
+      '@types/yargs-parser': 21.0.3
+
+  '@typescript-eslint/eslint-plugin@8.56.0(@typescript-eslint/parser@8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/type-utils': 8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.0
+      eslint: 9.39.2(jiti@2.6.1)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.0
+      debug: 4.4.3(supports-color@10.2.2)
+      eslint: 9.39.2(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.56.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.56.0
+      debug: 4.4.3(supports-color@10.2.2)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.56.0':
+    dependencies:
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/visitor-keys': 8.56.0
+
+  '@typescript-eslint/tsconfig-utils@8.56.0(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3(supports-color@10.2.2)
+      eslint: 9.39.2(jiti@2.6.1)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.56.0': {}
+
+  '@typescript-eslint/typescript-estree@8.56.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/visitor-keys': 8.56.0
+      debug: 4.4.3(supports-color@10.2.2)
+      minimatch: 9.0.5
+      semver: 7.7.4
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.56.0':
+    dependencies:
+      '@typescript-eslint/types': 8.56.0
+      eslint-visitor-keys: 5.0.0
+
+  '@vitejs/plugin-basic-ssl@2.2.0(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))':
+    dependencies:
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2)
+
+  '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
+      '@rolldown/pluginutils': 1.0.0-rc.3
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/coverage-v8@4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@28.1.0)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))':
+    dependencies:
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.0.18
+      ast-v8-to-istanbul: 0.3.12
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-reports: 3.2.0
+      magicast: 0.5.2
+      obug: 2.1.1
+      std-env: 3.10.0
+      tinyrainbow: 3.0.3
+      vitest: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@28.1.0)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2)
+
+  '@vitest/expect@4.0.18':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.0.18
+      '@vitest/utils': 4.0.18
+      chai: 6.2.2
+      tinyrainbow: 3.0.3
+
+  '@vitest/mocker@4.0.18(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))':
+    dependencies:
+      '@vitest/spy': 4.0.18
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2)
+
+  '@vitest/pretty-format@4.0.18':
+    dependencies:
+      tinyrainbow: 3.0.3
+
+  '@vitest/runner@4.0.18':
+    dependencies:
+      '@vitest/utils': 4.0.18
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.0.18':
+    dependencies:
+      '@vitest/pretty-format': 4.0.18
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.0.18': {}
+
+  '@vitest/utils@4.0.18':
+    dependencies:
+      '@vitest/pretty-format': 4.0.18
+      tinyrainbow: 3.0.3
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  agent-base@7.1.4: {}
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ansi-colors@4.1.3: {}
+
+  ansi-escapes@7.3.0:
+    dependencies:
+      environment: 1.1.0
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@5.2.0: {}
+
+  ansi-styles@6.2.3: {}
+
+  argparse@2.0.1: {}
+
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  assertion-error@2.0.1: {}
+
+  ast-v8-to-istanbul@0.3.12:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 10.0.0
+
+  balanced-match@1.0.2: {}
+
+  baseline-browser-mapping@2.10.0: {}
+
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.10.0
+      caniuse-lite: 1.0.30001770
+      electron-to-chromium: 1.5.286
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  callsites@3.1.0: {}
+
+  caniuse-lite@1.0.30001770: {}
+
+  chai@6.2.2: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  change-case@5.4.4: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+    optional: true
+
+  ci-info@4.4.0: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  classnames@2.5.1: {}
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-truncate@5.2.0:
+    dependencies:
+      slice-ansi: 8.0.0
+      string-width: 8.2.0
+
+  clsx@2.1.1: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  colorette@1.4.0: {}
+
+  colorette@2.0.20: {}
+
+  commander@14.0.3: {}
+
+  concat-map@0.0.1: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie@1.1.1: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
+  css.escape@1.5.1: {}
+
+  cssstyle@6.2.0:
+    dependencies:
+      '@asamuzakjp/css-color': 5.0.1
+      '@csstools/css-syntax-patches-for-csstree': 1.1.0
+      css-tree: 3.2.1
+      lru-cache: 11.2.6
+
+  csstype@3.2.3: {}
+
+  data-urls@7.0.0:
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  debug@4.4.3(supports-color@10.2.2):
+    dependencies:
+      ms: 2.1.3
+    optionalDependencies:
+      supports-color: 10.2.2
+
+  decimal.js@10.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.1.2: {}
+
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
+  electron-to-chromium@1.5.286: {}
+
+  emoji-regex@10.6.0: {}
+
+  enhanced-resolve@5.19.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  entities@6.0.1: {}
+
+  environment@1.1.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  esbuild@0.27.3:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.3
+      '@esbuild/android-arm': 0.27.3
+      '@esbuild/android-arm64': 0.27.3
+      '@esbuild/android-x64': 0.27.3
+      '@esbuild/darwin-arm64': 0.27.3
+      '@esbuild/darwin-x64': 0.27.3
+      '@esbuild/freebsd-arm64': 0.27.3
+      '@esbuild/freebsd-x64': 0.27.3
+      '@esbuild/linux-arm': 0.27.3
+      '@esbuild/linux-arm64': 0.27.3
+      '@esbuild/linux-ia32': 0.27.3
+      '@esbuild/linux-loong64': 0.27.3
+      '@esbuild/linux-mips64el': 0.27.3
+      '@esbuild/linux-ppc64': 0.27.3
+      '@esbuild/linux-riscv64': 0.27.3
+      '@esbuild/linux-s390x': 0.27.3
+      '@esbuild/linux-x64': 0.27.3
+      '@esbuild/netbsd-arm64': 0.27.3
+      '@esbuild/netbsd-x64': 0.27.3
+      '@esbuild/openbsd-arm64': 0.27.3
+      '@esbuild/openbsd-x64': 0.27.3
+      '@esbuild/openharmony-arm64': 0.27.3
+      '@esbuild/sunos-x64': 0.27.3
+      '@esbuild/win32-arm64': 0.27.3
+      '@esbuild/win32-ia32': 0.27.3
+      '@esbuild/win32-x64': 0.27.3
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@2.0.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      eslint: 9.39.2(jiti@2.6.1)
+      hermes-parser: 0.25.1
+      zod: 4.3.6
+      zod-validation-error: 4.0.2(zod@4.3.6)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-react-refresh@0.5.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint-visitor-keys@5.0.0: {}
+
+  eslint@9.39.2(jiti@2.6.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.3
+      '@eslint/js': 9.39.2
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3(supports-color@10.2.2)
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      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.4
+    optionalDependencies:
+      jiti: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  esutils@2.0.3: {}
+
+  eventemitter3@5.0.4: {}
+
+  expect-type@1.3.0: {}
+
+  expect@30.2.0:
+    dependencies:
+      '@jest/expect-utils': 30.2.0
+      '@jest/get-type': 30.1.0
+      jest-matcher-utils: 30.2.0
+      jest-message-util: 30.2.0
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.1.0: {}
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flatted@3.3.3: {}
+
+  fsevents@2.3.2:
+    optional: true
+
+  fsevents@2.3.3:
+    optional: true
+
+  gensync@1.0.0-beta.2: {}
+
+  get-east-asian-width@1.5.0: {}
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  globals@14.0.0: {}
+
+  globals@17.3.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  has-flag@4.0.0: {}
+
+  hermes-estree@0.25.1: {}
+
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
+  html-encoding-sniffer@6.0.0:
+    dependencies:
+      '@exodus/bytes': 1.15.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  html-escaper@2.0.2: {}
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6(supports-color@10.2.2):
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  husky@9.1.7: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  immutable@5.1.4:
+    optional: true
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  index-to-position@1.2.0: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@5.1.0:
+    dependencies:
+      get-east-asian-width: 1.5.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-number@7.0.0: {}
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  isexe@2.0.0: {}
+
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  jest-diff@30.2.0:
+    dependencies:
+      '@jest/diff-sequences': 30.0.1
+      '@jest/get-type': 30.1.0
+      chalk: 4.1.2
+      pretty-format: 30.2.0
+
+  jest-matcher-utils@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      chalk: 4.1.2
+      jest-diff: 30.2.0
+      pretty-format: 30.2.0
+
+  jest-message-util@30.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@jest/types': 30.2.0
+      '@types/stack-utils': 2.0.3
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      micromatch: 4.0.8
+      pretty-format: 30.2.0
+      slash: 3.0.0
+      stack-utils: 2.0.6
+
+  jest-mock@30.2.0:
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 25.3.0
+      jest-util: 30.2.0
+
+  jest-regex-util@30.0.1: {}
+
+  jest-util@30.2.0:
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 25.3.0
+      chalk: 4.1.2
+      ci-info: 4.4.0
+      graceful-fs: 4.2.11
+      picomatch: 4.0.3
+
+  jiti@2.6.1: {}
+
+  jquery@4.0.0: {}
+
+  js-levenshtein@1.1.6: {}
+
+  js-tokens@10.0.0: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsdom@28.1.0:
+    dependencies:
+      '@acemir/cssom': 0.9.31
+      '@asamuzakjp/dom-selector': 6.8.1
+      '@bramus/specificity': 2.4.2
+      '@exodus/bytes': 1.15.0
+      cssstyle: 6.2.0
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6(supports-color@10.2.2)
+      is-potential-custom-element-name: 1.0.1
+      parse5: 8.0.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.0
+      undici: 7.22.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+      - supports-color
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json2mq@0.2.0:
+    dependencies:
+      string-convert: 0.2.1
+
+  json5@2.2.3: {}
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-android-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.31.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.31.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    optional: true
+
+  lightningcss@1.31.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.31.1
+      lightningcss-darwin-arm64: 1.31.1
+      lightningcss-darwin-x64: 1.31.1
+      lightningcss-freebsd-x64: 1.31.1
+      lightningcss-linux-arm-gnueabihf: 1.31.1
+      lightningcss-linux-arm64-gnu: 1.31.1
+      lightningcss-linux-arm64-musl: 1.31.1
+      lightningcss-linux-x64-gnu: 1.31.1
+      lightningcss-linux-x64-musl: 1.31.1
+      lightningcss-win32-arm64-msvc: 1.31.1
+      lightningcss-win32-x64-msvc: 1.31.1
+
+  lint-staged@16.3.1:
+    dependencies:
+      commander: 14.0.3
+      listr2: 9.0.5
+      micromatch: 4.0.8
+      string-argv: 0.3.2
+      tinyexec: 1.0.2
+      yaml: 2.8.2
+
+  listr2@9.0.5:
+    dependencies:
+      cli-truncate: 5.2.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.4
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.2
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.debounce@4.0.8: {}
+
+  lodash.merge@4.6.2: {}
+
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.3.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.2
+      strip-ansi: 7.2.0
+      wrap-ansi: 9.0.2
+
+  lru-cache@11.2.6: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lucide-react@0.575.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  lz-string@1.5.0: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magicast@0.5.2:
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      source-map-js: 1.2.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.7.4
+
+  mdn-data@2.27.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mimic-function@5.0.1: {}
+
+  min-indent@1.0.1: {}
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@5.1.6:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.11: {}
+
+  natural-compare@1.4.0: {}
+
+  next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  node-addon-api@7.1.1:
+    optional: true
+
+  node-releases@2.0.27: {}
+
+  obug@2.1.1: {}
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  openapi-fetch@0.17.0:
+    dependencies:
+      openapi-typescript-helpers: 0.1.0
+
+  openapi-typescript-helpers@0.1.0: {}
+
+  openapi-typescript@7.13.0(typescript@5.9.3):
+    dependencies:
+      '@redocly/openapi-core': 1.34.7(supports-color@10.2.2)
+      ansi-colors: 4.1.3
+      change-case: 5.4.4
+      parse-json: 8.3.0
+      supports-color: 10.2.2
+      typescript: 5.9.3
+      yargs-parser: 21.1.1
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@8.3.0:
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      index-to-position: 1.2.0
+      type-fest: 4.41.0
+
+  parse5@8.0.0:
+    dependencies:
+      entities: 6.0.1
+
+  path-exists@4.0.0: {}
+
+  path-key@3.1.1: {}
+
+  pathe@2.0.3: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  playwright-core@1.58.2: {}
+
+  playwright@1.58.2:
+    dependencies:
+      playwright-core: 1.58.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  pluralize@8.0.0: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier-plugin-tailwindcss@0.7.2(prettier@3.8.1):
+    dependencies:
+      prettier: 3.8.1
+
+  prettier@3.8.1: {}
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
+  pretty-format@30.2.0:
+    dependencies:
+      '@jest/schemas': 30.0.5
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+
+  punycode@2.3.1: {}
+
+  react-dom@19.2.4(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      scheduler: 0.27.0
+
+  react-is@17.0.2: {}
+
+  react-is@18.3.1: {}
+
+  react-loading-skeleton@3.5.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  react-refresh@0.18.0: {}
+
+  react-router-dom@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-router: 7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+
+  react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.4
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.4(react@19.2.4)
+
+  react-slick@0.31.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      classnames: 2.5.1
+      json2mq: 0.2.0
+      lodash.debounce: 4.0.8
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      resize-observer-polyfill: 1.5.1
+
+  react@19.2.4: {}
+
+  readdirp@4.1.2:
+    optional: true
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
+  require-from-string@2.0.2: {}
+
+  reselect@5.1.1: {}
+
+  resize-observer-polyfill@1.5.1: {}
+
+  resolve-from@4.0.0: {}
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  rfdc@1.4.1: {}
+
+  rollup@4.57.1:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.57.1
+      '@rollup/rollup-android-arm64': 4.57.1
+      '@rollup/rollup-darwin-arm64': 4.57.1
+      '@rollup/rollup-darwin-x64': 4.57.1
+      '@rollup/rollup-freebsd-arm64': 4.57.1
+      '@rollup/rollup-freebsd-x64': 4.57.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.57.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.57.1
+      '@rollup/rollup-linux-arm64-gnu': 4.57.1
+      '@rollup/rollup-linux-arm64-musl': 4.57.1
+      '@rollup/rollup-linux-loong64-gnu': 4.57.1
+      '@rollup/rollup-linux-loong64-musl': 4.57.1
+      '@rollup/rollup-linux-ppc64-gnu': 4.57.1
+      '@rollup/rollup-linux-ppc64-musl': 4.57.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.57.1
+      '@rollup/rollup-linux-riscv64-musl': 4.57.1
+      '@rollup/rollup-linux-s390x-gnu': 4.57.1
+      '@rollup/rollup-linux-x64-gnu': 4.57.1
+      '@rollup/rollup-linux-x64-musl': 4.57.1
+      '@rollup/rollup-openbsd-x64': 4.57.1
+      '@rollup/rollup-openharmony-arm64': 4.57.1
+      '@rollup/rollup-win32-arm64-msvc': 4.57.1
+      '@rollup/rollup-win32-ia32-msvc': 4.57.1
+      '@rollup/rollup-win32-x64-gnu': 4.57.1
+      '@rollup/rollup-win32-x64-msvc': 4.57.1
+      fsevents: 2.3.3
+
+  sass@1.97.3:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.4
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.6
+    optional: true
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.7.4: {}
+
+  set-cookie-parser@2.7.2: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  siginfo@2.0.0: {}
+
+  signal-exit@4.1.0: {}
+
+  slash@3.0.0: {}
+
+  slice-ansi@7.1.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
+  slice-ansi@8.0.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
+  slick-carousel@1.8.1(jquery@4.0.0):
+    dependencies:
+      jquery: 4.0.0
+
+  sonner@2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  source-map-js@1.2.1: {}
+
+  stack-utils@2.0.6:
+    dependencies:
+      escape-string-regexp: 2.0.0
+
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
+  string-argv@0.3.2: {}
+
+  string-convert@0.2.1: {}
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.5.0
+      strip-ansi: 7.2.0
+
+  string-width@8.2.0:
+    dependencies:
+      get-east-asian-width: 1.5.0
+      strip-ansi: 7.2.0
+
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  strip-json-comments@3.1.1: {}
+
+  supports-color@10.2.2: {}
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  symbol-tree@3.2.4: {}
+
+  tabbable@6.4.0: {}
+
+  tailwind-merge@3.5.0: {}
+
+  tailwindcss@4.2.0: {}
+
+  tapable@2.3.0: {}
+
+  tinybench@2.9.0: {}
+
+  tinyexec@1.0.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  tinyrainbow@3.0.3: {}
+
+  tldts-core@7.0.25: {}
+
+  tldts@7.0.25:
+    dependencies:
+      tldts-core: 7.0.25
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  tough-cookie@6.0.0:
+    dependencies:
+      tldts: 7.0.25
+
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
+  ts-api-utils@2.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@4.41.0: {}
+
+  typescript-eslint@8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.56.0(@typescript-eslint/parser@8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  undici-types@7.18.2: {}
+
+  undici@7.22.0: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-sync-external-store@1.6.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2):
+    dependencies:
+      esbuild: 0.27.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.57.1
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 25.3.0
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      sass: 1.97.3
+      yaml: 2.8.2
+
+  vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@28.1.0)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2):
+    dependencies:
+      '@vitest/expect': 4.0.18
+      '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2))
+      '@vitest/pretty-format': 4.0.18
+      '@vitest/runner': 4.0.18
+      '@vitest/snapshot': 4.0.18
+      '@vitest/spy': 4.0.18
+      '@vitest/utils': 4.0.18
+      es-module-lexer: 1.7.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(yaml@2.8.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.3.0
+      jsdom: 28.1.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - yaml
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  web-vitals@5.1.0: {}
+
+  webidl-conversions@8.0.1: {}
+
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
+    dependencies:
+      '@exodus/bytes': 1.15.0
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  word-wrap@1.2.5: {}
+
+  wrap-ansi@9.0.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
+  yallist@3.1.1: {}
+
+  yaml-ast-parser@0.0.43: {}
+
+  yaml@2.8.2: {}
+
+  yargs-parser@21.1.1: {}
+
+  yet-another-react-lightbox@3.29.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  yocto-queue@0.1.0: {}
+
+  zod-validation-error@4.0.2(zod@4.3.6):
+    dependencies:
+      zod: 4.3.6
+
+  zod@3.25.76: {}
+
+  zod@4.3.6: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..012c404
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
diff --git a/src/App.tsx b/src/App.tsx
index 39483d2..d22718b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { BrowserRouter as Router } from "react-router";
 import "react-loading-skeleton/dist/skeleton.css";
+import { BrowserRouter as Router } from "react-router-dom";
 
-import "./assets/scss/main.scss";
 import AppProviders from "./providers/AppProvider.tsx";
 import AppRoutes from "./routes/AppRoutes.tsx";
 
diff --git a/src/api/orderApi.ts b/src/api/orderApi.ts
index b0f9863..a452056 100644
--- a/src/api/orderApi.ts
+++ b/src/api/orderApi.ts
@@ -1,64 +1,64 @@
-import { Order } from '../types/Order';
+import { Order } from "../types/Order";
 
 export const pickupCart = async (): Promise<string> => {
-    const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({}),
-    });
+  const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({}),
+  });
 
-    if (!response.ok) throw new Error('Failed to create a new cart');
+  if (!response.ok) throw new Error("Failed to create a new cart");
 
-    const data = await response.json();
-    return data.tokenValue;
+  const data = await response.json();
+  return data.tokenValue;
 };
 
 export const fetchOrderFromAPI = async (): Promise<Order> => {
-    const token = localStorage.getItem('orderToken');
-    if (!token) throw new Error('No order token found');
+  const token = localStorage.getItem("orderToken");
+  if (!token) throw new Error("No order token found");
 
-    const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${token}`
-    );
+  const response = await fetch(
+    `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${token}`
+  );
 
-    if (!response.ok) throw new Error('Failed to fetch order');
+  if (!response.ok) throw new Error("Failed to fetch order");
 
-    const data = await response.json();
-    return data['hydra:member'] || data;
+  const data = await response.json();
+  return data["hydra:member"] || data;
 };
 
 export const updateOrderItemAPI = async ({
-                                             id,
-                                             quantity,
-                                         }: {
-    id: number;
-    quantity: number;
+  id,
+  quantity,
+}: {
+  id: number;
+  quantity: number;
 }): Promise<void> => {
-    const token = localStorage.getItem('orderToken');
-    if (!token) throw new Error('No order token found');
+  const token = localStorage.getItem("orderToken");
+  if (!token) throw new Error("No order token found");
 
-    const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${token}/items/${id}`,
-        {
-            method: 'PATCH',
-            headers: { 'Content-Type': 'application/merge-patch+json' },
-            body: JSON.stringify({ quantity }),
-        }
-    );
+  const response = await fetch(
+    `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${token}/items/${id}`,
+    {
+      method: "PATCH",
+      headers: { "Content-Type": "application/merge-patch+json" },
+      body: JSON.stringify({ quantity }),
+    }
+  );
 
-    if (!response.ok) throw new Error('Failed to update item quantity');
+  if (!response.ok) throw new Error("Failed to update item quantity");
 };
 
 export const removeOrderItemAPI = async (id: number): Promise<void> => {
-    const token = localStorage.getItem('orderToken');
-    if (!token) throw new Error('No order token found');
+  const token = localStorage.getItem("orderToken");
+  if (!token) throw new Error("No order token found");
 
-    const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${token}/items/${id}`,
-        {
-            method: 'DELETE',
-        }
-    );
+  const response = await fetch(
+    `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${token}/items/${id}`,
+    {
+      method: "DELETE",
+    }
+  );
 
-    if (!response.ok) throw new Error('Failed to remove item from cart');
+  if (!response.ok) throw new Error("Failed to remove item from cart");
 };
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
index 6e107a9..8264d44 100644
--- a/src/components/Accordion.tsx
+++ b/src/components/Accordion.tsx
@@ -1,43 +1,33 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import React from "react";
 
-interface AccordionItem {
-    title: string;
-    content: React.ReactNode;
+interface AccordionItemData {
+  title: string;
+  content: React.ReactNode;
 }
 
 interface AccordionProps {
-    items: AccordionItem[];
+  items: AccordionItemData[];
 }
 
 const BootstrapAccordion: React.FC<AccordionProps> = ({ items }) => {
-    return (
-        <div className="accordion accordion-flat" id="productAccordion">
-            {items.map((item, index) => (
-                <div className="accordion-item rounded-0" key={index}>
-                    <h2 className="accordion-header" id={`heading${index}`}>
-                        <button
-                            className={`accordion-button px-0 ${index === 0 ? "" : "collapsed"}`}
-                            type="button"
-                            data-bs-toggle="collapse"
-                            data-bs-target={`#collapse${index}`}
-                            aria-expanded={index === 0 ? "true" : "false"}
-                            aria-controls={`collapse${index}`}
-                        >
-                            <span className='h5 mb-0 py-2'>{item.title}</span>
-                        </button>
-                    </h2>
-                    <div
-                        id={`collapse${index}`}
-                        className={`accordion-collapse collapse ${index === 0 ? "show" : ""}`}
-                        aria-labelledby={`heading${index}`}
-                        data-bs-parent="#productAccordion"
-                    >
-                        <div className="accordion-body px-0 pt-2 pb-4">{item.content}</div>
-                    </div>
-                </div>
-            ))}
-        </div>
-    );
+  return (
+    <Accordion defaultValue={["item-0"]} className="w-full">
+      {items.map((item, index) => (
+        <AccordionItem value={`item-${index}`} key={index} className="rounded-none border-x-0">
+          <AccordionTrigger className="px-0 hover:no-underline">
+            <span className="py-2 text-lg font-semibold">{item.title}</span>
+          </AccordionTrigger>
+          <AccordionContent className="px-0 pt-2 pb-4">{item.content}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
 };
 
 export default BootstrapAccordion;
diff --git a/src/components/Address.tsx b/src/components/Address.tsx
index 334c557..dbbdfa5 100644
--- a/src/components/Address.tsx
+++ b/src/components/Address.tsx
@@ -1,29 +1,31 @@
 import React from "react";
-import { Address } from '../types/Address';
+import { Address } from "../types/Address";
 
 interface AddressProps {
-    sectionName: string;
-    address: Address;
+  sectionName: string;
+  address: Address;
 }
 
 const BillingCard: React.FC<AddressProps> = ({ sectionName, address }) => {
-    const fullName = `${address.firstName ?? ''} ${address.lastName ?? ''}`.trim();
+  const fullName = `${address.firstName ?? ""} ${address.lastName ?? ""}`.trim();
 
-    return (
-        <div className="card border-0 bg-body-tertiary">
-            <div className="card-header">{sectionName}</div>
-            <div className="card-body">
-                <address className="d-flex flex-column">
-                    {address.company && <strong>{address.company}</strong>}
-                    <strong>{fullName}</strong>
-                    <span>{address.phoneNumber}</span>
-                    <span>{address.street}</span>
-                    <span>{address.city}, {address.postcode}</span>
-                    <span>{address.countryCode}</span>
-                </address>
-            </div>
-        </div>
-    );
+  return (
+    <div className="bg-muted/50 rounded-lg border-0">
+      <div className="border-b px-4 py-3 font-medium">{sectionName}</div>
+      <div className="p-4">
+        <address className="flex flex-col not-italic">
+          {address.company && <strong>{address.company}</strong>}
+          <strong>{fullName}</strong>
+          <span>{address.phoneNumber}</span>
+          <span>{address.street}</span>
+          <span>
+            {address.city}, {address.postcode}
+          </span>
+          <span>{address.countryCode}</span>
+        </address>
+      </div>
+    </div>
+  );
 };
 
 export default BillingCard;
diff --git a/src/components/Arrow.tsx b/src/components/Arrow.tsx
index 924027f..bc7c293 100644
--- a/src/components/Arrow.tsx
+++ b/src/components/Arrow.tsx
@@ -1,25 +1,25 @@
-import React from 'react';
-import { CustomArrowProps } from 'react-slick';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React from "react";
+import { CustomArrowProps } from "react-slick";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface ArrowProps extends CustomArrowProps {
-    direction: 'prev' | 'next';
+  direction: "prev" | "next";
 }
 
 const Arrow: React.FC<ArrowProps> = ({ className, onClick, direction }) => {
-    const isPrev = direction === 'prev';
-    return (
-        <button
-            className={`${className} custom-slick-arrow ${isPrev ? 'prev-arrow' : 'next-arrow'}`}
-            onClick={onClick}
-            aria-label={isPrev ? 'Previous slide' : 'Next slide'}
-        >
-            { isPrev
-                ? <ChevronLeft size={24} />
-                : <ChevronRight size={24} />
-            }
-        </button>
-    );
+  const isPrev = direction === "prev";
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={`${className} custom-slick-arrow ${isPrev ? "prev-arrow" : "next-arrow"}`}
+      onClick={onClick}
+      aria-label={isPrev ? "Previous slide" : "Next slide"}
+    >
+      {isPrev ? <ChevronLeft size={24} /> : <ChevronRight size={24} />}
+    </Button>
+  );
 };
 
 export const PrevArrow = (props: CustomArrowProps) => <Arrow {...props} direction="prev" />;
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 4ec34e6..a9be1c4 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,31 +1,42 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 import React from "react";
 import { Link } from "react-router-dom";
 
 interface BreadcrumbsProps {
-    paths?: { label: string; url: string }[];
+  paths?: { label: string; url: string }[];
 }
 
 const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ paths = [] }) => {
-    if (paths.length === 0) return null;
+  if (paths.length === 0) return null;
 
-    return (
-        <ol className="breadcrumb" aria-label="breadcrumbs">
-            {paths.map((path, index) => (
-                <li
-                    key={index}
-                    className={`breadcrumb-item fw-normal ${index === paths.length - 1 ? "active" : ""}`}
-                >
-                    {path.url && index < paths.length - 1 ? (
-                        <Link to={path.url} className="text-body-tertiary text-break">
-                            {path.label}
-                        </Link>
-                    ) : (
-                        <span className="text-body-tertiary text-break">{path.label}</span>
-                    )}
-                </li>
-            ))}
-        </ol>
-    );
+  return (
+    <Breadcrumb className="mb-5">
+      <BreadcrumbList>
+        {paths.map((path, index) => {
+          const isLast = index === paths.length - 1;
+          return (
+            <React.Fragment key={index}>
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage>{path.label}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink render={<Link to={path.url} />}>{path.label}</BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {!isLast && <BreadcrumbSeparator />}
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
 };
 
 export default Breadcrumbs;
diff --git a/src/components/LoaderWrapper.tsx b/src/components/LoaderWrapper.tsx
index 31595b3..c5c6aa4 100644
--- a/src/components/LoaderWrapper.tsx
+++ b/src/components/LoaderWrapper.tsx
@@ -2,37 +2,33 @@ import React from "react";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 
 interface LoaderWrapperProps {
-    isLoading: boolean;
-    children: React.ReactNode;
-    skeletonCount?: number;
-    skeletonHeight?: number;
-    fullWidth?: boolean;
+  isLoading: boolean;
+  children: React.ReactNode;
+  skeletonCount?: number;
+  skeletonHeight?: number;
+  fullWidth?: boolean;
 }
 
 const LoaderWrapper: React.FC<LoaderWrapperProps> = ({
-                                                         isLoading,
-                                                         children,
-                                                         skeletonCount = 5,
-                                                         skeletonHeight = 24,
-                                                         fullWidth = true
-                                                     }) => {
-    if (isLoading) {
-        return (
-            <SkeletonTheme baseColor="#e0e0e0" highlightColor="#f5f5f5">
-                <div className="d-flex flex-column gap-3">
-                    {Array.from({ length: skeletonCount }).map((_, i) => (
-                        <Skeleton
-                            key={i}
-                            height={skeletonHeight}
-                            width={fullWidth ? "100%" : undefined}
-                        />
-                    ))}
-                </div>
-            </SkeletonTheme>
-        );
-    }
+  isLoading,
+  children,
+  skeletonCount = 5,
+  skeletonHeight = 24,
+  fullWidth = true,
+}) => {
+  if (isLoading) {
+    return (
+      <SkeletonTheme baseColor="#e0e0e0" highlightColor="#f5f5f5">
+        <div className="d-flex flex-column gap-3">
+          {Array.from({ length: skeletonCount }).map((_, i) => (
+            <Skeleton key={i} height={skeletonHeight} width={fullWidth ? "100%" : undefined} />
+          ))}
+        </div>
+      </SkeletonTheme>
+    );
+  }
 
-    return <>{children}</>;
+  return <>{children}</>;
 };
 
 export default LoaderWrapper;
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
index 61e68d0..41693d4 100644
--- a/src/components/ProductCard.tsx
+++ b/src/components/ProductCard.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Product, ProductVariantDetails } from '../types/Product';
-import { formatPrice } from '../utils/price';
-import Skeleton from 'react-loading-skeleton';
+import React from "react";
+import { Link } from "react-router-dom";
+import { Product, ProductVariantDetails } from "../types/Product";
+import { formatPrice } from "../utils/price";
+import Skeleton from "react-loading-skeleton";
 
 interface ProductCardProps {
   product: Product;
@@ -17,12 +17,12 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
       try {
         if (!product.variants.length) return;
         const response = await fetch(
-            `${import.meta.env.VITE_REACT_APP_API_URL}${product.variants[0]}`
+          `${import.meta.env.VITE_REACT_APP_API_URL}${product.variants[0]}`
         );
         const data: ProductVariantDetails = await response.json();
         setVariant(data);
       } catch (error) {
-        console.error('Error loading product variant:', error);
+        console.error("Error loading product variant:", error);
       } finally {
         setLoading(false);
       }
@@ -32,40 +32,35 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
   }, [product]);
 
   return (
-      <div>
-        <Link to={`/product/${product.code}`} className="link-reset">
-          <div className="mb-4">
-            <div
-                className="bg-light rounded-3"
-                style={{ aspectRatio: '3 / 4', overflow: 'hidden' }}
-            >
-              {loading ? (
-                  <Skeleton
-                      style={{ width: '100%', height: '100%', display: 'block' }}
-                  />
-              ) : (
-                  <img
-                      src={product.images[0]?.path}
-                      alt={product.name}
-                      className="img-fluid w-100 h-100 object-fit-cover"
-                  />
-              )}
-            </div>
-          </div>
-          <div className="h6 text-break">
-            {loading ? <Skeleton width={120} /> : product.name}
+    <div>
+      <Link to={`/product/${product.code}`} className="link-reset">
+        <div className="mb-4">
+          <div className="bg-muted rounded-xl" style={{ aspectRatio: "3 / 4", overflow: "hidden" }}>
+            {loading ? (
+              <Skeleton style={{ width: "100%", height: "100%", display: "block" }} />
+            ) : (
+              <img
+                src={product.images[0]?.path}
+                alt={product.name}
+                className="h-auto h-full w-full max-w-full object-cover"
+              />
+            )}
           </div>
-        </Link>
-        <div>
-          {loading ? (
-              <Skeleton width={80} height={20} />
-          ) : variant?.price ? (
-              <span>${formatPrice(variant.price)}</span>
-          ) : (
-              <span>No price</span>
-          )}
         </div>
+        <div className="text-base font-semibold break-words">
+          {loading ? <Skeleton width={120} /> : product.name}
+        </div>
+      </Link>
+      <div>
+        {loading ? (
+          <Skeleton width={80} height={20} />
+        ) : variant?.price ? (
+          <span>${formatPrice(variant.price)}</span>
+        ) : (
+          <span>No price</span>
+        )}
       </div>
+    </div>
   );
 };
 
diff --git a/src/components/ProductsList.tsx b/src/components/ProductsList.tsx
index a927571..91cdff7 100644
--- a/src/components/ProductsList.tsx
+++ b/src/components/ProductsList.tsx
@@ -1,24 +1,24 @@
-import React from 'react';
-import ProductCard from './ProductCard';
-import { Product } from '../types/Product';
+import React from "react";
+import { Product } from "../types/Product";
+import ProductCard from "./ProductCard";
 
 interface ProductsListProps {
-    products: Product[];
-    limit?: number;
-    name?: string;
+  products: Product[];
+  limit?: number;
+  name?: string;
 }
 
 const ProductsList: React.FC<ProductsListProps> = ({ products, limit = products.length, name }) => {
-    return (
-        <div className="row">
-            { name && <h2 className={'mb-5'}>{ name }</h2> }
-            {products.slice(0, limit).map(product => (
-                <div key={product.id} className="col-12 col-sm-12 col-md-6 col-lg-3 mb-4">
-                    <ProductCard product={product} />
-                </div>
-            ))}
+  return (
+    <div className="-mx-4 flex flex-wrap">
+      {name && <h2 className={"mb-5 w-full px-4"}>{name}</h2>}
+      {products.slice(0, limit).map((product) => (
+        <div key={product.id} className="mb-4 w-full px-4 sm:w-full md:w-1/4">
+          <ProductCard product={product} />
         </div>
-    );
+      ))}
+    </div>
+  );
 };
 
 export default ProductsList;
diff --git a/src/components/account/AddressCards.tsx b/src/components/account/AddressCards.tsx
index 0a0c9d8..fdf9c3a 100644
--- a/src/components/account/AddressCards.tsx
+++ b/src/components/account/AddressCards.tsx
@@ -5,116 +5,107 @@ import { IconPencil, IconTrash } from "@tabler/icons-react";
 import { Address } from "../../types/Address";
 import { useCustomer } from "../../context/CustomerContext";
 import { useFlashMessages } from "../../context/FlashMessagesContext";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 
 interface AddressCardsProps {
-    addresses: Address[];
-    onDelete: (id: number) => void;
-    refetchAddresses: () => void;
+  addresses: Address[];
+  onDelete: (id: number) => void;
+  refetchAddresses: () => void;
 }
 
-const AddressCards: React.FC<AddressCardsProps> = ({
-                                                       addresses,
-                                                       onDelete,
-                                                       refetchAddresses,
-                                                   }) => {
-    const { customer, refetchCustomer } = useCustomer();
-    const { addMessage } = useFlashMessages();
+const AddressCards: React.FC<AddressCardsProps> = ({ addresses, onDelete, refetchAddresses }) => {
+  const { customer, refetchCustomer } = useCustomer();
+  const { addMessage } = useFlashMessages();
 
-    const handleSetDefault = async (addressId: number) => {
-        if (!customer || !customer["@id"]) return;
+  const handleSetDefault = async (addressId: number) => {
+    if (!customer || !customer["@id"]) return;
 
-        try {
-            const token = localStorage.getItem("jwtToken");
-            const response = await fetch(
-                `${import.meta.env.VITE_REACT_APP_API_URL}${customer["@id"]}`,
-                {
-                    method: "PUT",
-                    headers: {
-                        "Content-Type": "application/json",
-                        Authorization: `Bearer ${token}`,
-                    },
-                    body: JSON.stringify({
-                        ...customer,
-                        defaultAddress: `/api/v2/shop/addresses/${addressId}`,
-                    }),
-                }
-            );
+    try {
+      const token = localStorage.getItem("jwtToken");
+      const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${customer["@id"]}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          ...customer,
+          defaultAddress: `/api/v2/shop/addresses/${addressId}`,
+        }),
+      });
 
-            if (!response.ok) throw new Error("Failed to set default address");
+      if (!response.ok) throw new Error("Failed to set default address");
 
-            addMessage("success", "Default address updated");
-            refetchCustomer();
-            refetchAddresses();
-        } catch (err) {
-            console.error(err);
-            addMessage("error", "Failed to update default address");
-        }
-    };
+      addMessage("success", "Default address updated");
+      refetchCustomer();
+      refetchAddresses();
+    } catch (err) {
+      console.error(err);
+      addMessage("error", "Failed to update default address");
+    }
+  };
 
-    const defaultId = (() => {
-        const def = customer?.defaultAddress;
-        if (typeof def === "string") return def.split("/").pop() || null;
-        if (def && typeof def === "object" && typeof def["@id"] === "string") {
-            return def["@id"].split("/").pop() || null;
-        }
-        return null;
-    })();
+  const defaultId = (() => {
+    const def = customer?.defaultAddress;
+    if (typeof def === "string") return def.split("/").pop() || null;
+    if (def && typeof def === "object" && typeof def["@id"] === "string") {
+      return def["@id"].split("/").pop() || null;
+    }
+    return null;
+  })();
 
-    return (
-        <div className="row">
-            {addresses.map((address) => (
-                <div key={address.id} className="card border-0 bg-body-tertiary mb-3">
-                    <div className="card-body">
-                        {String(address.id) === defaultId && (
-                            <div className="badge bg-primary text-white mb-3">
-                                Your default address
-                            </div>
-                        )}
+  return (
+    <div className="-mx-4 flex flex-wrap">
+      {addresses.map((address) => (
+        <div key={address.id} className="bg-muted/50 mb-3 w-full rounded-lg border-0 px-4">
+          <div className="p-4">
+            {String(address.id) === defaultId && (
+              <Badge className="mb-3">Your default address</Badge>
+            )}
 
-                        <div className="d-flex flex-column mb-4">
-                            {address.company && <strong>{address.company}</strong>}
-                            <div>
-                                <strong className="fw-bold mb-1">{address.firstName} </strong>
-                                <strong className="fw-bold mb-2">{address.lastName}</strong>
-                            </div>
-                            {address.phoneNumber && <strong>{address.phoneNumber}</strong>}
-                            <span className="mb-1">{address.street}</span>
-                            <span>{address.postcode}, {address.city}</span>
-                            {address.provinceName && <span>{address.provinceName}</span>}
-                            <span>{address.countryCode}</span>
-                        </div>
+            <div className="mb-4 flex flex-col">
+              {address.company && <strong>{address.company}</strong>}
+              <div>
+                <strong className="mb-1 font-bold">{address.firstName} </strong>
+                <strong className="mb-2 font-bold">{address.lastName}</strong>
+              </div>
+              {address.phoneNumber && <strong>{address.phoneNumber}</strong>}
+              <span className="mb-1">{address.street}</span>
+              <span>
+                {address.postcode}, {address.city}
+              </span>
+              {address.provinceName && <span>{address.provinceName}</span>}
+              <span>{address.countryCode}</span>
+            </div>
 
-                        <div className="d-flex flex-column flex-sm-row gap-2">
-                            <Link
-                                to={`/account/address-book/edit/${address.id}`}
-                                className="btn btn-sm btn-icon btn-outline-gray"
-                            >
-                                <IconPencil stroke={2} size={16} />
-                                Edit
-                            </Link>
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <Button
+                variant="outline"
+                size="sm"
+                nativeButton={false}
+                render={<Link to={`/account/address-book/edit/${address.id}`} />}
+              >
+                <IconPencil stroke={2} size={16} />
+                Edit
+              </Button>
 
-                            <button
-                                className="btn btn-sm btn-icon btn-outline-danger w-full"
-                                onClick={() => onDelete(address.id!)}
-                            >
-                                <IconTrash stroke={2} size={16} />
-                                Delete
-                            </button>
+              <Button variant="destructive" size="sm" onClick={() => onDelete(address.id!)}>
+                <IconTrash stroke={2} size={16} />
+                Delete
+              </Button>
 
-                            {String(address.id) !== defaultId && (
-                                <button
-                                    className="btn btn-sm btn-icon btn-outline-gray w-full"
-                                    onClick={() => handleSetDefault(address.id!)}
-                                >
-                                    Set as default
-                                </button>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            ))}
+              {String(address.id) !== defaultId && (
+                <Button variant="outline" size="sm" onClick={() => handleSetDefault(address.id!)}>
+                  Set as default
+                </Button>
+              )}
+            </div>
+          </div>
         </div>
-    );
+      ))}
+    </div>
+  );
 };
 
 export default AddressCards;
diff --git a/src/components/account/AddressForm.tsx b/src/components/account/AddressForm.tsx
index a3c5b38..919dae8 100644
--- a/src/components/account/AddressForm.tsx
+++ b/src/components/account/AddressForm.tsx
@@ -1,121 +1,256 @@
 import React from "react";
 import Skeleton from "react-loading-skeleton";
+import { Input } from "@/components/ui/input";
+import { FieldError } from "@/components/ui/field-error";
+import type { ValidationError } from "@tanstack/react-form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+// Structural interface to avoid the 12-parameter ReactFormExtendedApi generics.
+// `any` on name/selector allows the actual TanStack Field (which narrows `name` to a union) to be
+// assignable here via TypeScript's contravariance rules.
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type FieldApi = {
+  state: { value: any; meta: { errors: ValidationError[]; isTouched: boolean } };
+  handleChange: (v: any) => void;
+  handleBlur: () => void;
+};
+export type AnyFormApi = {
+  Field: (props: {
+    name: any;
+    children: (field: FieldApi) => React.ReactNode;
+    [key: string]: any;
+  }) => React.ReactNode;
+  Subscribe: (props: {
+    selector?: (state: any) => any;
+    children: (value: any) => React.ReactNode;
+  }) => React.ReactNode;
+};
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+interface Country {
+  code: string;
+  name: string;
+}
 
 interface AddressFormProps {
-    formData: {
-        firstName: string;
-        lastName: string;
-        company: string;
-        street: string;
-        countryCode: string;
-        provinceName: string;
-        city: string;
-        postcode: string;
-        phoneNumber: string;
-    };
-    countries: { code: string; name: string }[];
-    loadingCountries: boolean;
-    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+  form: AnyFormApi;
+  countries: Country[];
+  loadingCountries: boolean;
+  errors?: Record<string, string>;
+  submitted?: boolean;
+  isSubmitted?: boolean;
 }
 
-const AddressForm: React.FC<AddressFormProps> = ({ formData, countries, loadingCountries, onChange }) => (
-    <div className="row">
-        <div className="col-12 col-md-6 mb-3">
-            <label className="form-label">First name *</label>
-            <input
-                className="form-control"
-                name="firstName"
-                value={formData.firstName}
-                onChange={onChange}
-                required
+const labelClass = "block text-sm font-medium mb-1";
+
+const AddressForm: React.FC<AddressFormProps> = ({
+  form,
+  countries,
+  loadingCountries,
+  isSubmitted = false,
+}) => (
+  <div className="-mx-3 flex flex-wrap">
+    <div className="mb-4 w-full px-3 md:w-1/2">
+      <label className={labelClass}>First name *</label>
+      <form.Field name="firstName">
+        {(field) => (
+          <>
+            <Input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              required
+              aria-describedby="firstName-error"
+              aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
             />
-        </div>
-        <div className="col-12 col-md-6 mb-3">
-            <label className="form-label">Last name *</label>
-            <input
-                className="form-control"
-                name="lastName"
-                value={formData.lastName}
-                onChange={onChange}
-                required
+            <FieldError
+              id="firstName-error"
+              errors={field.state.meta.errors}
+              isTouched={field.state.meta.isTouched}
+              isSubmitted={isSubmitted}
             />
-        </div>
-        <div className="col-12 mb-3">
-            <label className="form-label">Company</label>
-            <input className="form-control" name="company" value={formData.company} onChange={onChange} />
-        </div>
-        <div className="col-12 mb-3">
-            <label className="form-label">Street address *</label>
-            <input
-                className="form-control"
-                name="street"
-                value={formData.street}
-                onChange={onChange}
-                required
+          </>
+        )}
+      </form.Field>
+    </div>
+    <div className="mb-4 w-full px-3 md:w-1/2">
+      <label className={labelClass}>Last name *</label>
+      <form.Field name="lastName">
+        {(field) => (
+          <>
+            <Input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              required
+              aria-describedby="lastName-error"
+              aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
             />
-        </div>
-        <div className="col-12 mb-3">
-            <label className="form-label">Country *</label>
-            {loadingCountries ? (
-                <Skeleton height={36} />
-            ) : (
-                <select
-                    className="form-select"
-                    name="countryCode"
-                    value={formData.countryCode}
-                    onChange={onChange}
-                    required
-                >
-                    <option value="" disabled>Select</option>
-                    {countries.map((country) => (
-                        <option key={country.code} value={country.code}>
-                            {country.name}
-                        </option>
-                    ))}
-                </select>
-            )}
-        </div>
-        {formData.countryCode && (
-            <div className="col-12 mb-3">
-                <label className="form-label">Province</label>
-                <input
-                    className="form-control"
-                    name="provinceName"
-                    value={formData.provinceName}
-                    onChange={onChange}
-                />
-            </div>
+            <FieldError
+              id="lastName-error"
+              errors={field.state.meta.errors}
+              isTouched={field.state.meta.isTouched}
+              isSubmitted={isSubmitted}
+            />
+          </>
         )}
-        <div className="col-12 col-md-6 mb-3">
-            <label className="form-label">City *</label>
-            <input
-                className="form-control"
-                name="city"
-                value={formData.city}
-                onChange={onChange}
-                required
+      </form.Field>
+    </div>
+    <div className="mb-4 w-full px-3">
+      <label className={labelClass}>Company</label>
+      <form.Field name="company">
+        {(field) => (
+          <Input
+            value={field.state.value ?? ""}
+            onChange={(e) => field.handleChange(e.target.value)}
+            onBlur={field.handleBlur}
+          />
+        )}
+      </form.Field>
+    </div>
+    <div className="mb-4 w-full px-3">
+      <label className={labelClass}>Street address *</label>
+      <form.Field name="street">
+        {(field) => (
+          <>
+            <Input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              required
+              aria-describedby="street-error"
+              aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+            />
+            <FieldError
+              id="street-error"
+              errors={field.state.meta.errors}
+              isTouched={field.state.meta.isTouched}
+              isSubmitted={isSubmitted}
             />
-        </div>
-        <div className="col-12 col-md-6 mb-3">
-            <label className="form-label">Postcode *</label>
-            <input
-                className="form-control"
-                name="postcode"
-                value={formData.postcode}
-                onChange={onChange}
+          </>
+        )}
+      </form.Field>
+    </div>
+    <div className="mb-4 w-full px-3">
+      <label className={labelClass}>Country *</label>
+      {loadingCountries ? (
+        <Skeleton height={36} />
+      ) : (
+        <form.Field name="countryCode">
+          {(field) => (
+            <>
+              <Select
+                value={field.state.value}
+                onValueChange={(val) => field.handleChange(val ?? "")}
                 required
+              >
+                <SelectTrigger
+                  aria-describedby="countryCode-error"
+                  aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                >
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  {countries.map((country) => (
+                    <SelectItem key={country.code} value={country.code}>
+                      {country.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FieldError
+                id="countryCode-error"
+                errors={field.state.meta.errors}
+                isTouched={field.state.meta.isTouched}
+                isSubmitted={isSubmitted}
+              />
+            </>
+          )}
+        </form.Field>
+      )}
+    </div>
+    <form.Subscribe selector={(state) => state.values.countryCode}>
+      {(countryCode) =>
+        countryCode ? (
+          <div className="mb-4 w-full px-3">
+            <label className={labelClass}>Province</label>
+            <form.Field name="provinceName">
+              {(field) => (
+                <Input
+                  value={field.state.value ?? ""}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  onBlur={field.handleBlur}
+                />
+              )}
+            </form.Field>
+          </div>
+        ) : null
+      }
+    </form.Subscribe>
+    <div className="mb-4 w-full px-3 md:w-1/2">
+      <label className={labelClass}>City *</label>
+      <form.Field name="city">
+        {(field) => (
+          <>
+            <Input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              required
+              aria-describedby="city-error"
+              aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
             />
-        </div>
-        <div className="col-12 mb-3">
-            <label className="form-label">Phone number</label>
-            <input
-                className="form-control"
-                name="phoneNumber"
-                value={formData.phoneNumber}
-                onChange={onChange}
+            <FieldError
+              id="city-error"
+              errors={field.state.meta.errors}
+              isTouched={field.state.meta.isTouched}
+              isSubmitted={isSubmitted}
             />
-        </div>
+          </>
+        )}
+      </form.Field>
+    </div>
+    <div className="mb-4 w-full px-3 md:w-1/2">
+      <label className={labelClass}>Postcode *</label>
+      <form.Field name="postcode">
+        {(field) => (
+          <>
+            <Input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              required
+              aria-describedby="postcode-error"
+              aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+            />
+            <FieldError
+              id="postcode-error"
+              errors={field.state.meta.errors}
+              isTouched={field.state.meta.isTouched}
+              isSubmitted={isSubmitted}
+            />
+          </>
+        )}
+      </form.Field>
+    </div>
+    <div className="mb-4 w-full px-3">
+      <label className={labelClass}>Phone number</label>
+      <form.Field name="phoneNumber">
+        {(field) => (
+          <Input
+            value={field.state.value ?? ""}
+            onChange={(e) => field.handleChange(e.target.value)}
+            onBlur={field.handleBlur}
+          />
+        )}
+      </form.Field>
     </div>
+  </div>
 );
 
 export default AddressForm;
diff --git a/src/components/cart/ProductRow.tsx b/src/components/cart/ProductRow.tsx
index 0296488..745b652 100644
--- a/src/components/cart/ProductRow.tsx
+++ b/src/components/cart/ProductRow.tsx
@@ -1,79 +1,93 @@
-import React, { useState } from 'react';
-import { OrderItem } from '../../types/Order';
-import { formatPrice } from '../../utils/price';
-import { useQuery } from '@tanstack/react-query';
-import { Link } from 'react-router-dom';
-import { IconX } from '@tabler/icons-react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { TableCell, TableRow } from "@/components/ui/table";
+import { IconX } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { OrderItem } from "../../types/Order";
+import type { Product } from "../../types/Product";
+import { formatPrice } from "../../utils/price";
+
+interface CartVariant {
+  product: string;
+  optionValues?: string[];
+  code?: string;
+}
 
 interface ProductRowProps {
   orderItem: OrderItem;
-  onRemove: any;
-  onUpdate: any;
+  onRemove: (id: number) => void;
+  onUpdate: (id: number, quantity: number) => void;
 }
 
-const ProductRow: React.FC<ProductRowProps> = ({
-  orderItem,
-  onRemove,
-  onUpdate,
-}) => {
-  const [localQuantity, setLocalQuantity] = useState<string>(
-    orderItem.quantity?.toString() || '1'
-  );
+const ProductRow: React.FC<ProductRowProps> = ({ orderItem, onRemove, onUpdate }) => {
+  const [localQuantity, setLocalQuantity] = useState<string>(orderItem.quantity?.toString() || "1");
 
-  const fetchVariant = async (): Promise<any> => {
-    const response = await fetch(
-      `${import.meta.env.VITE_REACT_APP_API_URL}${orderItem.variant}`
-    );
+  const fetchVariant = async (): Promise<CartVariant> => {
+    const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${orderItem.variant}`);
     if (!response.ok) {
-      throw new Error('Problem z pobieraniem wariantu');
+      throw new Error("Problem loading variant");
     }
 
     return await response.json();
   };
 
-  const { data: variant } = useQuery<any, Error>({
-    queryKey: ['variant', orderItem.id],
+  const { data: variant } = useQuery<CartVariant, Error>({
+    queryKey: ["variant", orderItem.id],
     queryFn: fetchVariant,
   });
 
-  const fetchProduct = async (): Promise<any> => {
-    const response = await fetch(
-      `${import.meta.env.VITE_REACT_APP_API_URL}${variant.product}`
-    );
+  const fetchProduct = async (): Promise<Product> => {
+    const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${variant!.product}`);
     if (!response.ok) {
-      throw new Error('Problem z pobieraniem produktu');
+      throw new Error("Problem loading product");
     }
 
     return await response.json();
   };
 
-  const { data: product } = useQuery<any, Error>({
-    queryKey: ['product', orderItem.id],
+  const { data: product } = useQuery<Product, Error>({
+    queryKey: ["product", orderItem.id],
     queryFn: fetchProduct,
     enabled: !!variant?.product,
   });
 
+  const { data: optionLabels } = useQuery<string[], Error>({
+    queryKey: ["optionLabels", orderItem.id],
+    queryFn: async () => {
+      const API_URL = import.meta.env.VITE_REACT_APP_API_URL;
+      const urls: string[] = variant!.optionValues ?? [];
+      const values = (await Promise.all(
+        urls.map((url: string) => fetch(`${API_URL}${url}`).then((r) => r.json()))
+      )) as { value: string; option: string }[];
+      const options = (await Promise.all(
+        values.map((v) => fetch(`${API_URL}${v.option}`).then((r) => r.json()))
+      )) as { name: string }[];
+      return values.map((v, i) => `${options[i].name}: ${v.value}`);
+    },
+    enabled: !!variant?.optionValues?.length,
+  });
+
   return (
-    <tr>
-      <td>
-        <button
-          className="btn btn-sm btn-transparent px-2"
+    <TableRow>
+      <TableCell className="py-3">
+        <Button
+          variant="ghost"
+          size="icon"
           type="button"
-          onClick={() => onRemove(orderItem.id)}
+          onClick={() => orderItem.id !== undefined && onRemove(orderItem.id)}
         >
           <IconX stroke={2} />
-        </button>
-      </td>
-      <td>
-        <div className="d-flex align-items-center gap-4">
-          <div style={{ width: '6rem' }}>
-            <div
-              className="overflow-auto bg-light rounded-3"
-              style={{ aspectRatio: '3/4' }}
-            >
+        </Button>
+      </TableCell>
+      <TableCell className="py-3">
+        <div className="flex items-center gap-4">
+          <div style={{ width: "6rem" }}>
+            <div className="bg-muted overflow-auto rounded-xl" style={{ aspectRatio: "3/4" }}>
               {product?.images?.[0]?.path && (
                 <img
-                  className="img-fluid w-100 h-100 object-fit-cover"
+                  className="h-auto h-full w-full max-w-full object-cover"
                   src={product.images[0].path}
                   alt={variant?.code}
                 />
@@ -81,47 +95,47 @@ const ProductRow: React.FC<ProductRowProps> = ({
             </div>
           </div>
           <div>
-            <div className="h6">
+            <div className="text-base font-semibold">
               {product?.code ? (
-                <Link
-                  className="link-reset text-break"
-                  to={`/product/${product.code}`}
-                >
-                  {orderItem?.productName}
-                </Link>
+                <>
+                  <Link className="link-reset break-words" to={`/product/${product.code}`}>
+                    {orderItem?.productName}
+                  </Link>
+                </>
               ) : (
                 orderItem?.productName
               )}
             </div>
-            <small className="text-body-tertiary">{variant?.code}</small>
+            {optionLabels?.length ? (
+              <small className="text-muted-foreground block">{optionLabels.join(", ")}</small>
+            ) : null}
           </div>
         </div>
-      </td>
-      <td className="text-black-50 text-end">
+      </TableCell>
+      <TableCell className="text-muted-foreground py-3 text-right">
         <span>${formatPrice(orderItem.unitPrice)}</span>
-      </td>
-      <td>
-        <div className="mt-3 field mb-3 required">
-          <input
+      </TableCell>
+      <TableCell className="py-3">
+        <div className="mt-3 mb-3">
+          <Input
             type="number"
-            className="form-control"
             min={1}
             onChange={(e) => {
               const newQuantity = e.target.value;
               setLocalQuantity(newQuantity);
               const parsedQuantity = parseInt(newQuantity, 10);
-              if (!isNaN(parsedQuantity) && parsedQuantity > 0) {
+              if (!isNaN(parsedQuantity) && parsedQuantity > 0 && orderItem.id !== undefined) {
                 onUpdate(orderItem.id, parsedQuantity);
               }
             }}
             value={localQuantity}
           />
         </div>
-      </td>
-      <td className="text-end">
+      </TableCell>
+      <TableCell className="py-3 text-right">
         <span>${formatPrice(orderItem.subtotal)}</span>
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
 
diff --git a/src/components/checkout/Steps.tsx b/src/components/checkout/Steps.tsx
index f8a14d8..b01cadc 100644
--- a/src/components/checkout/Steps.tsx
+++ b/src/components/checkout/Steps.tsx
@@ -1,42 +1,42 @@
 import React from "react";
-import {Link} from "react-router";
+import { Link } from "react-router-dom";
 
 interface StepsProps {
-    activeStep?: "address" | "shipping" | "payment" | "complete";
+  activeStep?: "address" | "shipping" | "payment" | "complete";
 }
 
 const steps = [
-    { key: "address", label: "Address", path: "/checkout/address" },
-    { key: "shipping", label: "Shipping", path: "/checkout/select-shipping" },
-    { key: "payment", label: "Payment", path: "/checkout/select-payment" },
-    { key: "complete", label: "Complete", path: "/checkout/complete" },
+  { key: "address", label: "Address", path: "/checkout/address" },
+  { key: "shipping", label: "Shipping", path: "/checkout/select-shipping" },
+  { key: "payment", label: "Payment", path: "/checkout/select-payment" },
+  { key: "complete", label: "Complete", path: "/checkout/complete" },
 ];
 
 const Steps: React.FC<StepsProps> = ({ activeStep = "address" }) => {
-    const activeIndex = steps.findIndex((step) => step.key === activeStep);
+  const activeIndex = steps.findIndex((step) => step.key === activeStep);
 
-    return (
-        <div className={`steps mb-5 ${activeStep === 'complete' ? 'steps-complete' : ''}`}>
-            {steps.map((step, index) => (
-                <div
-                    key={step.key}
-                    className={`steps-item ${
-                        index === activeIndex
-                            ? "steps-item-active"
-                            : index < activeIndex
-                                ? ""
-                                : "steps-item-disabled"
-                    }`}
-                >
-                    {index <= activeIndex ? (
-                        <Link to={step.path}>{step.label}</Link>
-                    ) : (
-                        <span>{step.label}</span>
-                    )}
-                </div>
-            ))}
+  return (
+    <div className={`steps mb-5 ${activeStep === "complete" ? "steps-complete" : ""}`}>
+      {steps.map((step, index) => (
+        <div
+          key={step.key}
+          className={`steps-item ${
+            index === activeIndex
+              ? "steps-item-active"
+              : index < activeIndex
+                ? ""
+                : "steps-item-disabled"
+          }`}
+        >
+          {index <= activeIndex ? (
+            <Link to={step.path}>{step.label}</Link>
+          ) : (
+            <span>{step.label}</span>
+          )}
         </div>
-    );
+      ))}
+    </div>
+  );
 };
 
 export default Steps;
diff --git a/src/components/layout/FlashMessages.tsx b/src/components/layout/FlashMessages.tsx
deleted file mode 100644
index 5459921..0000000
--- a/src/components/layout/FlashMessages.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import { IconX } from "@tabler/icons-react";
-
-type FlashMessages = {
-  id: string;
-  type: "success" | "error" | "info" | "warning";
-  content: string;
-};
-
-type Props = {
-  messages: FlashMessages[];
-  removeMessage: (id: string) => void;
-};
-
-const FlashMessages: React.FC<Props> = ({ messages, removeMessage }) => {
-  return (
-    <div className="d-flex flex-column gap-2 container fixed-top mt-5 ">
-      {messages.map((msg) => (
-        <div
-          className={`alert alert-${msg.type === "error" ? "danger" : msg.type} my-0`}
-          role="alert"
-          key={msg.id}
-        >
-          <div className="d-flex justify-content-between">
-            <div className="fw-bold">{msg.type.toUpperCase()}</div>
-            <span
-              className="close flash-message-close"
-              onClick={() => removeMessage(msg.id)}
-              aria-label="Close"
-            >
-              <IconX stroke={2} />
-            </span>
-          </div>
-          <div>{msg.content}</div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default FlashMessages;
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 462dd47..28b70cd 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,109 +1,166 @@
-import React from 'react';
-import {IconBrandFacebook, IconBrandInstagram, IconBrandX} from "@tabler/icons-react";
+import { IconBrandFacebook, IconBrandInstagram, IconBrandX } from "@tabler/icons-react";
+import React from "react";
 
+const Footer: React.FC = () => {
+  return (
+    <div className="mt-5 border-t py-5">
+      <footer className="container mx-auto px-4">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-6">
+          {/* Column 1 — Logo + copyright */}
+          <div className="text-center lg:col-span-2 lg:text-left">
+            <a href="/en_US/" className="mb-4 inline-block" aria-label="sylius logo">
+              <div style={{ width: "10rem" }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="100%"
+                  height="100%"
+                  viewBox="0 0 3512 1033"
+                  fillRule="evenodd"
+                  strokeLinejoin="round"
+                  strokeMiterlimit="2"
+                >
+                  <path
+                    d="M1285.88 708.833s61.167 72.209 150.375 72.209c56.083 0 102.792-33.959 102.792-89.209 0-125.708-289.709-106.166-289.709-293.083 0-90.083 79.167-160.583 192-160.583 63.75 0 170.834 28.916 170.834 110.458v49.25h-78.209v-28c0-31.458-45.041-54.375-92.625-54.375-64.541 0-105.333 35.667-105.333 80.667 0 121.5 288.875 94.333 288.875 291.416 0 91.667-71.375 170.834-190.292 170.834-75.872-.246-148.185-32.674-198.833-89.167l50.125-60.417zm474.87 246.375c33.333 0 59.458-23.791 75.625-62l19.542-46.75-147-340.666c-5.917-13.625-13.584-17-27.167-17h-10.208v-70.5h48.416c34.834 0 47.584 9.333 61.167 43.333l97.708 242.083a459.47 459.47 0 0 1 15.292 51.834h1.667c3.624-17.589 8.455-34.908 14.458-51.834l89.208-242.083c12.75-34 28.042-43.333 62.875-43.333h49.292v70.5h-11.083c-13.542 0-21.209 3.375-27.167 17l-169.917 419.666c-26.333 66.25-78.166 101.125-138.458 101.125a142.51 142.51 0 0 1-101.083-42.5l33.958-59.458c0 .833 26.333 30.583 62.875 30.583zm433.21-617.5c0-12.75-6.791-18.708-18.666-18.708h-34.834v-70.625h81.542c38.208 0 54.167 16.125 54.167 54.375v456.208c0 12.75 6.791 18.709 18.708 18.709h34.792v70.5h-81.334c-38.208 0-54.166-16.167-54.166-54.375l-.209-456.084zM2451.17 507.5c0-12.75-6.792-18.708-18.709-18.708h-34.833v-70.5h80.75c38.208 0 54.167 16.125 54.167 54.166v286.5c0 12.75 6.791 18.709 18.708 18.709h34.833v70.5h-80.541c-38.25 0-54.167-16.167-54.167-54.375l-.208-286.292zm1.708-259.125h73.875v85.792h-73.875v-85.792zM2690.62 507.5c0-12.75-6.792-18.708-18.708-18.708h-34.834v-70.5h80.709c39.083 0 55.208 16.125 55.208 52.666v203.875c0 59.5 11.917 107.042 79.875 107.042 88.375 0 140.167-77.292 140.167-162.25V418.292h82.416v340.666c0 12.75 6.792 18.709 18.709 18.709h34.791v70.5h-79.166c-36.5 0-54.375-17-54.375-47.584v-16.125c0-13.625.875-24.625.875-24.625h-1.709c-17.666 42.459-72.875 98.709-157.833 98.709-96.875 0-146.125-50.959-146.125-164.792V507.5zm534.21 220.042s50.959 63.708 130 63.708c39.917 0 74.75-17.875 74.75-55.25 0-77.292-234.458-68.792-234.458-207.25 0-82.417 72.167-120.833 159.708-120.833 51.834 0 141 17.833 141 83.333V532h-73.916v-21.25c0-25.5-38.209-36.542-64.542-36.542-48.417 0-79.875 17.042-79.875 51 0 81.542 234.5 63.709 234.5 207.292 0 76.458-67.958 125.708-158.042 125.708-114.666 0-171.583-75.583-171.583-75.583l42.458-55.083z"
+                    fill="#131718"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M143.417 605.333l206.625 413.25 381.375.625 92.291-129.916-680.291-283.959z"
+                    fill="#30ba9d"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M0 650.708l277.792 381.334 453.625.75 92.291-142.667L0 650.708zm333.083-464.541l135.209 104.875 122.25-234.584L549 29.875 333.083 186.167z"
+                    fillRule="nonzero"
+                    fill="#1a9f83"
+                  ></path>
+                  <path
+                    d="M731.417 1032.79L333.083 186.165l85.209-61.667 463.5 675.75-150.375 232.542zM510.667 57.625l259.458 209.583L588.042 0l-77.375 57.625z"
+                    fillRule="nonzero"
+                    fill="#30ba9d"
+                  ></path>
+                </svg>
+              </div>
+            </a>
 
-const Footer: React.FC =  () => {
-return (
-    <div className="mt-auto border-top mt-5 py-5">
-        <footer className="container">
-            <div className="row">
-                <div className="col-12 col-lg-6 order-lg-2">
-                    <div className="row">
-                        <div className="col-12 col-sm-6">
-                            <nav className="nav flex-column">
-                                <a className="nav-link" href="#">About</a>
-                                <a className="nav-link" href="#">Terms and Conditions</a>
-                                <a className="nav-link" href="#">Privacy Policy</a>
-                                <a className="nav-link" href="/en_US/contact/">Contact us</a>
-                            </nav>
-                        </div>
-
-                        <div className="col-12 col-sm-6">
-                            <nav className="nav flex-column mb-5">
-                                <a className="nav-link" href="#">FAQ</a>
-                                <a className="nav-link" href="#">Delivery &amp; Shipping</a>
-                                <a className="nav-link" href="#">Returns Policy</a>
-                            </nav>
-                        </div>
-                    </div>
-                </div>
+            <div className="mb-3">
+              © Your Store, Powered by
+              <a href="https://sylius.com" target="_blank">
+                Sylius
+              </a>
+            </div>
+          </div>
 
-                <div
-                    className="col-12 text-center col-md-6 order-md-4 text-md-start col-lg-3 order-lg-4 text-lg-center">
-                    <div className="mb-3 fw-medium">Payment methods:</div>
+          {/* Column 2 — Navigation links */}
+          <div className="grid grid-cols-2 gap-4 lg:col-span-3">
+            <nav className="flex flex-col">
+              <a className="text-foreground hover:text-primary py-1" href="#">
+                About
+              </a>
+              <a className="text-foreground hover:text-primary py-1" href="#">
+                Terms and Conditions
+              </a>
+              <a className="text-foreground hover:text-primary py-1" href="#">
+                Privacy Policy
+              </a>
+              <a className="text-foreground hover:text-primary py-1" href="/en_US/contact/">
+                Contact us
+              </a>
+            </nav>
 
-                    <div className="row g-2 mb-4">
-                        <div className="col-4">
-                            <a href="https://sylius.com/partner/paypal/" target="_blank"
-                               className="d-block border rounded p-2">
-                                <img className="img-fluid" loading="lazy"
-                                     src="/paypal-logo.svg" width="100%" height="100%"
-                                     alt="PayPal"/>
-                            </a>
-                        </div>
-                        <div className="col-4">
-                            <a href="https://sylius.com/partner/adyen/" target="_blank"
-                               className="d-block border rounded p-2">
-                                <img className="img-fluid" loading="lazy"
-                                     src="/adyen-logo.svg" width="100%" height="100%"
-                                     alt="Adyen"/>
-                            </a>
-                        </div>
-                        <div className="col-4">
-                            <a href="https://sylius.com/partner/mollie/" target="_blank"
-                               className="d-block border rounded p-2">
-                                <img className="img-fluid" loading="lazy"
-                                     src="/mollie-logo.svg" width="100%" height="100%"
-                                     alt="Mollie"/>
-                            </a>
-                        </div>
-                    </div>
+            <nav className="flex flex-col">
+              <a className="text-foreground hover:text-primary py-1" href="#">
+                FAQ
+              </a>
+              <a className="text-foreground hover:text-primary py-1" href="#">
+                Delivery &amp; Shipping
+              </a>
+              <a className="text-foreground hover:text-primary py-1" href="#">
+                Returns Policy
+              </a>
+            </nav>
+          </div>
 
-                    <div
-                        className="d-flex justify-content-center justify-content-md-start justify-content-lg-center gap-3 mb-5">
-                        <a className="link-reset" href="https://www.instagram.com/sylius.team/" target="_blank"
-                           aria-label="instagram logo">
-                            <IconBrandInstagram stroke={2} />
-                        </a>
-                        <a className="link-reset" href="https://www.facebook.com/SyliusEcommerce/" target="_blank"
-                           aria-label="facebook logo">
-                            <IconBrandFacebook stroke={2} />
-                        </a>
-                        <a className="link-reset" href="https://x.com/Sylius" target="_blank" aria-label="x logo">
-                            <IconBrandX stroke={2} />
-                        </a>
-                    </div>
-                </div>
+          {/* Column 3 — Payment methods + social */}
+          <div className="text-center lg:col-span-1 lg:text-left">
+            <div className="mb-3 font-medium">Payment methods:</div>
 
-                <div className="col-12 text-center col-md-6 order-md-3 text-md-start col-lg-3 order-lg-1">
-                    <a href="/en_US/" className="d-inline-block mb-4" aria-label="sylius logo">
-                        <div style={{ width: '10rem' }}>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 3512 1033"
-                                 fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2">
-                                <path
-                                    d="M1285.88 708.833s61.167 72.209 150.375 72.209c56.083 0 102.792-33.959 102.792-89.209 0-125.708-289.709-106.166-289.709-293.083 0-90.083 79.167-160.583 192-160.583 63.75 0 170.834 28.916 170.834 110.458v49.25h-78.209v-28c0-31.458-45.041-54.375-92.625-54.375-64.541 0-105.333 35.667-105.333 80.667 0 121.5 288.875 94.333 288.875 291.416 0 91.667-71.375 170.834-190.292 170.834-75.872-.246-148.185-32.674-198.833-89.167l50.125-60.417zm474.87 246.375c33.333 0 59.458-23.791 75.625-62l19.542-46.75-147-340.666c-5.917-13.625-13.584-17-27.167-17h-10.208v-70.5h48.416c34.834 0 47.584 9.333 61.167 43.333l97.708 242.083a459.47 459.47 0 0 1 15.292 51.834h1.667c3.624-17.589 8.455-34.908 14.458-51.834l89.208-242.083c12.75-34 28.042-43.333 62.875-43.333h49.292v70.5h-11.083c-13.542 0-21.209 3.375-27.167 17l-169.917 419.666c-26.333 66.25-78.166 101.125-138.458 101.125a142.51 142.51 0 0 1-101.083-42.5l33.958-59.458c0 .833 26.333 30.583 62.875 30.583zm433.21-617.5c0-12.75-6.791-18.708-18.666-18.708h-34.834v-70.625h81.542c38.208 0 54.167 16.125 54.167 54.375v456.208c0 12.75 6.791 18.709 18.708 18.709h34.792v70.5h-81.334c-38.208 0-54.166-16.167-54.166-54.375l-.209-456.084zM2451.17 507.5c0-12.75-6.792-18.708-18.709-18.708h-34.833v-70.5h80.75c38.208 0 54.167 16.125 54.167 54.166v286.5c0 12.75 6.791 18.709 18.708 18.709h34.833v70.5h-80.541c-38.25 0-54.167-16.167-54.167-54.375l-.208-286.292zm1.708-259.125h73.875v85.792h-73.875v-85.792zM2690.62 507.5c0-12.75-6.792-18.708-18.708-18.708h-34.834v-70.5h80.709c39.083 0 55.208 16.125 55.208 52.666v203.875c0 59.5 11.917 107.042 79.875 107.042 88.375 0 140.167-77.292 140.167-162.25V418.292h82.416v340.666c0 12.75 6.792 18.709 18.709 18.709h34.791v70.5h-79.166c-36.5 0-54.375-17-54.375-47.584v-16.125c0-13.625.875-24.625.875-24.625h-1.709c-17.666 42.459-72.875 98.709-157.833 98.709-96.875 0-146.125-50.959-146.125-164.792V507.5zm534.21 220.042s50.959 63.708 130 63.708c39.917 0 74.75-17.875 74.75-55.25 0-77.292-234.458-68.792-234.458-207.25 0-82.417 72.167-120.833 159.708-120.833 51.834 0 141 17.833 141 83.333V532h-73.916v-21.25c0-25.5-38.209-36.542-64.542-36.542-48.417 0-79.875 17.042-79.875 51 0 81.542 234.5 63.709 234.5 207.292 0 76.458-67.958 125.708-158.042 125.708-114.666 0-171.583-75.583-171.583-75.583l42.458-55.083z"
-                                    fill="#131718" fillRule="nonzero"></path>
-                                <path d="M143.417 605.333l206.625 413.25 381.375.625 92.291-129.916-680.291-283.959z"
-                                      fill="#30ba9d" fillRule="nonzero"></path>
-                                <path
-                                    d="M0 650.708l277.792 381.334 453.625.75 92.291-142.667L0 650.708zm333.083-464.541l135.209 104.875 122.25-234.584L549 29.875 333.083 186.167z"
-                                    fillRule="nonzero" fill="#1a9f83"></path>
-                                <path
-                                    d="M731.417 1032.79L333.083 186.165l85.209-61.667 463.5 675.75-150.375 232.542zM510.667 57.625l259.458 209.583L588.042 0l-77.375 57.625z"
-                                    fillRule="nonzero" fill="#30ba9d"></path>
-                            </svg>
-                        </div>
-                    </a>
+            <div className="mb-4 grid grid-cols-3 gap-2">
+              <a
+                href="https://sylius.com/partner/paypal/"
+                target="_blank"
+                className="block rounded border p-2"
+              >
+                <img
+                  className="h-auto max-w-full"
+                  loading="lazy"
+                  src="/paypal-logo.svg"
+                  width="100%"
+                  height="100%"
+                  alt="PayPal"
+                />
+              </a>
+              <a
+                href="https://sylius.com/partner/adyen/"
+                target="_blank"
+                className="block rounded border p-2"
+              >
+                <img
+                  className="h-auto max-w-full"
+                  loading="lazy"
+                  src="/adyen-logo.svg"
+                  width="100%"
+                  height="100%"
+                  alt="Adyen"
+                />
+              </a>
+              <a
+                href="https://sylius.com/partner/mollie/"
+                target="_blank"
+                className="block rounded border p-2"
+              >
+                <img
+                  className="h-auto max-w-full"
+                  loading="lazy"
+                  src="/mollie-logo.svg"
+                  width="100%"
+                  height="100%"
+                  alt="Mollie"
+                />
+              </a>
+            </div>
 
-                    <div className="mb-3">
-                        © Your Store, Powered by
-                        <a href="https://sylius.com" target="_blank">Sylius</a>
-                    </div>
-                </div>
+            <div className="flex justify-center gap-3 lg:justify-start">
+              <a
+                className="link-reset"
+                href="https://www.instagram.com/sylius.team/"
+                target="_blank"
+                aria-label="instagram logo"
+              >
+                <IconBrandInstagram stroke={2} />
+              </a>
+              <a
+                className="link-reset"
+                href="https://www.facebook.com/SyliusEcommerce/"
+                target="_blank"
+                aria-label="facebook logo"
+              >
+                <IconBrandFacebook stroke={2} />
+              </a>
+              <a
+                className="link-reset"
+                href="https://x.com/Sylius"
+                target="_blank"
+                aria-label="x logo"
+              >
+                <IconBrandX stroke={2} />
+              </a>
             </div>
-        </footer>
+          </div>
+        </div>
+      </footer>
     </div>
-);
-}
+  );
+};
 
 export default Footer;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index cc22df4..f433615 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,70 +1,76 @@
-import React from 'react';
-import { Link } from 'react-router';
-import {useOrder} from "../../context/OrderContext";
-import {formatPrice} from "../../utils/price";
+import { IconShoppingBag } from "@tabler/icons-react";
+import React from "react";
+import { Link } from "react-router-dom";
+import { useOrder } from "../../context/OrderContext";
+import { formatPrice } from "../../utils/price";
 import UserNavigation from "./header/UserNavigation";
-import {IconMenu2, IconShoppingBag} from "@tabler/icons-react";
 
-const Header: React.FC =  () => {
-    const { order } = useOrder();
+const Header: React.FC = () => {
+  const { order } = useOrder();
 
-    return (
-        <div className="border-bottom py-4">
-            <div className="container">
-                <div className="row align-items-center">
-                    <div className="col">
-                        <Link to="/" className="d-inline-block py-lg-2" style={{ width: '10rem' }}
-                           aria-label="sylius logo">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 3512 1033"
-                                 fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2">
-                                <path
-                                    d="M1285.88 708.833s61.167 72.209 150.375 72.209c56.083 0 102.792-33.959 102.792-89.209 0-125.708-289.709-106.166-289.709-293.083 0-90.083 79.167-160.583 192-160.583 63.75 0 170.834 28.916 170.834 110.458v49.25h-78.209v-28c0-31.458-45.041-54.375-92.625-54.375-64.541 0-105.333 35.667-105.333 80.667 0 121.5 288.875 94.333 288.875 291.416 0 91.667-71.375 170.834-190.292 170.834-75.872-.246-148.185-32.674-198.833-89.167l50.125-60.417zm474.87 246.375c33.333 0 59.458-23.791 75.625-62l19.542-46.75-147-340.666c-5.917-13.625-13.584-17-27.167-17h-10.208v-70.5h48.416c34.834 0 47.584 9.333 61.167 43.333l97.708 242.083a459.47 459.47 0 0 1 15.292 51.834h1.667c3.624-17.589 8.455-34.908 14.458-51.834l89.208-242.083c12.75-34 28.042-43.333 62.875-43.333h49.292v70.5h-11.083c-13.542 0-21.209 3.375-27.167 17l-169.917 419.666c-26.333 66.25-78.166 101.125-138.458 101.125a142.51 142.51 0 0 1-101.083-42.5l33.958-59.458c0 .833 26.333 30.583 62.875 30.583zm433.21-617.5c0-12.75-6.791-18.708-18.666-18.708h-34.834v-70.625h81.542c38.208 0 54.167 16.125 54.167 54.375v456.208c0 12.75 6.791 18.709 18.708 18.709h34.792v70.5h-81.334c-38.208 0-54.166-16.167-54.166-54.375l-.209-456.084zM2451.17 507.5c0-12.75-6.792-18.708-18.709-18.708h-34.833v-70.5h80.75c38.208 0 54.167 16.125 54.167 54.166v286.5c0 12.75 6.791 18.709 18.708 18.709h34.833v70.5h-80.541c-38.25 0-54.167-16.167-54.167-54.375l-.208-286.292zm1.708-259.125h73.875v85.792h-73.875v-85.792zM2690.62 507.5c0-12.75-6.792-18.708-18.708-18.708h-34.834v-70.5h80.709c39.083 0 55.208 16.125 55.208 52.666v203.875c0 59.5 11.917 107.042 79.875 107.042 88.375 0 140.167-77.292 140.167-162.25V418.292h82.416v340.666c0 12.75 6.792 18.709 18.709 18.709h34.791v70.5h-79.166c-36.5 0-54.375-17-54.375-47.584v-16.125c0-13.625.875-24.625.875-24.625h-1.709c-17.666 42.459-72.875 98.709-157.833 98.709-96.875 0-146.125-50.959-146.125-164.792V507.5zm534.21 220.042s50.959 63.708 130 63.708c39.917 0 74.75-17.875 74.75-55.25 0-77.292-234.458-68.792-234.458-207.25 0-82.417 72.167-120.833 159.708-120.833 51.834 0 141 17.833 141 83.333V532h-73.916v-21.25c0-25.5-38.209-36.542-64.542-36.542-48.417 0-79.875 17.042-79.875 51 0 81.542 234.5 63.709 234.5 207.292 0 76.458-67.958 125.708-158.042 125.708-114.666 0-171.583-75.583-171.583-75.583l42.458-55.083z"
-                                    fill="#131718" fillRule="nonzero"></path>
-                                <path d="M143.417 605.333l206.625 413.25 381.375.625 92.291-129.916-680.291-283.959z"
-                                      fill="#30ba9d" fillRule="nonzero"></path>
-                                <path
-                                    d="M0 650.708l277.792 381.334 453.625.75 92.291-142.667L0 650.708zm333.083-464.541l135.209 104.875 122.25-234.584L549 29.875 333.083 186.167z"
-                                    fillRule="nonzero" fill="#1a9f83"></path>
-                                <path
-                                    d="M731.417 1032.79L333.083 186.165l85.209-61.667 463.5 675.75-150.375 232.542zM510.667 57.625l259.458 209.583L588.042 0l-77.375 57.625z"
-                                    fillRule="nonzero" fill="#30ba9d"></path>
-                            </svg>
-                        </Link>
-                    </div>
+  return (
+    <div className="border-b py-4">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-wrap items-center">
+          <div className="flex-1">
+            <Link
+              to="/"
+              className="inline-block lg:py-2"
+              style={{ width: "10rem" }}
+              aria-label="sylius logo"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="100%"
+                height="100%"
+                viewBox="0 0 3512 1033"
+                fillRule="evenodd"
+                strokeLinejoin="round"
+                strokeMiterlimit="2"
+              >
+                <path
+                  d="M1285.88 708.833s61.167 72.209 150.375 72.209c56.083 0 102.792-33.959 102.792-89.209 0-125.708-289.709-106.166-289.709-293.083 0-90.083 79.167-160.583 192-160.583 63.75 0 170.834 28.916 170.834 110.458v49.25h-78.209v-28c0-31.458-45.041-54.375-92.625-54.375-64.541 0-105.333 35.667-105.333 80.667 0 121.5 288.875 94.333 288.875 291.416 0 91.667-71.375 170.834-190.292 170.834-75.872-.246-148.185-32.674-198.833-89.167l50.125-60.417zm474.87 246.375c33.333 0 59.458-23.791 75.625-62l19.542-46.75-147-340.666c-5.917-13.625-13.584-17-27.167-17h-10.208v-70.5h48.416c34.834 0 47.584 9.333 61.167 43.333l97.708 242.083a459.47 459.47 0 0 1 15.292 51.834h1.667c3.624-17.589 8.455-34.908 14.458-51.834l89.208-242.083c12.75-34 28.042-43.333 62.875-43.333h49.292v70.5h-11.083c-13.542 0-21.209 3.375-27.167 17l-169.917 419.666c-26.333 66.25-78.166 101.125-138.458 101.125a142.51 142.51 0 0 1-101.083-42.5l33.958-59.458c0 .833 26.333 30.583 62.875 30.583zm433.21-617.5c0-12.75-6.791-18.708-18.666-18.708h-34.834v-70.625h81.542c38.208 0 54.167 16.125 54.167 54.375v456.208c0 12.75 6.791 18.709 18.708 18.709h34.792v70.5h-81.334c-38.208 0-54.166-16.167-54.166-54.375l-.209-456.084zM2451.17 507.5c0-12.75-6.792-18.708-18.709-18.708h-34.833v-70.5h80.75c38.208 0 54.167 16.125 54.167 54.166v286.5c0 12.75 6.791 18.709 18.708 18.709h34.833v70.5h-80.541c-38.25 0-54.167-16.167-54.167-54.375l-.208-286.292zm1.708-259.125h73.875v85.792h-73.875v-85.792zM2690.62 507.5c0-12.75-6.792-18.708-18.708-18.708h-34.834v-70.5h80.709c39.083 0 55.208 16.125 55.208 52.666v203.875c0 59.5 11.917 107.042 79.875 107.042 88.375 0 140.167-77.292 140.167-162.25V418.292h82.416v340.666c0 12.75 6.792 18.709 18.709 18.709h34.791v70.5h-79.166c-36.5 0-54.375-17-54.375-47.584v-16.125c0-13.625.875-24.625.875-24.625h-1.709c-17.666 42.459-72.875 98.709-157.833 98.709-96.875 0-146.125-50.959-146.125-164.792V507.5zm534.21 220.042s50.959 63.708 130 63.708c39.917 0 74.75-17.875 74.75-55.25 0-77.292-234.458-68.792-234.458-207.25 0-82.417 72.167-120.833 159.708-120.833 51.834 0 141 17.833 141 83.333V532h-73.916v-21.25c0-25.5-38.209-36.542-64.542-36.542-48.417 0-79.875 17.042-79.875 51 0 81.542 234.5 63.709 234.5 207.292 0 76.458-67.958 125.708-158.042 125.708-114.666 0-171.583-75.583-171.583-75.583l42.458-55.083z"
+                  fill="#131718"
+                  fillRule="nonzero"
+                ></path>
+                <path
+                  d="M143.417 605.333l206.625 413.25 381.375.625 92.291-129.916-680.291-283.959z"
+                  fill="#30ba9d"
+                  fillRule="nonzero"
+                ></path>
+                <path
+                  d="M0 650.708l277.792 381.334 453.625.75 92.291-142.667L0 650.708zm333.083-464.541l135.209 104.875 122.25-234.584L549 29.875 333.083 186.167z"
+                  fillRule="nonzero"
+                  fill="#1a9f83"
+                ></path>
+                <path
+                  d="M731.417 1032.79L333.083 186.165l85.209-61.667 463.5 675.75-150.375 232.542zM510.667 57.625l259.458 209.583L588.042 0l-77.375 57.625z"
+                  fillRule="nonzero"
+                  fill="#30ba9d"
+                ></path>
+              </svg>
+            </Link>
+          </div>
 
-                    <UserNavigation />
+          <div className="flex">
+            <UserNavigation />
 
-                    <div className="col-auto position-relative" data-controller="live"
-                         data-live-name-value="sylius_shop:cart:widget"
-                         data-live-url-value="/en_US/_components/sylius_shop:cart:widget"
-                         data-live-listeners-value="[{&quot;action&quot;:&quot;refreshCart&quot;,&quot;event&quot;:&quot;sylius:shop:cart_changed&quot;},{&quot;action&quot;:&quot;refreshCart&quot;,&quot;event&quot;:&quot;sylius:shop:cart_cleared&quot;}]"
-                         id="live-3283976089-0"
-                         data-live-props-value="{&quot;cart&quot;:null,&quot;hookableMetadata&quot;:{&quot;renderedBy&quot;:&quot;sylius_shop.base.header.content&quot;,&quot;configuration&quot;:&quot;[]&quot;,&quot;prefixes&quot;:[&quot;sylius_shop.homepage.index.header.content&quot;,&quot;sylius_shop.base.header.content&quot;]},&quot;template&quot;:&quot;@SyliusShop\/shared\/components\/header\/cart.html.twig&quot;,&quot;@attributes&quot;:{&quot;id&quot;:&quot;live-3283976089-0&quot;},&quot;@checksum&quot;:&quot;A\/wFpwghMT1N4zipsyyCK80KlKkntZV2R57jmGDzxAU=&quot;}">
-                        <Link to="/cart">
-                            <div>
-                                <button className="btn btn-icon btn-transparent px-0 position-relative"
-                                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart"
-                                        aria-label="cart button">
-                                    <IconShoppingBag stroke={1.25} size={28} />
-                                    {order && (
-                                        <div className="d-none d-md-block">${formatPrice(order.total)} </div>
-                                    )}
-                                </button>
-                            </div>
-                        </Link>
-                    </div>
-
-                    <div className="col-auto d-lg-none">
-                        <button className="navbar-toggler btn btn-icon btn-transparent px-0" type="button"
-                                data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav"
-                                aria-expanded="false" aria-label="Toggle navigation">
-                            <IconMenu2 stroke={1.25} size={28} />
-                        </button>
-                    </div>
-                </div>
+            <div className="relative flex-none items-center pl-2 lg:flex">
+              <small className="text-muted-foreground hidden px-1 lg:block">|</small>
+              <Link
+                to="/cart"
+                className="link-reset flex size-9 items-center gap-1"
+                aria-label="cart link"
+              >
+                <IconShoppingBag className="text-foreground" width="1em" stroke={1.25} size={28} />
+                {order && <div className="hidden md:block">${formatPrice(order.total)}</div>}
+              </Link>
             </div>
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
 export default Header;
diff --git a/src/components/layout/Loader.tsx b/src/components/layout/Loader.tsx
index dfab734..05e2bf1 100644
--- a/src/components/layout/Loader.tsx
+++ b/src/components/layout/Loader.tsx
@@ -48,10 +48,7 @@ const spinnerStyle: React.CSSProperties = {
   animation: "spin 1s linear infinite",
 };
 
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("loader-spinner-style")
-) {
+if (typeof document !== "undefined" && !document.getElementById("loader-spinner-style")) {
   const style = document.createElement("style");
   style.id = "loader-spinner-style";
   style.innerHTML = `
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 7a1455f..427fb47 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -1,23 +1,31 @@
-import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { Taxon, TaxonChild } from '../../types/Taxon';
-import 'bootstrap/dist/js/bootstrap.bundle.min.js';
-import { IconChevronDown } from '@tabler/icons-react';
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { IconChevronDown, IconMenu2 } from "@tabler/icons-react";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Taxon, TaxonChild } from "../../types/Taxon";
 
 const Navbar: React.FC = () => {
   const [taxons, setTaxons] = useState<Taxon[]>([]);
-  const [childrenMap, setChildrenMap] = useState<Record<number, TaxonChild[]>>(
-    {}
-  );
+  const [childrenMap, setChildrenMap] = useState<Record<number, TaxonChild[]>>({});
+  const [isOpen, setIsOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState<number | null>(null);
 
   useEffect(() => {
     const fetchTaxons = async () => {
       try {
-        const res = await fetch(
-          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/taxons`
-        );
+        const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/taxons`);
         const json = await res.json();
-        const data: Taxon[] = json['hydra:member'] || [];
+        const data: Taxon[] = json["hydra:member"] || [];
 
         setTaxons(data);
 
@@ -25,9 +33,7 @@ const Navbar: React.FC = () => {
           data.map(async (taxon) => {
             const childObjects: TaxonChild[] = await Promise.all(
               taxon.children.map(async (childUrl) => {
-                const res = await fetch(
-                  `${import.meta.env.VITE_REACT_APP_API_URL}${childUrl}`
-                );
+                const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${childUrl}`);
                 return await res.json();
               })
             );
@@ -42,7 +48,7 @@ const Navbar: React.FC = () => {
 
         setChildrenMap(map);
       } catch (err) {
-        console.error('Błąd ładowania kategorii:', err);
+        console.error("Error loading categories:", err);
       }
     };
 
@@ -50,64 +56,120 @@ const Navbar: React.FC = () => {
   }, []);
 
   return (
-    <div className="w-100 border-bottom">
-      <nav
-        className="navbar offcanvas-lg offcanvas-start offcanvas-wide p-0"
-        id="navbarNav"
-      >
-        <div className="offcanvas-header w-100">
-          <h5 className="offcanvas-title">Taxons</h5>
-          <button
-            type="button"
-            className="btn-close"
-            data-bs-dismiss="offcanvas"
-            data-bs-target="#navbarNav"
-            aria-label="Close"
-          ></button>
-        </div>
-
-        <div className="offcanvas-body justify-content-lg-center w-100 py-0">
-          <div className="navbar-nav my-2 flex-column flex-lg-row gap-lg-4">
+    <div className="w-full border-b">
+      {/* Desktop navbar */}
+      <nav className="hidden justify-center py-0 lg:flex">
+        <NavigationMenu className="my-1">
+          <NavigationMenuList>
             {taxons.map((taxon) => {
               const hasChildren = childrenMap[taxon.id]?.length > 0;
-
-              return hasChildren ? (
-                <div
-                  key={taxon.id}
-                  className="nav-item dropdown position-relative"
-                >
-                  <a
-                    href="#"
-                    className="nav-link d-flex align-items-center gap-1"
-                    role="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    {taxon.name}
-                    <IconChevronDown stroke={2} size={20} />
-                  </a>
-
-                  <div className="dropdown-menu position-absolute border dropdown-custom ">
-                    {childrenMap[taxon.id].map((child) => (
-                      <Link
-                        key={child.id}
-                        className="nav-link nav-link-padding"
-                        to={`/${taxon.code}/${child.code}`}
-                      >
-                        {child.name}
-                      </Link>
-                    ))}
-                  </div>
-                </div>
-              ) : (
-                <Link key={taxon.id} className="nav-link" to={`/${taxon.slug}`}>
-                  {taxon.name}
-                </Link>
+              return (
+                <NavigationMenuItem key={taxon.id}>
+                  {hasChildren ? (
+                    <>
+                      <NavigationMenuTrigger className="data-popup-open:text-primary data-popup-open:hover:text-primary active:text-primary hover:text-primary focus:text-primary hover:bg-transparent focus:bg-transparent data-popup-open:bg-transparent data-popup-open:hover:bg-transparent">
+                        {taxon.name}
+                      </NavigationMenuTrigger>
+                      <NavigationMenuContent>
+                        <ul className="grid w-50 gap-0.5 p-2">
+                          {childrenMap[taxon.id].map((child) => (
+                            <li key={child.id}>
+                              <NavigationMenuLink
+                                render={
+                                  <Link
+                                    to={`/${taxon.code}/${child.code}`}
+                                    className="hover:text-primary focus:text-primary hover:bg-transparent focus:bg-transparent"
+                                  />
+                                }
+                              >
+                                {child.name}
+                              </NavigationMenuLink>
+                            </li>
+                          ))}
+                        </ul>
+                      </NavigationMenuContent>
+                    </>
+                  ) : (
+                    <NavigationMenuLink
+                      className={navigationMenuTriggerStyle()}
+                      render={
+                        <Link
+                          to={`/${taxon.slug}`}
+                          className="hover:text-primary focus:text-primary hover:bg-transparent focus:bg-transparent"
+                        />
+                      }
+                    >
+                      {taxon.name}
+                    </NavigationMenuLink>
+                  )}
+                </NavigationMenuItem>
               );
             })}
-          </div>
-        </div>
+          </NavigationMenuList>
+        </NavigationMenu>
       </nav>
+
+      {/* Mobile navbar trigger */}
+      <div className="flex items-center px-4 py-2 lg:hidden">
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetTrigger
+            render={<Button variant="ghost" size="icon" aria-label="Toggle navigation" />}
+          >
+            <IconMenu2 stroke={1.25} size={28} />
+          </SheetTrigger>
+          <SheetContent side="left" className="w-70 p-0">
+            <div className="border-b p-4">
+              <h5 className="text-lg font-semibold">Taxons</h5>
+            </div>
+            <div className="flex flex-col py-2">
+              {taxons.map((taxon) => {
+                const hasChildren = childrenMap[taxon.id]?.length > 0;
+                return hasChildren ? (
+                  <div key={taxon.id}>
+                    <Button
+                      variant="ghost"
+                      className="flex w-full items-center justify-start gap-1 px-3 py-2"
+                      onClick={() => setOpenDropdown(openDropdown === taxon.id ? null : taxon.id)}
+                    >
+                      {taxon.name}
+                      <IconChevronDown
+                        stroke={2}
+                        size={20}
+                        className={`ml-auto transition-transform duration-200 ${
+                          openDropdown === taxon.id ? "rotate-180" : ""
+                        }`}
+                      />
+                    </Button>
+                    {openDropdown === taxon.id && (
+                      <div className="pl-4">
+                        {childrenMap[taxon.id].map((child) => (
+                          <Link
+                            key={child.id}
+                            className="text-foreground hover:text-primary hover:bg-muted/50 block px-6 py-2"
+                            to={`/${taxon.code}/${child.code}`}
+                            onClick={() => setIsOpen(false)}
+                          >
+                            {child.name}
+                          </Link>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <Link
+                    key={taxon.id}
+                    className="text-foreground hover:text-primary block px-3 py-2"
+                    to={`/${taxon.slug}`}
+                    onClick={() => setIsOpen(false)}
+                  >
+                    {taxon.name}
+                  </Link>
+                );
+              })}
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
     </div>
   );
 };
diff --git a/src/components/layout/checkout/Header.tsx b/src/components/layout/checkout/Header.tsx
index 5da8926..87613be 100644
--- a/src/components/layout/checkout/Header.tsx
+++ b/src/components/layout/checkout/Header.tsx
@@ -1,49 +1,72 @@
-import { Link } from 'react-router-dom';
-import { IconUser } from '@tabler/icons-react';
-import { useCustomer } from '../../../context/CustomerContext';
+import { Link } from "react-router-dom";
+import { IconUser } from "@tabler/icons-react";
+import { useCustomer } from "../../../context/CustomerContext";
 
 const Header = () => {
-    const { customer } = useCustomer();
+  const { customer } = useCustomer();
 
-    return (
-        <div className="bg-white border-bottom py-4">
-            <div className="container">
-                <div className="row align-items-center">
-                    <div className="col">
-                        <Link to="/" className="d-inline-block py-lg-2" style={{ width: '10rem' }}
-                              aria-label="sylius logo">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 3512 1033"
-                                 fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2">
-                                <path
-                                    d="M1285.88 708.833s61.167 72.209 150.375 72.209c56.083 0 102.792-33.959 102.792-89.209 0-125.708-289.709-106.166-289.709-293.083 0-90.083 79.167-160.583 192-160.583 63.75 0 170.834 28.916 170.834 110.458v49.25h-78.209v-28c0-31.458-45.041-54.375-92.625-54.375-64.541 0-105.333 35.667-105.333 80.667 0 121.5 288.875 94.333 288.875 291.416 0 91.667-71.375 170.834-190.292 170.834-75.872-.246-148.185-32.674-198.833-89.167l50.125-60.417zm474.87 246.375c33.333 0 59.458-23.791 75.625-62l19.542-46.75-147-340.666c-5.917-13.625-13.584-17-27.167-17h-10.208v-70.5h48.416c34.834 0 47.584 9.333 61.167 43.333l97.708 242.083a459.47 459.47 0 0 1 15.292 51.834h1.667c3.624-17.589 8.455-34.908 14.458-51.834l89.208-242.083c12.75-34 28.042-43.333 62.875-43.333h49.292v70.5h-11.083c-13.542 0-21.209 3.375-27.167 17l-169.917 419.666c-26.333 66.25-78.166 101.125-138.458 101.125a142.51 142.51 0 0 1-101.083-42.5l33.958-59.458c0 .833 26.333 30.583 62.875 30.583zm433.21-617.5c0-12.75-6.791-18.708-18.666-18.708h-34.834v-70.625h81.542c38.208 0 54.167 16.125 54.167 54.375v456.208c0 12.75 6.791 18.709 18.708 18.709h34.792v70.5h-81.334c-38.208 0-54.166-16.167-54.166-54.375l-.209-456.084zM2451.17 507.5c0-12.75-6.792-18.708-18.709-18.708h-34.833v-70.5h80.75c38.208 0 54.167 16.125 54.167 54.166v286.5c0 12.75 6.791 18.709 18.708 18.709h34.833v70.5h-80.541c-38.25 0-54.167-16.167-54.167-54.375l-.208-286.292zm1.708-259.125h73.875v85.792h-73.875v-85.792zM2690.62 507.5c0-12.75-6.792-18.708-18.708-18.708h-34.834v-70.5h80.709c39.083 0 55.208 16.125 55.208 52.666v203.875c0 59.5 11.917 107.042 79.875 107.042 88.375 0 140.167-77.292 140.167-162.25V418.292h82.416v340.666c0 12.75 6.792 18.709 18.709 18.709h34.791v70.5h-79.166c-36.5 0-54.375-17-54.375-47.584v-16.125c0-13.625.875-24.625.875-24.625h-1.709c-17.666 42.459-72.875 98.709-157.833 98.709-96.875 0-146.125-50.959-146.125-164.792V507.5zm534.21 220.042s50.959 63.708 130 63.708c39.917 0 74.75-17.875 74.75-55.25 0-77.292-234.458-68.792-234.458-207.25 0-82.417 72.167-120.833 159.708-120.833 51.834 0 141 17.833 141 83.333V532h-73.916v-21.25c0-25.5-38.209-36.542-64.542-36.542-48.417 0-79.875 17.042-79.875 51 0 81.542 234.5 63.709 234.5 207.292 0 76.458-67.958 125.708-158.042 125.708-114.666 0-171.583-75.583-171.583-75.583l42.458-55.083z"
-                                    fill="#131718" fillRule="nonzero"></path>
-                                <path d="M143.417 605.333l206.625 413.25 381.375.625 92.291-129.916-680.291-283.959z"
-                                      fill="#30ba9d" fillRule="nonzero"></path>
-                                <path
-                                    d="M0 650.708l277.792 381.334 453.625.75 92.291-142.667L0 650.708zm333.083-464.541l135.209 104.875 122.25-234.584L549 29.875 333.083 186.167z"
-                                    fillRule="nonzero" fill="#1a9f83"></path>
-                                <path
-                                    d="M731.417 1032.79L333.083 186.165l85.209-61.667 463.5 675.75-150.375 232.542zM510.667 57.625l259.458 209.583L588.042 0l-77.375 57.625z"
-                                    fillRule="nonzero" fill="#30ba9d"></path>
-                            </svg>
-                        </Link>
-                    </div>
-                    <div className="col-12 col-md-auto d-flex align-items-center gap-2">
-                        {customer ? (
-                            <>
-                                Checking out as <strong>{customer.firstName} {customer.lastName}</strong>
-                            </>
-                        ) : (
-                            <Link to="/login" className="d-flex align-items-center text-decoration-none gap-2">
-                                <IconUser stroke={2} size={16} />
-                                Sign in
-                            </Link>
-                        )}
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className="border-b bg-white py-4">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-wrap items-center">
+          <div className="flex-1">
+            <Link
+              to="/"
+              className="inline-block lg:py-2"
+              style={{ width: "10rem" }}
+              aria-label="sylius logo"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="100%"
+                height="100%"
+                viewBox="0 0 3512 1033"
+                fillRule="evenodd"
+                strokeLinejoin="round"
+                strokeMiterlimit="2"
+              >
+                <path
+                  d="M1285.88 708.833s61.167 72.209 150.375 72.209c56.083 0 102.792-33.959 102.792-89.209 0-125.708-289.709-106.166-289.709-293.083 0-90.083 79.167-160.583 192-160.583 63.75 0 170.834 28.916 170.834 110.458v49.25h-78.209v-28c0-31.458-45.041-54.375-92.625-54.375-64.541 0-105.333 35.667-105.333 80.667 0 121.5 288.875 94.333 288.875 291.416 0 91.667-71.375 170.834-190.292 170.834-75.872-.246-148.185-32.674-198.833-89.167l50.125-60.417zm474.87 246.375c33.333 0 59.458-23.791 75.625-62l19.542-46.75-147-340.666c-5.917-13.625-13.584-17-27.167-17h-10.208v-70.5h48.416c34.834 0 47.584 9.333 61.167 43.333l97.708 242.083a459.47 459.47 0 0 1 15.292 51.834h1.667c3.624-17.589 8.455-34.908 14.458-51.834l89.208-242.083c12.75-34 28.042-43.333 62.875-43.333h49.292v70.5h-11.083c-13.542 0-21.209 3.375-27.167 17l-169.917 419.666c-26.333 66.25-78.166 101.125-138.458 101.125a142.51 142.51 0 0 1-101.083-42.5l33.958-59.458c0 .833 26.333 30.583 62.875 30.583zm433.21-617.5c0-12.75-6.791-18.708-18.666-18.708h-34.834v-70.625h81.542c38.208 0 54.167 16.125 54.167 54.375v456.208c0 12.75 6.791 18.709 18.708 18.709h34.792v70.5h-81.334c-38.208 0-54.166-16.167-54.166-54.375l-.209-456.084zM2451.17 507.5c0-12.75-6.792-18.708-18.709-18.708h-34.833v-70.5h80.75c38.208 0 54.167 16.125 54.167 54.166v286.5c0 12.75 6.791 18.709 18.708 18.709h34.833v70.5h-80.541c-38.25 0-54.167-16.167-54.167-54.375l-.208-286.292zm1.708-259.125h73.875v85.792h-73.875v-85.792zM2690.62 507.5c0-12.75-6.792-18.708-18.708-18.708h-34.834v-70.5h80.709c39.083 0 55.208 16.125 55.208 52.666v203.875c0 59.5 11.917 107.042 79.875 107.042 88.375 0 140.167-77.292 140.167-162.25V418.292h82.416v340.666c0 12.75 6.792 18.709 18.709 18.709h34.791v70.5h-79.166c-36.5 0-54.375-17-54.375-47.584v-16.125c0-13.625.875-24.625.875-24.625h-1.709c-17.666 42.459-72.875 98.709-157.833 98.709-96.875 0-146.125-50.959-146.125-164.792V507.5zm534.21 220.042s50.959 63.708 130 63.708c39.917 0 74.75-17.875 74.75-55.25 0-77.292-234.458-68.792-234.458-207.25 0-82.417 72.167-120.833 159.708-120.833 51.834 0 141 17.833 141 83.333V532h-73.916v-21.25c0-25.5-38.209-36.542-64.542-36.542-48.417 0-79.875 17.042-79.875 51 0 81.542 234.5 63.709 234.5 207.292 0 76.458-67.958 125.708-158.042 125.708-114.666 0-171.583-75.583-171.583-75.583l42.458-55.083z"
+                  fill="#131718"
+                  fillRule="nonzero"
+                ></path>
+                <path
+                  d="M143.417 605.333l206.625 413.25 381.375.625 92.291-129.916-680.291-283.959z"
+                  fill="#30ba9d"
+                  fillRule="nonzero"
+                ></path>
+                <path
+                  d="M0 650.708l277.792 381.334 453.625.75 92.291-142.667L0 650.708zm333.083-464.541l135.209 104.875 122.25-234.584L549 29.875 333.083 186.167z"
+                  fillRule="nonzero"
+                  fill="#1a9f83"
+                ></path>
+                <path
+                  d="M731.417 1032.79L333.083 186.165l85.209-61.667 463.5 675.75-150.375 232.542zM510.667 57.625l259.458 209.583L588.042 0l-77.375 57.625z"
+                  fillRule="nonzero"
+                  fill="#30ba9d"
+                ></path>
+              </svg>
+            </Link>
+          </div>
+          <div className="flex w-full items-center gap-2 md:w-auto">
+            {customer ? (
+              <>
+                Checking out as{" "}
+                <strong>
+                  {customer.firstName} {customer.lastName}
+                </strong>
+              </>
+            ) : (
+              <Link to="/login" className="flex items-center gap-2 no-underline">
+                <IconUser stroke={2} size={16} />
+                Sign in
+              </Link>
+            )}
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default Header;
diff --git a/src/components/layout/checkout/Sidebar.tsx b/src/components/layout/checkout/Sidebar.tsx
index 609bcb9..23308ef 100644
--- a/src/components/layout/checkout/Sidebar.tsx
+++ b/src/components/layout/checkout/Sidebar.tsx
@@ -1,69 +1,64 @@
-import {useOrder} from "../../../context/OrderContext";
+import { useOrder } from "../../../context/OrderContext";
 import { formatPrice } from "../../../utils/price";
-import {OrderItem} from "../../../types/Order";
+import { OrderItem } from "../../../types/Order";
 import React from "react";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 
 const Sidebar: React.FC = () => {
+  const { order } = useOrder();
 
-    const { order } = useOrder();
-
-    return (
-        <div className="col-12 col-lg-5 py-5 ps-lg-6 position-relative checkout-sidebar">
-
-            <div>
-                <div className="mb-4 h2">Summary</div>
-                <table className="table mb-3">
-                    <tbody>
-                        {order?.items?.map((orderItem: OrderItem) => (
-                            <tr key={orderItem.id}>
-                                <td>
-                                    <div className="py-3 h6 mb-0 text-break">
-                                        { orderItem.productName }
-                                    </div>
-                                </td>
-                                <td>
-                                    <div className="py-3 text-end text-body-tertiary">
-                                        { orderItem.quantity }
-                                    </div>
-                                </td>
-                                <td>
-                                    <div className="py-3 text-end">
-                                        ${ formatPrice(orderItem.subtotal) }
-                                    </div>
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-                <table className="table table-borderless mb-3">
-                    <tbody>
-                    <tr>
-                        <td>Items total:</td>
-                        <td className="text-end">${formatPrice(order?.itemsSubtotal)}</td>
-                    </tr>
-                    <tr>
-                        <td>Estimated shipping cost:</td>
-                        <td className="text-end">
-                            <span>${formatPrice(order?.shippingTotal)}</span>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="pb-4">
-                            Taxes total:
-                        </td>
-                        <td className="pb-4 text-end">
-                            <div>${formatPrice(order?.taxTotal)}</div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="border-top pt-4 h5">Order total:</td>
-                        <td className="border-top pt-4 text-end h5">${formatPrice(order?.total)}</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-)
+  return (
+    <div className="checkout-sidebar relative w-full py-5 lg:w-5/12 lg:pl-20">
+      <div>
+        <div className="mb-4 text-3xl font-semibold">Summary</div>
+        <Table className="mb-3">
+          <TableBody>
+            {order?.items?.map((orderItem: OrderItem) => (
+              <TableRow key={orderItem.id}>
+                <TableCell>
+                  <div className="mb-0 py-3 text-base font-semibold break-words">
+                    {orderItem.productName}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="text-muted-foreground py-3 text-right">{orderItem.quantity}</div>
+                </TableCell>
+                <TableCell>
+                  <div className="py-3 text-right">${formatPrice(orderItem.subtotal)}</div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <Table className="mb-3">
+          <TableBody>
+            <TableRow>
+              <TableCell>Items total:</TableCell>
+              <TableCell className="text-right">${formatPrice(order?.itemsSubtotal)}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Estimated shipping cost:</TableCell>
+              <TableCell className="text-right">
+                <span>${formatPrice(order?.shippingTotal)}</span>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell className="pb-4">Taxes total:</TableCell>
+              <TableCell className="pb-4 text-right">
+                <div>${formatPrice(order?.taxTotal)}</div>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell className="border-t pt-4 text-xl font-semibold">Order total:</TableCell>
+              <TableCell className="border-t pt-4 text-right text-xl font-semibold">
+                ${formatPrice(order?.total)}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
 };
 
 export default Sidebar;
diff --git a/src/components/layout/header/UserNavigation.tsx b/src/components/layout/header/UserNavigation.tsx
index de79d53..185a69f 100644
--- a/src/components/layout/header/UserNavigation.tsx
+++ b/src/components/layout/header/UserNavigation.tsx
@@ -1,84 +1,101 @@
-import React from "react";
-import {useCustomer} from "../../../context/CustomerContext";
-import {Link} from "react-router";
-import { IconUser } from '@tabler/icons-react';
-
+import { Button } from "@/components/ui/button";
+import { IconUser } from "@tabler/icons-react";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { useCustomer } from "../../../context/CustomerContext";
 
 const UserNavigation: React.FC = () => {
-    const { customer , clearCustomer } = useCustomer();
+  const { customer, clearCustomer } = useCustomer();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
 
-    const handleLogout = () => {
-        clearCustomer();
-    }
+  const handleLogout = () => {
+    clearCustomer();
+  };
 
-    return (
-        <>
-            {customer ? (
-                <div className="col-auto">
-                    <div className="d-lg-none">
-                        <button className="btn btn-icon btn-transparent px-0" data-bs-toggle="dropdown"
-                                aria-expanded="false">
-                            <IconUser stroke={1.25} size={28} />
-                        </button>
-                        <ul className="dropdown-menu dropdown-menu-end">
-                            <li>
-                                <a href="/en_US/account/dashboard" className="link-reset dropdown-item"
-                                   id="mobile-my-account-button">
-                                    My account
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/en_US/logout" className="link-reset dropdown-item" id="mobile-logout-button">
-                                    Logout
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
+  return (
+    <>
+      {customer ? (
+        <div className="flex-none">
+          <div className="relative lg:hidden">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="px-0"
+              onClick={() => setDropdownOpen(!dropdownOpen)}
+            >
+              <IconUser stroke={1.25} size={28} />
+            </Button>
+            {dropdownOpen && (
+              <ul className="absolute top-full right-0 z-50 min-w-[160px] rounded border bg-white py-1 shadow-md">
+                <li>
+                  <a
+                    href="/en_US/account/dashboard"
+                    className="text-foreground hover:bg-muted block px-4 py-2"
+                    id="mobile-my-account-button"
+                  >
+                    My account
+                  </a>
+                </li>
+                <li>
+                  <Button
+                    variant="ghost"
+                    onClick={handleLogout}
+                    className="block h-auto w-full justify-start rounded-none px-4 py-2 text-left"
+                    id="mobile-logout-button"
+                  >
+                    Logout
+                  </Button>
+                </li>
+              </ul>
+            )}
+          </div>
 
-                    <div className="d-none d-lg-flex gap-2 align-items-center ps-2">
-                        <IconUser stroke={1.25} size={28} />
-                        <span>
-                            Hello {customer.firstName}!
-                        </span>
+          <div className="hidden items-center gap-2 pl-2 lg:flex">
+            <IconUser stroke={1.25} size={28} />
+            <span>Hello {customer.firstName}!</span>
 
-                        <small className="text-black-50 px-1">|</small>
-                        <Link to="/account/dashboard" className="link-reset" id="my-account-button">
-                            My account
-                        </Link>
+            <small className="text-muted-foreground px-1">|</small>
+            <Link to="/account/dashboard" className="link-reset" id="my-account-button">
+              My account
+            </Link>
 
-                        <small className="text-black-50 px-1">|</small>
-                        <button className="btn btn-transparent px-0" id="logout-button" onClick={handleLogout}>
-                            Logout
-                        </button>
-                    </div>
-                </div>
-            ) : (
-                <div className="col-auto">
-                    <div className="d-flex align-items-center">
-                        <div className="d-lg-none">
-                            <a href="/login" className="btn btn-icon btn-transparent px-0"
-                               aria-label="account button">
-                                <IconUser stroke={1.25} size={28} />
-                            </a>
-                        </div>
+            <small className="text-muted-foreground px-1">|</small>
+            <Button
+              variant="link"
+              className="text-foreground link-reset text-md hover:text-primary px-0 font-normal hover:no-underline"
+              id="logout-button"
+              onClick={handleLogout}
+            >
+              Logout
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex-none">
+          <div className="flex items-center">
+            <div className="lg:hidden">
+              <a href="/login" className="btn-icon px-0" aria-label="account button">
+                <IconUser stroke={1.25} size={28} />
+              </a>
+            </div>
 
-                        <div className="d-none d-lg-flex align-items-center gap-2 ps-2">
-                            <IconUser stroke={1.25} size={28} />
+            <div className="hidden items-center gap-2 pl-2 lg:flex">
+              <IconUser stroke={1.25} size={28} />
 
-                            <Link to="/login" className="link-reset" id="login-page-button">
-                                Login
-                            </Link>
+              <Link to="/login" className="link-reset" id="login-page-button">
+                Login
+              </Link>
 
-                            <small className="text-black-50 px-1">|</small>
-                            <a href="/en_US/register" className="link-reset" id="register-page-button">
-                                Register
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </>
-    )
-}
+              <small className="text-muted-foreground px-1">|</small>
+              <a href="/register" className="link-reset" id="register-page-button">
+                Register
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
 
 export default UserNavigation;
diff --git a/src/components/order/PaymentsCard.tsx b/src/components/order/PaymentsCard.tsx
index 60e09f4..57b2365 100644
--- a/src/components/order/PaymentsCard.tsx
+++ b/src/components/order/PaymentsCard.tsx
@@ -1,34 +1,34 @@
-import React from 'react';
-import { Payment } from '../../types/Order';
-import { formatPrice } from '../../utils/price';
+import React from "react";
+import { Payment } from "../../types/Order";
+import { formatPrice } from "../../utils/price";
 
 interface PaymentsCardProps {
-    payment: Payment;
-    total: number;
-    paymentState?: string;
+  payment: Payment;
+  total: number;
+  paymentState?: string;
 }
 
 const PaymentsCard: React.FC<PaymentsCardProps> = ({ payment, total, paymentState }) => {
-    return (
-        <div className="card border-0 bg-body-tertiary mb-3">
-            <div className="card-header d-flex align-items-center">
-                <div className="me-auto">Payments</div>
-                <div>{paymentState ?? ''}</div>
-            </div>
+  return (
+    <div className="bg-muted/50 mb-3 rounded-lg border-0">
+      <div className="flex items-center border-b px-4 py-3">
+        <div className="mr-auto">Payments</div>
+        <div>{paymentState ?? ""}</div>
+      </div>
 
-            <div className="card-body d-flex flex-column gap-2">
-                <div className="d-flex gap-4">
-                    <div className="me-auto">
-                        {typeof payment.method === 'object' && payment.method && 'name' in payment.method
-                            ? payment.method.name
-                            : ''}
-                    </div>
-                    <div className="fw-medium">${formatPrice(total)}</div>
-                    <div>{payment.state ?? ''}</div>
-                </div>
-            </div>
+      <div className="flex flex-col gap-2 p-4">
+        <div className="flex gap-4">
+          <div className="mr-auto">
+            {typeof payment.method === "object" && payment.method && "name" in payment.method
+              ? payment.method.name
+              : ""}
+          </div>
+          <div className="font-medium">${formatPrice(total)}</div>
+          <div>{payment.state ?? ""}</div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default PaymentsCard;
diff --git a/src/components/order/ProductRow.tsx b/src/components/order/ProductRow.tsx
index fba1300..e054ecb 100644
--- a/src/components/order/ProductRow.tsx
+++ b/src/components/order/ProductRow.tsx
@@ -1,98 +1,97 @@
-import { OrderItem } from '../../types/Order';
-import { formatPrice } from '../../utils/price';
-import { useQuery } from '@tanstack/react-query';
-import {Link} from "react-router-dom";
+import { TableCell, TableRow } from "@/components/ui/table";
+import { useQuery } from "@tanstack/react-query";
 import React from "react";
+import { Link } from "react-router-dom";
+import { OrderItem } from "../../types/Order";
+import type { Product } from "../../types/Product";
+import { formatPrice } from "../../utils/price";
+
+interface OrderVariant {
+  product: string;
+  code?: string;
+  options?: string;
+}
 
 interface ProductRowProps {
   orderItem: OrderItem;
 }
 
 const ProductRow: React.FC<ProductRowProps> = ({ orderItem }) => {
-  const fetchVariant = async (): Promise<any> => {
-    const response = await fetch(
-      `${import.meta.env.VITE_REACT_APP_API_URL}${orderItem.variant}`
-    );
+  const fetchVariant = async (): Promise<OrderVariant> => {
+    const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${orderItem.variant}`);
     if (!response.ok) {
-      throw new Error('Problem z pobieraniem wariantu');
+      throw new Error("Problem loading variant");
     }
 
     const data = await response.json();
 
-    return data['hydra:member'] || data;
+    return data["hydra:member"] || data;
   };
 
-  const { data: variant } = useQuery<any, Error>({
-    queryKey: ['variant', orderItem.id],
+  const { data: variant } = useQuery<OrderVariant, Error>({
+    queryKey: ["variant", orderItem.id],
     queryFn: fetchVariant,
   });
 
-  const fetchProduct = async (): Promise<any> => {
-    const response = await fetch(
-      `${import.meta.env.VITE_REACT_APP_API_URL}${variant.product}`
-    );
+  const fetchProduct = async (): Promise<Product> => {
+    const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${variant!.product}`);
     if (!response.ok) {
-      throw new Error('Problem z pobieraniem wariantu');
+      throw new Error("Problem loading product");
     }
 
     const data = await response.json();
 
-    return data['hydra:member'] || data;
+    return data["hydra:member"] || data;
   };
 
-  const { data: product } = useQuery<any, Error>({
+  const { data: product } = useQuery<Product, Error>({
     queryKey: [orderItem.id],
     queryFn: fetchProduct,
   });
 
   return (
-    <tr>
-      <td>
-        <div className="d-flex align-items-center gap-4">
-          <div style={{ width: '6rem' }}>
-            <div
-              className="overflow-auto bg-light rounded-3"
-              style={{ aspectRatio: '3/4' }}
-            >
+    <TableRow>
+      <TableCell className="py-3">
+        <div className="flex items-center gap-4">
+          <div style={{ width: "6rem" }}>
+            <div className="bg-muted overflow-auto rounded-xl" style={{ aspectRatio: "3/4" }}>
               {product?.images[0]?.path && (
                 <img
-                  className="img-fluid w-100 h-100 object-fit-cover"
+                  className="h-full w-full max-w-full object-cover"
                   src={product?.images[0]?.path}
-                  alt={variant.code}
+                  alt={variant?.code}
                 />
               )}
             </div>
           </div>
           <div>
-            <div className="h6">
+            <div className="text-base font-semibold">
               {product?.code ? (
-                  <Link
-                      className="link-reset text-break"
-                      to={`/product/${product.code}`}
-                  >
-                    {orderItem?.productName}
-                  </Link>
+                <Link className="link-reset wrap-break-words" to={`/product/${product.code}`}>
+                  {orderItem?.productName}
+                </Link>
               ) : (
-                  orderItem?.productName
+                orderItem?.productName
               )}
             </div>
 
-            <small className="text-body-tertiary">{variant?.code}</small>
+            <small className="text-muted-foreground">{variant?.code}</small>
+            <small className="text-muted-foreground block">{variant?.options}</small>
           </div>
         </div>
-      </td>
-      <td className="text-black-50 text-end">
+      </TableCell>
+      <TableCell className="text-muted-foreground text-right">
         <span>${formatPrice(orderItem.unitPrice)}</span>
-      </td>
+      </TableCell>
 
-      <td className={'text-end'}>
+      <TableCell className="text-right">
         <span>{orderItem.quantity}</span>
-      </td>
+      </TableCell>
 
-      <td className="text-end">
+      <TableCell className="text-right">
         <span>${formatPrice(orderItem.subtotal)}</span>
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
 
diff --git a/src/components/order/ShipmentsCard.tsx b/src/components/order/ShipmentsCard.tsx
index ea16816..7162215 100644
--- a/src/components/order/ShipmentsCard.tsx
+++ b/src/components/order/ShipmentsCard.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Shipment } from '../../types/Order';
-import { useQuery } from '@tanstack/react-query';
+import React from "react";
+import { Shipment } from "../../types/Order";
+import { useQuery } from "@tanstack/react-query";
 
 interface ShippingMethod {
   id: number;
@@ -16,32 +16,30 @@ interface ShipmentsCardProps {
 
 const ShipmentsCard: React.FC<ShipmentsCardProps> = ({ shipment }) => {
   const fetchShippingMethodFromAPI = async (): Promise<ShippingMethod> => {
-    const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}${shipment.method}`
-    );
+    const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${shipment.method}`);
     if (!response.ok) {
-      throw new Error('Error downloading shipping method');
+      throw new Error("Error downloading shipping method");
     }
 
     return response.json();
   };
 
   const { data: shippingMethod } = useQuery<ShippingMethod>({
-    queryKey: ['shipping-method', shipment.method],
+    queryKey: ["shipping-method", shipment.method],
     queryFn: fetchShippingMethodFromAPI,
   });
 
   return (
-      <div className="card border-0 bg-body-tertiary mb-3">
-        <div className="card-header d-flex align-items-center">
-          <div className="me-auto">Shipments</div>
-        </div>
-        <div className="card-body d-flex flex-column gap-2">
-          <div className="d-flex gap-4">
-            <div className="me-auto">{shippingMethod?.name}</div>
-          </div>
+    <div className="bg-muted/50 mb-3 rounded-lg border-0">
+      <div className="flex items-center border-b px-4 py-3">
+        <div className="mr-auto">Shipments</div>
+      </div>
+      <div className="flex flex-col gap-2 p-4">
+        <div className="flex gap-4">
+          <div className="mr-auto">{shippingMethod?.name}</div>
         </div>
       </div>
+    </div>
   );
 };
 
diff --git a/src/components/product/ReviewSummary.tsx b/src/components/product/ReviewSummary.tsx
index c251bc1..f569c31 100644
--- a/src/components/product/ReviewSummary.tsx
+++ b/src/components/product/ReviewSummary.tsx
@@ -1,51 +1,51 @@
-import React from 'react';
-import { ProductReview } from '../../types/Product';
-import { IconStar } from '@tabler/icons-react';
+import { IconStar } from "@tabler/icons-react";
+import React from "react";
+import { ProductReview } from "../../types/Product";
 
 interface ReviewSummaryProps {
-    reviews: ProductReview[];
-    productCode: string;
-    allReviewCount: number;
+  reviews: ProductReview[];
+  productCode: string;
+  allReviewCount: number;
 }
 
 const ReviewSummary: React.FC<ReviewSummaryProps> = ({ reviews, productCode, allReviewCount }) => {
-    const averageRating =
-        reviews.length > 0
-            ? Math.round(reviews.reduce((acc, r) => acc + r.rating, 0) / reviews.length)
-            : 0;
+  const averageRating =
+    reviews.length > 0
+      ? Math.round(reviews.reduce((acc, r) => acc + r.rating, 0) / reviews.length)
+      : 0;
 
-    const renderStars = (rating: number) => (
-        <div className="fs-4 review-stars d-flex gap-1">
-            {[...Array(5)].map((_, index) => (
-                <IconStar
-                    key={index}
-                    stroke={2}
-                    size={20}
-                    fill={index < rating ? 'currentColor' : 'none'}
-                />
-            ))}
-        </div>
-    );
+  const renderStars = (rating: number) => (
+    <div className="flex gap-1 text-2xl text-yellow-400">
+      {[...Array(5)].map((_, index) => (
+        <IconStar
+          key={index}
+          stroke={2}
+          size={20}
+          fill={index < rating ? "currentColor" : "none"}
+        />
+      ))}
+    </div>
+  );
 
-    return allReviewCount > 0 ? (
-        <div className="row mb-2">
-            <div className="col-md-auto">{renderStars(averageRating)}</div>
-            <div className="col-md-auto">
-                {allReviewCount} review{allReviewCount !== 1 && 's'}
-            </div>
-            <a href={`/product/${productCode}/review/new`} className="col-md-auto">
-                Add your review
-            </a>
-        </div>
-    ) : (
-        <div className="row mb-2">
-            <div className="col-md-auto">{renderStars(0)}</div>
-            <div className="col-md-auto">0 reviews</div>
-            <a href={`/product/${productCode}/review/new`} className="col-md-auto">
-                Add your review
-            </a>
-        </div>
-    );
+  return allReviewCount > 0 ? (
+    <div className="mb-2 flex flex-wrap">
+      <div className="md:mr-4 md:w-auto">{renderStars(averageRating)}</div>
+      <div className="md:mr-4 md:w-auto">
+        {allReviewCount} review{allReviewCount !== 1 && "s"}
+      </div>
+      <a href={`/product/${productCode}/review/new`} className="hover:text-primary md:w-auto">
+        Add your review
+      </a>
+    </div>
+  ) : (
+    <div className="mb-2 flex flex-wrap">
+      <div className="md:mr-4 md:w-auto">{renderStars(0)}</div>
+      <div className="md:mr-4 md:w-auto">0 reviews</div>
+      <a href={`/product/${productCode}/review/new`} className="hover:text-primary md:w-auto">
+        Add your review
+      </a>
+    </div>
+  );
 };
 
 export default ReviewSummary;
diff --git a/src/components/product/ReviewSummarySkeleton.tsx b/src/components/product/ReviewSummarySkeleton.tsx
index 6fd88b2..698b839 100644
--- a/src/components/product/ReviewSummarySkeleton.tsx
+++ b/src/components/product/ReviewSummarySkeleton.tsx
@@ -1,22 +1,22 @@
-import React from 'react';
-import Skeleton from 'react-loading-skeleton';
+import React from "react";
+import Skeleton from "react-loading-skeleton";
 
 const ReviewSummarySkeleton: React.FC = () => {
-    return (
-        <div className="mb-3">
-            <div className="d-flex align-items-center gap-2 mb-2">
-                <div className="d-flex gap-1 fs-4">
-                    {Array.from({ length: 5 }).map((_, idx) => (
-                        <Skeleton key={idx} width={18} height={18} circle />
-                    ))}
-                </div>
+  return (
+    <div className="mb-3">
+      <div className="mb-2 flex items-center gap-2">
+        <div className="flex gap-1 text-2xl">
+          {Array.from({ length: 5 }).map((_, idx) => (
+            <Skeleton key={idx} width={18} height={18} circle />
+          ))}
+        </div>
 
-                <Skeleton width={60} height={16} />
+        <Skeleton width={60} height={16} />
 
-                <Skeleton width={100} height={16} />
-            </div>
-        </div>
-    );
+        <Skeleton width={100} height={16} />
+      </div>
+    </div>
+  );
 };
 
 export default ReviewSummarySkeleton;
diff --git a/src/components/product/Reviews.tsx b/src/components/product/Reviews.tsx
index 05d01f3..d6a4a70 100644
--- a/src/components/product/Reviews.tsx
+++ b/src/components/product/Reviews.tsx
@@ -1,42 +1,40 @@
-import React from 'react';
-import { ProductReview } from '../../types/Product';
-import { IconStar} from '@tabler/icons-react';
+import React from "react";
+import { ProductReview } from "../../types/Product";
+import { IconStar } from "@tabler/icons-react";
 
 interface ReviewListProps {
-    reviews: ProductReview[];
+  reviews: ProductReview[];
 }
 
 const Reviews: React.FC<ReviewListProps> = ({ reviews }) => {
-    return (
-        <div className="mb-5">
-            {reviews.map((review) => (
-                <div key={review.id} className="border-bottom py-4">
-                    <div className="d-sm-flex w-100 justify-content-between align-items-center mb-2">
-                        <div className="h6 mb-1">{review.title}</div>
-                        <div className="mb-3 fs-3 review-stars d-flex gap-1">
-                            {[...Array(5)].map((_, index) => (
-                                <IconStar
-                                    key={index}
-                                    stroke={2}
-                                    size={20}
-                                    fill={index < review.rating ? 'currentColor' : 'none'}
-                                />
-                            ))}
-                        </div>
-                    </div>
-                    <div className="mb-2">
-                        <div>{review.comment}</div>
-                    </div>
-                    <small className="text-muted">
-                        {review.author?.firstName
-                            ? `${review.author.firstName}, `
-                            : ''}
-                        {new Date(review.createdAt).toLocaleDateString()}
-                    </small>
-                </div>
-            ))}
+  return (
+    <div className="mb-5">
+      {reviews.map((review) => (
+        <div key={review.id} className="border-b py-4">
+          <div className="mb-2 w-full items-center justify-between sm:flex">
+            <div className="mb-1 text-base font-semibold">{review.title}</div>
+            <div className="mb-3 flex gap-1 text-3xl text-yellow-400">
+              {[...Array(5)].map((_, index) => (
+                <IconStar
+                  key={index}
+                  stroke={2}
+                  size={20}
+                  fill={index < review.rating ? "currentColor" : "none"}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="mb-2">
+            <div>{review.comment}</div>
+          </div>
+          <small className="text-muted-foreground">
+            {review.author?.firstName ? `${review.author.firstName}, ` : ""}
+            {new Date(review.createdAt).toLocaleDateString()}
+          </small>
         </div>
-    );
+      ))}
+    </div>
+  );
 };
 
 export default Reviews;
diff --git a/src/components/taxons/ProductToolbar.tsx b/src/components/taxons/ProductToolbar.tsx
index ecba0a2..39e909a 100644
--- a/src/components/taxons/ProductToolbar.tsx
+++ b/src/components/taxons/ProductToolbar.tsx
@@ -1,95 +1,138 @@
-import React, { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { IconSearch, IconX } from '@tabler/icons-react';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { IconSearch, IconX } from "@tabler/icons-react";
+import React, { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 
 const sortOptions = [
-    { label: 'By position', value: '' },
-    { label: 'From A to Z', value: 'order[translation.name]=asc' },
-    { label: 'From Z to A', value: 'order[translation.name]=desc' },
-    { label: 'Newest first', value: 'order[createdAt]=desc' },
-    { label: 'Oldest first', value: 'order[createdAt]=asc' },
-    { label: 'Cheapest first', value: 'order[price]=asc' },
-    { label: 'Most expensive first', value: 'order[price]=desc' },
+  { label: "By position", value: "" },
+  { label: "From A to Z", value: "order[translation.name]=asc" },
+  { label: "From Z to A", value: "order[translation.name]=desc" },
+  { label: "Newest first", value: "order[createdAt]=desc" },
+  { label: "Oldest first", value: "order[createdAt]=asc" },
+  { label: "Cheapest first", value: "order[price]=asc" },
+  { label: "Most expensive first", value: "order[price]=desc" },
 ];
 
 const ProductToolbar: React.FC = () => {
-    const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
-    const [searchValue, setSearchValue] = useState(() => searchParams.get('translations.name') || '');
-    const [sortValue, setSortValue] = useState(() => {
-        const found = sortOptions.find(opt => searchParams.toString().includes(opt.value));
-        return found?.value || '';
-    });
+  // 1. Local state only for what the user types (before submission)
+  const [searchValue, setSearchValue] = useState(searchParams.get("translations.name") || "");
 
-    useEffect(() => {
-        setSearchValue(searchParams.get('translations.name') || '');
-    }, [searchParams]);
+  // 2. Derive sort value directly from the URL (no useState needed here)
+  const sortValue =
+    sortOptions.find((opt) => opt.value !== "" && searchParams.toString().includes(opt.value))
+      ?.value || "";
 
-    const handleSearch = () => {
-        const newParams = new URLSearchParams(searchParams.toString());
-        if (searchValue) {
-            newParams.set('translations.name', searchValue);
-        } else {
-            newParams.delete('translations.name');
-        }
-        setSearchParams(newParams);
-    };
+  const updateParams = (updates: Record<string, string | null>) => {
+    const newParams = new URLSearchParams(searchParams);
+    Object.entries(updates).forEach(([key, value]) => {
+      if (value === null || value === "") {
+        newParams.delete(key);
+      } else {
+        newParams.set(key, value);
+      }
+    });
+    setSearchParams(newParams);
+  };
 
-    const clearSearch = () => {
-        const newParams = new URLSearchParams(searchParams.toString());
-        newParams.delete('translations.name');
-        setSearchValue('');
-        setSearchParams(newParams);
-    };
+  const handleSearch = () => {
+    updateParams({ "translations.name": searchValue });
+  };
 
-    const handleSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const newParams = new URLSearchParams(searchParams.toString());
-        sortOptions.forEach(opt => {
-            const key = opt.value.split('=')[0];
-            if (key) newParams.delete(key);
-        });
+  const clearSearch = () => {
+    setSearchValue("");
+    updateParams({ "translations.name": null });
+  };
 
-        const selected = e.target.value;
-        if (selected) {
-            const [key, value] = selected.split('=');
-            newParams.set(key, value);
-        }
+  const handleSortChange = (selected: string | null) => {
+    if (selected === null) return;
+    const actualValue = selected === "__empty__" ? "" : selected;
+    const newParams = new URLSearchParams(searchParams);
 
-        setSortValue(selected);
-        setSearchParams(newParams);
-    };
+    // Clear previous sort params
+    sortOptions.forEach((opt) => {
+      if (opt.value) {
+        const [key] = opt.value.split("=");
+        newParams.delete(key);
+      }
+    });
 
-    return (
-        <div className="d-flex flex-wrap align-items-center gap-2 mb-4">
-            <div className="d-flex border rounded overflow-hidden flex-grow-1">
-                <input
-                    type="text"
-                    className="form-control border-0"
-                    placeholder="Value"
-                    value={searchValue}
-                    onChange={e => setSearchValue(e.target.value)}
-                />
-                <button className="btn btn-outline-secondary border-0 rounded-0" onClick={handleSearch}>
-                    <IconSearch size={24} />
-                </button>
-                <button className="btn btn-outline-secondary border-0 rounded-0" onClick={clearSearch}>
-                    <IconX size={24} />
-                </button>
+    // Apply the new sort param
+    if (actualValue) {
+      const [key, val] = actualValue.split("=");
+      newParams.set(key, val);
+    }
+    setSearchParams(newParams);
+  };
 
-            </div>
+  return (
+    <div className="mb-4 flex flex-wrap items-center gap-2">
+      <div className="flex flex-1 overflow-hidden rounded-md border shadow-xs">
+        <InputGroup className="rounded-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0">
+          <InputGroupInput
+            placeholder="Search..."
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+          />
+          <InputGroupAddon align="inline-end" className="gap-0 has-[>button]:m-0">
+            {searchValue && (
+              <InputGroupButton
+                size="icon-sm"
+                className="cursor-pointer"
+                variant="ghost"
+                onClick={clearSearch}
+              >
+                <IconX size={16} />
+              </InputGroupButton>
+            )}
+            <InputGroupButton
+              size="icon-sm"
+              className="cursor-pointer"
+              variant="ghost"
+              onClick={handleSearch}
+            >
+              <IconSearch size={16} />
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </div>
 
-            <div className="ms-auto d-flex align-items-center gap-2 ps-4">
-                <label className="form-label m-0">Sort:</label>
-                <select className="form-select" value={sortValue} onChange={handleSortChange}>
-                    {sortOptions.map(opt => (
-                        <option key={opt.label} value={opt.value}>
-                            {opt.label}
-                        </option>
-                    ))}
-                </select>
-            </div>
-        </div>
-    );
+      <div className="ml-auto flex items-center gap-2 pl-4">
+        <label className="m-0 text-sm">Sort:</label>
+        <Select value={sortValue || "__empty__"} onValueChange={handleSortChange}>
+          <SelectTrigger className="w-50">
+            <SelectValue>
+              {
+                sortOptions.find((opt) => (opt.value || "__empty__") === (sortValue || "__empty__"))
+                  ?.label
+              }
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {sortOptions.map((opt) => (
+              <SelectItem key={opt.label} value={opt.value || "__empty__"}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
 };
 
 export default ProductToolbar;
diff --git a/src/components/ui/__tests__/field-error.test.tsx b/src/components/ui/__tests__/field-error.test.tsx
new file mode 100644
index 0000000..0a4a0f5
--- /dev/null
+++ b/src/components/ui/__tests__/field-error.test.tsx
@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { FieldError } from "../field-error";
+
+describe("FieldError", () => {
+  it("renders null when isTouched=false and isSubmitted=false even with errors", () => {
+    const { container } = render(
+      <FieldError
+        id="email-error"
+        errors={["Email is required"]}
+        isTouched={false}
+        isSubmitted={false}
+      />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders null when errors array is empty even when isTouched=true", () => {
+    const { container } = render(<FieldError id="email-error" errors={[]} isTouched={true} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders the error message when isTouched=true and errors are present", () => {
+    render(<FieldError id="email-error" errors={["Email is required"]} isTouched={true} />);
+    expect(screen.getByText("Email is required")).toBeInTheDocument();
+  });
+
+  it("renders the error message when isSubmitted=true and errors are present (isTouched=false)", () => {
+    render(
+      <FieldError
+        id="email-error"
+        errors={["Email is required"]}
+        isTouched={false}
+        isSubmitted={true}
+      />
+    );
+    expect(screen.getByText("Email is required")).toBeInTheDocument();
+  });
+
+  it("renders only the first error when multiple errors are passed", () => {
+    render(
+      <FieldError id="email-error" errors={["First error", "Second error"]} isTouched={true} />
+    );
+    expect(screen.getByText("First error")).toBeInTheDocument();
+    expect(screen.queryByText("Second error")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/ui/__tests__/password-strength.test.tsx b/src/components/ui/__tests__/password-strength.test.tsx
new file mode 100644
index 0000000..ed5f9ce
--- /dev/null
+++ b/src/components/ui/__tests__/password-strength.test.tsx
@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { PasswordStrength } from "../password-strength";
+
+describe("PasswordStrength", () => {
+  it("renders null when value is empty", () => {
+    const { container } = render(<PasswordStrength value="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders 4 segment bars for any non-empty value", () => {
+    const { container } = render(<PasswordStrength value="abc" />);
+    const segments = container.querySelectorAll(".h-1.flex-1.rounded-full");
+    expect(segments).toHaveLength(4);
+  });
+
+  it("shows no colored segments for weak value 'abc' (score 0, all segments muted)", () => {
+    const { container } = render(<PasswordStrength value="abc" />);
+    const segments = container.querySelectorAll(".h-1.flex-1.rounded-full");
+    segments.forEach((seg) => {
+      expect(seg.className).toContain("bg-muted");
+      expect(seg.className).not.toContain("bg-green-500");
+      expect(seg.className).not.toContain("bg-yellow-400");
+      expect(seg.className).not.toContain("bg-orange-400");
+      expect(seg.className).not.toContain("bg-destructive");
+    });
+  });
+
+  it("shows all 4 colored segments for strong password 'Abcde1!x' (score 4)", () => {
+    const { container } = render(<PasswordStrength value="Abcde1!x" />);
+    const segments = container.querySelectorAll(".h-1.flex-1.rounded-full");
+    expect(segments).toHaveLength(4);
+    segments.forEach((seg) => {
+      expect(seg.className).toContain("bg-green-500");
+    });
+  });
+
+  it("displays 'Strong' label for score 4", () => {
+    render(<PasswordStrength value="Abcde1!x" />);
+    expect(screen.getByText("Strong")).toBeInTheDocument();
+  });
+
+  it("displays 'Too weak' label for score 1", () => {
+    // Only length >= 8 passes: "abcdefgh" — length yes, no uppercase, no digit, no symbol → score 1
+    render(<PasswordStrength value="abcdefgh" />);
+    expect(screen.getByText("Too weak")).toBeInTheDocument();
+  });
+
+  it("displays 'Weak' label for score 2", () => {
+    // length + uppercase, no digit, no symbol → score 2: "Abcdefgh"
+    render(<PasswordStrength value="Abcdefgh" />);
+    expect(screen.getByText("Weak")).toBeInTheDocument();
+  });
+
+  it("displays 'Good' label for score 3", () => {
+    // length + uppercase + digit, no symbol → score 3: "Abcde123"
+    render(<PasswordStrength value="Abcde123" />);
+    expect(screen.getByText("Good")).toBeInTheDocument();
+  });
+
+  it("shows no label text for score 0", () => {
+    // "abc": length<8, no uppercase, no digit, no symbol → score 0
+    const { container } = render(<PasswordStrength value="abc" />);
+    const label = container.querySelector("p");
+    expect(label).toBeNull();
+  });
+});
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..c3984c5
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,70 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
+      {...props}
+    >
+      <div
+        className={cn(
+          "[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 0000000..80437ae
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..2942d29
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,49 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..50bbce5
--- /dev/null
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,103 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
+  );
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("hover:text-primary! transition-colors", className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  });
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..12aba96
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..0659faf
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-base leading-normal font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..21d3add
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,26 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+
+import { cn } from "@/lib/utils";
+import { CheckIcon } from "lucide-react";
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..bdfea36
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,258 @@
+"use client";
+
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+
+import { cn } from "@/lib/utils";
+import { ChevronRightIcon, CheckIcon } from "lucide-react";
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn(
+            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden",
+            className
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100",
+        className
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};
diff --git a/src/components/ui/field-error.tsx b/src/components/ui/field-error.tsx
new file mode 100644
index 0000000..d740bac
--- /dev/null
+++ b/src/components/ui/field-error.tsx
@@ -0,0 +1,20 @@
+import type { ValidationError } from "@tanstack/react-form";
+import { formError } from "@/lib/utils";
+
+interface FieldErrorProps {
+  id: string;
+  errors: ValidationError[];
+  isTouched: boolean;
+  isSubmitted?: boolean;
+}
+
+export function FieldError({ id, errors, isTouched, isSubmitted = false }: FieldErrorProps) {
+  if (!(isTouched || isSubmitted) || errors.length === 0) {
+    return null;
+  }
+  return (
+    <span id={id} className="text-destructive text-sm">
+      {formError(errors[0])}
+    </span>
+  );
+}
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..adbec39
--- /dev/null
+++ b/src/components/ui/input-group.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start": "pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first",
+        "inline-end": "pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last",
+        "block-start":
+          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+        "block-end":
+          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva("gap-2 text-sm shadow-none flex items-center", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset";
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..fbb8073
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..60014f2
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..78830c5
--- /dev/null
+++ b/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,161 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+
+function NavigationMenu({
+  align = "start",
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn("group flex flex-1 list-none items-center justify-center gap-0", className)}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-2 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuPositioner({
+  className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+          className
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+        </NavigationMenuPrimitive.Popup>
+      </NavigationMenuPrimitive.Positioner>
+    </NavigationMenuPrimitive.Portal>
+  );
+}
+
+function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+  return (
+    <NavigationMenuPrimitive.Icon
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Icon>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+};
diff --git a/src/components/ui/password-strength.tsx b/src/components/ui/password-strength.tsx
new file mode 100644
index 0000000..72315ed
--- /dev/null
+++ b/src/components/ui/password-strength.tsx
@@ -0,0 +1,43 @@
+interface PasswordStrengthProps {
+  value: string;
+}
+
+export function PasswordStrength({ value }: PasswordStrengthProps) {
+  if (!value) return null;
+
+  const checks = [
+    value.length >= 8,
+    /[A-Z]/.test(value),
+    /[0-9]/.test(value),
+    /[^a-zA-Z0-9]/.test(value),
+  ];
+  const score = checks.filter(Boolean).length; // 0–4
+
+  const segmentColor = [
+    "bg-muted",
+    "bg-destructive",
+    "bg-orange-400",
+    "bg-yellow-400",
+    "bg-green-500",
+  ][score];
+
+  const label = ["", "Too weak", "Weak", "Good", "Strong"][score];
+
+  return (
+    <div className="mt-1.5 space-y-1">
+      <div className="flex gap-1">
+        {Array.from({ length: 4 }, (_, i) => (
+          <div
+            key={i}
+            className={`h-1 flex-1 rounded-full transition-colors ${i < score ? segmentColor : "bg-muted"}`}
+          />
+        ))}
+      </div>
+      {label && (
+        <p className="text-muted-foreground text-xs" data-testid="password-strength-label">
+          {label}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..fa3f89e
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import * as React from "react";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
+
+const Select = SelectPrimitive.Root;
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />}
+      />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none",
+            className
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpArrow>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..5e7e038
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,19 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..843499f
--- /dev/null
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,123 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { XIcon } from "lucide-react";
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..27dc341
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,43 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from "lucide-react";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..f992ddd
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..fa2b030
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/src/context/CustomerContext.tsx b/src/context/CustomerContext.tsx
index 32152c3..eeddd2d 100644
--- a/src/context/CustomerContext.tsx
+++ b/src/context/CustomerContext.tsx
@@ -9,13 +9,9 @@ interface CustomerContextType {
   clearCustomer: () => void;
 }
 
-const CustomerContext = createContext<CustomerContextType | undefined>(
-  undefined,
-);
+const CustomerContext = createContext<CustomerContextType | undefined>(undefined);
 
-export const CustomerProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export const CustomerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [customer, setCustomer] = useState<Customer | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -31,12 +27,9 @@ export const CustomerProvider: React.FC<{ children: React.ReactNode }> = ({
 
     try {
       setLoading(true);
-      const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}${userUrl}`,
-        {
-          headers: { Authorization: `Bearer ${token}` },
-        },
-      );
+      const response = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${userUrl}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
 
       if (!response.ok) {
         throw new Error("Unauthorized");
@@ -45,9 +38,9 @@ export const CustomerProvider: React.FC<{ children: React.ReactNode }> = ({
       const data = await response.json();
 
       setCustomer(data);
-    } catch (err: any) {
+    } catch (err: unknown) {
       setCustomer(null);
-      setError(err.message || "Failed to load user");
+      setError(err instanceof Error ? err.message : "Failed to load user");
     } finally {
       setLoading(false);
     }
diff --git a/src/context/FlashMessagesContext.tsx b/src/context/FlashMessagesContext.tsx
index 8996477..39345b6 100644
--- a/src/context/FlashMessagesContext.tsx
+++ b/src/context/FlashMessagesContext.tsx
@@ -1,62 +1,28 @@
-import React, { createContext, useContext, useState, useCallback } from "react";
-import FlashMessages from "../components/layout/FlashMessages.tsx";
+import React, { createContext, useCallback, useContext } from "react";
+import { toast } from "sonner";
 
 type FlashMessageType = "success" | "error" | "info" | "warning";
 
-type FlashMessage = {
-  id: string;
-  type: FlashMessageType;
-  content: string;
-};
-
 type FlashMessagesContextType = {
-  messages: FlashMessage[];
   addMessage: (type: FlashMessageType, content: string) => void;
-  removeMessage: (id: string) => void;
 };
 
-const FlashMessagesContext = createContext<
-  FlashMessagesContextType | undefined
->(undefined);
-
-export const FlashMessagesProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [messages, setMessages] = useState<FlashMessage[]>([]);
+const FlashMessagesContext = createContext<FlashMessagesContextType | undefined>(undefined);
 
-  const removeMessage = useCallback((id: string) => {
-    setMessages((prev) => prev.filter((msg) => msg.id !== id));
+export const FlashMessagesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const addMessage = useCallback((type: FlashMessageType, content: string) => {
+    toast[type](content);
   }, []);
 
-  const addMessage = useCallback(
-    (type: FlashMessageType, content: string) => {
-      const id = Date.now().toString();
-      const message: FlashMessage = { id, type, content };
-      setMessages((prev) => [...prev, message]);
-
-      setTimeout(() => {
-        removeMessage(id);
-      }, 10000);
-    },
-    [removeMessage],
-  );
-
   return (
-    <FlashMessagesContext.Provider
-      value={{ messages, addMessage, removeMessage }}
-    >
-      {children}
-      <FlashMessages messages={messages} removeMessage={removeMessage} />
-    </FlashMessagesContext.Provider>
+    <FlashMessagesContext.Provider value={{ addMessage }}>{children}</FlashMessagesContext.Provider>
   );
 };
 
 export const useFlashMessages = (): FlashMessagesContextType => {
   const context = useContext(FlashMessagesContext);
   if (!context) {
-    throw new Error(
-      "useFlashMessages must be used within a FlashMessagesProvider",
-    );
+    throw new Error("useFlashMessages must be used within a FlashMessagesProvider");
   }
   return context;
 };
diff --git a/src/context/OrderContext.tsx b/src/context/OrderContext.tsx
index f9705b7..e2b31df 100644
--- a/src/context/OrderContext.tsx
+++ b/src/context/OrderContext.tsx
@@ -1,101 +1,101 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import {
-    pickupCart,
-    fetchOrderFromAPI,
-    updateOrderItemAPI,
-    removeOrderItemAPI,
-} from '../api/orderApi';
-import { Order } from '../types/Order';
+  pickupCart,
+  fetchOrderFromAPI,
+  updateOrderItemAPI,
+  removeOrderItemAPI,
+} from "../api/orderApi";
+import { Order } from "../types/Order";
 
 interface OrderContextType {
-    order: Order | null;
-    fetchOrder: () => void;
-    updateOrderItem: (id: number, quantity: number) => void;
-    removeOrderItem: (id: number) => void;
-    isFetching: boolean;
-    orderToken: string | null;
-    setOrderToken: (token: string | null) => void;
+  order: Order | null;
+  fetchOrder: () => void;
+  updateOrderItem: (id: number, quantity: number) => void;
+  removeOrderItem: (id: number) => void;
+  isFetching: boolean;
+  orderToken: string | null;
+  setOrderToken: (token: string | null) => void;
 }
 
 const OrderContext = createContext<OrderContextType | undefined>(undefined);
 
 export const OrderProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const [orderToken, setOrderToken] = useState<string | null>(
-        localStorage.getItem('orderToken') ?? null
-    );
+  const [orderToken, setOrderToken] = useState<string | null>(
+    localStorage.getItem("orderToken") ?? null
+  );
 
-    const {
-        data: order,
-        refetch,
-        isFetching,
-    } = useQuery({
-        queryKey: ['order'],
-        queryFn: async () => {
-            if (!orderToken) {
-                const newToken = await pickupCart();
-                setOrderToken(newToken);
-                localStorage.setItem('orderToken', newToken);
-                return fetchOrderFromAPI();
-            }
+  const {
+    data: order,
+    refetch,
+    isFetching,
+  } = useQuery({
+    queryKey: ["order"],
+    queryFn: async () => {
+      if (!orderToken) {
+        const newToken = await pickupCart();
+        setOrderToken(newToken);
+        localStorage.setItem("orderToken", newToken);
+        return fetchOrderFromAPI();
+      }
 
-            try {
-                return await fetchOrderFromAPI();
-            } catch (error) {
-                console.warn('Invalid token, creating new cart...', error);
-                const newToken = await pickupCart();
-                setOrderToken(newToken);
-                localStorage.setItem('orderToken', newToken);
-                return fetchOrderFromAPI();
-            }
-        },
-    });
+      try {
+        return await fetchOrderFromAPI();
+      } catch (error) {
+        console.warn("Invalid token, creating new cart...", error);
+        const newToken = await pickupCart();
+        setOrderToken(newToken);
+        localStorage.setItem("orderToken", newToken);
+        return fetchOrderFromAPI();
+      }
+    },
+  });
 
-    const updateMutation = useMutation({
-        mutationFn: updateOrderItemAPI,
-        onSuccess: () => refetch(),
-    });
+  const updateMutation = useMutation({
+    mutationFn: updateOrderItemAPI,
+    onSuccess: () => refetch(),
+  });
 
-    const removeMutation = useMutation({
-        mutationFn: removeOrderItemAPI,
-        onSuccess: () => refetch(),
-    });
+  const removeMutation = useMutation({
+    mutationFn: removeOrderItemAPI,
+    onSuccess: () => refetch(),
+  });
 
-    useEffect(() => {
-        if (orderToken) {
-            localStorage.setItem('orderToken', orderToken);
-        }
-    }, [orderToken]);
+  useEffect(() => {
+    if (orderToken) {
+      localStorage.setItem("orderToken", orderToken);
+    }
+  }, [orderToken]);
 
-    const updateOrderItem = (id: number, quantity: number) => {
-        updateMutation.mutate({ id, quantity });
-    };
+  const updateOrderItem = (id: number, quantity: number) => {
+    updateMutation.mutate({ id, quantity });
+  };
 
-    const removeOrderItem = (id: number) => {
-        removeMutation.mutate(id);
-    };
+  const removeOrderItem = (id: number) => {
+    removeMutation.mutate(id);
+  };
 
-    return (
-        <OrderContext.Provider
-            value={{
-                order: order ?? null,
-                fetchOrder: refetch,
-                updateOrderItem,
-                removeOrderItem,
-                isFetching,
-                orderToken,
-                setOrderToken,
-            }}
-        >
-            {children}
-        </OrderContext.Provider>
-    );
+  return (
+    <OrderContext.Provider
+      value={{
+        order: order ?? null,
+        fetchOrder: refetch,
+        updateOrderItem,
+        removeOrderItem,
+        isFetching,
+        orderToken,
+        setOrderToken,
+      }}
+    >
+      {children}
+    </OrderContext.Provider>
+  );
 };
 
 export const useOrder = (): OrderContextType => {
-    const context = useContext(OrderContext);
-    if (!context) {
-        throw new Error('useOrder must be used within an OrderProvider');
-    }
-    return context;
+  const context = useContext(OrderContext);
+  if (!context) {
+    throw new Error("useOrder must be used within an OrderProvider");
+  }
+  return context;
 };
diff --git a/src/index.css b/src/index.css
index ec2585e..25616c1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,473 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: #fcfcfc;
+  --foreground: #171717;
+  --card: #fcfcfc;
+  --card-foreground: #171717;
+  --popover: #fcfcfc;
+  --popover-foreground: #525252;
+  --primary: #22b99a;
+  --primary-foreground: #ffffff;
+  --secondary: #fdfdfd;
+  --secondary-foreground: #171717;
+  --muted: #ededed;
+  --muted-foreground: #707070;
+  --accent: #ededed;
+  --accent-foreground: #202020;
+  --destructive: #ca3214;
+  --destructive-foreground: #fffcfc;
+  --border: #dfdfdf;
+  --input: #dfdfdf;
+  --ring: #22b99a;
+  --chart-1: #22b99a;
+  --chart-2: #3b82f6;
+  --chart-3: #8b5cf6;
+  --chart-4: #f59e0b;
+  --chart-5: #157965;
+  --sidebar: #fcfcfc;
+  --sidebar-foreground: #707070;
+  --sidebar-primary: #22b99a;
+  --sidebar-primary-foreground: #1e2723;
+  --sidebar-accent: #ededed;
+  --sidebar-accent-foreground: #202020;
+  --sidebar-border: #dfdfdf;
+  --sidebar-ring: #22b99a;
+  --font-sans: Outfit, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: monospace;
+  --radius: 0.5rem;
+  --shadow-x: 0px;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.17;
+  --shadow-color: #000000;
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+  --tracking-normal: 0.025em;
+  --spacing: 0.25rem;
+}
+
+.dark {
+  --background: #121212;
+  --foreground: #e2e8f0;
+  --card: #171717;
+  --card-foreground: #e2e8f0;
+  --popover: #242424;
+  --popover-foreground: #a9a9a9;
+  --primary: #1b8d76;
+  --primary-foreground: #dde8e3;
+  --secondary: #242424;
+  --secondary-foreground: #fafafa;
+  --muted: #1f1f1f;
+  --muted-foreground: #a2a2a2;
+  --accent: #313131;
+  --accent-foreground: #fafafa;
+  --destructive: #541c15;
+  --destructive-foreground: #ede9e8;
+  --border: #292929;
+  --input: #242424;
+  --ring: #1b8d76;
+  --chart-1: #22b99a;
+  --chart-2: #60a5fa;
+  --chart-3: #a78bfa;
+  --chart-4: #fbbf24;
+  --chart-5: #1b8d76;
+  --sidebar: #121212;
+  --sidebar-foreground: #898989;
+  --sidebar-primary: #22b99a;
+  --sidebar-primary-foreground: #dde8e3;
+  --sidebar-accent: #313131;
+  --sidebar-accent-foreground: #fafafa;
+  --sidebar-border: #292929;
+  --sidebar-ring: #22b99a;
+  --font-sans: Outfit, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: monospace;
+  --radius: 0.5rem;
+  --shadow-x: 0px;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.17;
+  --shadow-color: #000000;
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+@layer base {
+  * {
+    font-family: "Inter", Arial, sans-serif;
+    @apply border-border outline-ring/50;
+    transition: all 0.2s ease;
+  }
+  body {
+    @apply bg-background text-foreground;
+    letter-spacing: var(--tracking-normal);
+  }
+  h1 {
+    @apply mb-4 text-2xl font-bold;
+  }
+  h2 {
+    @apply mb-3 text-xl font-semibold;
+  }
+  h3 {
+    @apply mb-2 text-lg font-semibold;
+  }
+}
+
+@layer components {
+  /* Bootstrap-compatible responsive container */
+  .container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  @media (min-width: 576px) {
+    .container {
+      max-width: 540px;
+    }
+  }
+  @media (min-width: 768px) {
+    .container {
+      max-width: 720px;
+    }
+  }
+  @media (min-width: 992px) {
+    .container {
+      max-width: 960px;
+    }
+  }
+  @media (min-width: 1200px) {
+    .container {
+      max-width: 1140px;
+    }
+  }
+  @media (min-width: 1400px) {
+    .container {
+      max-width: 1320px;
+    }
+  }
+
+  /* Icon utilities */
+  .icon {
+    height: 28px;
+    width: 28px;
+  }
+  .icon > * {
+    stroke-width: 1.1;
+  }
+  .icon-xs {
+    height: 16px;
+    width: 16px;
+  }
+  .icon-sm {
+    height: 20px;
+    width: 20px;
+  }
+  .icon-md {
+    height: 24px;
+    width: 24px;
+  }
+  .icon-lg {
+    height: 32px;
+    width: 32px;
+  }
+  .icon-xl {
+    height: 40px;
+    width: 40px;
+  }
+  .icon-xs > *,
+  .icon-sm > *,
+  .icon-md > * {
+    stroke-width: 2;
+  }
+
+  /* Button icon utility */
+  .btn-icon {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    padding-left: 1.4rem;
+    padding-right: 1.6rem;
+  }
+
+  /* Link reset */
+  .link-reset {
+    color: inherit;
+    text-decoration: none;
+  }
+  .link-reset:hover {
+    color: var(--color-primary);
+  }
+
+  /* Products grid */
+  .products-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+    grid-gap: 3rem 2rem;
+  }
+
+  /* Photo grid for homepage new collection section */
+  .photo-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+  }
+  .photo-grid .photo-grid-item-1 {
+    grid-area: 2 / 1 / 4 / 5;
+  }
+  .photo-grid .photo-grid-item-2 {
+    grid-area: 1 / 1 / 2 / 5;
+  }
+  .photo-grid .photo-grid-item-2 img {
+    aspect-ratio: 4/3;
+  }
+  .photo-grid .photo-grid-item-3 {
+    grid-area: 4 / 1 / 5 / 5;
+  }
+  .photo-grid .photo-grid-item-3 img {
+    aspect-ratio: 4/3;
+  }
+  @media (min-width: 768px) {
+    .photo-grid .photo-grid-item-1 {
+      grid-area: 1 / 1 / 5 / 3;
+    }
+    .photo-grid .photo-grid-item-2 {
+      grid-area: 1 / 3 / 3 / 5;
+    }
+    .photo-grid .photo-grid-item-3 {
+      grid-area: 3 / 3 / 5 / 5;
+    }
+  }
+
+  /* Checkout steps component */
+  .steps {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  @media (min-width: 576px) {
+    .steps {
+      flex-direction: row;
+      gap: 0;
+    }
+  }
+  .steps.steps-complete {
+    justify-content: center;
+  }
+  @media (min-width: 576px) {
+    .steps .steps-item:not(:last-child)::after {
+      content: "›";
+      padding: 0 1.4rem;
+      color: #6c757d;
+    }
+  }
+  .steps .steps-item a {
+    text-decoration: none;
+    color: inherit;
+  }
+  @media (min-width: 576px) {
+    .steps .steps-item a {
+      padding: 1.4rem 0 0.6rem 0;
+    }
+  }
+  .steps .steps-item a:hover {
+    color: var(--color-primary);
+  }
+  .steps .steps-item-active a {
+    position: relative;
+  }
+  .steps .steps-item-active a::before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: calc(100% - 3px);
+    height: 3px;
+    border-radius: 99px;
+    background-color: var(--color-primary);
+  }
+  @media (min-width: 576px) {
+    .steps .steps-item-active a::before {
+      top: -5px;
+    }
+  }
+  .steps .steps-item-disabled,
+  .steps .steps-item-disabled a {
+    color: #6c757d;
+  }
+
+  /* Checkout sidebar pseudo-element background */
+  @media (min-width: 992px) {
+    .checkout-sidebar::before {
+      background: #f8f9fa;
+      bottom: 0;
+      content: "";
+      height: 200%;
+      left: 0;
+      position: absolute;
+      width: 50vw;
+      z-index: -1;
+    }
+  }
+
+  /* Product thumbnails sidebar */
+  .product-thumbnails {
+    max-height: 720px;
+    gap: 0.75rem;
+    padding-right: 4px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+  .product-thumbnails button {
+    aspect-ratio: 3 / 4;
+    width: 100px;
+    max-width: 100%;
+  }
+  .product-thumbnails button img {
+    display: block;
+  }
+
+  /* Product main image wrapper */
+  .product-main-image-wrapper {
+    aspect-ratio: 3 / 4;
+    height: auto;
+    cursor: zoom-in;
+  }
+
+  /* Slick carousel custom arrows */
+  .custom-slick-arrow {
+    width: 94px;
+    height: 48px;
+    background: #1a866b !important;
+    border: 1px solid #22b99a;
+    border-radius: 0.3rem;
+    transition: background-color 0.2s ease;
+    opacity: 0.9;
+    z-index: 1;
+  }
+  .custom-slick-arrow:hover {
+    background-color: #43c4a9 !important;
+    border-color: #38c0a4;
+  }
+  .custom-slick-arrow:hover svg {
+    color: black !important;
+  }
+  .custom-slick-arrow svg {
+    color: white !important;
+  }
+  .custom-slick-arrow::before {
+    display: none;
+  }
+
+  /* Star rating interactive widget */
+  .star-rating {
+    display: inline-flex;
+    gap: 0.25rem;
+    direction: ltr;
+  }
+  .star-rating .star {
+    all: unset;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #ccc;
+    transition: color 0.2s ease;
+  }
+  .star-rating:hover .star {
+    color: #ffc107;
+  }
+  .star-rating .star:hover ~ .star {
+    color: #ccc !important;
+  }
+  .star-rating .active {
+    color: #ffc107;
+  }
+
+  /* Flag icon */
+  .flag-sm {
+    width: 24px;
+    aspect-ratio: 1.33;
+  }
 }
diff --git a/src/layouts/Account.tsx b/src/layouts/Account.tsx
index 7dcfe9c..4e8fd37 100644
--- a/src/layouts/Account.tsx
+++ b/src/layouts/Account.tsx
@@ -1,75 +1,57 @@
+import { IconBook, IconHome, IconLock, IconShoppingCart, IconUser } from "@tabler/icons-react";
 import React from "react";
+import { Link } from "react-router-dom";
 import Breadcrumbs from "../components/Breadcrumbs";
-import { Link } from "react-router";
-import {
-  IconBook,
-  IconHome,
-  IconLock,
-  IconShoppingCart,
-  IconUser,
-} from "@tabler/icons-react";
 
 interface AccountLayoutProps {
-    children: React.ReactNode;
-    breadcrumbs?: { label: string; url: string }[];
+  children: React.ReactNode;
+  breadcrumbs?: { label: string; url: string }[];
 }
 
 const AccountLayout: React.FC<AccountLayoutProps> = ({ children, breadcrumbs }) => {
-    const defaultBreadcrumbs = [
-        { label: "Home", url: "/" },
-        { label: "My account", url: "/account/dashboard" },
-    ];
+  const defaultBreadcrumbs = [
+    { label: "Home", url: "/" },
+    { label: "My account", url: "/account/dashboard" },
+  ];
 
-    return (
-        <div className="container mb-auto">
-            <div className="row my-4">
-                <div className="col-12">
-                    <Breadcrumbs paths={breadcrumbs ?? defaultBreadcrumbs} />
-                </div>
+  return (
+    <div className="container mx-auto mb-auto px-4">
+      <div className="my-4 flex flex-wrap">
+        <div className="mb-4 w-full">
+          <Breadcrumbs paths={breadcrumbs ?? defaultBreadcrumbs} />
+        </div>
 
-        <div className="col-12 col-md-3 mb-4 mb-md-0">
+        <div className="mb-4 w-full px-4 md:mb-0 md:w-1/4">
           <div className="mb-3">
-            <div className="h3 mb-4">Your account</div>
-            <div className="d-inline-flex flex-column">
-              <Link
-                className="d-flex align-items-center gap-2 py-1 link-reset"
-                to="/account/dashboard"
-              >
+            <div className="mb-4 text-2xl font-semibold">Your account</div>
+            <div className="inline-flex flex-col">
+              <Link className="link-reset flex items-center gap-2 py-1" to="/account/dashboard">
                 <IconHome stroke={1.25} size={28} />
                 Dashboard
               </Link>
 
-              <a
-                className="d-flex align-items-center gap-2 py-1 link-reset"
-                href="/account/profile/edit"
-              >
+              <Link className="link-reset flex items-center gap-2 py-1" to="/account/profile/edit">
                 <IconUser stroke={1.25} size={28} />
                 Personal information
-              </a>
+              </Link>
 
-              <a
-                className="d-flex align-items-center gap-2 py-1 link-reset"
-                href="/account/change-password"
+              <Link
+                className="link-reset flex items-center gap-2 py-1"
+                to="/account/change-password"
               >
                 <IconLock stroke={1.25} size={28} />
                 Change password
-              </a>
+              </Link>
 
-              <a
-                className="d-flex align-items-center gap-2 py-1 link-reset"
-                href="/account/address-book/"
-              >
+              <Link className="link-reset flex items-center gap-2 py-1" to="/account/address-book">
                 <IconBook stroke={1.25} size={28} />
                 Address book
-              </a>
+              </Link>
 
-              <a
-                className="d-flex align-items-center gap-2 py-1 link-reset"
-                href="/account/order-history"
-              >
+              <Link className="link-reset flex items-center gap-2 py-1" to="/account/order-history">
                 <IconShoppingCart stroke={1.25} size={28} />
                 Order history
-              </a>
+              </Link>
             </div>
           </div>
         </div>
diff --git a/src/layouts/Checkout.tsx b/src/layouts/Checkout.tsx
index 1da9792..950c332 100644
--- a/src/layouts/Checkout.tsx
+++ b/src/layouts/Checkout.tsx
@@ -1,26 +1,26 @@
-import React from 'react';
-import Header from './../components/layout/checkout/Header';
-import Sidebar from './../components/layout/checkout/Sidebar';
+import React from "react";
+import Header from "./../components/layout/checkout/Header";
+import Sidebar from "./../components/layout/checkout/Sidebar";
 
 interface CheckoutLayoutProps {
-    children: React.ReactNode;
-    sidebarOn?: boolean;
+  children: React.ReactNode;
+  sidebarOn?: boolean;
 }
 
 const CheckoutLayout: React.FC<CheckoutLayoutProps> = ({ children, sidebarOn = true }) => {
-    return (
-        <div className="d-flex flex-column min-vh-100 overflow-hidden">
-            <Header />
-            <div className="flex-grow-1 d-flex align-items-stretch">
-                <div className="container">
-                    <div className="row h-100">
-                        {children}
-                        {sidebarOn && <Sidebar />}
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className="flex min-h-screen flex-col overflow-hidden">
+      <Header />
+      <div className="flex flex-1 items-stretch">
+        <div className="container mx-auto px-4">
+          <div className="flex h-full flex-wrap">
+            {children}
+            {sidebarOn && <Sidebar />}
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default CheckoutLayout;
diff --git a/src/layouts/Default.tsx b/src/layouts/Default.tsx
index ce70b96..b866657 100644
--- a/src/layouts/Default.tsx
+++ b/src/layouts/Default.tsx
@@ -1,21 +1,21 @@
-import Header from './../components/layout/Header';
-import Footer from './../components/layout/Footer';
+import React from "react";
 import Navbar from "../components/layout/Navbar";
-import React from 'react';
+import Footer from "./../components/layout/Footer";
+import Header from "./../components/layout/Header";
 
 interface LayoutProps {
-    children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
-    return (
-        <div className="d-flex flex-column min-vh-100">
-            <Header />
-            <Navbar />
-            {children}
-            <Footer />
-        </div>
-    );
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <Navbar />
+      {children}
+      <Footer />
+    </div>
+  );
 };
 
 export default Layout;
diff --git a/src/lib/__tests__/utils.test.ts b/src/lib/__tests__/utils.test.ts
new file mode 100644
index 0000000..ff4e225
--- /dev/null
+++ b/src/lib/__tests__/utils.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from "vitest";
+import { formError, applyServerErrors, clearServerErrors } from "../utils";
+
+describe("formError", () => {
+  it("returns the string when given a string", () => {
+    expect(formError("some error")).toBe("some error");
+  });
+
+  it("returns message when given an object with a message property", () => {
+    expect(formError({ message: "err" })).toBe("err");
+  });
+
+  it("returns empty string for undefined", () => {
+    expect(formError(undefined)).toBe("");
+  });
+
+  it("returns empty string for a number", () => {
+    expect(formError(42)).toBe("");
+  });
+});
+
+function makeMockForm(fieldNames: string[]) {
+  const fieldMeta: Record<string, { errorMap: Record<string, unknown>; isTouched: boolean }> = {};
+  for (const name of fieldNames) {
+    fieldMeta[name] = { errorMap: {}, isTouched: false };
+  }
+
+  const setFieldMeta = vi.fn(
+    (field: string, updater: (meta: (typeof fieldMeta)[string]) => (typeof fieldMeta)[string]) => {
+      fieldMeta[field] = updater(fieldMeta[field]);
+    }
+  );
+
+  return { state: { fieldMeta }, setFieldMeta };
+}
+
+describe("applyServerErrors", () => {
+  it("sets errorMap.onServer and isTouched=true on each specified field", () => {
+    const form = makeMockForm(["email", "password"]);
+    applyServerErrors(form, { email: "Email taken", password: "Too weak" });
+
+    expect(form.setFieldMeta).toHaveBeenCalledTimes(2);
+    expect(form.state.fieldMeta.email.errorMap.onServer).toBe("Email taken");
+    expect(form.state.fieldMeta.email.isTouched).toBe(true);
+    expect(form.state.fieldMeta.password.errorMap.onServer).toBe("Too weak");
+    expect(form.state.fieldMeta.password.isTouched).toBe(true);
+  });
+});
+
+describe("clearServerErrors", () => {
+  it("sets errorMap.onServer to undefined on all fields", () => {
+    const form = makeMockForm(["email", "password"]);
+    form.state.fieldMeta.email.errorMap.onServer = "Email taken";
+    form.state.fieldMeta.password.errorMap.onServer = "Too weak";
+
+    clearServerErrors(form);
+
+    expect(form.setFieldMeta).toHaveBeenCalledTimes(2);
+    expect(form.state.fieldMeta.email.errorMap.onServer).toBeUndefined();
+    expect(form.state.fieldMeta.password.errorMap.onServer).toBeUndefined();
+  });
+});
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..407248b
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,57 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// TanStack Form v1 with StandardSchemaV1 (Zod) stores issue objects { message: string }
+// in field.state.meta.errors, not plain strings. This helper extracts the message.
+export function formError(error: unknown): string {
+  if (typeof error === "string") return error;
+  if (error && typeof error === "object" && "message" in error) {
+    return String((error as { message: string }).message);
+  }
+  return "";
+}
+
+type FormWithSetFieldMeta = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setFieldMeta: (field: any, updater: (meta: any) => any) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  state: { fieldMeta: Record<string, any> };
+};
+
+export function clearServerErrors(form: FormWithSetFieldMeta): void {
+  for (const fieldName of Object.keys(form.state.fieldMeta)) {
+    form.setFieldMeta(fieldName, (meta) => ({
+      ...meta,
+      errorMap: { ...meta.errorMap, onServer: undefined },
+    }));
+  }
+}
+
+export function applyServerErrors(
+  form: FormWithSetFieldMeta,
+  errors: Partial<Record<string, string>>
+): void {
+  for (const [field, message] of Object.entries(errors)) {
+    form.setFieldMeta(field, (meta) => ({
+      ...meta,
+      errorMap: { ...meta.errorMap, onServer: message },
+      isTouched: true,
+    }));
+  }
+}
+
+export async function submitForm(
+  form: FormWithSetFieldMeta & { handleSubmit: () => Promise<void> },
+  formEl?: HTMLFormElement | null
+): Promise<void> {
+  clearServerErrors(form);
+  await form.handleSubmit();
+  if (formEl) {
+    const firstInvalid = formEl.querySelector<HTMLElement>('[aria-invalid="true"]');
+    firstInvalid?.focus();
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
index 3c5d0ee..7cff4b2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,16 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import "./index.css";
 
 const queryClient = new QueryClient();
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
diff --git a/src/pages/CartPage.tsx b/src/pages/CartPage.tsx
index da70200..44771d5 100644
--- a/src/pages/CartPage.tsx
+++ b/src/pages/CartPage.tsx
@@ -1,17 +1,18 @@
-import React from 'react';
-import Layout from '../layouts/Default';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import ProductRow from '../components/cart/ProductRow';
-import { Order, OrderItem } from '../types/Order';
-import { formatPrice } from '../utils/price';
-import { Link } from 'react-router-dom';
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import React from "react";
+import { Link } from "react-router-dom";
+import ProductRow from "../components/cart/ProductRow";
+import Layout from "../layouts/Default";
+import { Order, OrderItem } from "../types/Order";
+import { formatPrice } from "../utils/price";
 
 const fetchCart = async (): Promise<Order> => {
   const response = await fetch(
-      `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem('orderToken')}`
+    `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem("orderToken")}`
   );
   if (!response.ok) {
-    throw new Error('Failed to fetch cart');
+    throw new Error("Failed to fetch cart");
   }
 
   const data = await response.json();
@@ -20,10 +21,10 @@ const fetchCart = async (): Promise<Order> => {
 
 const removeCartItem = async (id: number): Promise<void> => {
   const response = await fetch(
-      `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem('orderToken')}/items/${id}`,
-      { method: 'DELETE' }
+    `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem("orderToken")}/items/${id}`,
+    { method: "DELETE" }
   );
-  if (!response.ok) throw new Error('Failed to remove item from cart');
+  if (!response.ok) throw new Error("Failed to remove item from cart");
 };
 
 interface UpdateCartItemPayload {
@@ -33,14 +34,14 @@ interface UpdateCartItemPayload {
 
 const updateCartItem = async ({ id, quantity }: UpdateCartItemPayload): Promise<void> => {
   const response = await fetch(
-      `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem('orderToken')}/items/${id}`,
-      {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/merge-patch+json' },
-        body: JSON.stringify({ quantity }),
-      }
+    `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem("orderToken")}/items/${id}`,
+    {
+      method: "PATCH",
+      headers: { "Content-Type": "application/merge-patch+json" },
+      body: JSON.stringify({ quantity }),
+    }
   );
-  if (!response.ok) throw new Error('Failed to update item quantity');
+  if (!response.ok) throw new Error("Failed to update item quantity");
 };
 
 const debounce = <T extends unknown[]>(func: (...args: T) => void, delay: number) => {
@@ -55,18 +56,18 @@ const CartPage: React.FC = () => {
   const queryClient = useQueryClient();
 
   const { data: order } = useQuery<Order>({
-    queryKey: ['order'],
+    queryKey: ["order"],
     queryFn: fetchCart,
   });
 
   const removeMutation = useMutation({
     mutationFn: removeCartItem,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['order'] }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["order"] }),
   });
 
   const updateMutation = useMutation({
     mutationFn: updateCartItem,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['order'] }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["order"] }),
   });
 
   const debouncedUpdate = debounce((id: number, quantity: number) => {
@@ -74,74 +75,83 @@ const CartPage: React.FC = () => {
   }, 500);
 
   return (
-      <Layout>
-        <div className="container mt-4 mb-5">
-          <div className="mb-5">
-            <h1>Your shopping cart</h1>
-            <div>Edit your items, apply coupon or proceed to the checkout</div>
+    <Layout>
+      <div className="container mt-4 mb-5">
+        <div className="mb-5">
+          <h1>Your shopping cart</h1>
+          <div>Edit your items, apply coupon or proceed to the checkout</div>
+        </div>
+        {order?.items?.length === 0 ? (
+          <div className="rounded border border-blue-200 bg-blue-50 p-3 text-blue-800">
+            <div className="font-bold">Info</div>
+            Your cart is empty
           </div>
-          {order?.items?.length === 0 ? (
-              <div className="alert alert-info">
-                <div className="fw-bold">Info</div>
-                Your cart is empty
-              </div>
-          ) : (
-              <div className="row">
-                <div className="col-12 col-xl-8 mb-4 position-relative">
-                  <div className="table-responsive">
-                    <table className="table align-middle">
-                      <thead>
-                      <tr>
-                        <th style={{ width: '1px' }}></th>
-                        <th>Item</th>
-                        <th style={{ width: '90px' }} className="text-end text-nowrap">Unit price</th>
-                        <th style={{ minWidth: '70px', width: '110px' }} className="text-end">Qty</th>
-                        <th style={{ width: '90px' }} className="text-end">Total</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      {order?.items?.map((orderItem: OrderItem) => (
-                          <ProductRow
-                              key={orderItem.id}
-                              orderItem={orderItem}
-                              onRemove={removeMutation.mutate}
-                              onUpdate={debouncedUpdate}
-                          />
-                      ))}
-                      </tbody>
-                    </table>
-                  </div>
+        ) : (
+          <div className="-mx-4 flex flex-wrap">
+            <div className="relative mb-4 w-full px-4 xl:w-2/3">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead style={{ width: "1px" }}></TableHead>
+                    <TableHead className="text-left">Item</TableHead>
+                    <TableHead style={{ width: "90px" }} className="text-right whitespace-nowrap">
+                      Unit price
+                    </TableHead>
+                    <TableHead style={{ minWidth: "70px", width: "110px" }} className="text-right">
+                      Qty
+                    </TableHead>
+                    <TableHead style={{ width: "90px" }} className="text-right">
+                      Total
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {order?.items?.map((orderItem: OrderItem) => (
+                    <ProductRow
+                      key={orderItem.id}
+                      orderItem={orderItem}
+                      onRemove={removeMutation.mutate}
+                      onUpdate={debouncedUpdate}
+                    />
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+            <div className="mb-4 w-full px-4 xl:w-1/3 xl:pl-20">
+              <div className="bg-muted mb-4 rounded-xl p-4">
+                <h3 className="mb-4">Summary</h3>
+                <div className="mb-2 flex justify-between">
+                  <div>Items total:</div>
+                  <div className="text-right">${formatPrice(order?.itemsSubtotal)}</div>
                 </div>
-                <div className="col-12 col-xl-4 ps-xl-5 mb-4">
-                  <div className="p-4 bg-light mb-4 rounded-3">
-                    <h3 className="mb-4">Summary</h3>
-                    <div className="hstack gap-2 mb-2">
-                      <div>Items total:</div>
-                      <div className="ms-auto text-end">${formatPrice(order?.itemsSubtotal)}</div>
-                    </div>
-                    <div className="hstack gap-2 mb-2">
-                      <div>Estimated shipping cost:</div>
-                      <div className="ms-auto text-end">${formatPrice(order?.shippingTotal)}</div>
-                    </div>
-                    <div className="hstack gap-2 mb-2">
-                      <div>Taxes total:</div>
-                      <div className="ms-auto text-end">${formatPrice(order?.taxTotal)}</div>
-                    </div>
-                    <div className="hstack gap-2 border-top pt-4 mt-4">
-                      <div className="h5">Order total:</div>
-                      <div className="ms-auto h5 text-end">${formatPrice(order?.total)}</div>
-                    </div>
-                  </div>
-                  <div className="d-flex">
-                    <Link to="/checkout/address" className="btn btn-primary flex-grow-1">
-                      Checkout
-                    </Link>
+                <div className="mb-2 flex justify-between">
+                  <div>Estimated shipping cost:</div>
+                  <div className="text-right">${formatPrice(order?.shippingTotal)}</div>
+                </div>
+                <div className="mb-2 flex justify-between">
+                  <div>Taxes total:</div>
+                  <div className="text-right">${formatPrice(order?.taxTotal)}</div>
+                </div>
+                <div className="mt-4 flex justify-between border-t pt-4">
+                  <div className="text-lg font-semibold">Order total:</div>
+                  <div className="text-right text-lg font-semibold">
+                    ${formatPrice(order?.total)}
                   </div>
                 </div>
               </div>
-          )}
-        </div>
-      </Layout>
+              <div className="flex">
+                <Link
+                  to="/checkout/address"
+                  className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex flex-1 items-center justify-center rounded px-4 py-2 text-center"
+                >
+                  Checkout
+                </Link>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </Layout>
   );
 };
 
diff --git a/src/pages/Checkout/AddressPage.tsx b/src/pages/Checkout/AddressPage.tsx
index bf2be18..b316e20 100644
--- a/src/pages/Checkout/AddressPage.tsx
+++ b/src/pages/Checkout/AddressPage.tsx
@@ -1,284 +1,595 @@
-import React, { useEffect, useRef, useState } from 'react';
-import CheckoutLayout from '../../layouts/Checkout';
-import { AddressInterface } from '../../types/Order';
-import { useNavigate, Link } from 'react-router-dom';
-import Steps from '../../components/checkout/Steps';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
-import { useCustomer } from '../../context/CustomerContext';
-import { useOrder } from '../../context/OrderContext';
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { addressSchema, AddressValues } from "@/schemas/address";
+import { FieldError } from "@/components/ui/field-error";
+import { submitForm } from "@/lib/utils";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { useForm } from "@tanstack/react-form";
+import React, { useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import Steps from "../../components/checkout/Steps";
+import { useCustomer } from "../../context/CustomerContext";
+import { useOrder } from "../../context/OrderContext";
+import CheckoutLayout from "../../layouts/Checkout";
 
 interface Country {
-    code: string;
-    name: string;
+  code: string;
+  name: string;
 }
 
-const emptyAddress: AddressInterface = {
-    firstName: '',
-    lastName: '',
-    company: '',
-    street: '',
-    countryCode: '',
-    city: '',
-    postcode: '',
-    phoneNumber: '',
+const emptyAddress: AddressValues = {
+  firstName: "",
+  lastName: "",
+  company: "",
+  street: "",
+  countryCode: "",
+  provinceName: "",
+  city: "",
+  postcode: "",
+  phoneNumber: "",
 };
 
+const labelClass = "block text-sm font-medium mb-1";
+
 const AddressPage: React.FC = () => {
-    const { customer } = useCustomer();
-    const { order, fetchOrder } = useOrder();
-    const navigate = useNavigate();
-
-    const [email, setEmail] = useState('');
-    const [billingAddress, setBillingAddress] = useState<AddressInterface>(emptyAddress);
-    const [shippingAddress, setShippingAddress] = useState<AddressInterface>(emptyAddress);
-    const [useDifferentShipping, setUseDifferentShipping] = useState(false);
-
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [addresses, setAddresses] = useState<AddressInterface[]>([]);
-    const [countries, setCountries] = useState<Country[]>([]);
-
-    const isInitialized = useRef(false);
-
-    useEffect(() => {
-        const fetchData = async () => {
-            const token = localStorage.getItem('jwtToken');
-
-            try {
-                const [addressesRes, countriesRes] = await Promise.all([
-                    token
-                        ? fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses`, {
-                            headers: { Authorization: `Bearer ${token}` },
-                        })
-                        : Promise.resolve({ json: () => ({ 'hydra:member': [] }) }),
-                    fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/countries`),
-                ]);
-
-                const addressData = await addressesRes.json();
-                const countryData = await countriesRes.json();
-
-                const addressItems = addressData['hydra:member'] as AddressInterface[];
-                const countryItems = countryData['hydra:member'] as Country[];
-
-                setAddresses(addressItems);
-                setCountries(countryItems);
-
-                if (!isInitialized.current) {
-                    if (order?.billingAddress) {
-                        setBillingAddress(order.billingAddress);
-                    } else if (token && customer) {
-                        const defaultAddressId =
-                            typeof customer.defaultAddress === 'string'
-                                ? customer.defaultAddress.split('/').pop()
-                                : customer.defaultAddress?.['@id']?.split('/').pop();
-
-                        const defaultAddress = addressItems.find(addr => String(addr.id) === defaultAddressId);
-                        if (defaultAddress) {
-                            setBillingAddress({ ...defaultAddress });
-                        }
-                    }
+  const { customer } = useCustomer();
+  const { order, fetchOrder } = useOrder();
+  const navigate = useNavigate();
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const [addresses, setAddresses] = useState<(AddressValues & { id?: number })[]>([]);
+  const [countries, setCountries] = useState<Country[]>([]);
+
+  const isInitialized = useRef(false);
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      billingAddress: emptyAddress,
+      useDifferentShipping: false,
+      shippingAddress: emptyAddress,
+    },
+    validators: {
+      onSubmit: ({ value }) => {
+        const fields: Record<string, string> = {};
+
+        if (!customer && !value.email?.trim()) {
+          fields["email"] = "Email is required";
+        }
 
-                    if (order?.shippingAddress) {
-                        setUseDifferentShipping(true);
-                        setShippingAddress(order.shippingAddress);
-                    }
+        const billingResult = addressSchema.safeParse(value.billingAddress);
+        if (!billingResult.success) {
+          for (const issue of billingResult.error.issues) {
+            const key = issue.path[0];
+            if (key) fields[`billingAddress.${key}`] = issue.message;
+          }
+        }
 
-                    isInitialized.current = true;
-                }
-            } catch (error) {
-                console.error('Error loading addresses or countries', error);
+        if (value.useDifferentShipping) {
+          const shippingResult = addressSchema.safeParse(value.shippingAddress);
+          if (!shippingResult.success) {
+            for (const issue of shippingResult.error.issues) {
+              const key = issue.path[0];
+              if (key) fields[`shippingAddress.${key}`] = issue.message;
             }
-        };
-
-        fetchData();
-    }, [customer, order]);
-
-    const handleChange =
-        (setter: React.Dispatch<React.SetStateAction<AddressInterface>>) =>
-            (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-                const { name, value } = e.target;
-                setter(prev => ({ ...prev, [name]: value }));
-            };
-
-    const handleAddressSelect =
-        (setter: React.Dispatch<React.SetStateAction<AddressInterface>>) =>
-            (e: React.ChangeEvent<HTMLSelectElement>) => {
-                const selectedId = e.target.value;
-                const selected = addresses.find(addr => String(addr.id) === selectedId);
-                if (selected) {
-                    setter({ ...selected });
-                }
-            };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setIsSubmitting(true);
-
-        try {
-            const response = await fetch(
-                `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem('orderToken')}`,
-                {
-                    method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        email: customer?.email ?? email,
-                        billingAddress,
-                        shippingAddress: useDifferentShipping ? shippingAddress : billingAddress,
-                        couponCode: null,
-                    }),
-                }
-            );
-
-            if (!response.ok) throw new Error('Failed to submit order');
-
-            await fetchOrder();
-            navigate('/checkout/select-shipping');
-        } catch (err) {
-            console.error('Order submission error:', err);
-        } finally {
-            setIsSubmitting(false);
+          }
         }
-    };
-
-    const renderAddressForm = (
-        address: AddressInterface,
-        setAddress: React.Dispatch<React.SetStateAction<AddressInterface>>
-    ) => (
-        <>
-            {addresses.length > 0 && (
-                <div className="mb-3">
-                    <label className="form-label">Select address from my book</label>
-                    <select className="form-select" onChange={handleAddressSelect(setAddress)}>
-                        <option value="">Select address from my book</option>
-                        {addresses.map(addr => {
-                            const countryName = countries.find(c => c.code === addr.countryCode)?.name || addr.countryCode;
-                            return (
-                                <option key={addr.id} value={addr.id}>
-                                    {addr.firstName} {addr.lastName}, {addr.street}, {addr.city} {addr.postcode}, {countryName}
-                                </option>
-                            );
-                        })}
-                    </select>
-                </div>
-            )}
-
-            <div className="row">
-                <div className="col-md-6 mb-3">
-                    <label className="form-label required">First name</label>
-                    <input name="firstName" className="form-control" required value={address.firstName} onChange={handleChange(setAddress)} />
-                </div>
-                <div className="col-md-6 mb-3">
-                    <label className="form-label required">Last name</label>
-                    <input name="lastName" className="form-control" required value={address.lastName} onChange={handleChange(setAddress)} />
-                </div>
-            </div>
-
-            <div className="mb-3">
-                <label className="form-label">Company</label>
-                <input name="company" className="form-control" value={address.company} onChange={handleChange(setAddress)} />
-            </div>
-
-            <div className="mb-3">
-                <label className="form-label required">Street address</label>
-                <input name="street" className="form-control" required value={address.street} onChange={handleChange(setAddress)} />
-            </div>
 
-            <div className="mb-3">
-                <label className="form-label required">Country</label>
-                <select name="countryCode" className="form-select" required value={address.countryCode} onChange={handleChange(setAddress)}>
-                    <option value="">Select</option>
-                    {countries.map(country => (
-                        <option key={country.code} value={country.code}>
-                            {country.name}
-                        </option>
-                    ))}
-                </select>
-            </div>
-
-            <div className="mb-3">
-                <label className="form-label required">City</label>
-                <input name="city" className="form-control" required value={address.city} onChange={handleChange(setAddress)} />
-            </div>
+        if (Object.keys(fields).length > 0) return { fields };
+        return undefined;
+      },
+    },
+    onSubmit: async ({ value }) => {
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem("orderToken")}`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              email: customer?.email ?? value.email,
+              billingAddress: value.billingAddress,
+              shippingAddress: value.useDifferentShipping
+                ? value.shippingAddress
+                : value.billingAddress,
+              couponCode: null,
+            }),
+          }
+        );
+
+        if (!response.ok) throw new Error("Failed to submit order");
+
+        await fetchOrder();
+        navigate("/checkout/select-shipping");
+      } catch (err) {
+        console.error("Order submission error:", err);
+      }
+    },
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const token = localStorage.getItem("jwtToken");
+
+      try {
+        const [addressesRes, countriesRes] = await Promise.all([
+          token
+            ? fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses`, {
+                headers: { Authorization: `Bearer ${token}` },
+              })
+            : Promise.resolve({ json: () => ({ "hydra:member": [] }) }),
+          fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/countries`),
+        ]);
+
+        const addressData = await addressesRes.json();
+        const countryData = await countriesRes.json();
+
+        const addressItems = (addressData["hydra:member"] ?? []) as (AddressValues & {
+          id?: number;
+        })[];
+        const countryItems = (countryData["hydra:member"] ?? []) as Country[];
+
+        setAddresses(addressItems);
+        setCountries(countryItems);
+
+        if (!isInitialized.current) {
+          // Wait until we have enough context to decide (order loaded or customer loaded or guest)
+          const canInitialize = order !== undefined || customer !== null || !token;
+          if (!canInitialize) return;
+
+          if (order?.billingAddress) {
+            const ba = order.billingAddress;
+            form.setFieldValue("billingAddress", {
+              firstName: ba.firstName ?? "",
+              lastName: ba.lastName ?? "",
+              company: ba.company ?? "",
+              street: ba.street ?? "",
+              countryCode: ba.countryCode ?? "",
+              provinceName: ba.provinceName ?? "",
+              city: ba.city ?? "",
+              postcode: ba.postcode ?? "",
+              phoneNumber: ba.phoneNumber ?? "",
+            });
+          } else if (token && customer) {
+            const defaultAddressId =
+              typeof customer.defaultAddress === "string"
+                ? customer.defaultAddress.split("/").pop()
+                : customer.defaultAddress?.["@id"]?.split("/").pop();
+
+            const defaultAddress =
+              addressItems.find((addr) => String(addr.id) === defaultAddressId) ?? addressItems[0];
+
+            if (defaultAddress) {
+              form.setFieldValue("billingAddress", {
+                firstName: defaultAddress.firstName ?? "",
+                lastName: defaultAddress.lastName ?? "",
+                company: defaultAddress.company ?? "",
+                street: defaultAddress.street ?? "",
+                countryCode: defaultAddress.countryCode ?? "",
+                provinceName: defaultAddress.provinceName ?? "",
+                city: defaultAddress.city ?? "",
+                postcode: defaultAddress.postcode ?? "",
+                phoneNumber: defaultAddress.phoneNumber ?? "",
+              });
+            }
+          }
+
+          if (order?.shippingAddress) {
+            const sa = order.shippingAddress;
+            form.setFieldValue("useDifferentShipping", true);
+            form.setFieldValue("shippingAddress", {
+              firstName: sa.firstName ?? "",
+              lastName: sa.lastName ?? "",
+              company: sa.company ?? "",
+              street: sa.street ?? "",
+              countryCode: sa.countryCode ?? "",
+              provinceName: sa.provinceName ?? "",
+              city: sa.city ?? "",
+              postcode: sa.postcode ?? "",
+              phoneNumber: sa.phoneNumber ?? "",
+            });
+          }
+
+          isInitialized.current = true;
+        }
+      } catch (error) {
+        console.error("Error loading addresses or countries", error);
+      }
+    };
 
-            <div className="mb-3">
-                <label className="form-label required">Postcode</label>
-                <input name="postcode" className="form-control" required value={address.postcode} onChange={handleChange(setAddress)} />
-            </div>
+    fetchData();
+  }, [customer, order, form]);
+
+  const handleAddressBookSelect =
+    (prefix: "billingAddress" | "shippingAddress") => (selectedId: string) => {
+      const selected = addresses.find((addr) => String(addr.id) === selectedId);
+      if (selected) {
+        form.setFieldValue(prefix, {
+          firstName: selected.firstName ?? "",
+          lastName: selected.lastName ?? "",
+          company: selected.company ?? "",
+          street: selected.street ?? "",
+          countryCode: selected.countryCode ?? "",
+          provinceName: selected.provinceName ?? "",
+          city: selected.city ?? "",
+          postcode: selected.postcode ?? "",
+          phoneNumber: selected.phoneNumber ?? "",
+        });
+      }
+    };
 
+  const renderAddressFields = (prefix: "billingAddress" | "shippingAddress") => (
+    <>
+      {addresses.length > 0 && (
+        <div className="mb-3">
+          <label className={labelClass}>Select address from my book</label>
+          <Select
+            onValueChange={(v) => {
+              if (typeof v === "string") handleAddressBookSelect(prefix)(v);
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select address from my book" />
+            </SelectTrigger>
+            <SelectContent>
+              {addresses.map((addr) => {
+                const countryName =
+                  countries.find((c) => c.code === addr.countryCode)?.name || addr.countryCode;
+                return (
+                  <SelectItem key={addr.id} value={String(addr.id)}>
+                    {addr.firstName} {addr.lastName}, {addr.street}, {addr.city} {addr.postcode},{" "}
+                    {countryName}
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      <div className="-mx-3 flex flex-wrap">
+        <div className="mb-3 w-full px-3 md:w-1/2">
+          <label
+            className={`${labelClass} after:text-destructive after:ml-0.5 after:content-['*']`}
+          >
+            First name
+          </label>
+          <form.Field
+            name={`${prefix}.firstName`}
+            validators={{
+              onBlur: addressSchema.shape.firstName,
+              onSubmit: addressSchema.shape.firstName,
+            }}
+          >
+            {(field) => (
+              <>
+                <Input
+                  required
+                  value={field.state.value}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  onBlur={field.handleBlur}
+                  aria-describedby={`${prefix}-firstName-error`}
+                  aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                />
+                <FieldError
+                  id={`${prefix}-firstName-error`}
+                  errors={field.state.meta.errors}
+                  isTouched={field.state.meta.isTouched}
+                  isSubmitted={form.state.isSubmitted}
+                />
+              </>
+            )}
+          </form.Field>
+        </div>
+        <div className="mb-3 w-full px-3 md:w-1/2">
+          <label
+            className={`${labelClass} after:text-destructive after:ml-0.5 after:content-['*']`}
+          >
+            Last name
+          </label>
+          <form.Field
+            name={`${prefix}.lastName`}
+            validators={{
+              onBlur: addressSchema.shape.lastName,
+              onSubmit: addressSchema.shape.lastName,
+            }}
+          >
+            {(field) => (
+              <>
+                <Input
+                  required
+                  value={field.state.value}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  onBlur={field.handleBlur}
+                  aria-describedby={`${prefix}-lastName-error`}
+                  aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                />
+                <FieldError
+                  id={`${prefix}-lastName-error`}
+                  errors={field.state.meta.errors}
+                  isTouched={field.state.meta.isTouched}
+                  isSubmitted={form.state.isSubmitted}
+                />
+              </>
+            )}
+          </form.Field>
+        </div>
+      </div>
+
+      <div className="mb-3">
+        <label className={labelClass}>Company</label>
+        <form.Field name={`${prefix}.company`}>
+          {(field) => (
+            <Input
+              value={field.state.value ?? ""}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+            />
+          )}
+        </form.Field>
+      </div>
+
+      <div className="mb-3">
+        <label className={`${labelClass} after:text-destructive after:ml-0.5 after:content-['*']`}>
+          Street address
+        </label>
+        <form.Field
+          name={`${prefix}.street`}
+          validators={{ onBlur: addressSchema.shape.street, onSubmit: addressSchema.shape.street }}
+        >
+          {(field) => (
+            <>
+              <Input
+                required
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                aria-describedby={`${prefix}-street-error`}
+                aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+              />
+              <FieldError
+                id={`${prefix}-street-error`}
+                errors={field.state.meta.errors}
+                isTouched={field.state.meta.isTouched}
+                isSubmitted={form.state.isSubmitted}
+              />
+            </>
+          )}
+        </form.Field>
+      </div>
+
+      <div className="mb-3">
+        <label className={`${labelClass} after:text-destructive after:ml-0.5 after:content-['*']`}>
+          Country
+        </label>
+        <form.Field
+          name={`${prefix}.countryCode`}
+          validators={{
+            onBlur: addressSchema.shape.countryCode,
+            onSubmit: addressSchema.shape.countryCode,
+          }}
+        >
+          {(field) => (
+            <>
+              <Select
+                value={field.state.value}
+                onValueChange={(val) => field.handleChange(val ?? "")}
+                required
+              >
+                <SelectTrigger
+                  aria-describedby={`${prefix}-countryCode-error`}
+                  aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                >
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  {countries.map((country) => (
+                    <SelectItem key={country.code} value={country.code}>
+                      {country.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FieldError
+                id={`${prefix}-countryCode-error`}
+                errors={field.state.meta.errors}
+                isTouched={field.state.meta.isTouched}
+                isSubmitted={form.state.isSubmitted}
+              />
+            </>
+          )}
+        </form.Field>
+      </div>
+
+      <div className="mb-3">
+        <label className={`${labelClass} after:text-destructive after:ml-0.5 after:content-['*']`}>
+          City
+        </label>
+        <form.Field
+          name={`${prefix}.city`}
+          validators={{ onBlur: addressSchema.shape.city, onSubmit: addressSchema.shape.city }}
+        >
+          {(field) => (
+            <>
+              <Input
+                required
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                aria-describedby={`${prefix}-city-error`}
+                aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+              />
+              <FieldError
+                id={`${prefix}-city-error`}
+                errors={field.state.meta.errors}
+                isTouched={field.state.meta.isTouched}
+                isSubmitted={form.state.isSubmitted}
+              />
+            </>
+          )}
+        </form.Field>
+      </div>
+
+      <div className="mb-3">
+        <label className={`${labelClass} after:text-destructive after:ml-0.5 after:content-['*']`}>
+          Postcode
+        </label>
+        <form.Field
+          name={`${prefix}.postcode`}
+          validators={{
+            onBlur: addressSchema.shape.postcode,
+            onSubmit: addressSchema.shape.postcode,
+          }}
+        >
+          {(field) => (
+            <>
+              <Input
+                required
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                aria-describedby={`${prefix}-postcode-error`}
+                aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+              />
+              <FieldError
+                id={`${prefix}-postcode-error`}
+                errors={field.state.meta.errors}
+                isTouched={field.state.meta.isTouched}
+                isSubmitted={form.state.isSubmitted}
+              />
+            </>
+          )}
+        </form.Field>
+      </div>
+
+      <div className="mb-4">
+        <label className={labelClass}>Phone number</label>
+        <form.Field name={`${prefix}.phoneNumber`}>
+          {(field) => (
+            <Input
+              value={field.state.value ?? ""}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+            />
+          )}
+        </form.Field>
+      </div>
+    </>
+  );
+
+  return (
+    <CheckoutLayout>
+      <div className="flex-1 pt-4 pb-5 lg:pr-20">
+        <Steps activeStep="address" />
+        <form
+          ref={formRef}
+          noValidate
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void submitForm(form, formRef.current);
+          }}
+        >
+          <div className="mb-4 text-2xl font-bold">Address</div>
+
+          {!customer && (
             <div className="mb-4">
-                <label className="form-label">Phone number</label>
-                <input name="phoneNumber" className="form-control" value={address.phoneNumber} onChange={handleChange(setAddress)} />
+              <label
+                className={`${labelClass} after:text-destructive after:ml-0.5 after:content-['*']`}
+              >
+                Email
+              </label>
+              <form.Field name="email">
+                {(field) => (
+                  <>
+                    <Input
+                      type="email"
+                      required
+                      value={field.state.value ?? ""}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                      aria-describedby="email-error"
+                      aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                    />
+                    <FieldError
+                      id="email-error"
+                      errors={field.state.meta.errors}
+                      isTouched={field.state.meta.isTouched}
+                      isSubmitted={form.state.isSubmitted}
+                    />
+                  </>
+                )}
+              </form.Field>
             </div>
-        </>
-    );
-
-    return (
-        <CheckoutLayout>
-            <div className="col pt-4 pb-5">
-                <Steps activeStep="address" />
-                <form onSubmit={handleSubmit}>
-                    <div className="mb-4 h2">Address</div>
-
-                    {!customer && (
-                        <div className="mb-4">
-                            <label className="form-label required">Email</label>
-                            <input
-                                type="email"
-                                name="email"
-                                required
-                                className="form-control"
-                                value={email}
-                                onChange={(e) => setEmail(e.target.value)}
-                            />
-                        </div>
-                    )}
-
-                    <div className="mb-4">
-                        <div className="h4 mb-4">Billing address</div>
-                        {renderAddressForm(billingAddress, setBillingAddress)}
-                    </div>
-
-                    <div className="form-check form-switch mb-4">
-                        <input
-                            className="form-check-input"
-                            type="checkbox"
-                            checked={useDifferentShipping}
-                            onChange={() =>
-                                setUseDifferentShipping(prev => {
-                                    const next = !prev;
-                                    if (next && !shippingAddress.firstName) {
-                                        setShippingAddress({ ...billingAddress });
-                                    }
-                                    return next;
-                                })
-                            }
-                            id="differentShipping"
-                        />
-                        <label className="form-check-label" htmlFor="differentShipping">
-                            Use different address for shipping?
-                        </label>
-                    </div>
-
-                    {useDifferentShipping && (
-                        <div className="mb-4">
-                            <div className="h4 mb-4">Shipping address</div>
-                            {renderAddressForm(shippingAddress, setShippingAddress)}
-                        </div>
-                    )}
-
-                    <div className="d-flex justify-content-between flex-column flex-sm-row gap-2">
-                        <Link className="btn btn-light btn-icon" to="/">
-                            <IconChevronLeft stroke={2} />
-                            Back to store
-                        </Link>
-                        <button type="submit" className="btn btn-primary btn-icon" disabled={isSubmitting}>
-                            Next
-                            <IconChevronRight stroke={2} />
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </CheckoutLayout>
-    );
+          )}
+
+          <div className="mb-4">
+            <div className="mb-4 text-xl font-semibold">Billing address</div>
+            {renderAddressFields("billingAddress")}
+          </div>
+
+          <form.Field name="useDifferentShipping">
+            {(field) => (
+              <div className="mb-4 flex items-center gap-2">
+                <Checkbox
+                  id="differentShipping"
+                  checked={field.state.value ?? false}
+                  onCheckedChange={(checked) => {
+                    const next = checked === true;
+                    field.handleChange(next);
+                    if (next) {
+                      const billing = form.getFieldValue("billingAddress");
+                      const shipping = form.getFieldValue("shippingAddress");
+                      if (!shipping?.firstName) {
+                        form.setFieldValue("shippingAddress", { ...billing });
+                      }
+                    }
+                  }}
+                />
+                <label className="text-sm" htmlFor="differentShipping">
+                  Use different address for shipping?
+                </label>
+              </div>
+            )}
+          </form.Field>
+
+          <form.Subscribe selector={(state) => state.values.useDifferentShipping}>
+            {(useDifferentShipping) =>
+              useDifferentShipping ? (
+                <div className="mb-4">
+                  <div className="mb-4 text-xl font-semibold">Shipping address</div>
+                  {renderAddressFields("shippingAddress")}
+                </div>
+              ) : null
+            }
+          </form.Subscribe>
+
+          <form.Subscribe selector={(state) => state.isSubmitting}>
+            {(isSubmitting) => (
+              <div className="flex flex-col justify-between gap-2 sm:flex-row">
+                <Button variant="outline" nativeButton={false} render={<Link to="/" />}>
+                  <IconChevronLeft stroke={2} />
+                  Back to store
+                </Button>
+                <Button type="submit" disabled={isSubmitting}>
+                  Next
+                  <IconChevronRight stroke={2} />
+                </Button>
+              </div>
+            )}
+          </form.Subscribe>
+        </form>
+      </div>
+    </CheckoutLayout>
+  );
 };
 
 export default AddressPage;
diff --git a/src/pages/Checkout/PaymentPage.tsx b/src/pages/Checkout/PaymentPage.tsx
index bb02cde..09c0918 100644
--- a/src/pages/Checkout/PaymentPage.tsx
+++ b/src/pages/Checkout/PaymentPage.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import CheckoutLayout from '../../layouts/Checkout';
-import { Link } from 'react-router-dom';
-import { useOrder } from '../../context/OrderContext';
-import { useQuery } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
-import Steps from '../../components/checkout/Steps';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import React, { useEffect, useState } from "react";
+import CheckoutLayout from "../../layouts/Checkout";
+import { Link } from "react-router-dom";
+import { useOrder } from "../../context/OrderContext";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import Steps from "../../components/checkout/Steps";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { Button } from "@/components/ui/button";
 
 interface PaymentMethod {
   id: number;
@@ -20,26 +21,26 @@ const PaymentPage: React.FC = () => {
 
   const fetchPaymentMethodsFromAPI = async (): Promise<PaymentMethod[]> => {
     const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem(
-            'orderToken'
-        )}/payments/${order?.payments?.[0]?.id}/methods`
+      `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem(
+        "orderToken"
+      )}/payments/${order?.payments?.[0]?.id}/methods`
     );
     if (!response.ok) {
-      throw new Error('Problem with downloading payment methods');
+      throw new Error("Problem with downloading payment methods");
     }
 
     const data = await response.json();
-    return data['hydra:member'] || [];
+    return data["hydra:member"] || [];
   };
 
   const { data: paymentMethods } = useQuery<PaymentMethod[]>({
-    queryKey: ['payment-methods'],
+    queryKey: ["payment-methods"],
     queryFn: fetchPaymentMethodsFromAPI,
     enabled: order !== null,
   });
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [paymentMethod, setPaymentMethod] = useState('');
+  const [paymentMethod, setPaymentMethod] = useState("");
   const [hasErrors, setHasErrors] = useState(false);
 
   useEffect(() => {
@@ -54,120 +55,113 @@ const PaymentPage: React.FC = () => {
 
     try {
       const response = await fetch(
-          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem(
-              'orderToken'
-          )}/payments/${order?.payments?.[0]?.id}`,
-          {
-            method: 'PATCH',
-            headers: { 'Content-Type': 'application/merge-patch+json' },
-            body: JSON.stringify({
-              paymentMethod: paymentMethod || order?.payments?.[0]?.method,
-            }),
-          }
+        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem(
+          "orderToken"
+        )}/payments/${order?.payments?.[0]?.id}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/merge-patch+json" },
+          body: JSON.stringify({
+            paymentMethod: paymentMethod || order?.payments?.[0]?.method,
+          }),
+        }
       );
 
       if (!response.ok) {
         setHasErrors(true);
-        throw new Error('Failed to send payment methods');
+        throw new Error("Failed to send payment methods");
       }
 
       await fetchOrder();
-      navigate('/checkout/complete');
+      navigate("/checkout/complete");
     } catch (error) {
-      console.error('Error submitting payment method:', error);
+      console.error("Error submitting payment method:", error);
     } finally {
       setIsSubmitting(false);
     }
   };
 
   return (
-      <CheckoutLayout>
-        <div className="col-12 col-lg-7 pt-4 pb-5">
-          <div className="pe-lg-6">
-            <Steps activeStep="payment" />
-
-            <form
-                name="sylius_shop_checkout_select_payment"
-                method="post"
-                onSubmit={handleSubmit}
-                noValidate
-            >
-              <input type="hidden" name="_method" value="PUT" />
-
-              <h5 className="mb-4">Payment #1</h5>
-
-              <div className="mb-5">
-                {hasErrors && (
-                    <div className="invalid-feedback d-block">
-                      Please select payment method.
-                    </div>
-                )}
-
-                {paymentMethods?.length === 0 && (
-                    <div className="card bg-body-tertiary border-0 mb-3">
-                      <div className="card-body">
-                        <h6 className="text-danger mb-1">Warning</h6>
-                        <p className="mb-0">
-                          There are currently no payment methods available for your order.
-                        </p>
+    <CheckoutLayout>
+      <div className="w-full pt-4 pb-5 lg:w-7/12">
+        <div className="lg:pr-20">
+          <Steps activeStep="payment" />
+
+          <form
+            name="sylius_shop_checkout_select_payment"
+            method="post"
+            onSubmit={handleSubmit}
+            noValidate
+          >
+            <input type="hidden" name="_method" value="PUT" />
+
+            <h5 className="mb-4 text-base font-semibold">Payment #1</h5>
+
+            <div className="mb-5">
+              {hasErrors && (
+                <div className="text-destructive mb-3 text-sm">Please select payment method.</div>
+              )}
+
+              {paymentMethods?.length === 0 && (
+                <div className="bg-muted mb-3 rounded-lg p-4">
+                  <h6 className="text-destructive mb-1 font-semibold">Warning</h6>
+                  <p className="mb-0 text-sm">
+                    There are currently no payment methods available for your order.
+                  </p>
+                </div>
+              )}
+
+              {paymentMethods?.map((method) => (
+                <div className="bg-muted mb-3 rounded-lg" key={method.id}>
+                  <label className="block cursor-pointer p-4">
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <input
+                          type="radio"
+                          id={`payment-method-${method.id}`}
+                          name="sylius_shop_checkout_select_payment[payments][0][method]"
+                          required
+                          className="accent-primary"
+                          onChange={() => setPaymentMethod(method.code)}
+                          checked={paymentMethod === method.code}
+                          value={method.code}
+                        />
+                        <label
+                          className="cursor-pointer text-sm font-medium"
+                          htmlFor={`payment-method-${method.id}`}
+                        >
+                          {method.name}
+                        </label>
                       </div>
                     </div>
-                )}
-
-                {paymentMethods?.map((method) => (
-                    <div
-                        className="card bg-body-tertiary border-0 mb-3"
-                        key={method.id}
-                    >
-                      <label className="card-body">
-                        <div>
-                          <div className="form-check">
-                            <input
-                                type="radio"
-                                id={`payment-method-${method.id}`}
-                                name="sylius_shop_checkout_select_payment[payments][0][method]"
-                                required
-                                className="form-check-input"
-                                onChange={() => setPaymentMethod(method.code)}
-                                checked={paymentMethod === method.code}
-                                value={method.code}
-                            />
-                            <label
-                                className="form-check-label required"
-                                htmlFor={`payment-method-${method.id}`}
-                            >
-                              {method.name}
-                            </label>
-                          </div>
-                        </div>
-
-                        <div className="ps-4">
-                          <small className="text-black-50">{method.description}</small>
-                        </div>
-                      </label>
+
+                    <div className="mt-1 pl-6">
+                      <small className="text-muted-foreground">{method.description}</small>
                     </div>
-                ))}
-              </div>
-
-              <div className="d-flex justify-content-between flex-column flex-sm-row gap-2">
-                <Link className="btn btn-light btn-icon" to="/checkout/select-shipping">
-                  <IconChevronLeft stroke={2} />
-                  Change shipping method
-                </Link>
-
-                <button
-                    type="submit"
-                    className="btn btn-primary btn-icon"
-                    disabled={isSubmitting}
-                >
-                  Next
-                  <IconChevronRight stroke={2} />
-                </button>
-              </div>
-            </form>
-          </div>
+                  </label>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex flex-col justify-between gap-2 sm:flex-row">
+              <Button
+                variant="outline"
+                nativeButton={false}
+                render={<Link to="/checkout/select-shipping" />}
+              >
+                <IconChevronLeft stroke={2} />
+                Change shipping method
+              </Button>
+
+              <Button type="submit" disabled={isSubmitting}>
+                Next
+                <IconChevronRight stroke={2} />
+              </Button>
+            </div>
+          </form>
         </div>
-      </CheckoutLayout>
+      </div>
+    </CheckoutLayout>
   );
 };
 
diff --git a/src/pages/Checkout/ShippingPage.tsx b/src/pages/Checkout/ShippingPage.tsx
index ced541e..c28368f 100644
--- a/src/pages/Checkout/ShippingPage.tsx
+++ b/src/pages/Checkout/ShippingPage.tsx
@@ -1,13 +1,14 @@
-import React, { useState } from 'react';
-
-import CheckoutLayout from '../../layouts/Checkout';
-import { Link } from 'react-router-dom';
-import { useOrder } from '../../context/OrderContext';
-import { useQuery } from '@tanstack/react-query';
-import { formatPrice } from '../../utils/price';
-import { useNavigate } from 'react-router-dom';
-import Steps from '../../components/checkout/Steps';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import React, { useState } from "react";
+
+import CheckoutLayout from "../../layouts/Checkout";
+import { Link } from "react-router-dom";
+import { useOrder } from "../../context/OrderContext";
+import { useQuery } from "@tanstack/react-query";
+import { formatPrice } from "../../utils/price";
+import { useNavigate } from "react-router-dom";
+import Steps from "../../components/checkout/Steps";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { Button } from "@/components/ui/button";
 
 interface ShippingMethod {
   id: number;
@@ -23,24 +24,24 @@ const ShippingPage: React.FC = () => {
 
   const fetchShippingMethodsFromAPI = async (): Promise<ShippingMethod[]> => {
     const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem('orderToken')}/shipments/${order?.shipments?.[0]?.id}/methods`
+      `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem("orderToken")}/shipments/${order?.shipments?.[0]?.id}/methods`
     );
     if (!response.ok) {
-      throw new Error('Error while downloading shipping method');
+      throw new Error("Error while downloading shipping method");
     }
 
     const data = await response.json();
-    return data['hydra:member'] || [];
+    return data["hydra:member"] || [];
   };
 
   const { data: shippingMethods } = useQuery<ShippingMethod[]>({
-    queryKey: ['shipping-methods'],
+    queryKey: ["shipping-methods"],
     queryFn: fetchShippingMethodsFromAPI,
     enabled: order !== null,
   });
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [shippingMethod, setShippingMethod] = useState('');
+  const [shippingMethod, setShippingMethod] = useState("");
   const [hasErrors, setHasErrors] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -49,116 +50,114 @@ const ShippingPage: React.FC = () => {
 
     try {
       const response = await fetch(
-          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem('orderToken')}/shipments/${order?.shipments?.[0]?.id}`,
-          {
-            method: 'PATCH',
-            headers: { 'Content-Type': 'application/merge-patch+json' },
-            body: JSON.stringify({ shippingMethod }),
-          }
+        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${localStorage.getItem("orderToken")}/shipments/${order?.shipments?.[0]?.id}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/merge-patch+json" },
+          body: JSON.stringify({ shippingMethod }),
+        }
       );
 
       if (!response.ok) {
         setHasErrors(true);
-        throw new Error('Failed to send delivery method');
+        throw new Error("Failed to send delivery method");
       }
 
-      navigate('/checkout/select-payment');
+      navigate("/checkout/select-payment");
     } catch (error) {
-      console.error('Error submitting order:', error);
+      console.error("Error submitting order:", error);
     } finally {
       setIsSubmitting(false);
     }
   };
 
   return (
-      <CheckoutLayout>
-        <div className="col-12 col-lg-7 pt-4 pb-5">
-          <div>
-            <Steps activeStep="shipping" />
-
-            <div className="pe-lg-6">
-              <form
-                  name="sylius_shop_checkout_select_shipping"
-                  method="post"
-                  noValidate
-                  onSubmit={handleSubmit}
-              >
-                <input type="hidden" name="_method" value="PUT" />
-
-                <h5 className="mb-4">Shipment #1</h5>
-
-                <div className="mb-5">
-                  {hasErrors && (
-                      <div className="invalid-feedback d-block">
-                        Please select shipping method.
-                      </div>
-                  )}
-
-                  {(shippingMethods ?? []).length === 0 && (
-                      <div className="card bg-body-tertiary border-0 mb-3">
-                        <div className="card-body">
-                          <h6 className="text-danger mb-1">Warning</h6>
-                          <p className="mb-0">
-                            There are currently no shipping methods available for your shipping address.
-                          </p>
+    <CheckoutLayout>
+      <div className="w-full pt-4 pb-5 lg:w-7/12">
+        <div>
+          <Steps activeStep="shipping" />
+
+          <div className="lg:pr-20">
+            <form
+              name="sylius_shop_checkout_select_shipping"
+              method="post"
+              noValidate
+              onSubmit={handleSubmit}
+            >
+              <input type="hidden" name="_method" value="PUT" />
+
+              <h5 className="mb-4 text-base font-semibold">Shipment #1</h5>
+
+              <div className="mb-5">
+                {hasErrors && (
+                  <div className="text-destructive mb-3 text-sm">
+                    Please select shipping method.
+                  </div>
+                )}
+
+                {(shippingMethods ?? []).length === 0 && (
+                  <div className="bg-muted mb-3 rounded-lg p-4">
+                    <h6 className="text-destructive mb-1 font-semibold">Warning</h6>
+                    <p className="mb-0 text-sm">
+                      There are currently no shipping methods available for your shipping address.
+                    </p>
+                  </div>
+                )}
+
+                {(shippingMethods ?? []).map((method) => (
+                  <div key={method.id} className="bg-muted mb-3 rounded-lg">
+                    <label className="flex cursor-pointer gap-3 p-4">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="radio"
+                            id={`shipping-method-${method.id}`}
+                            name="shipping-methods"
+                            required
+                            className="accent-primary"
+                            onChange={() => setShippingMethod(method.code)}
+                            checked={shippingMethod === method.code}
+                            value={method.code}
+                          />
+                          <label
+                            className="cursor-pointer text-sm font-medium"
+                            htmlFor={`shipping-method-${method.id}`}
+                          >
+                            {method.name}
+                          </label>
+                        </div>
+
+                        <div className="mt-1 pl-6">
+                          <small className="text-muted-foreground">{method.description}</small>
                         </div>
                       </div>
-                  )}
-
-                  {(shippingMethods ?? []).map((method) => (
-                      <div key={method.id} className="card bg-body-tertiary border-0 mb-3">
-                        <label className="d-flex gap-3 card-body">
-                          <div className="flex-grow-1">
-                            <div className="form-check">
-                              <input
-                                  type="radio"
-                                  id={`shipping-method-${method.id}`}
-                                  name="shipping-methods"
-                                  required
-                                  className="form-check-input"
-                                  onChange={() => setShippingMethod(method.code)}
-                                  checked={shippingMethod === method.code}
-                                  value={method.code}
-                              />
-                              <label
-                                  className="form-check-label required"
-                                  htmlFor={`shipping-method-${method.id}`}
-                              >
-                                {method.name}
-                              </label>
-                            </div>
-
-                            <div className="ps-4">
-                              <small className="text-black-50">{method.description}</small>
-                            </div>
-                          </div>
-
-                          <div>{formatPrice(method.price)}</div>
-                        </label>
-                      </div>
-                  ))}
-                </div>
-
-                <div className="d-flex justify-content-between flex-column flex-sm-row gap-2">
-                  <Link className="btn btn-light btn-icon" to="/checkout/address">
-                    <IconChevronLeft stroke={2} />
-                    Change address
-                  </Link>
-
-                  <button
-                      type="submit"
-                      disabled={isSubmitting}
-                      className="btn btn-primary btn-icon"
-                  >
-                    Next
-                    <IconChevronRight stroke={2} />
-                  </button>
-                </div>
-              </form>
-            </div>
+
+                      <div className="text-sm">{formatPrice(method.price)}</div>
+                    </label>
+                  </div>
+                ))}
+              </div>
+
+              <div className="flex flex-col justify-between gap-2 sm:flex-row">
+                <Button
+                  variant="outline"
+                  nativeButton={false}
+                  render={<Link to="/checkout/address" />}
+                >
+                  <IconChevronLeft stroke={2} />
+                  Change address
+                </Button>
+
+                <Button type="submit" disabled={isSubmitting}>
+                  Next
+                  <IconChevronRight stroke={2} />
+                </Button>
+              </div>
+            </form>
           </div>
         </div>
-      </CheckoutLayout>
+      </div>
+    </CheckoutLayout>
   );
 };
 
diff --git a/src/pages/Checkout/SummaryPage.tsx b/src/pages/Checkout/SummaryPage.tsx
index 3e1756b..60c18c8 100644
--- a/src/pages/Checkout/SummaryPage.tsx
+++ b/src/pages/Checkout/SummaryPage.tsx
@@ -1,175 +1,195 @@
-import React, { useEffect, useState } from 'react';
-import CheckoutLayout from '../../layouts/Checkout';
-import { useOrder } from '../../context/OrderContext';
-import Address from '../../components/Address';
-import PaymentsCard from '../../components/order/PaymentsCard';
-import ShipmentsCard from '../../components/order/ShipmentsCard';
-import ProductRow from '../../components/order/ProductRow';
-import { OrderItem } from '../../types/Order';
-import { formatPrice } from '../../utils/price';
-import { useNavigate } from 'react-router-dom';
-import Steps from '../../components/checkout/Steps';
-
+import React, { useEffect, useState } from "react";
+import CheckoutLayout from "../../layouts/Checkout";
+import { useOrder } from "../../context/OrderContext";
+import Address from "../../components/Address";
+import PaymentsCard from "../../components/order/PaymentsCard";
+import ShipmentsCard from "../../components/order/ShipmentsCard";
+import ProductRow from "../../components/order/ProductRow";
+import { OrderItem } from "../../types/Order";
+import { formatPrice } from "../../utils/price";
+import { useNavigate } from "react-router-dom";
+import Steps from "../../components/checkout/Steps";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
 const SummaryPage: React.FC = () => {
   const { order, fetchOrder, setOrderToken } = useOrder();
 
   const navigate = useNavigate();
 
-  const [extraNotes, setExtraNotes] = useState<string>('');
+  const [extraNotes, setExtraNotes] = useState<string>("");
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSubmitting(true);
 
-    const orderToken = localStorage.getItem('orderToken');
+    const orderToken = localStorage.getItem("orderToken");
 
     try {
       const response = await fetch(
-          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${orderToken}/complete`,
-          {
-            method: 'PATCH',
-            headers: { 'Content-Type': 'application/merge-patch+json' },
-            body: JSON.stringify({ notes: extraNotes }),
-          }
+        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/orders/${orderToken}/complete`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/merge-patch+json" },
+          body: JSON.stringify({ notes: extraNotes }),
+        }
       );
 
       if (!response.ok) {
-        throw new Error('Failed to submit order');
+        throw new Error("Failed to submit order");
       }
 
       setOrderToken(null);
-      localStorage.removeItem('orderToken');
-      navigate('/order/thank-you', {
+      localStorage.removeItem("orderToken");
+      navigate("/order/thank-you", {
         state: { tokenValue: order?.tokenValue },
       });
     } catch (error) {
-      console.error('Error submitting order:', error);
+      console.error("Error submitting order:", error);
     } finally {
       setIsSubmitting(false);
     }
   };
 
-
   useEffect(() => {
     fetchOrder();
   }, [fetchOrder]);
 
   return (
-      <CheckoutLayout sidebarOn={false}>
-        <div className="col pt-4 pb-5">
-          <div className="mx-auto">
-            <Steps activeStep="complete" />
-            <h1 className="h5 mb-4">Order #{order?.number}</h1>
-
-            {order && (
-                <div className="card border-0 bg-body-tertiary mb-3">
-                  <div className="card-body d-flex flex-column gap-1">
-                    <div className="row">
-                      <div className="col-12 col-sm-4">Currency</div>
-                      <div className="col">{order.currencyCode}</div>
-                    </div>
-                    <div className="row">
-                      <div className="col-12 col-sm-4">Locale</div>
-                      <div className="col">{order.localeCode}</div>
-                    </div>
-                  </div>
+    <CheckoutLayout sidebarOn={false}>
+      <div className="flex-1 pt-4 pb-5">
+        <div className="mx-auto">
+          <Steps activeStep="complete" />
+          <h1 className="mb-4 text-lg font-semibold">Order #{order?.number}</h1>
+
+          {order && (
+            <div className="bg-muted mb-3 rounded-lg">
+              <div className="flex flex-col gap-1 p-4">
+                <div className="-mx-4 flex flex-wrap">
+                  <div className="w-full px-4 sm:w-1/3">Currency</div>
+                  <div className="flex-1 px-4">{order.currencyCode}</div>
                 </div>
-            )}
-
-            <form onSubmit={handleSubmit} noValidate>
-              <div className="row">
-                <div className="col-12 col-md-6 mb-3">
-                  {order?.billingAddress && (
-                      <Address sectionName="Billing address" address={order.billingAddress} />
-                  )}
-                </div>
-                <div className="col-12 col-md-6 mb-3">
-                  {order?.shippingAddress && (
-                      <Address sectionName="Shipping address" address={order.shippingAddress} />
-                  )}
+                <div className="-mx-4 flex flex-wrap">
+                  <div className="w-full px-4 sm:w-1/3">Locale</div>
+                  <div className="flex-1 px-4">{order.localeCode}</div>
                 </div>
               </div>
-
-              <div className="mb-5">
-                {order?.payments && (
-                    <PaymentsCard
-                        payment={order?.payments[0]}
-                        total={order?.total ?? 0}
-                        paymentState={order?.paymentState}
-                    />
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} noValidate>
+            <div className="-mx-4 flex flex-wrap">
+              <div className="mb-3 w-full px-4 md:w-1/2">
+                {order?.billingAddress && (
+                  <Address sectionName="Billing address" address={order.billingAddress} />
                 )}
-                {order?.shipments && <ShipmentsCard shipment={order?.shipments[0]} />}
               </div>
-
-              <div className="table-responsive border-bottom mb-4">
-                <table className="table table-borderless table-space align-middle mb-0">
-                  <thead>
-                  <tr>
-                    <th>Item</th>
-                    <th className="text-end">Unit price</th>
-                    <th className="text-end">Qty</th>
-                    <th className="text-end">Subtotal</th>
-                  </tr>
-                  </thead>
-                  <tbody>
+              <div className="mb-3 w-full px-4 md:w-1/2">
+                {order?.shippingAddress && (
+                  <Address sectionName="Shipping address" address={order.shippingAddress} />
+                )}
+              </div>
+            </div>
+
+            <div className="mb-5">
+              {order?.payments && (
+                <PaymentsCard
+                  payment={order?.payments[0]}
+                  total={order?.total ?? 0}
+                  paymentState={order?.paymentState}
+                />
+              )}
+              {order?.shipments && <ShipmentsCard shipment={order?.shipments[0]} />}
+            </div>
+
+            <div className="mb-4 border-b">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="text-left">Item</TableHead>
+                    <TableHead className="text-right">Unit price</TableHead>
+                    <TableHead className="text-right">Qty</TableHead>
+                    <TableHead className="text-right">Subtotal</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
                   {order?.items?.map((item: OrderItem) => (
-                      <ProductRow orderItem={item} key={item.id} />
+                    <ProductRow orderItem={item} key={item.id} />
                   ))}
-                  </tbody>
-                </table>
-              </div>
-
-              <table className="table table-borderless align-middle ms-auto mb-6">
-                <tbody>
-                <tr>
-                  <td className="text-end w-75">Items total:</td>
-                  <td className="text-end">${formatPrice(order?.itemsSubtotal ?? 0)}</td>
-                </tr>
-                <tr>
-                  <td className="text-end w-75">Taxes total:</td>
-                  <td className="text-end">
+                </TableBody>
+              </Table>
+            </div>
+
+            <Table className="mb-6 ml-auto">
+              <TableBody>
+                <TableRow>
+                  <TableCell className="w-3/4 py-1 pr-4 text-right">Items total:</TableCell>
+                  <TableCell className="py-1 text-right">
+                    ${formatPrice(order?.itemsSubtotal ?? 0)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="py-1 pr-4 text-right">Taxes total:</TableCell>
+                  <TableCell className="py-1 text-right">
                     <div>${formatPrice(order?.taxTotal ?? 0)}</div>
-                    <small className="text-body-tertiary">Included in price</small>
-                  </td>
-                </tr>
-                <tr>
-                  <td className="text-end w-75">Discount:</td>
-                  <td className="text-end">${formatPrice(order?.orderPromotionTotal ?? 0)}</td>
-                </tr>
-                <tr>
-                  <td className="text-end w-75">Shipping total:</td>
-                  <td className="text-end">${formatPrice(order?.shippingTotal ?? 0)}</td>
-                </tr>
-                <tr>
-                  <td className="h5 text-end border-top pt-4 mt-3">Total:</td>
-                  <td className="h5 text-end border-top pt-4 mt-3">${formatPrice(order?.total ?? 0)}</td>
-                </tr>
-                </tbody>
-              </table>
-
-              <div className="field mb-3">
-                <label htmlFor="sylius_checkout_complete_notes" className="form-label">
-                  Extra notes
-                </label>
-                <textarea
-                    id="sylius_checkout_complete_notes"
-                    className="form-control"
-                    value={extraNotes}
-                    onChange={(e) => setExtraNotes(e.target.value)}
-                />
-              </div>
-
-              <div className="text-center">
-                <button type="submit" className="btn btn-primary" disabled={isSubmitting}>
-                  Place order
-                </button>
-              </div>
-            </form>
-          </div>
+                    <small className="text-muted-foreground">Included in price</small>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="py-1 pr-4 text-right">Discount:</TableCell>
+                  <TableCell className="py-1 text-right">
+                    ${formatPrice(order?.orderPromotionTotal ?? 0)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="py-1 pr-4 text-right">Shipping total:</TableCell>
+                  <TableCell className="py-1 text-right">
+                    ${formatPrice(order?.shippingTotal ?? 0)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="border-t pt-4 pr-4 text-right text-lg font-semibold">
+                    Total:
+                  </TableCell>
+                  <TableCell className="border-t pt-4 text-right text-lg font-semibold">
+                    ${formatPrice(order?.total ?? 0)}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+
+            <div className="mb-3">
+              <label
+                htmlFor="sylius_checkout_complete_notes"
+                className="mb-1 block text-sm font-medium"
+              >
+                Extra notes
+              </label>
+              <Textarea
+                id="sylius_checkout_complete_notes"
+                value={extraNotes}
+                onChange={(e) => setExtraNotes(e.target.value)}
+              />
+            </div>
+
+            <div className="text-center">
+              <Button type="submit" disabled={isSubmitting}>
+                Place order
+              </Button>
+            </div>
+          </form>
         </div>
-      </CheckoutLayout>
+      </div>
+    </CheckoutLayout>
   );
 };
 
diff --git a/src/pages/Checkout/ThankYouPage.tsx b/src/pages/Checkout/ThankYouPage.tsx
index f598eb9..f20327b 100644
--- a/src/pages/Checkout/ThankYouPage.tsx
+++ b/src/pages/Checkout/ThankYouPage.tsx
@@ -1,40 +1,48 @@
-import React from 'react';
-import Layout from '../../layouts/Default';
-import { useCustomer } from '../../context/CustomerContext';
-import { useLocation } from 'react-router-dom';
+import React from "react";
+import Layout from "../../layouts/Default";
+import { useCustomer } from "../../context/CustomerContext";
+import { useLocation } from "react-router-dom";
 
 const ThankYouPage: React.FC = () => {
-    const { customer } = useCustomer();
-    const location = useLocation();
-    const tokenValue = location.state?.tokenValue;
+  const { customer } = useCustomer();
+  const location = useLocation();
+  const tokenValue = location.state?.tokenValue;
 
-    return (
-        <Layout>
-            <div className="container text-center my-auto">
-                <div className="row flex-column my-4">
-                    <h1 className="h2">Thank you!</h1>
-                    You have successfully placed an order.
-
-                    <div className="d-flex flex-column flex-lg-row justify-content-center gap-2 mt-4">
-                        {customer && tokenValue ? (
-                            <a className="btn btn-primary" href={`/account/orders/${tokenValue}`}>
-                                View order
-                            </a>
-                        ) : (
-                            <>
-                                <a className="btn btn-primary" href="/orderpay">
-                                    Change payment method
-                                </a>
-                                <a className="btn btn-secondary" href="/register">
-                                    Create an account
-                                </a>
-                            </>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
+  return (
+    <Layout>
+      <div className="container my-auto text-center">
+        <div className="my-4 flex flex-col">
+          <h1 className="text-2xl font-bold">Thank you!</h1>
+          You have successfully placed an order.
+          <div className="mt-4 flex flex-col justify-center gap-2 lg:flex-row">
+            {customer && tokenValue ? (
+              <a
+                className="bg-primary hover:bg-primary/90 inline-flex items-center justify-center rounded px-4 py-2 text-white"
+                href={`/account/orders/${tokenValue}`}
+              >
+                View order
+              </a>
+            ) : (
+              <>
+                <a
+                  className="bg-primary hover:bg-primary/90 inline-flex items-center justify-center rounded px-4 py-2 text-white"
+                  href="/orderpay"
+                >
+                  Change payment method
+                </a>
+                <a
+                  className="bg-muted text-foreground hover:bg-muted/80 inline-flex items-center justify-center rounded px-4 py-2"
+                  href="/register"
+                >
+                  Create an account
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
 };
 
 export default ThankYouPage;
diff --git a/src/pages/ForgotPasswordPage.tsx b/src/pages/ForgotPasswordPage.tsx
new file mode 100644
index 0000000..de10f72
--- /dev/null
+++ b/src/pages/ForgotPasswordPage.tsx
@@ -0,0 +1,107 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { forgotPasswordSchema } from "@/schemas/auth";
+import { FieldError } from "@/components/ui/field-error";
+import { submitForm } from "@/lib/utils";
+import { useForm } from "@tanstack/react-form";
+import React, { useRef } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "sonner";
+import Default from "../layouts/Default";
+
+const labelClass = "block text-sm font-medium mb-1";
+
+const ForgotPasswordPage: React.FC = () => {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+    },
+    validators: { onSubmit: forgotPasswordSchema },
+    onSubmit: async ({ value }) => {
+      try {
+        await fetch(
+          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/reset-password-requests`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email: value.email }),
+          }
+        );
+      } catch {
+        // Intentionally silent: always show same message to prevent account enumeration
+      }
+      toast.success("If this email exists, a reset link has been sent.");
+      form.reset();
+    },
+  });
+
+  return (
+    <Default>
+      <div className="container my-auto">
+        <div className="mx-auto my-8 w-full max-w-md">
+          <h1 className="mb-2 text-2xl font-bold">Forgot your password?</h1>
+          <p className="text-muted-foreground mb-5 text-sm">
+            Enter your email and we will send you a reset link.
+          </p>
+          <form
+            ref={formRef}
+            onSubmit={(e) => {
+              e.preventDefault();
+              void submitForm(form, formRef.current);
+            }}
+            noValidate
+          >
+            <div className="mb-5">
+              <label htmlFor="email" className={labelClass}>
+                Email
+              </label>
+              <form.Field
+                name="email"
+                validators={{
+                  onSubmit: forgotPasswordSchema.shape.email,
+                  onBlur: forgotPasswordSchema.shape.email,
+                }}
+              >
+                {(field) => (
+                  <>
+                    <Input
+                      id="email"
+                      type="email"
+                      name="email"
+                      required
+                      value={field.state.value}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                      aria-describedby="email-error"
+                      aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                    />
+                    <FieldError
+                      id="email-error"
+                      errors={field.state.meta.errors}
+                      isTouched={field.state.meta.isTouched}
+                      isSubmitted={form.state.isSubmitted}
+                    />
+                  </>
+                )}
+              </form.Field>
+            </div>
+
+            <Button type="submit" className="mb-3 w-full" disabled={form.state.isSubmitting}>
+              Send reset link
+            </Button>
+
+            <p className="text-muted-foreground text-center text-sm">
+              <Link to="/login" className="text-primary hover:underline">
+                Back to login
+              </Link>
+            </p>
+          </form>
+        </div>
+      </div>
+    </Default>
+  );
+};
+
+export default ForgotPasswordPage;
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index 10fd834..ff029c0 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -1,21 +1,19 @@
-import React from 'react';
-import ProductsList from '../components/ProductsList';
-import { useQuery } from '@tanstack/react-query';
-import { Product } from '../types/Product';
-import Layout from '../layouts/Default';
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import ProductsList from "../components/ProductsList";
+import Layout from "../layouts/Default";
+import { Product } from "../types/Product";
 
 const fetchProducts = async (): Promise<Product[]> => {
   const response = await fetch(
-    `${
-      import.meta.env.VITE_REACT_APP_API_URL
-    }/api/v2/shop/products?itemsPerPage=8`
+    `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/products?itemsPerPage=8`
   );
   if (!response.ok) {
-    throw new Error('Error while loading products');
+    throw new Error("Error while loading products");
   }
 
   const data = await response.json();
-  return data['hydra:member'] || data.items || data;
+  return data["hydra:member"] || data.items || data;
 };
 
 const Homepage: React.FC = () => {
@@ -25,49 +23,43 @@ const Homepage: React.FC = () => {
     isError,
     error,
   } = useQuery<Product[], Error>({
-    queryKey: ['products', 'homepage'],
+    queryKey: ["products", "homepage"],
     queryFn: fetchProducts,
   });
 
   return (
     <Layout>
-      <div className="mb-5">
+      <div className="mb-10">
         <div className="overflow-hidden">
-          <div className="d-flex justify-content-center align-items-center position-relative">
+          <div className="relative flex items-center justify-center">
             <img
               src={`${
                 import.meta.env.VITE_REACT_APP_API_URL
               }/build/shop/images/homepage-banner.8ec389de.webp`}
               width="1920"
               height="793"
-              className="img-fluid"
+              className="h-auto max-w-full"
               alt="Home"
             />
             <img
               src={`${
                 import.meta.env.VITE_REACT_APP_API_URL
               }/build/shop/images/homepage-banner-logo.6759d0fb.webp`}
-              className="position-absolute"
-              style={{ maxWidth: '40vw' }}
+              className="absolute"
+              style={{ maxWidth: "40vw" }}
               alt="New collection"
             />
           </div>
         </div>
       </div>
-      <div className="container mb-5">
+      <div className="container mb-10">
         {isLoading && <div className="text-center">Loading products...</div>}
-        {isError && (
-          <div className="text-danger text-center">Error: {error.message}</div>
-        )}
+        {isError && <div className="text-destructive text-center">Error: {error.message}</div>}
 
-        {products && (
-          <ProductsList products={products} limit={4} name={'Latest deals'} />
-        )}
+        {products && <ProductsList products={products} limit={4} name={"Latest deals"} />}
       </div>
-      <div className="container mb-5">
-        <div className="mb-5">
-          <h2>New collection</h2>
-        </div>
+      <div className="container mb-10">
+        <h2 className="mb-5">New collection</h2>
 
         <div className="photo-grid">
           <div className="photo-grid-item-1">
@@ -75,7 +67,7 @@ const Homepage: React.FC = () => {
               src={`${
                 import.meta.env.VITE_REACT_APP_API_URL
               }/build/shop/images/homepage-new-collection-photo-1.2b163989.webp`}
-              className="object-fit-cover w-100 h-100 rounded-3"
+              className="h-full w-full rounded-xl object-cover"
               loading="lazy"
               alt="New collection"
             />
@@ -85,7 +77,7 @@ const Homepage: React.FC = () => {
               src={`${
                 import.meta.env.VITE_REACT_APP_API_URL
               }/build/shop/images/homepage-new-collection-photo-2.2c91a0c3.webp`}
-              className="object-fit-cover w-100 h-100 rounded-3"
+              className="h-full w-full rounded-xl object-cover"
               loading="lazy"
               alt="New collection"
             />
@@ -95,7 +87,7 @@ const Homepage: React.FC = () => {
               src={`${
                 import.meta.env.VITE_REACT_APP_API_URL
               }/build/shop/images/homepage-new-collection-photo-3.466a0c4c.webp`}
-              className="object-fit-cover w-100 h-100 rounded-3"
+              className="h-full w-full rounded-xl object-cover"
               loading="lazy"
               alt="New collection"
             />
@@ -104,13 +96,7 @@ const Homepage: React.FC = () => {
       </div>
 
       <div className="container">
-        {products && (
-          <ProductsList
-            products={products}
-            limit={8}
-            name={'Latest products'}
-          />
-        )}
+        {products && <ProductsList products={products} limit={8} name={"Latest products"} />}
       </div>
     </Layout>
   );
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index c7994ac..0b9320d 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,167 +1,231 @@
-import React, { useState } from "react";
-import Default from "../layouts/Default";
-import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { FieldError } from "@/components/ui/field-error";
+import { Input } from "@/components/ui/input";
+import { loginSchema } from "@/schemas/auth";
+import { applyServerErrors, submitForm } from "@/lib/utils";
+import { useForm } from "@tanstack/react-form";
+import { IconEye, IconEyeOff, IconLockOpen } from "@tabler/icons-react";
+import React, { useCallback, useRef, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { useCustomer } from "../context/CustomerContext";
-import { IconLockOpen } from "@tabler/icons-react";
+import Default from "../layouts/Default";
+
+const labelClass = "block text-sm font-medium mb-1";
 
 const LoginPage: React.FC = () => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
   const { refetchCustomer } = useCustomer();
-
-  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-
-    try {
-      const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/customers/token`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ email, password }),
-        },
-      );
-
-      const data: { token: string; customer: string; message?: string } =
-        await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.message || "Invalid credentials");
-      }
-
-      localStorage.setItem("jwtToken", data.token);
-      localStorage.setItem("userUrl", data.customer);
-
-      await refetchCustomer();
-
-      navigate("/account/dashboard", { replace: true });
-    } catch (err) {
-      if (err instanceof Error) {
-        setError(err.message);
-      } else {
-        setError("Unexpected error occurred");
+  const formRef = useRef<HTMLFormElement>(null);
+
+  // Handle visibility toggle
+  const togglePasswordVisibility = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+      remember_me: false,
+    },
+    validators: { onSubmit: loginSchema },
+    onSubmit: async ({ value }) => {
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/customers/token`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ email: value.email, password: value.password }),
+          }
+        );
+
+        if (!response.ok) {
+          const contentType = response.headers.get("content-type");
+          if (contentType?.includes("application/json")) {
+            const errData: { message?: string } = await response.json();
+            throw new Error(errData.message || "Invalid credentials");
+          }
+          throw new Error("Invalid credentials");
+        }
+
+        const data: { token: string; customer: string } = await response.json();
+
+        localStorage.setItem("jwtToken", data.token);
+        localStorage.setItem("userUrl", data.customer);
+
+        await refetchCustomer();
+
+        navigate("/account/dashboard", { replace: true });
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Unexpected error occurred";
+        applyServerErrors(form, { email: message });
       }
-    } finally {
-      setLoading(false);
-    }
-  };
+    },
+  });
 
   return (
     <Default>
       <div className="container my-auto">
-        <div className="row my-4">
-          <div className="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-0 col-xl-4 offset-xl-1 order-lg-1">
-            <div className="d-flex justify-content-center align-items-center h-100 px-3">
-              <div className="w-100 py-lg-5 mb-5 my-lg-5">
-                <h1 className="h2 mb-5">Login</h1>
-                <form onSubmit={handleLogin} noValidate>
-                  {error && (
-                    <div className="alert alert-danger">
-                      <div className="fw-bold">Error</div>
-                      {error}
-                    </div>
-                  )}
-
-                  <div className="mb-5">
-                    <div className="field mb-3 required">
-                      <label
-                        htmlFor="_username"
-                        className="form-label required"
-                      >
-                        Username
-                      </label>
-                      <input
-                        type="text"
-                        id="_username"
-                        name="_username"
-                        required
-                        className="form-control"
-                        onChange={(e) => setEmail(e.target.value)}
-                      />
-                    </div>
-
-                    <div className="field mb-3 required">
-                      <label
-                        htmlFor="_password"
-                        className="form-label required"
-                      >
-                        Password
-                      </label>
-                      <input
-                        type="password"
-                        id="_password"
-                        name="_password"
-                        required
-                        className="form-control"
-                        onChange={(e) => setPassword(e.target.value)}
-                      />
-                    </div>
-
-                    <div className="form-check">
-                      <input
-                        type="checkbox"
-                        id="_remember_me"
-                        name="_remember_me"
-                        className="form-check-input"
-                        value="1"
-                      />
-                      <label
-                        className="form-check-label"
-                        htmlFor="_remember_me"
-                      >
-                        Remember me
-                      </label>
-                    </div>
+        <div className="my-4 grid grid-cols-1 gap-6 lg:grid-cols-2">
+          <div className="flex items-center justify-center lg:order-2">
+            <div className="w-full max-w-md py-8 lg:py-20">
+              <h1 className="mb-5 text-2xl font-bold">Login</h1>
+              <form
+                ref={formRef}
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  void submitForm(form, formRef.current);
+                }}
+                noValidate
+              >
+                <div className="mb-5">
+                  <div className="mb-3">
+                    <label htmlFor="_username" className={labelClass}>
+                      Username / Email
+                    </label>
+                    <form.Field
+                      name="email"
+                      validators={{
+                        onSubmit: loginSchema.shape.email,
+                        onBlur: loginSchema.shape.email,
+                      }}
+                    >
+                      {(field) => (
+                        <>
+                          <Input
+                            type="text"
+                            id="_username"
+                            name="_username"
+                            value={field.state.value}
+                            required
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            onBlur={field.handleBlur}
+                            aria-describedby="email-error"
+                            aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                          />
+                          <FieldError
+                            id="email-error"
+                            errors={field.state.meta.errors}
+                            isTouched={field.state.meta.isTouched}
+                            isSubmitted={form.state.isSubmitted}
+                          />
+                        </>
+                      )}
+                    </form.Field>
                   </div>
 
-                  <div className="d-grid mb-2">
-                    <button
-                      type="submit"
-                      className="btn btn-primary"
-                      id="login-button"
-                      disabled={loading}
+                  <div className="mb-3">
+                    <label htmlFor="_password" className={labelClass}>
+                      Password
+                    </label>
+                    <form.Field
+                      name="password"
+                      validators={{
+                        onSubmit: loginSchema.shape.password,
+                        onBlur: loginSchema.shape.password,
+                      }}
                     >
-                      Login
-                    </button>
+                      {(field) => (
+                        <>
+                          <div className="relative">
+                            <Input
+                              type={showPassword ? "text" : "password"}
+                              id="_password"
+                              name="_password"
+                              value={field.state.value}
+                              required
+                              onChange={(e) => field.handleChange(e.target.value)}
+                              onBlur={field.handleBlur}
+                              className="pr-10"
+                              aria-describedby="password-error"
+                              aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                            />
+                            <button
+                              type="button"
+                              onClick={togglePasswordVisibility}
+                              className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2 focus:outline-none"
+                              aria-label={showPassword ? "Hide password" : "Show password"}
+                            >
+                              {showPassword ? (
+                                <IconEyeOff size={20} stroke={1.5} />
+                              ) : (
+                                <IconEye size={20} stroke={1.5} />
+                              )}
+                            </button>
+                          </div>
+                          <FieldError
+                            id="password-error"
+                            errors={field.state.meta.errors}
+                            isTouched={field.state.meta.isTouched}
+                            isSubmitted={form.state.isSubmitted}
+                          />
+                        </>
+                      )}
+                    </form.Field>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <form.Field name="remember_me">
+                      {(field) => (
+                        <Checkbox
+                          id="_remember_me"
+                          name="_remember_me"
+                          checked={field.state.value ?? false}
+                          onCheckedChange={(checked) => field.handleChange(!!checked)}
+                        />
+                      )}
+                    </form.Field>
+                    <label className="text-sm" htmlFor="_remember_me">
+                      Remember me
+                    </label>
                   </div>
+                </div>
 
-                  <input
-                    type="hidden"
-                    name="_csrf_shop_security_token"
-                    value="9e18bb83adf067700.UOv6APT67VeoTTEJqhaKHvRW9u1qj7WrPIqcU94-HXc.YN7NTJuq2xCZAQJFz3PaeNk_g6RTyvjefdrfEIx0WRMhucotpImUbsY7aA"
-                  />
-                </form>
-
-                <div className="d-grid">
-                  <a className="btn btn-link" href="/en_US/forgotten-password">
-                    Forgot password?
-                  </a>
+                <div className="mb-2">
+                  <Button
+                    type="submit"
+                    className="w-full"
+                    id="login-button"
+                    disabled={form.state.isSubmitting}
+                  >
+                    {form.state.isSubmitting ? "Logging in..." : "Login"}
+                  </Button>
                 </div>
+
+                <input
+                  type="hidden"
+                  name="_csrf_shop_security_token"
+                  value="9e18bb83adf067700.UOv6APT67VeoTTEJqhaKHvRW9u1qj7WrPIqcU94-HXc.YN7NTJuq2xCZAQJFz3PaeNk_g6RTyvjefdrfEIx0WRMhucotpImUbsY7aA"
+                />
+              </form>
+
+              <div className="text-center">
+                <Link to="/forgot-password" className="text-primary text-sm hover:underline">
+                  Forgot password?
+                </Link>
               </div>
             </div>
           </div>
 
-          <div className="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-0 order-lg-0">
-            <div className="d-flex flex-column justify-content-center align-items-center bg-light rounded-4 h-100 p-3">
+          <div className="lg:order-1">
+            <div className="bg-muted flex h-full flex-col items-center justify-center rounded-2xl p-3">
               <div className="text-center">
-                <div className="mb-3">
-                  <IconLockOpen stroke={2} size={144} color={"#e8eaed"} />
+                <div className="mb-3 flex justify-center">
+                  <IconLockOpen stroke={2} size={144} color={"#22b99a"} />
                 </div>
-                <h2>Don't have an account?</h2>
-                <a
-                  className="btn btn-link"
+                <h2 className="text-xl font-semibold">Don't have an account?</h2>
+                <Link
+                  to="/register"
+                  className="text-primary font-medium hover:underline"
                   id="register-here-button"
-                  href="/en_US/register"
                 >
                   Register here
-                </a>
+                </Link>
               </div>
             </div>
           </div>
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..71be45c
--- /dev/null
+++ b/src/pages/NotFoundPage.tsx
@@ -0,0 +1,19 @@
+import { Button } from "@/components/ui/button";
+import React from "react";
+import { Link } from "react-router-dom";
+import Default from "../layouts/Default";
+
+const NotFoundPage: React.FC = () => (
+  <Default>
+    <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 text-center">
+      <p className="text-muted-foreground text-9xl font-bold">404</p>
+      <h1 className="text-2xl font-semibold">Page not found</h1>
+      <p className="text-muted-foreground">The page you are looking for does not exist.</p>
+      <Button nativeButton={false} render={<Link to="/" />}>
+        Back to homepage
+      </Button>
+    </div>
+  </Default>
+);
+
+export default NotFoundPage;
diff --git a/src/pages/Product/AddReviewPage.tsx b/src/pages/Product/AddReviewPage.tsx
index fcdb240..ff73a5c 100644
--- a/src/pages/Product/AddReviewPage.tsx
+++ b/src/pages/Product/AddReviewPage.tsx
@@ -1,189 +1,300 @@
-import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import ProductCard from '../../components/ProductCard';
-import { useFlashMessages } from '../../context/FlashMessagesContext';
-import Breadcrumbs from '../../components/Breadcrumbs';
-import Layout from '../../layouts/Default';
-import Skeleton from 'react-loading-skeleton';
-import { Product } from '../../types/Product';
-import { IconStar } from '@tabler/icons-react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { IconStar } from "@tabler/icons-react";
+import React, { useEffect, useRef, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import { useNavigate, useParams } from "react-router-dom";
+import Breadcrumbs from "../../components/Breadcrumbs";
+import ProductCard from "../../components/ProductCard";
+import { useFlashMessages } from "../../context/FlashMessagesContext";
+import Layout from "../../layouts/Default";
+import { Product } from "../../types/Product";
+import { useForm } from "@tanstack/react-form";
+import { reviewSchema } from "@/schemas/review";
+import { FieldError } from "@/components/ui/field-error";
+import { submitForm } from "@/lib/utils";
 
 const API_URL = import.meta.env.VITE_REACT_APP_API_URL;
 
+const labelClass = "block text-sm font-medium mb-1";
+
 const AddReviewPage: React.FC = () => {
-    const { code } = useParams<{ code: string }>();
-    const navigate = useNavigate();
-    const { addMessage } = useFlashMessages();
-
-    const [product, setProduct] = useState<Product | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [breadcrumbs, setBreadcrumbs] = useState<{ label: string; url: string }[]>([]);
-
-    const [title, setTitle] = useState('');
-    const [rating, setRating] = useState(5);
-    const [comment, setComment] = useState('');
-    const [email, setEmail] = useState('');
-
-    useEffect(() => {
-        const fetchProduct = async () => {
-            try {
-                const res = await fetch(`${API_URL}/api/v2/shop/products/${code}`);
-                const data: Product = await res.json();
-                setProduct(data);
-
-                const breadcrumbPaths: { label: string; url: string }[] = [
-                    { label: 'Home', url: '/' },
-                    { label: 'Category', url: '#' },
-                ];
-
-                if (data.productTaxons?.length) {
-                    const visited = new Set<string>();
-
-                    for (const productTaxonUrl of data.productTaxons) {
-                        const taxonRes = await fetch(`${API_URL}${productTaxonUrl}`);
-                        const taxonData = await taxonRes.json();
-                        const taxon = await fetch(`${API_URL}${taxonData.taxon}`).then((r) => r.json());
-
-                        const parents: { name: string; code: string }[] = [];
-
-                        if (taxon.parent) {
-                            const parentRes = await fetch(`${API_URL}${taxon.parent}`);
-                            const parent = await parentRes.json();
-                            parents.push({ name: parent.name, code: parent.code });
-                        }
-
-                        parents.push({ name: taxon.name, code: taxon.code });
-
-                        for (const p of parents) {
-                            if (!visited.has(p.code)) {
-                                visited.add(p.code);
-                                breadcrumbPaths.push({ label: p.name, url: `/${p.code}` });
-                            }
-                        }
-                    }
-
-                    breadcrumbPaths.push({ label: data.name, url: `/product/${data.code}` });
-                    breadcrumbPaths.push({ label: 'Reviews', url: `/product/${data.code}/reviews` });
-                    breadcrumbPaths.push({ label: 'Add', url: '#' });
-                }
-
-                setBreadcrumbs(breadcrumbPaths);
-            } catch (err) {
-                console.error('Error loading product:', err);
-            } finally {
-                setLoading(false);
+  const { code } = useParams<{ code: string }>();
+  const navigate = useNavigate();
+  const { addMessage } = useFlashMessages();
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [breadcrumbs, setBreadcrumbs] = useState<{ label: string; url: string }[]>([]);
+
+  const form = useForm({
+    defaultValues: {
+      rating: 5,
+      title: "",
+      comment: "",
+      email: "",
+    },
+    validators: {
+      onSubmit: reviewSchema,
+    },
+    onSubmit: async ({ value }) => {
+      try {
+        const res = await fetch(`${API_URL}/api/v2/shop/product-reviews`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            title: value.title,
+            rating: value.rating,
+            comment: value.comment,
+            email: value.email,
+            product: `/api/v2/shop/products/${code}`,
+          }),
+        });
+
+        if (!res.ok) throw new Error("Failed to submit review");
+
+        addMessage("success", "Success — Your review is waiting for the acceptation.");
+        navigate(`/product/${code}`);
+      } catch (err) {
+        console.error("Error submitting review:", err);
+        addMessage("error", "Failed to submit your review");
+      }
+    },
+  });
+
+  useEffect(() => {
+    const fetchProduct = async () => {
+      try {
+        const res = await fetch(`${API_URL}/api/v2/shop/products/${code}`);
+        const data: Product = await res.json();
+        setProduct(data);
+
+        const breadcrumbPaths: { label: string; url: string }[] = [
+          { label: "Home", url: "/" },
+          { label: "Category", url: "#" },
+        ];
+
+        if (data.productTaxons?.length) {
+          const visited = new Set<string>();
+
+          for (const productTaxonUrl of data.productTaxons) {
+            const taxonRes = await fetch(`${API_URL}${productTaxonUrl}`);
+            const taxonData = await taxonRes.json();
+            const taxon = await fetch(`${API_URL}${taxonData.taxon}`).then((r) => r.json());
+
+            const parents: { name: string; code: string }[] = [];
+
+            if (taxon.parent) {
+              const parentRes = await fetch(`${API_URL}${taxon.parent}`);
+              const parent = await parentRes.json();
+              parents.push({ name: parent.name, code: parent.code });
             }
-        };
-
-        if (code) fetchProduct();
-    }, [code]);
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        try {
-            const res = await fetch(`${API_URL}/api/v2/shop/product-reviews`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    title,
-                    rating,
-                    comment,
-                    email,
-                    product: `/api/v2/shop/products/${code}`,
-                }),
-            });
-
-            if (!res.ok) throw new Error('Failed to submit review');
-
-            addMessage('success', 'Success — Your review is waiting for the acceptation.');
-            navigate(`/product/${code}`);
-        } catch (err) {
-            console.error('Error submitting review:', err);
-            addMessage('error', 'Failed to submit your review');
+
+            parents.push({ name: taxon.name, code: taxon.code });
+
+            for (const p of parents) {
+              if (!visited.has(p.code)) {
+                visited.add(p.code);
+                breadcrumbPaths.push({ label: p.name, url: `/${p.code}` });
+              }
+            }
+          }
+
+          breadcrumbPaths.push({ label: data.name, url: `/product/${data.code}` });
+          breadcrumbPaths.push({ label: "Reviews", url: `/product/${data.code}/reviews` });
+          breadcrumbPaths.push({ label: "Add", url: "#" });
         }
+
+        setBreadcrumbs(breadcrumbPaths);
+      } catch (err) {
+        console.error("Error loading product:", err);
+      } finally {
+        setLoading(false);
+      }
     };
 
-    return (
-        <Layout>
-            <div className="container mt-4 mb-5">
-                <div className="row">
-                    <Breadcrumbs paths={breadcrumbs} />
-
-                    <div className="col-12 col-md-5 col-lg-4">
-                        {loading ? (
-                            <Skeleton height={400} />
-                        ) : (
-                            product && <ProductCard product={product} />
-                        )}
-                    </div>
-
-                    <div className="col-12 col-md-7 col-lg-8">
-                        <h1>Add Your Review</h1>
-                        <form onSubmit={handleSubmit}>
-                            <div className="mb-3">
-                                <label className="form-label d-block">Rating <span className="text-danger">*</span></label>
-                                <div className="d-flex gap-2" role="radiogroup" aria-label="Rating">
-                                    {[1, 2, 3, 4, 5].map((value) => (
-                                        <button
-                                            type="button"
-                                            key={value}
-                                            className="border-0 bg-transparent p-0"
-                                            onClick={() => setRating(value)}
-                                            aria-label={`${value} star`}
-                                        >
-                                            <IconStar
-                                                className="review-stars"
-                                                stroke={2}
-                                                size={32}
-                                                fill={value <= rating ? 'currentColor' : 'none'}
-                                            />
-                                        </button>
-                                    ))}
-                                </div>
-                            </div>
-
-                            <div className="mb-3">
-                                <label className="form-label">Title <span className="text-danger">*</span></label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    value={title}
-                                    onChange={(e) => setTitle(e.target.value)}
-                                    required
-                                />
-                            </div>
-
-                            <div className="mb-3">
-                                <label className="form-label">Comment <span className="text-danger">*</span></label>
-                                <textarea
-                                    className="form-control"
-                                    rows={4}
-                                    value={comment}
-                                    onChange={(e) => setComment(e.target.value)}
-                                    required
-                                />
-                            </div>
-
-                            <div className="mb-4">
-                                <label className="form-label">Email <span className="text-danger">*</span></label>
-                                <input
-                                    type="email"
-                                    className="form-control"
-                                    value={email}
-                                    onChange={(e) => setEmail(e.target.value)}
-                                    required
-                                />
-                            </div>
-
-                            <button type="submit" className="btn btn-primary px-4">
-                                Add
-                            </button>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
+    if (code) fetchProduct();
+  }, [code]);
+
+  return (
+    <Layout>
+      <div className="container mt-4 mb-5">
+        <div className="-mx-4 flex flex-wrap">
+          <div className="w-full px-4">
+            <Breadcrumbs paths={breadcrumbs} />
+          </div>
+
+          <div className="w-full px-4 md:w-5/12 lg:w-4/12">
+            {loading ? <Skeleton height={400} /> : product && <ProductCard product={product} />}
+          </div>
+
+          <div className="w-full px-4 md:w-7/12 lg:w-8/12">
+            <h1>Add Your Review</h1>
+            <form
+              ref={formRef}
+              noValidate
+              onSubmit={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                void submitForm(form, formRef.current);
+              }}
+            >
+              <div className="mb-3">
+                <label className={labelClass}>
+                  Rating <span className="text-destructive">*</span>
+                </label>
+                <form.Field
+                  name="rating"
+                  validators={{
+                    onSubmit: reviewSchema.shape.rating,
+                    onBlur: reviewSchema.shape.rating,
+                  }}
+                >
+                  {(field) => (
+                    <>
+                      <div
+                        className="flex gap-1"
+                        role="radiogroup"
+                        aria-label="Rating"
+                        aria-describedby="rating-error"
+                      >
+                        {[1, 2, 3, 4, 5].map((value) => (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            key={value}
+                            onClick={() => field.handleChange(value)}
+                            aria-label={`${value} star`}
+                          >
+                            <IconStar
+                              className="text-yellow-400"
+                              stroke={2}
+                              size={20}
+                              fill={value <= field.state.value ? "currentColor" : "none"}
+                            />
+                          </Button>
+                        ))}
+                      </div>
+                      <FieldError
+                        id="rating-error"
+                        errors={field.state.meta.errors}
+                        isTouched={field.state.meta.isTouched}
+                        isSubmitted={form.state.isSubmitted}
+                      />
+                    </>
+                  )}
+                </form.Field>
+              </div>
+
+              <div className="mb-3">
+                <label className={labelClass}>
+                  Title <span className="text-destructive">*</span>
+                </label>
+                <form.Field
+                  name="title"
+                  validators={{
+                    onSubmit: reviewSchema.shape.title,
+                    onBlur: reviewSchema.shape.title,
+                  }}
+                >
+                  {(field) => (
+                    <>
+                      <Input
+                        type="text"
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                        required
+                        aria-describedby="title-error"
+                        aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                      />
+                      <FieldError
+                        id="title-error"
+                        errors={field.state.meta.errors}
+                        isTouched={field.state.meta.isTouched}
+                        isSubmitted={form.state.isSubmitted}
+                      />
+                    </>
+                  )}
+                </form.Field>
+              </div>
+
+              <div className="mb-3">
+                <label className={labelClass}>
+                  Comment <span className="text-destructive">*</span>
+                </label>
+                <form.Field
+                  name="comment"
+                  validators={{
+                    onSubmit: reviewSchema.shape.comment,
+                    onBlur: reviewSchema.shape.comment,
+                  }}
+                >
+                  {(field) => (
+                    <>
+                      <Textarea
+                        rows={4}
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                        required
+                        aria-describedby="comment-error"
+                        aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                      />
+                      <FieldError
+                        id="comment-error"
+                        errors={field.state.meta.errors}
+                        isTouched={field.state.meta.isTouched}
+                        isSubmitted={form.state.isSubmitted}
+                      />
+                    </>
+                  )}
+                </form.Field>
+              </div>
+
+              <div className="mb-4">
+                <label className={labelClass}>
+                  Email <span className="text-destructive">*</span>
+                </label>
+                <form.Field
+                  name="email"
+                  validators={{
+                    onSubmit: reviewSchema.shape.email,
+                    onBlur: reviewSchema.shape.email,
+                  }}
+                >
+                  {(field) => (
+                    <>
+                      <Input
+                        type="email"
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                        required
+                        aria-describedby="email-error"
+                        aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                      />
+                      <FieldError
+                        id="email-error"
+                        errors={field.state.meta.errors}
+                        isTouched={field.state.meta.isTouched}
+                        isSubmitted={form.state.isSubmitted}
+                      />
+                    </>
+                  )}
+                </form.Field>
+              </div>
+
+              <Button type="submit">Add</Button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
 };
 
 export default AddReviewPage;
diff --git a/src/pages/Product/ReviewsListPage.tsx b/src/pages/Product/ReviewsListPage.tsx
index 70afa4c..fb5b60a 100644
--- a/src/pages/Product/ReviewsListPage.tsx
+++ b/src/pages/Product/ReviewsListPage.tsx
@@ -1,131 +1,132 @@
-import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import Layout from '../../layouts/Default';
-import Breadcrumbs from '../../components/Breadcrumbs';
-import ProductCard from '../../components/ProductCard';
-import Reviews from '../../components/product/Reviews';
-import { Product, ProductReview } from '../../types/Product';
-import Skeleton from 'react-loading-skeleton';
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import Layout from "../../layouts/Default";
+import Breadcrumbs from "../../components/Breadcrumbs";
+import ProductCard from "../../components/ProductCard";
+import Reviews from "../../components/product/Reviews";
+import { Product, ProductReview } from "../../types/Product";
+import Skeleton from "react-loading-skeleton";
 
 const API_URL = import.meta.env.VITE_REACT_APP_API_URL;
 
 const ReviewsListPage: React.FC = () => {
-    const { code } = useParams<{ code: string }>();
-    const [product, setProduct] = useState<Product | null>(null);
-    const [reviews, setReviews] = useState<ProductReview[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [breadcrumbs, setBreadcrumbs] = useState<{ label: string; url: string }[]>([]);
-
-    useEffect(() => {
-        const fetchProduct = async () => {
-            try {
-                const res = await fetch(`${API_URL}/api/v2/shop/products/${code}`);
-                const data: Product = await res.json();
-                setProduct(data);
-
-                if (Array.isArray(data.reviews) && data.reviews.length > 0) {
-                    const detailed = await Promise.all(
-                        data.reviews.map(async (ref: { '@id': string }) => {
-                            const res = await fetch(`${API_URL}${ref['@id']}`);
-                            return await res.json();
-                        })
-                    );
-
-                    const sorted = detailed.sort((a, b) =>
-                        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-                    );
-
-                    setReviews(sorted);
-                }
-
-                const breadcrumbPaths: { label: string; url: string }[] = [
-                    { label: 'Home', url: '/' },
-                    { label: 'Category', url: '#' },
-                ];
-
-                if (data.productTaxons?.length) {
-                    const visited = new Set<string>();
-
-                    for (const productTaxonUrl of data.productTaxons) {
-                        const taxonRes = await fetch(`${API_URL}${productTaxonUrl}`);
-                        const taxonData = await taxonRes.json();
-                        const taxon = await fetch(`${API_URL}${taxonData.taxon}`).then((r) => r.json());
-
-                        const parents: { name: string; code: string }[] = [];
-
-                        if (taxon.parent) {
-                            const parentRes = await fetch(`${API_URL}${taxon.parent}`);
-                            const parent = await parentRes.json();
-                            parents.push({ name: parent.name, code: parent.code });
-                        }
-
-                        parents.push({ name: taxon.name, code: taxon.code });
-
-                        for (const p of parents) {
-                            if (!visited.has(p.code)) {
-                                visited.add(p.code);
-                                breadcrumbPaths.push({ label: p.name, url: `/${p.code}` });
-                            }
-                        }
-                    }
-                }
-
-                breadcrumbPaths.push({ label: data.name, url: `/product/${data.code}` });
-                breadcrumbPaths.push({ label: 'Reviews', url: '#' });
-                setBreadcrumbs(breadcrumbPaths);
-            } catch (err) {
-                console.error('Failed to load product or reviews', err);
-            } finally {
-                setLoading(false);
+  const { code } = useParams<{ code: string }>();
+  const [product, setProduct] = useState<Product | null>(null);
+  const [reviews, setReviews] = useState<ProductReview[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [breadcrumbs, setBreadcrumbs] = useState<{ label: string; url: string }[]>([]);
+
+  useEffect(() => {
+    const fetchProduct = async () => {
+      try {
+        const res = await fetch(`${API_URL}/api/v2/shop/products/${code}`);
+        const data: Product = await res.json();
+        setProduct(data);
+
+        if (Array.isArray(data.reviews) && data.reviews.length > 0) {
+          const detailed = await Promise.all(
+            data.reviews.map(async (ref: { "@id": string }) => {
+              const res = await fetch(`${API_URL}${ref["@id"]}`);
+              return await res.json();
+            })
+          );
+
+          const sorted = detailed.sort(
+            (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+          );
+
+          setReviews(sorted);
+        }
+
+        const breadcrumbPaths: { label: string; url: string }[] = [
+          { label: "Home", url: "/" },
+          { label: "Category", url: "#" },
+        ];
+
+        if (data.productTaxons?.length) {
+          const visited = new Set<string>();
+
+          for (const productTaxonUrl of data.productTaxons) {
+            const taxonRes = await fetch(`${API_URL}${productTaxonUrl}`);
+            const taxonData = await taxonRes.json();
+            const taxon = await fetch(`${API_URL}${taxonData.taxon}`).then((r) => r.json());
+
+            const parents: { name: string; code: string }[] = [];
+
+            if (taxon.parent) {
+              const parentRes = await fetch(`${API_URL}${taxon.parent}`);
+              const parent = await parentRes.json();
+              parents.push({ name: parent.name, code: parent.code });
             }
-        };
-
-        if (code) fetchProduct();
-    }, [code]);
-
-    return (
-        <Layout>
-            <div className="container mt-4 mb-5">
-                <Breadcrumbs paths={breadcrumbs} />
-
-                <div className="row">
-                    <div className="col-12 col-md-5 col-lg-4">
-                        {loading ? (
-                            <Skeleton height={400} />
-                        ) : (
-                            product && <ProductCard product={product} />
-                        )}
-                    </div>
 
-                    <div className="col-12 col-md-7 col-lg-8">
-                        {loading ? (
-                            <>
-                                <Skeleton height={30} width={150} className="mb-2" />
-                                <Skeleton height={20} width={100} className="mb-4" />
-                                <Skeleton height={40} count={5} className="mb-3" />
-                            </>
-                        ) : (
-                            <>
-                                <div className="d-sm-flex gap-3">
-                                    <div className="flex-grow-1 mb-3">
-                                        <h1>Reviews</h1>
-                                        <div>{reviews.length} vote{reviews.length !== 1 && 's'}</div>
-                                    </div>
-                                    <div className="mb-3">
-                                        <a href={`/product/${code}/review/new`} className="btn btn-primary">
-                                            Add your review
-                                        </a>
-                                    </div>
-                                </div>
-
-                                <Reviews reviews={reviews} />
-                            </>
-                        )}
+            parents.push({ name: taxon.name, code: taxon.code });
+
+            for (const p of parents) {
+              if (!visited.has(p.code)) {
+                visited.add(p.code);
+                breadcrumbPaths.push({ label: p.name, url: `/${p.code}` });
+              }
+            }
+          }
+        }
+
+        breadcrumbPaths.push({ label: data.name, url: `/product/${data.code}` });
+        breadcrumbPaths.push({ label: "Reviews", url: "#" });
+        setBreadcrumbs(breadcrumbPaths);
+      } catch (err) {
+        console.error("Failed to load product or reviews", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (code) fetchProduct();
+  }, [code]);
+
+  return (
+    <Layout>
+      <div className="container mt-4 mb-5">
+        <Breadcrumbs paths={breadcrumbs} />
+
+        <div className="-mx-4 flex flex-wrap">
+          <div className="w-full px-4 md:w-5/12 lg:w-4/12">
+            {loading ? <Skeleton height={400} /> : product && <ProductCard product={product} />}
+          </div>
+
+          <div className="w-full px-4 md:w-7/12 lg:w-8/12">
+            {loading ? (
+              <>
+                <Skeleton height={30} width={150} className="mb-2" />
+                <Skeleton height={20} width={100} className="mb-4" />
+                <Skeleton height={40} count={5} className="mb-3" />
+              </>
+            ) : (
+              <>
+                <div className="gap-3 sm:flex">
+                  <div className="mb-3 flex-1">
+                    <h1>Reviews</h1>
+                    <div>
+                      {reviews.length} vote{reviews.length !== 1 && "s"}
                     </div>
+                  </div>
+                  <div className="mb-3">
+                    <a
+                      href={`/product/${code}/review/new`}
+                      className="bg-primary hover:bg-primary/90 inline-flex items-center justify-center rounded px-4 py-2 text-white"
+                    >
+                      Add your review
+                    </a>
+                  </div>
                 </div>
-            </div>
-        </Layout>
-    );
+
+                <Reviews reviews={reviews} />
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
 };
 
 export default ReviewsListPage;
diff --git a/src/pages/ProductList.tsx b/src/pages/ProductList.tsx
index 3e0ecd3..1afc646 100644
--- a/src/pages/ProductList.tsx
+++ b/src/pages/ProductList.tsx
@@ -1,224 +1,309 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { useParams, useSearchParams, Link } from 'react-router-dom';
-import Layout from '../layouts/Default';
-import { Product } from '../types/Product';
-import Breadcrumbs from '../components/Breadcrumbs';
-import ProductCard from '../components/ProductCard';
-import Skeleton from 'react-loading-skeleton';
-import ProductToolbar from '../components/taxons/ProductToolbar';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import { Link, useParams, useSearchParams } from "react-router-dom";
+import Breadcrumbs from "../components/Breadcrumbs";
+import ProductCard from "../components/ProductCard";
+import ProductToolbar from "../components/taxons/ProductToolbar";
+import Layout from "../layouts/Default";
+import { Product } from "../types/Product";
+import NotFoundPage from "./NotFoundPage";
 
 interface TaxonDetails {
-    name: string;
-    description: string;
-    code: string;
-    parent?: {
-        name: string;
-        code: string;
-    };
-    children?: {
-        name: string;
-        code: string;
-    }[];
+  name: string;
+  description: string;
+  code: string;
+  parent?: { name: string; code: string };
+  children?: { name: string; code: string }[];
 }
 
+const ITEMS_PER_PAGE = 9;
+
 const ProductList: React.FC = () => {
-    const { parentCode, childCode } = useParams<{ parentCode?: string; childCode?: string }>();
-    const [searchParams] = useSearchParams();
-
-    const [products, setProducts] = useState<Product[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [loadingMore, setLoadingMore] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [hasMore, setHasMore] = useState(true);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [taxonDetails, setTaxonDetails] = useState<TaxonDetails | null>(null);
-    const [parentTaxon, setParentTaxon] = useState<{ name: string; code: string } | null>(null);
-
-    const taxonCode = childCode || parentCode;
-    const API = import.meta.env.VITE_REACT_APP_API_URL;
-
-    const fetchProducts = async (page: number, code: string, queryParams: string): Promise<Product[]> => {
-        const baseUrl = `${API}/api/v2/shop/products`;
-        const url = `${baseUrl}?itemsPerPage=9&page=${page}&productTaxons.taxon.code=${code}${
-            queryParams ? '&' + queryParams : ''
-        }`;
-
-        const response = await fetch(url);
-        const data = await response.json();
-        const totalItems = data['hydra:totalItems'] || 0;
-        const fetchedProducts: Product[] = data['hydra:member'] || [];
-
-        setHasMore(page * 9 < totalItems);
-        return fetchedProducts;
-    };
+  const { parentCode, childCode } = useParams<{ parentCode?: string; childCode?: string }>();
+  const [searchParams] = useSearchParams();
+
+  // State Management
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [taxonDetails, setTaxonDetails] = useState<TaxonDetails | null>(null);
+  const [parentTaxon, setParentTaxon] = useState<{ name: string; code: string } | null>(null);
+
+  // Pre-flight check state: null (checking), true (exists), false (404)
+  const [taxonExists, setTaxonExists] = useState<boolean | null>(null);
+
+  const taxonCode = childCode || parentCode;
+  const API = import.meta.env.VITE_REACT_APP_API_URL;
 
-    const fetchTaxonDetails = async (code: string): Promise<TaxonDetails | null> => {
+  /**
+   * Generates the product API URL with current filters and pagination
+   */
+  const getProductsUrl = useCallback(
+    (page: number, code: string) => {
+      const queryParams = searchParams.toString();
+      const baseUrl = `${API}/api/v2/shop/products`;
+      return `${baseUrl}?itemsPerPage=${ITEMS_PER_PAGE}&page=${page}&productTaxons.taxon.code=${code}${
+        queryParams ? "&" + queryParams : ""
+      }`;
+    },
+    [API, searchParams]
+  );
+
+  /**
+   * Fetches full taxon details, including parent and children metadata in parallel
+   */
+  const fetchTaxonDetails = useCallback(
+    async (code: string): Promise<TaxonDetails | null> => {
+      try {
         const res = await fetch(`${API}/api/v2/shop/taxons/${code}`);
         if (!res.ok) return null;
-        const data = await res.json();
 
-        let parentData: TaxonDetails['parent'] = undefined;
-        const children: { name: string; code: string }[] = [];
+        const data = await res.json();
+        const tasks: Promise<{ name: string; code: string }>[] = [];
 
+        // Queue parent fetch if available
         if (data.parent) {
-            const parentRes = await fetch(`${API}${data.parent}`);
-            if (parentRes.ok) {
-                const parentJson = await parentRes.json();
-                parentData = { name: parentJson.name, code: parentJson.code };
-                setParentTaxon(parentData);
-            }
-        } else if (childCode) {
-            const allTaxons = await fetch(`${API}/api/v2/shop/taxons`);
-            const allJson = await allTaxons.json();
-            type TaxonEntry = {
-                children?: string[];
-                name: string;
-                code: string;
-            };
-
-            const parent = (allJson['hydra:member'] as TaxonEntry[]).find(t =>
-                t.children?.includes(`/api/v2/shop/taxons/${code}`)
-            );
-            if (parent) {
-                parentData = { name: parent.name, code: parent.code };
-                setParentTaxon(parentData);
-            }
+          tasks.push(fetch(`${API}${data.parent}`).then((r) => r.json()));
         }
 
+        // Queue all children fetches simultaneously (Performance Optimization)
         if (data.children?.length) {
-            for (const childUrl of data.children) {
-                const childRes = await fetch(`${API}${childUrl}`);
-                if (childRes.ok) {
-                    const childJson = await childRes.json();
-                    children.push({ name: childJson.name, code: childJson.code });
-                }
-            }
+          data.children.forEach((url: string) => {
+            tasks.push(fetch(`${API}${url}`).then((r) => r.json()));
+          });
         }
 
+        const results = await Promise.all(tasks);
+
+        let parentData: TaxonDetails["parent"] = undefined;
+        if (data.parent) {
+          const parentJson = results.shift();
+          if (parentJson) {
+            parentData = { name: parentJson.name, code: parentJson.code };
+            setParentTaxon(parentData);
+          }
+        }
+
+        const children = results.map((childJson) => ({
+          name: childJson.name,
+          code: childJson.code,
+        }));
+
         return {
-            name: data.name,
-            description: data.description,
-            code: data.code,
-            parent: parentData,
-            children,
+          name: data.name,
+          description: data.description,
+          code: data.code,
+          parent: parentData,
+          children,
         };
-    };
+      } catch (err) {
+        console.error("Error fetching taxon details:", err);
+        return null;
+      }
+    },
+    [API]
+  );
 
-    useEffect(() => {
-        const loadInitialData = async () => {
-            if (!taxonCode) return setError('No taxon code in URL');
-
-            setLoading(true);
-            try {
-                const [productsData, taxonData] = await Promise.all([
-                    fetchProducts(1, taxonCode, searchParams.toString()),
-                    fetchTaxonDetails(taxonCode),
-                ]);
-                setProducts(productsData);
-                setTaxonDetails(taxonData);
-                setCurrentPage(1);
-            } catch {
-                setError('Failed to load data');
-            } finally {
-                setLoading(false);
-            }
-        };
-        loadInitialData();
-    }, [taxonCode, searchParams]);
-
-    const loadMore = useCallback(async () => {
-        if (loadingMore || !hasMore || !taxonCode) return;
-
-        setLoadingMore(true);
-        const nextPage = currentPage + 1;
-        try {
-            const newProducts = await fetchProducts(nextPage, taxonCode, searchParams.toString());
-            setProducts(prev => [...prev, ...newProducts]);
-            setCurrentPage(nextPage);
-        } catch (err) {
-            console.error('Error loading more products', err);
-        } finally {
-            setLoadingMore(false);
+  /**
+   * Initial Data Load with Pre-flight Check logic
+   */
+  useEffect(() => {
+    const loadInitialData = async () => {
+      if (!taxonCode) return;
+
+      setLoading(true);
+      setError(null);
+      setTaxonExists(null);
+
+      try {
+        // Step 1: Verify Taxon Existence
+        const tData = await fetchTaxonDetails(taxonCode);
+
+        if (!tData) {
+          setTaxonExists(false);
+          setLoading(false);
+          return;
         }
-    }, [currentPage, taxonCode, hasMore, loadingMore, searchParams]);
 
-    useEffect(() => {
-        const handleScroll = () => {
-            const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
-            if (scrollHeight - scrollTop - clientHeight < 300) loadMore();
-        };
-        window.addEventListener('scroll', handleScroll);
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, [loadMore]);
-
-    if (error) return <div className="text-danger text-center">{error}</div>;
-
-    const isInChildTaxon = !!childCode && !!taxonDetails?.parent;
-
-    const breadcrumbs = [
-        { label: 'Home', url: '/' },
-        { label: 'Category', url: '' },
-        ...(isInChildTaxon && parentTaxon
-            ? [
-                { label: parentTaxon.name, url: `/${parentTaxon.code}` },
-                { label: taxonDetails?.name || '', url: `/${parentTaxon.code}/${taxonDetails?.code}` },
-            ]
-            : taxonDetails
-                ? [{ label: taxonDetails.name, url: `/${taxonDetails.code}` }]
-                : []),
-    ];
+        setTaxonDetails(tData);
+        setTaxonExists(true);
+
+        // Step 2: Load Products only if Taxon is valid
+        const productUrl = getProductsUrl(1, taxonCode);
+        const pRes = await fetch(productUrl).then((r) => r.json());
 
+        const totalItems = pRes["hydra:totalItems"] || 0;
+        setProducts(pRes["hydra:member"] || []);
+        setHasMore(1 * ITEMS_PER_PAGE < totalItems);
+        setCurrentPage(1);
+      } catch {
+        setError("An error occurred while loading the products.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadInitialData();
+  }, [taxonCode, getProductsUrl, fetchTaxonDetails]);
+
+  /**
+   * Infinite Scroll: Load more products
+   */
+  const loadMore = useCallback(async () => {
+    if (loadingMore || !hasMore || !taxonCode) return;
+
+    setLoadingMore(true);
+    const nextPage = currentPage + 1;
+    try {
+      const response = await fetch(getProductsUrl(nextPage, taxonCode));
+      const data = await response.json();
+      const newProducts: Product[] = data["hydra:member"] || [];
+
+      setProducts((prev) => [...prev, ...newProducts]);
+      setHasMore(nextPage * ITEMS_PER_PAGE < (data["hydra:totalItems"] || 0));
+      setCurrentPage(nextPage);
+    } catch (err) {
+      console.error("Error loading more products:", err);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [currentPage, taxonCode, hasMore, loadingMore, getProductsUrl]);
+
+  /**
+   * Scroll Event Listener for Infinite Scroll
+   */
+  useEffect(() => {
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
+      if (scrollHeight - scrollTop - clientHeight < 300) {
+        loadMore();
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [loadMore]);
+
+  // Breadcrumbs logic
+  const isInChildTaxon = !!childCode && !!taxonDetails?.parent;
+  const breadcrumbs = useMemo(() => {
+    const base = [{ label: "Home", url: "/" }];
+    if (isInChildTaxon && parentTaxon) {
+      return [
+        ...base,
+        { label: "Category", url: `/${parentTaxon.code}` },
+        { label: parentTaxon.name, url: `/${parentTaxon.code}` },
+        { label: taxonDetails?.name || "", url: `/${parentTaxon.code}/${taxonDetails?.code}` },
+      ];
+    }
+    if (taxonDetails) {
+      return [
+        ...base,
+        { label: "Category", url: `/${taxonDetails.code}` },
+        { label: taxonDetails.name, url: `/${taxonDetails.code}` },
+      ];
+    }
+    return base;
+  }, [isInChildTaxon, parentTaxon, taxonDetails]);
+
+  // Early Return 1: Error handling
+  if (error) return <div className="text-destructive p-20 text-center font-bold">{error}</div>;
+
+  // Early Return 2: Pre-flight failure (404)
+  if (taxonExists === false) return <NotFoundPage />;
+
+  // Early Return 3: Initial loading (Global spinner or blank)
+  // This prevents the skeleton from showing before we know if the page exists
+  if (loading && taxonExists === null) {
     return (
-        <Layout>
-            <div className="container mt-4 mb-5">
-                <Breadcrumbs paths={breadcrumbs} />
-
-                <div className="row mt-5">
-                    <div className="col-12 col-lg-3">
-                        {isInChildTaxon && parentTaxon && (
-                            <div className="mb-3">
-                                <Link to={`/${parentTaxon.code}`} className="text-decoration-none">
-                                    Go level up
-                                </Link>
-                            </div>
-                        )}
-                        {!isInChildTaxon && taxonDetails?.children?.length ? (
-                            <div className="mb-4">
-                                {taxonDetails.children.map(child => (
-                                    <div key={child.code}>
-                                        <Link to={`/${taxonDetails.code}/${child.code}`} className="text-decoration-none d-block mb-1">
-                                            {child.name}
-                                        </Link>
-                                    </div>
-                                ))}
-                            </div>
-                        ) : null}
-                    </div>
+      <Layout>
+        <div className="flex h-[60vh] items-center justify-center">
+          <div className="border-primary h-10 w-10 animate-spin rounded-full border-4 border-t-transparent" />
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container mt-4 mb-5">
+        <Breadcrumbs paths={breadcrumbs} />
+
+        <div className="-mx-4 mt-5 flex flex-wrap">
+          {/* Sidebar */}
+          <aside className="w-full px-4 lg:w-1/4">
+            {isInChildTaxon && parentTaxon && (
+              <div className="mb-6">
+                <Link
+                  to={`/${parentTaxon.code}`}
+                  className="text-primary text-sm font-medium hover:underline"
+                >
+                  ← Back to {parentTaxon.name}
+                </Link>
+              </div>
+            )}
+
+            {!isInChildTaxon && (taxonDetails?.children?.length ?? 0) > 0 && (
+              <nav className="border-primary/20 mb-8 space-y-2 border-l-2 pl-4">
+                <p className="text-muted-foreground mb-4 text-xs font-bold tracking-widest uppercase">
+                  Subcategories
+                </p>
+                {taxonDetails?.children?.map((child) => (
+                  <Link
+                    key={child.code}
+                    to={`/${taxonDetails.code}/${child.code}`}
+                    className="hover:text-primary block py-1 text-sm transition-colors"
+                  >
+                    {child.name}
+                  </Link>
+                ))}
+              </nav>
+            )}
+          </aside>
 
-                    <div className="col-12 col-lg-9">
-                        <div className="mb-4">
-                            <h1 className="mb-3">{loading ? <Skeleton /> : taxonDetails?.name}</h1>
-                            <div>{loading ? <Skeleton count={2} /> : taxonDetails?.description || ''}</div>
-                        </div>
-
-                        <ProductToolbar />
-
-                        <div className="products-grid">
-                            {loading
-                                ? Array.from({ length: 9 }).map((_, i) => <Skeleton key={i} height={300} />)
-                                : products.map(product => <ProductCard key={product.id} product={product} />)}
-                        </div>
-
-                        {loadingMore && (
-                            <div className="text-center mt-4">
-                                <div className="spinner-border text-primary" role="status" />
-                            </div>
-                        )}
+          {/* Main Content */}
+          <main className="w-full px-4 lg:w-3/4">
+            <header className="mb-8">
+              <h1 className="mb-3 text-3xl font-extrabold">
+                {loading ? <Skeleton width={250} /> : taxonDetails?.name}
+              </h1>
+              <div className="text-muted-foreground leading-relaxed">
+                {loading ? <Skeleton count={2} /> : taxonDetails?.description}
+              </div>
+            </header>
+
+            <ProductToolbar />
+
+            <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
+              {loading
+                ? Array.from({ length: 6 }).map((_, i) => (
+                    <div key={i} className="space-y-3">
+                      <Skeleton height={300} borderRadius={12} />
+                      <Skeleton width="60%" />
+                      <Skeleton width="40%" />
                     </div>
-                </div>
+                  ))
+                : products.map((product) => <ProductCard key={product.id} product={product} />)}
             </div>
-        </Layout>
-    );
+
+            {loadingMore && (
+              <div className="mt-12 flex justify-center">
+                <div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" />
+              </div>
+            )}
+
+            {!hasMore && products.length > 0 && (
+              <p className="text-muted-foreground mt-12 text-center text-sm italic">
+                End of results.
+              </p>
+            )}
+          </main>
+        </div>
+      </div>
+    </Layout>
+  );
 };
 
 export default ProductList;
diff --git a/src/pages/ProductPage.tsx b/src/pages/ProductPage.tsx
index d6b15a3..72ae252 100644
--- a/src/pages/ProductPage.tsx
+++ b/src/pages/ProductPage.tsx
@@ -1,500 +1,524 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import Slider, { Settings } from 'react-slick';
-import { PrevArrow, NextArrow } from '../components/Arrow';
-import Layout from '../layouts/Default';
-import Breadcrumbs from '../components/Breadcrumbs';
-import BootstrapAccordion from '../components/Accordion';
-import ProductCard from '../components/ProductCard';
-import Skeleton from 'react-loading-skeleton';
-import 'react-loading-skeleton/dist/skeleton.css';
-import { formatPrice } from '../utils/price';
-import { useOrder } from '../context/OrderContext';
-import { useFlashMessages } from '../context/FlashMessagesContext';
-import ReviewList from '../components/product/Reviews';
-import ReviewSummary from '../components/product/ReviewSummary';
-import ReviewSummarySkeleton from '../components/product/ReviewSummarySkeleton';
-import Lightbox from 'yet-another-react-lightbox';
-import 'yet-another-react-lightbox/styles.css';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
 import {
-    Product,
-    ProductVariantDetails,
-    ProductOption,
-    ProductOptionValue,
-    ProductAttribute,
-    ProductReview,
-} from '../types/Product';
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@/components/ui/table";
+import { InfoIcon } from "lucide-react";
+import React, { useEffect, useMemo, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+import { Link, useParams } from "react-router-dom";
+import Slider, { Settings } from "react-slick";
+import "slick-carousel/slick/slick-theme.css";
+import "slick-carousel/slick/slick.css";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+import { NextArrow, PrevArrow } from "../components/Arrow";
+import Breadcrumbs from "../components/Breadcrumbs";
+import ReviewList from "../components/product/Reviews";
+import ReviewSummary from "../components/product/ReviewSummary";
+import ReviewSummarySkeleton from "../components/product/ReviewSummarySkeleton";
+import ProductCard from "../components/ProductCard";
+import { useFlashMessages } from "../context/FlashMessagesContext";
+import { useOrder } from "../context/OrderContext";
+import Layout from "../layouts/Default";
+import {
+  Product,
+  ProductAttribute,
+  ProductOption,
+  ProductOptionValue,
+  ProductReview,
+  ProductVariantDetails,
+} from "../types/Product";
+import { formatPrice } from "../utils/price";
 
 const API_URL = import.meta.env.VITE_REACT_APP_API_URL;
 
 interface ApiProduct extends Product {
-    productTaxons?: string[];
-    associations?: string[];
-    options?: string[];
-    reviews?: { '@id': string }[];
-    defaultVariant?: string;
+  productTaxons?: string[];
+  associations?: string[];
+  options?: string[];
+  reviews?: { "@id": string }[];
+  defaultVariant?: string;
 }
 
 interface Association {
-    title: string;
-    products: Product[];
+  title: string;
+  products: Product[];
 }
 
 const AssociationsSection: React.FC<{
-    associations: Association[];
-    loading: boolean;
+  associations: Association[];
+  loading: boolean;
 }> = ({ associations, loading }) => {
-    if (loading) {
-        return (
-            <div className="container mb-5 position-relative">
-                <Skeleton width={200} height={24} className="mb-3" />
-                <div className="d-flex">
-                    {Array(4)
-                        .fill(0)
-                        .map((_, i) => (
-                            <div key={i} className="px-2" style={{ flex: '1 0 auto' }}>
-                                <Skeleton height={300} />
-                            </div>
-                        ))}
-                </div>
-            </div>
-        );
-    }
-
-    const settings: Settings = {
-        infinite: true,
-        slidesToShow: 5,
-        slidesToScroll: 1,
-        arrows: true,
-        prevArrow: <PrevArrow />,
-        nextArrow: <NextArrow />,
-        responsive: [
-            { breakpoint: 1400, settings: { slidesToShow: 4 } },
-            { breakpoint: 1200, settings: { slidesToShow: 3 } },
-            { breakpoint: 768, settings: { slidesToShow: 2 } },
-            { breakpoint: 576, settings: { slidesToShow: 1 } },
-        ],
-    };
-
+  if (loading) {
     return (
-        <>
-            {associations.map(({ title, products }) => (
-                <div key={title} className="container mb-5 position-relative">
-                    <h2 className="h4 mb-3">{title}</h2>
-                    <Slider {...settings}>
-                        {products.map((p) => (
-                            <div key={p.code} className="px-2">
-                                <ProductCard product={p} />
-                            </div>
-                        ))}
-                    </Slider>
-                </div>
+      <div className="relative container mb-5">
+        <Skeleton width={200} height={24} className="mb-3" />
+        <div className="flex">
+          {Array(4)
+            .fill(0)
+            .map((_, i) => (
+              <div key={i} className="px-2" style={{ flex: "1 0 auto" }}>
+                <Skeleton height={300} />
+              </div>
             ))}
-        </>
+        </div>
+      </div>
     );
+  }
+
+  const settings: Settings = {
+    infinite: true,
+    slidesToShow: 5,
+    slidesToScroll: 1,
+    arrows: true,
+    prevArrow: <PrevArrow />,
+    nextArrow: <NextArrow />,
+    responsive: [
+      { breakpoint: 1400, settings: { slidesToShow: 4 } },
+      { breakpoint: 1200, settings: { slidesToShow: 3 } },
+      { breakpoint: 768, settings: { slidesToShow: 2 } },
+      { breakpoint: 576, settings: { slidesToShow: 1 } },
+    ],
+  };
+
+  return (
+    <>
+      {associations.map(({ title, products }) => (
+        <div key={title} className="relative container mb-5">
+          <h2 className="mb-3 text-xl font-semibold">{title}</h2>
+          <Slider {...settings}>
+            {products.map((p) => (
+              <div key={p.code} className="px-2">
+                <ProductCard product={p} />
+              </div>
+            ))}
+          </Slider>
+        </div>
+      ))}
+    </>
+  );
 };
 
 const ProductPage: React.FC = () => {
-    const { code } = useParams<{ code: string }>();
-    const { fetchOrder } = useOrder();
-    const { addMessage } = useFlashMessages();
+  const { code } = useParams<{ code: string }>();
+  const { fetchOrder } = useOrder();
+  const { addMessage } = useFlashMessages();
 
-    const [product, setProduct] = useState<ApiProduct | null>(null);
-    const [variant, setVariant] = useState<ProductVariantDetails | null>(null);
-    const [options, setOptions] = useState<ProductOption[]>([]);
-    const [attributes, setAttributes] = useState<ProductAttribute[]>([]);
-    const [reviews, setReviews] = useState<ProductReview[]>([]);
-    const [allReviewCount, setAllReviewCount] = useState(0);
-    const [selectedValues, setSelectedValues] = useState<Record<string, string>>({});
-    const [activeImage, setActiveImage] = useState<string | null>(null);
-    const [lightboxOpen, setLightboxOpen] = useState(false);
-    const [loading, setLoading] = useState(true);
-    const [isAddToCartLoading, setIsAddToCartLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [quantity, setQuantity] = useState(1);
-    const [breadcrumbs, setBreadcrumbs] = useState<{ label: string; url: string }[]>([]);
-    const [associations, setAssociations] = useState<Association[]>([]);
-    const [associationsLoading, setAssociationsLoading] = useState(false);
+  const [product, setProduct] = useState<ApiProduct | null>(null);
+  const [variant, setVariant] = useState<ProductVariantDetails | null>(null);
+  const [options, setOptions] = useState<ProductOption[]>([]);
+  const [attributes, setAttributes] = useState<ProductAttribute[]>([]);
+  const [reviews, setReviews] = useState<ProductReview[]>([]);
+  const [allReviewCount, setAllReviewCount] = useState(0);
+  const [selectedValues, setSelectedValues] = useState<Record<string, string>>({});
+  const [activeImage, setActiveImage] = useState<string | null>(null);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [isAddToCartLoading, setIsAddToCartLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [quantity, setQuantity] = useState(1);
+  const [breadcrumbs, setBreadcrumbs] = useState<{ label: string; url: string }[]>([]);
+  const [associations, setAssociations] = useState<Association[]>([]);
+  const [associationsLoading, setAssociationsLoading] = useState(false);
 
-    const fetchOption = async (url: string): Promise<ProductOption> => {
-        const res = await fetch(`${API_URL}${url}`);
-        const data = await res.json();
-        const values: ProductOptionValue[] = await Promise.all(
-            data.values.map((v: string) => fetch(`${API_URL}${v}`).then((r) => r.json()))
-        );
-        return { code: data.code, name: data.name, values };
-    };
+  const fetchOption = async (url: string): Promise<ProductOption> => {
+    const res = await fetch(`${API_URL}${url}`);
+    const data = await res.json();
+    const values: ProductOptionValue[] = await Promise.all(
+      data.values.map((v: string) => fetch(`${API_URL}${v}`).then((r) => r.json()))
+    );
+    return { code: data.code, name: data.name, values };
+  };
 
-    const fetchVariantByOptions = async (
-        prodCode: string,
-        sel: Record<string, string>
-    ) => {
-        const params = Object.entries(sel)
-            .map(
-                ([opt, val]) =>
-                    `optionValues[]=/api/v2/shop/product-options/${opt}/values/${val}`
-            )
-            .join('&');
-        const res = await fetch(
-            `${API_URL}/api/v2/shop/product-variants?product=/api/v2/shop/products/${prodCode}&${params}`
-        );
-        const data = await res.json();
-        setVariant(data['hydra:member']?.[0] ?? null);
-    };
+  const fetchVariantByOptions = async (prodCode: string, sel: Record<string, string>) => {
+    const params = Object.entries(sel)
+      .map(([opt, val]) => `optionValues[]=/api/v2/shop/product-options/${opt}/values/${val}`)
+      .join("&");
+    const res = await fetch(
+      `${API_URL}/api/v2/shop/product-variants?product=/api/v2/shop/products/${prodCode}&${params}`
+    );
+    const data = await res.json();
+    setVariant(data["hydra:member"]?.[0] ?? null);
+  };
 
-    const fetchProductAttributes = async (prodCode: string) => {
-        try {
-            const res = await fetch(
-                `${API_URL}/api/v2/shop/products/${prodCode}/attributes`
-            );
-            const data = await res.json();
-            setAttributes(data['hydra:member'] ?? []);
-        } catch (e) {
-            console.error('attributes error', e);
-        }
-    };
+  const fetchProductAttributes = async (prodCode: string) => {
+    try {
+      const res = await fetch(`${API_URL}/api/v2/shop/products/${prodCode}/attributes`);
+      const data = await res.json();
+      setAttributes(data["hydra:member"] ?? []);
+    } catch (e) {
+      console.error("attributes error", e);
+    }
+  };
+
+  const fetchProductReviews = async (refs: { "@id": string }[]) => {
+    setAllReviewCount(refs.length);
+    const data: ProductReview[] = await Promise.all(
+      refs.map((ref) => fetch(`${API_URL}${ref["@id"]}`).then((r) => r.json()))
+    );
+    setReviews(
+      data
+        .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+        .slice(0, 5)
+    );
+  };
 
-    const fetchProductReviews = async (refs: { '@id': string }[]) => {
-        setAllReviewCount(refs.length);
-        const data: ProductReview[] = await Promise.all(
-            refs.map((ref) =>
-                fetch(`${API_URL}${ref['@id']}`).then((r) => r.json())
+  const fetchAssociations = async (urls: string[]) => {
+    setAssociationsLoading(true);
+    try {
+      const list = await Promise.all(
+        urls.map(async (url) => {
+          const res = await fetch(`${API_URL}${url}`);
+          const { type, associatedProducts } = await res.json();
+          const tRes = await fetch(`${API_URL}${type}`);
+          const { name } = await tRes.json();
+          const prods: Product[] = await Promise.all(
+            associatedProducts.map((pUrl: string) =>
+              fetch(`${API_URL}${pUrl}`).then((r) => r.json())
             )
-        );
-        setReviews(
-            data
-                .sort(
-                    (a, b) =>
-                        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-                )
-                .slice(0, 5)
-        );
-    };
+          );
+          return { title: name, products: prods };
+        })
+      );
+      setAssociations(list);
+    } catch (e) {
+      console.error("associations error", e);
+    } finally {
+      setAssociationsLoading(false);
+    }
+  };
 
-    const fetchAssociations = async (urls: string[]) => {
-        setAssociationsLoading(true);
-        try {
-            const list = await Promise.all(
-                urls.map(async (url) => {
-                    const res = await fetch(`${API_URL}${url}`);
-                    const { type, associatedProducts } = await res.json();
-                    const tRes = await fetch(`${API_URL}${type}`);
-                    const { name } = await tRes.json();
-                    const prods: Product[] = await Promise.all(
-                        associatedProducts.map((pUrl: string) =>
-                            fetch(`${API_URL}${pUrl}`).then((r) => r.json())
-                        )
-                    );
-                    return { title: name, products: prods };
-                })
-            );
-            setAssociations(list);
-        } catch (e) {
-            console.error('associations error', e);
-        } finally {
-            setAssociationsLoading(false);
-        }
-    };
+  useEffect(() => {
+    if (!code) return;
 
     const fetchProduct = async () => {
-        setLoading(true);
-        setError(null);
+      setLoading(true);
+      setError(null);
 
-        try {
-            const res = await fetch(`${API_URL}/api/v2/shop/products/${code}`);
-            const data: ApiProduct = await res.json();
-            setProduct(data);
+      try {
+        const res = await fetch(`${API_URL}/api/v2/shop/products/${code}`);
+        const data: ApiProduct = await res.json();
+        setProduct(data);
 
-            // breadcrumbs
-            const bc = [{ label: 'Home', url: '/' }];
-            if (data.productTaxons?.length) {
-                const visited = new Set<string>();
-                for (const taxonUrl of data.productTaxons) {
-                    const tRes = await fetch(`${API_URL}${taxonUrl}`);
-                    const tData = await tRes.json();
-                    const taxRes = await fetch(`${API_URL}${tData.taxon}`);
-                    const tax: { name: string; code: string; parent?: string } =
-                        await taxRes.json();
-                    const parents: { name: string; code: string }[] = [];
-                    if (tax.parent) {
-                        const pRes = await fetch(`${API_URL}${tax.parent}`);
-                        const parent = await pRes.json();
-                        parents.push({ name: parent.name, code: parent.code });
-                    }
-                    parents.push({ name: tax.name, code: tax.code });
-                    parents.forEach((p) => {
-                        if (!visited.has(p.code)) {
-                            visited.add(p.code);
-                            bc.push({ label: p.name, url: `/${p.code}` });
-                        }
-                    });
-                }
+        // breadcrumbs
+        const bc = [{ label: "Home", url: "/" }];
+        if (data.productTaxons?.length) {
+          const visited = new Set<string>();
+          for (const taxonUrl of data.productTaxons) {
+            const tRes = await fetch(`${API_URL}${taxonUrl}`);
+            const tData = await tRes.json();
+            const taxRes = await fetch(`${API_URL}${tData.taxon}`);
+            const tax: { name: string; code: string; parent?: string } = await taxRes.json();
+            const parents: { name: string; code: string }[] = [];
+            if (tax.parent) {
+              const pRes = await fetch(`${API_URL}${tax.parent}`);
+              const parent = await pRes.json();
+              parents.push({ name: parent.name, code: parent.code });
             }
-            bc.push({ label: data.name, url: `/product/${data.code}` });
-            setBreadcrumbs(bc);
+            parents.push({ name: tax.name, code: tax.code });
+            parents.forEach((p) => {
+              if (!visited.has(p.code)) {
+                visited.add(p.code);
+                bc.push({ label: p.name, url: `/${p.code}` });
+              }
+            });
+          }
+        }
+        bc.push({ label: data.name, url: `/product/${data.code}` });
+        setBreadcrumbs(bc);
 
-            // images
-            if (data.images?.length) setActiveImage(data.images[0].path);
+        // images
+        if (data.images?.length) setActiveImage(data.images[0].path);
 
-            // options / default
-            if (data.options?.length) {
-                const opts = await Promise.all(data.options.map(fetchOption));
-                setOptions(opts);
-                const sel: Record<string, string> = {};
-                opts.forEach((o) => (sel[o.code] = o.values[0]?.code ?? ''));
-                setSelectedValues(sel);
-                await fetchVariantByOptions(data.code, sel);
-            } else if (data.defaultVariant) {
-                const vRes = await fetch(`${API_URL}${data.defaultVariant}`);
-                setVariant(await vRes.json());
-            }
+        // options / default
+        if (data.options?.length) {
+          const opts = await Promise.all(data.options.map(fetchOption));
+          setOptions(opts);
+          const sel: Record<string, string> = {};
+          opts.forEach((o) => (sel[o.code] = o.values[0]?.code ?? ""));
+          setSelectedValues(sel);
+          await fetchVariantByOptions(data.code, sel);
+        } else if (data.defaultVariant) {
+          const vRes = await fetch(`${API_URL}${data.defaultVariant}`);
+          setVariant(await vRes.json());
+        }
 
-            await fetchProductAttributes(data.code);
-            if (data.reviews?.length) await fetchProductReviews(data.reviews);
-            if (data.associations?.length) {
-                await fetchAssociations(data.associations);
-            } else {
-                setAssociations([]);
-            }
-        } catch (e) {
-            console.error('product fetch error', e);
-            setError('Error while loading product data');
-        } finally {
-            setLoading(false);
+        await fetchProductAttributes(data.code);
+        if (data.reviews?.length) await fetchProductReviews(data.reviews);
+        if (data.associations?.length) {
+          await fetchAssociations(data.associations);
+        } else {
+          setAssociations([]);
         }
+      } catch (e) {
+        console.error("product fetch error", e);
+        setError("Error while loading product data");
+      } finally {
+        setLoading(false);
+      }
     };
 
-    useEffect(() => {
-        if (code) fetchProduct();
-    }, [code]);
+    fetchProduct();
+  }, [code]);
 
-    const handleOptionChange = (opt: string, val: string) => {
-        const upd = { ...selectedValues, [opt]: val };
-        setSelectedValues(upd);
-        if (product) fetchVariantByOptions(product.code, upd);
-    };
+  const handleOptionChange = (opt: string, val: string) => {
+    const upd = { ...selectedValues, [opt]: val };
+    setSelectedValues(upd);
+    if (product) fetchVariantByOptions(product.code, upd);
+  };
 
-    const handleAddToCart = async () => {
-        if (!variant) return;
-        setIsAddToCartLoading(true);
-        try {
-            const resp = await fetch(
-                `${API_URL}/api/v2/shop/orders/${localStorage.getItem(
-                    'orderToken'
-                )}/items`,
-                {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ productVariant: variant.code, quantity }),
-                }
-            );
-            if (!resp.ok) throw new Error('add to cart failed');
-            fetchOrder();
-            addMessage('success', 'Product added to cart');
-        } catch (e) {
-            console.error('add to cart error', e);
-            addMessage('error', 'Failed to add product to cart');
-        } finally {
-            setIsAddToCartLoading(false);
+  const handleAddToCart = async () => {
+    if (!variant) return;
+    setIsAddToCartLoading(true);
+    try {
+      const resp = await fetch(
+        `${API_URL}/api/v2/shop/orders/${localStorage.getItem("orderToken")}/items`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ productVariant: variant.code, quantity }),
         }
-    };
+      );
+      if (!resp.ok) throw new Error("add to cart failed");
+      fetchOrder();
+      addMessage("success", "Product added to cart");
+    } catch (e) {
+      console.error("add to cart error", e);
+      addMessage("error", "Failed to add product to cart");
+    } finally {
+      setIsAddToCartLoading(false);
+    }
+  };
 
-    const accordionItems = useMemo(() => {
-        if (!product) return [];
-        return [
-            { title: 'Details', content: <p>{product.description}</p> },
-            {
-                title: 'Attributes',
-                content: attributes.length ? (
-                    <table className="table table-lg table-list">
-                        <tbody>
-                        {attributes.map((a) => (
-                            <tr key={a.id}>
-                                <th className="fw-bold py-3 ps-0">{a.name}</th>
-                                <td className="py-3">{a.value}</td>
-                            </tr>
-                        ))}
-                        </tbody>
-                    </table>
-                ) : (
-                    <p>No attributes available.</p>
-                ),
-            },
-            {
-                title: `Reviews (${allReviewCount})`,
-                content: reviews.length ? (
-                    <>
-                        <ReviewList reviews={reviews} />
-                        <div className="d-flex flex-wrap gap-3">
-                            <a
-                                href={`/product/${code}/review/new`}
-                                className="btn btn-success px-4 py-2"
-                            >
-                                Add your review
-                            </a>
-                            <a href={`/product/${code}/reviews`} className="btn btn-link">
-                                View more
-                            </a>
-                        </div>
-                    </>
-                ) : (
-                    <>
-                        <div className="alert alert-info">
-                            <div className="fw-bold">Info</div>There are no reviews
-                        </div>
-                        <a
-                            href={`/product/${code}/review/new`}
-                            className="btn btn-primary"
-                        >
-                            Add your review
-                        </a>
-                    </>
-                ),
-            },
-        ];
-    }, [product, attributes, reviews, allReviewCount, code]);
+  const labelClass = "block text-sm font-medium mb-1";
 
-    const lightboxSlides = product?.images?.map((img) => ({ src: img.path })) ?? [];
-    const lightboxIndex =
-        product?.images?.findIndex((img) => img.path === activeImage) ?? 0;
+  const accordionSections = useMemo<{ title: string; content: React.ReactNode }[]>(() => {
+    if (!product) return [];
+    return [
+      {
+        title: "Details",
+        content: <p>{product.description}</p>,
+      },
+      {
+        title: "Attributes",
+        content: attributes.length ? (
+          <Table>
+            <TableBody>
+              {attributes.map((a) => (
+                <TableRow key={a.id}>
+                  <TableHead className="pr-4 text-left font-bold">{a.name}</TableHead>
+                  <TableCell>{a.value}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <p>No attributes available.</p>
+        ),
+      },
+      {
+        title: `Reviews (${allReviewCount})`,
+        content: reviews.length ? (
+          <>
+            <ReviewList reviews={reviews} />
+            <div className="flex flex-wrap gap-3">
+              <Button>
+                <Link
+                  to={`/product/${code}/review/new`}
+                  className="text-primary-foreground hover:text-primary-foreground! no-underline!"
+                >
+                  Add your review
+                </Link>
+              </Button>
+              <a
+                href={`/product/${code}/reviews`}
+                className="text-primary inline-flex items-center px-4 py-2 text-sm hover:underline"
+              >
+                View more
+              </a>
+            </div>
+          </>
+        ) : (
+          <>
+            <Alert className="mb-3">
+              <InfoIcon />
+              <AlertTitle>Info</AlertTitle>
+              <AlertDescription>There are no reviews</AlertDescription>
+            </Alert>
+            <Button>
+              <Link
+                to={`/product/${code}/review/new`}
+                className="text-primary-foreground hover:text-primary-foreground! no-underline!"
+              >
+                Add your review
+              </Link>
+            </Button>
+          </>
+        ),
+      },
+    ];
+  }, [product, attributes, reviews, allReviewCount, code]);
 
-    if (error) return <div className="text-danger text-center">{error}</div>;
+  const lightboxSlides = product?.images?.map((img) => ({ src: img.path })) ?? [];
+  const lightboxIndex = product?.images?.findIndex((img) => img.path === activeImage) ?? 0;
 
-    return (
-        <Layout>
-            <div className="container mt-4 mb-5">
-                <Breadcrumbs paths={breadcrumbs} />
-                <div className="row g-3 g-lg-5 mb-6">
-                    <div className="col-12 col-lg-7 col-xl-8">
-                        <div className="row spotlight-group mb-5">
-                            {product && product.images.length > 1 && (
-                                <div className="col-auto d-none d-lg-block">
-                                    <div className="product-thumbnails d-flex flex-column overflow-auto">
-                                        {product.images.map((img) => (
-                                            <button
-                                                key={img.id}
-                                                onClick={() => setActiveImage(img.path)}
-                                                className={`border-0 p-0 bg-transparent rounded overflow-hidden ${
-                                                    activeImage === img.path ? 'opacity-100' : 'opacity-50'
-                                                }`}
-                                            >
-                                                <img
-                                                    src={img.path}
-                                                    alt="thumbnail"
-                                                    className="w-100 h-100 object-fit-cover"
-                                                />
-                                            </button>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
-                            <div className="col pe-lg-5 pe-xxl-5">
-                                <div
-                                    className="product-main-image-wrapper overflow-hidden bg-light rounded-3"
-                                    onClick={() => setLightboxOpen(true)}
-                                >
-                                    {loading ? (
-                                        <Skeleton style={{ width: '100%', height: '100%' }} />
-                                    ) : (
-                                        product && (
-                                            <img
-                                                src={
-                                                    activeImage ?? product.images[0].path
-                                                }
-                                                alt={product.name}
-                                                className="img-fluid w-100 h-100 object-fit-cover"
-                                            />
-                                        )
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                        {!loading && <BootstrapAccordion items={accordionItems} />}
-                    </div>
-                    <div className="col-12 col-lg-5 col-xl-4 order-lg-1">
-                        <div className="sticky-top pt-2">
-                            <h1 className="h2 text-wrap mb-4">{product?.name}</h1>
-                            {loading ? (
-                                <ReviewSummarySkeleton />
-                            ) : (
-                                product && (
-                                    <ReviewSummary
-                                        reviews={reviews}
-                                        productCode={product.code}
-                                        allReviewCount={allReviewCount}
-                                    />
-                                )
-                            )}
-                            <div className="fs-3 mb-3">
-                                {loading ? (
-                                    <Skeleton width={100} />
-                                ) : variant?.price != null ? (
-                                    `$${formatPrice(variant.price)}`
-                                ) : (
-                                    'No price available'
-                                )}
-                            </div>
-                            {options.map((opt) => (
-                                <div className="mb-3" key={opt.code}>
-                                    <label className="form-label">{opt.name}</label>
-                                    <select
-                                        className="form-select"
-                                        value={selectedValues[opt.code] ?? ''}
-                                        onChange={(e) =>
-                                            handleOptionChange(opt.code, e.target.value)
-                                        }
-                                    >
-                                        {opt.values.map((v) => (
-                                            <option key={v.code} value={v.code}>
-                                                {v.value}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </div>
-                            ))}
-                            <div className="my-4">
-                                <label className="form-label">Quantity</label>
-                                <input
-                                    type="number"
-                                    className="form-control"
-                                    value={quantity}
-                                    min={1}
-                                    onChange={(e) => setQuantity(parseInt(e.target.value) || 1)}
-                                />
-                                <button
-                                    className="btn btn-success px-4 py-2 mt-3"
-                                    onClick={handleAddToCart}
-                                    disabled={isAddToCartLoading || loading}
-                                >
-                                    {isAddToCartLoading ? 'Adding...' : 'Add to cart'}
-                                </button>
-                            </div>
-                            <div className="mb-3">
-                                {product?.shortDescription ?? 'No short description'}
-                            </div>
-                            <small className="text-body-tertiary">
-                                {product?.name.replace(/\s+/g, '_')}
-                            </small>
-                        </div>
-                    </div>
+  if (error) return <div className="text-destructive text-center">{error}</div>;
+
+  return (
+    <Layout>
+      <div className="container mt-4 mb-5">
+        <Breadcrumbs paths={breadcrumbs} />
+        <div className="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-[6fr_6fr]">
+          <div>
+            <div className="mb-5 flex flex-wrap">
+              {product && product.images.length > 1 && (
+                <div className="hidden w-auto pr-4 lg:block">
+                  <div className="product-thumbnails flex flex-col overflow-auto">
+                    {product.images.map((img) => (
+                      <Button
+                        key={img.id}
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setActiveImage(img.path)}
+                        className={`h-auto w-25 overflow-hidden rounded p-0 ${
+                          activeImage === img.path ? "opacity-100" : "cursor-pointer opacity-50"
+                        }`}
+                      >
+                        <img
+                          src={img.path}
+                          alt="thumbnail"
+                          className="h-full w-full object-cover"
+                        />
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              <div className="flex-1">
+                <div
+                  className="product-main-image-wrapper bg-muted overflow-hidden rounded-xl"
+                  onClick={() => setLightboxOpen(true)}
+                >
+                  {loading ? (
+                    <Skeleton style={{ width: "100%", height: "100%" }} />
+                  ) : (
+                    product && (
+                      <img
+                        src={activeImage ?? product.images[0].path}
+                        alt={product.name}
+                        className="h-full w-full max-w-full object-cover"
+                      />
+                    )
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="sticky top-2 pt-2">
+              <h1 className="mb-4 text-2xl font-bold wrap-break-word">{product?.name}</h1>
+              {loading ? (
+                <ReviewSummarySkeleton />
+              ) : (
+                product && (
+                  <ReviewSummary
+                    reviews={reviews}
+                    productCode={product.code}
+                    allReviewCount={allReviewCount}
+                  />
+                )
+              )}
+              <div className="mb-3 text-2xl">
+                {loading ? (
+                  <Skeleton width={100} />
+                ) : variant?.price != null ? (
+                  `$${formatPrice(variant.price)}`
+                ) : (
+                  "No price available"
+                )}
+              </div>
+              {options.map((opt) => (
+                <div className="mb-3" key={opt.code}>
+                  <label className={labelClass}>{opt.name}</label>
+                  <Select
+                    value={selectedValues[opt.code] ?? ""}
+                    onValueChange={(value) => value && handleOptionChange(opt.code, value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue>
+                        {(value: string | null) =>
+                          opt.values.find((v) => v.code === value)?.value ?? "Select..."
+                        }
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {opt.values.map((v) => (
+                        <SelectItem key={v.code} value={v.code}>
+                          {v.value}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
+              ))}
+              <div className="my-4">
+                <label className={labelClass}>Quantity</label>
+                <Input
+                  type="number"
+                  value={quantity}
+                  min={1}
+                  onChange={(e) => setQuantity(parseInt(e.target.value) || 1)}
+                />
+                <Button
+                  className="mt-3 cursor-pointer"
+                  onClick={handleAddToCart}
+                  disabled={isAddToCartLoading || loading}
+                >
+                  {isAddToCartLoading ? "Adding..." : "Add to cart"}
+                </Button>
+              </div>
+              <div className="mb-3">{product?.shortDescription ?? "No short description"}</div>
             </div>
+          </div>
+        </div>
+        {!loading && accordionSections.length > 0 && (
+          <Accordion defaultValue={["item-0"]} className="w-full">
+            {accordionSections.map((section, i) => (
+              <AccordionItem key={i} value={`item-${i}`} className="rounded-none border-x-0">
+                <AccordionTrigger className="px-0 hover:no-underline">
+                  <span className="py-2 text-lg font-semibold">{section.title}</span>
+                </AccordionTrigger>
+                <AccordionContent className="px-0 pt-2 pb-4">{section.content}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        )}
+      </div>
 
-            <Lightbox
-                open={lightboxOpen}
-                close={() => setLightboxOpen(false)}
-                slides={lightboxSlides}
-                index={lightboxIndex}
-            />
+      <Lightbox
+        open={lightboxOpen}
+        close={() => setLightboxOpen(false)}
+        slides={lightboxSlides}
+        index={lightboxIndex}
+      />
 
-            <AssociationsSection
-                associations={associations}
-                loading={associationsLoading}
-            />
-        </Layout>
-    );
+      <AssociationsSection associations={associations} loading={associationsLoading} />
+    </Layout>
+  );
 };
 
 export default ProductPage;
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
new file mode 100644
index 0000000..9ee64da
--- /dev/null
+++ b/src/pages/RegisterPage.tsx
@@ -0,0 +1,422 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { registerSchema, passwordComplexity } from "@/schemas/auth";
+import { FieldError } from "@/components/ui/field-error";
+import { PasswordStrength } from "@/components/ui/password-strength";
+import { submitForm } from "@/lib/utils";
+import { z } from "zod";
+import { useForm } from "@tanstack/react-form";
+import { IconEye, IconEyeOff, IconLockOpen } from "@tabler/icons-react";
+import { AlertCircleIcon } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import Default from "../layouts/Default";
+
+const labelClass = "block text-sm font-medium mb-1";
+
+const genderOptions = [
+  { value: "u", label: "Unspecified" },
+  { value: "m", label: "Male" },
+  { value: "f", label: "Female" },
+];
+
+const genderLabel = (gender: string) => {
+  const option = genderOptions.find((opt) => opt.value === gender);
+  return option ? option.label : "Unspecified";
+};
+
+const RegisterPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const form = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      gender: "u",
+      password: "",
+      confirmPassword: "",
+      subscribedToNewsletter: false,
+    },
+    validators: { onSubmit: registerSchema },
+    onSubmit: async ({ value }) => {
+      setError(null);
+
+      // Strict strength validation (Score 4 required)
+      const pw = value.password;
+      let score = 0;
+      if (pw.length >= 8) score++;
+      if (/[A-Z]/.test(pw)) score++;
+      if (/[0-9]/.test(pw)) score++;
+      if (/[^A-Za-z0-9]/.test(pw)) score++;
+
+      if (score < 4) {
+        setError("Password is too weak. Please follow the requirements.");
+        return;
+      }
+
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/customers`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              firstName: value.firstName,
+              lastName: value.lastName,
+              email: value.email,
+              gender: value.gender,
+              password: value.password,
+              subscribedToNewsletter: value.subscribedToNewsletter,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errData = await response.json();
+          throw new Error(errData["hydra:description"] ?? errData.message ?? "Registration failed");
+        }
+
+        toast.success("Account created successfully!");
+        navigate("/login");
+      } catch (err: unknown) {
+        setError(err instanceof Error ? err.message : "An unexpected error occurred");
+      }
+    },
+  });
+
+  return (
+    <Default>
+      <div className="container my-auto">
+        <div className="my-4 grid grid-cols-1 gap-6 lg:grid-cols-2">
+          <div className="flex items-center justify-center lg:order-2">
+            <div className="w-full max-w-md py-8 lg:py-20">
+              <h1 className="mb-5 text-center text-2xl font-bold">Create an account</h1>
+
+              <form
+                ref={formRef}
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  void submitForm(form, formRef.current);
+                }}
+                noValidate
+                className="space-y-4"
+              >
+                {error && (
+                  <Alert variant="destructive">
+                    <AlertCircleIcon />
+                    <AlertDescription>{error}</AlertDescription>
+                  </Alert>
+                )}
+
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  {/* Personal Info */}
+                  <div className="md:col-span-2">
+                    <label className={labelClass}>Gender *</label>
+                    <form.Field name="gender">
+                      {(field) => (
+                        <Select
+                          value={field.state.value}
+                          onValueChange={(val) => field.handleChange(val ?? "")}
+                          required
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue aria-label={field.state.value}>
+                              {genderLabel(field.state.value)}
+                            </SelectValue>
+                          </SelectTrigger>
+                          <SelectContent>
+                            {genderOptions.map((opt) => (
+                              <SelectItem key={opt.value} value={opt.value}>
+                                {opt.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    </form.Field>
+                  </div>
+
+                  <div>
+                    <label htmlFor="firstName" className={labelClass}>
+                      First name *
+                    </label>
+                    <form.Field
+                      name="firstName"
+                      validators={{
+                        onSubmit: z.string().min(1, "First name is required"),
+                        onBlur: z.string().min(1, "First name is required"),
+                      }}
+                    >
+                      {(field) => (
+                        <>
+                          <Input
+                            id="firstName"
+                            name="firstName"
+                            value={field.state.value}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            onBlur={field.handleBlur}
+                            required
+                            aria-describedby="firstName-error"
+                            aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                          />
+                          <FieldError
+                            id="firstName-error"
+                            errors={field.state.meta.errors}
+                            isTouched={field.state.meta.isTouched}
+                            isSubmitted={form.state.isSubmitted}
+                          />
+                        </>
+                      )}
+                    </form.Field>
+                  </div>
+
+                  <div>
+                    <label htmlFor="lastName" className={labelClass}>
+                      Last name *
+                    </label>
+                    <form.Field
+                      name="lastName"
+                      validators={{
+                        onSubmit: z.string().min(1, "Last name is required"),
+                        onBlur: z.string().min(1, "Last name is required"),
+                      }}
+                    >
+                      {(field) => (
+                        <>
+                          <Input
+                            id="lastName"
+                            name="lastName"
+                            value={field.state.value}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            onBlur={field.handleBlur}
+                            required
+                            aria-describedby="lastName-error"
+                            aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                          />
+                          <FieldError
+                            id="lastName-error"
+                            errors={field.state.meta.errors}
+                            isTouched={field.state.meta.isTouched}
+                            isSubmitted={form.state.isSubmitted}
+                          />
+                        </>
+                      )}
+                    </form.Field>
+                  </div>
+
+                  <div className="md:col-span-2">
+                    <label htmlFor="email" className={labelClass}>
+                      Email address *
+                    </label>
+                    <form.Field
+                      name="email"
+                      validators={{
+                        onSubmit: z.string().email("Invalid email address"),
+                        onBlur: z.string().email("Invalid email address"),
+                      }}
+                    >
+                      {(field) => (
+                        <>
+                          <Input
+                            id="email"
+                            type="email"
+                            name="email"
+                            value={field.state.value}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            onBlur={field.handleBlur}
+                            required
+                            aria-describedby="email-error"
+                            aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                          />
+                          <FieldError
+                            id="email-error"
+                            errors={field.state.meta.errors}
+                            isTouched={field.state.meta.isTouched}
+                            isSubmitted={form.state.isSubmitted}
+                          />
+                        </>
+                      )}
+                    </form.Field>
+                  </div>
+
+                  {/* Password Field & Strength Bar */}
+                  <div className="md:col-span-2">
+                    <label htmlFor="password" className={labelClass}>
+                      Password *
+                    </label>
+                    <form.Field
+                      name="password"
+                      validators={{
+                        onSubmit: passwordComplexity,
+                        onBlur: passwordComplexity,
+                        onChangeListenTo: ["confirmPassword"],
+                        onBlurListenTo: ["confirmPassword"],
+                      }}
+                    >
+                      {(field) => (
+                        <>
+                          <div className="relative">
+                            <Input
+                              id="password"
+                              type={showPassword ? "text" : "password"}
+                              name="password"
+                              value={field.state.value}
+                              onChange={(e) => field.handleChange(e.target.value)}
+                              onBlur={field.handleBlur}
+                              className="pr-10"
+                              required
+                              aria-describedby="password-error"
+                              aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                            />
+                            <button
+                              type="button"
+                              onClick={() => setShowPassword(!showPassword)}
+                              className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                            >
+                              {showPassword ? <IconEyeOff size={18} /> : <IconEye size={18} />}
+                            </button>
+                          </div>
+                          <PasswordStrength value={field.state.value} />
+                          <FieldError
+                            id="password-error"
+                            errors={field.state.meta.errors}
+                            isTouched={field.state.meta.isTouched}
+                            isSubmitted={form.state.isSubmitted}
+                          />
+                        </>
+                      )}
+                    </form.Field>
+
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Use 8+ characters with mixed case, numbers, and symbols.
+                    </p>
+                  </div>
+
+                  <div className="md:col-span-2">
+                    <label htmlFor="confirmPassword" className={labelClass}>
+                      Confirm password *
+                    </label>
+                    <form.Field
+                      name="confirmPassword"
+                      validators={{
+                        onBlur: ({ value, fieldApi }) => {
+                          const password = fieldApi.form.getFieldValue("password");
+                          if (value !== password) return "Passwords do not match";
+                          return undefined;
+                        },
+                        onSubmit: ({ value, fieldApi }) => {
+                          const password = fieldApi.form.getFieldValue("password");
+                          if (!value) return "Please confirm your password";
+                          if (value !== password) return "Passwords do not match";
+                          return undefined;
+                        },
+                        onChangeListenTo: ["password"],
+                        onBlurListenTo: ["password"],
+                      }}
+                    >
+                      {(field) => (
+                        <>
+                          <div className="relative">
+                            <Input
+                              id="confirmPassword"
+                              type={showConfirmPassword ? "text" : "password"}
+                              name="confirmPassword"
+                              value={field.state.value}
+                              onChange={(e) => field.handleChange(e.target.value)}
+                              onBlur={field.handleBlur}
+                              required
+                              aria-describedby="confirmPassword-error"
+                              aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                            />
+                            <button
+                              type="button"
+                              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                              className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                            >
+                              {showConfirmPassword ? (
+                                <IconEyeOff size={18} />
+                              ) : (
+                                <IconEye size={18} />
+                              )}
+                            </button>
+                          </div>
+                          <FieldError
+                            id="confirmPassword-error"
+                            errors={field.state.meta.errors}
+                            isTouched={field.state.meta.isTouched}
+                            isSubmitted={form.state.isSubmitted}
+                          />
+                        </>
+                      )}
+                    </form.Field>
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-2 pt-2">
+                  <form.Field name="subscribedToNewsletter">
+                    {(field) => (
+                      <Checkbox
+                        id="newsletter"
+                        checked={field.state.value ?? false}
+                        onCheckedChange={(checked) => field.handleChange(!!checked)}
+                      />
+                    )}
+                  </form.Field>
+                  <label htmlFor="newsletter" className="text-sm font-normal">
+                    Subscribe to our newsletter
+                  </label>
+                </div>
+
+                <Button type="submit" className="w-full" disabled={form.state.isSubmitting}>
+                  {form.state.isSubmitting ? "Creating account..." : "Register"}
+                </Button>
+
+                <p className="text-muted-foreground text-center text-sm">
+                  Already have an account?{" "}
+                  <Link to="/login" className="text-primary font-semibold hover:underline">
+                    Sign in
+                  </Link>
+                </p>
+              </form>
+            </div>
+          </div>
+
+          <div className="lg:order-1">
+            <div className="bg-muted flex h-full flex-col items-center justify-center rounded-2xl p-3">
+              <div className="text-center">
+                <div className="mb-3 flex justify-center">
+                  <IconLockOpen stroke={2} size={144} color={"#22b99a"} />
+                </div>
+                <h2 className="text-xl font-semibold">Already have an account?</h2>
+                <Link
+                  to="/login"
+                  className="text-primary font-medium hover:underline"
+                  id="login-here-button"
+                >
+                  Sign in
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Default>
+  );
+};
+
+export default RegisterPage;
diff --git a/src/pages/ResetPasswordPage.tsx b/src/pages/ResetPasswordPage.tsx
new file mode 100644
index 0000000..2817abd
--- /dev/null
+++ b/src/pages/ResetPasswordPage.tsx
@@ -0,0 +1,156 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { resetPasswordSchema, passwordComplexity } from "@/schemas/auth";
+import { FieldError } from "@/components/ui/field-error";
+import { submitForm } from "@/lib/utils";
+import { z } from "zod";
+import { useForm } from "@tanstack/react-form";
+import React, { useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import Default from "../layouts/Default";
+
+const labelClass = "block text-sm font-medium mb-1";
+
+const ResetPasswordPage: React.FC = () => {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const [error, setError] = useState<string | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const form = useForm({
+    defaultValues: {
+      newPassword: "",
+      confirmNewPassword: "",
+    },
+    validators: { onSubmit: resetPasswordSchema },
+    onSubmit: async ({ value }) => {
+      setError(null);
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/reset-password-requests/${token}`,
+          {
+            method: "PATCH",
+            headers: { "Content-Type": "application/merge-patch+json" },
+            body: JSON.stringify({
+              newPassword: value.newPassword,
+              confirmNewPassword: value.confirmNewPassword,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errData: { "hydra:description"?: string; message?: string } = await response.json();
+          throw new Error(
+            errData["hydra:description"] ??
+              errData.message ??
+              "This reset link is invalid or has expired."
+          );
+        }
+
+        toast.success("Password reset successfully.");
+        navigate("/login");
+      } catch (err: unknown) {
+        setError(err instanceof Error ? err.message : "This reset link is invalid or has expired.");
+      }
+    },
+  });
+
+  return (
+    <Default>
+      <div className="container my-auto">
+        <div className="mx-auto my-8 w-full max-w-md">
+          <h1 className="mb-5 text-2xl font-bold">Reset your password</h1>
+          <form
+            ref={formRef}
+            onSubmit={(e) => {
+              e.preventDefault();
+              void submitForm(form, formRef.current);
+            }}
+            noValidate
+          >
+            {error && (
+              <Alert variant="destructive" className="mb-4">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <div className="mb-3">
+              <label htmlFor="newPassword" className={labelClass}>
+                New password
+              </label>
+              <form.Field
+                name="newPassword"
+                validators={{ onSubmit: passwordComplexity, onBlur: passwordComplexity }}
+              >
+                {(field) => (
+                  <>
+                    <Input
+                      id="newPassword"
+                      type="password"
+                      name="newPassword"
+                      required
+                      value={field.state.value}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                      aria-describedby="newPassword-error"
+                      aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                    />
+                    <FieldError
+                      id="newPassword-error"
+                      errors={field.state.meta.errors}
+                      isTouched={field.state.meta.isTouched}
+                      isSubmitted={form.state.isSubmitted}
+                    />
+                  </>
+                )}
+              </form.Field>
+            </div>
+
+            <div className="mb-5">
+              <label htmlFor="confirmNewPassword" className={labelClass}>
+                Confirm new password
+              </label>
+              <form.Field
+                name="confirmNewPassword"
+                validators={{
+                  onSubmit: z.string().min(1, "Please confirm your password"),
+                  onBlur: z.string().min(1, "Please confirm your password"),
+                }}
+              >
+                {(field) => (
+                  <>
+                    <Input
+                      id="confirmNewPassword"
+                      type="password"
+                      name="confirmNewPassword"
+                      required
+                      value={field.state.value}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                      aria-describedby="confirmNewPassword-error"
+                      aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                    />
+                    <FieldError
+                      id="confirmNewPassword-error"
+                      errors={field.state.meta.errors}
+                      isTouched={field.state.meta.isTouched}
+                      isSubmitted={form.state.isSubmitted}
+                    />
+                  </>
+                )}
+              </form.Field>
+            </div>
+
+            <Button type="submit" className="w-full" disabled={form.state.isSubmitting}>
+              Reset password
+            </Button>
+          </form>
+        </div>
+      </div>
+    </Default>
+  );
+};
+
+export default ResetPasswordPage;
diff --git a/src/pages/account/AddAddressPage.tsx b/src/pages/account/AddAddressPage.tsx
index e3c5c09..4967332 100644
--- a/src/pages/account/AddAddressPage.tsx
+++ b/src/pages/account/AddAddressPage.tsx
@@ -1,123 +1,140 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Default from "../../layouts/Default";
 import AccountLayout from "../../layouts/Account";
 import { useFlashMessages } from "../../context/FlashMessagesContext";
-import AddressForm from "../../components/account/AddressForm";
+import AddressForm, { type AnyFormApi } from "../../components/account/AddressForm";
+import { Button } from "@/components/ui/button";
+import { useForm } from "@tanstack/react-form";
+import { addressSchema, AddressValues } from "@/schemas/address";
+import { submitForm } from "@/lib/utils";
 
 interface Country {
-    code: string;
-    name: string;
+  code: string;
+  name: string;
 }
 
-const AddAddressPage: React.FC = () => {
-    const navigate = useNavigate();
-    const { addMessage } = useFlashMessages();
-
-    const [countries, setCountries] = useState<Country[]>([]);
-    const [loadingCountries, setLoadingCountries] = useState(true);
-    const [formData, setFormData] = useState({
-        firstName: "",
-        lastName: "",
-        company: "",
-        street: "",
-        countryCode: "",
-        provinceName: "",
-        city: "",
-        postcode: "",
-        phoneNumber: "",
-    });
-    const [submitting, setSubmitting] = useState(false);
-
-    useEffect(() => {
-        const fetchCountries = async () => {
-            try {
-                const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/countries`);
-                const data = await res.json();
-                setCountries(data["hydra:member"] || []);
-            } catch (error) {
-                console.error("Error fetching countries", error);
-            } finally {
-                setLoadingCountries(false);
-            }
-        };
+const emptyAddressValues: AddressValues = {
+  firstName: "",
+  lastName: "",
+  company: "",
+  street: "",
+  countryCode: "",
+  provinceName: "",
+  city: "",
+  postcode: "",
+  phoneNumber: "",
+};
 
-        fetchCountries();
-    }, []);
+const AddAddressPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { addMessage } = useFlashMessages();
+  const formRef = useRef<HTMLFormElement>(null);
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-        const { name, value } = e.target;
-        setFormData((prev) => ({ ...prev, [name]: value }));
-    };
+  const [countries, setCountries] = useState<Country[]>([]);
+  const [loadingCountries, setLoadingCountries] = useState(true);
 
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setSubmitting(true);
+  const form = useForm({
+    defaultValues: emptyAddressValues,
+    validators: {
+      onSubmit: addressSchema,
+      onBlur: addressSchema,
+    },
+    onSubmit: async ({ value }) => {
+      try {
+        const token = localStorage.getItem("jwtToken");
+        if (!token) throw new Error("Missing token");
 
-        try {
-            const token = localStorage.getItem("jwtToken");
-            if (!token) throw new Error("Missing token");
+        const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify(value),
+        });
 
-            const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${token}`,
-                },
-                body: JSON.stringify(formData),
-            });
+        if (!res.ok) throw new Error("Failed to add address");
 
-            if (!res.ok) throw new Error("Failed to add address");
+        addMessage("success", "Address added successfully");
+        navigate("/account/address-book");
+      } catch (error) {
+        console.error("Error submitting address", error);
+        addMessage("error", "Failed to add address");
+      }
+    },
+  });
 
-            addMessage("success", "Address added successfully");
-            navigate("/account/address-book");
-        } catch (error) {
-            console.error("Error submitting address", error);
-            addMessage("error", "Failed to add address");
-        } finally {
-            setSubmitting(false);
-        }
+  useEffect(() => {
+    const fetchCountries = async () => {
+      try {
+        const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/countries`);
+        const data = await res.json();
+        setCountries(data["hydra:member"] || []);
+      } catch (error) {
+        console.error("Error fetching countries", error);
+      } finally {
+        setLoadingCountries(false);
+      }
     };
 
-    return (
-        <Default>
-            <AccountLayout
-                breadcrumbs={[
-                    { label: "Home", url: "/" },
-                    { label: "My account", url: "/account/dashboard" },
-                    { label: "Address book", url: "/account/address-book" },
-                    { label: "Create", url: "/account/address-book/create" },
-                ]}
-            >
-                <div className="col-12 col-md-9">
-                    <div className="mb-4">
-                        <h1>Address book</h1>
-                        <p>Add address</p>
-                    </div>
+    fetchCountries();
+  }, []);
+
+  return (
+    <Default>
+      <AccountLayout
+        breadcrumbs={[
+          { label: "Home", url: "/" },
+          { label: "My account", url: "/account/dashboard" },
+          { label: "Address book", url: "/account/address-book" },
+          { label: "Create", url: "/account/address-book/create" },
+        ]}
+      >
+        <div className="w-full md:w-3/4">
+          <div className="mb-4">
+            <h1>Address book</h1>
+            <p>Add address</p>
+          </div>
 
-                    <form onSubmit={handleSubmit}>
-                        <div className="mb-4">
-                            <AddressForm
-                                formData={formData}
-                                countries={countries}
-                                loadingCountries={loadingCountries}
-                                onChange={handleChange}
-                            />
-                        </div>
+          <form
+            ref={formRef}
+            noValidate
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              void submitForm(form, formRef.current);
+            }}
+          >
+            <div className="mb-4">
+              <AddressForm
+                form={form as unknown as AnyFormApi}
+                countries={countries}
+                loadingCountries={loadingCountries}
+              />
+            </div>
 
-                        <div className="d-flex gap-2">
-                            <button type="submit" className="btn btn-primary" disabled={submitting}>
-                                {submitting ? "Adding..." : "Add"}
-                            </button>
-                            <button type="button" className="btn btn-outline-gray" onClick={() => navigate("/account/address-book")}>
-                                Cancel
-                            </button>
-                        </div>
-                    </form>
+            <form.Subscribe selector={(state) => state.isSubmitting}>
+              {(submitting) => (
+                <div className="flex gap-2">
+                  <Button type="submit" disabled={submitting}>
+                    {submitting ? "Adding..." : "Add"}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => navigate("/account/address-book")}
+                  >
+                    Cancel
+                  </Button>
                 </div>
-            </AccountLayout>
-        </Default>
-    );
+              )}
+            </form.Subscribe>
+          </form>
+        </div>
+      </AccountLayout>
+    </Default>
+  );
 };
 
 export default AddAddressPage;
diff --git a/src/pages/account/AddressBookPage.tsx b/src/pages/account/AddressBookPage.tsx
index 56dbe30..84841be 100644
--- a/src/pages/account/AddressBookPage.tsx
+++ b/src/pages/account/AddressBookPage.tsx
@@ -1,127 +1,124 @@
-import React, { useEffect, useState } from "react";
-import Default from "../../layouts/Default";
-import AccountLayout from "../../layouts/Account";
+import React, { useCallback, useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 import { Link } from "react-router-dom";
-import { Address } from "../../types/Address";
+import AddressCards from "../../components/account/AddressCards";
 import { useCustomer } from "../../context/CustomerContext";
 import { useFlashMessages } from "../../context/FlashMessagesContext";
-import AddressCards from "../../components/account/AddressCards";
-import Skeleton from "react-loading-skeleton";
+import AccountLayout from "../../layouts/Account";
+import Default from "../../layouts/Default";
+import { Address } from "../../types/Address";
 
-const getDefaultAddressId = (
-    defaultAddress?: string | { "@id": string } | null
-): string | null => {
-    if (!defaultAddress) return null;
-    const addressUrl = typeof defaultAddress === "string" ? defaultAddress : defaultAddress["@id"];
-    return addressUrl.split("/").pop() || null;
+const getDefaultAddressId = (defaultAddress?: string | { "@id": string } | null): string | null => {
+  if (!defaultAddress) return null;
+  const addressUrl = typeof defaultAddress === "string" ? defaultAddress : defaultAddress["@id"];
+  return addressUrl.split("/").pop() || null;
 };
 
-
 const AddressBookPage: React.FC = () => {
-    const { customer } = useCustomer();
-    const { addMessage } = useFlashMessages();
-
-    const [addresses, setAddresses] = useState<Address[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    const fetchAddresses = async () => {
-        setLoading(true);
-        try {
-            const token = localStorage.getItem("jwtToken");
-            const res = await fetch(
-                `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses`,
-                {
-                    headers: {
-                        Authorization: `Bearer ${token}`,
-                    },
-                }
-            );
-
-            if (!res.ok) throw new Error("Failed to fetch addresses");
-
-            const data = await res.json();
-            setAddresses(data["hydra:member"] || []);
-        } catch (err) {
-            console.error("Error loading addresses", err);
-            addMessage("error", "Failed to load addresses");
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleDelete = async (id: number) => {
-        try {
-            const token = localStorage.getItem("jwtToken");
-            const res = await fetch(
-                `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses/${id}`,
-                {
-                    method: "DELETE",
-                    headers: {
-                        Authorization: `Bearer ${token}`,
-                    },
-                }
-            );
-
-            if (!res.ok) throw new Error("Failed to delete address");
-
-            addMessage("success", "Address deleted");
-            fetchAddresses();
-        } catch (err) {
-            console.error("Error deleting address", err);
-            addMessage("error", "Failed to delete address");
+  const { customer } = useCustomer();
+  const { addMessage } = useFlashMessages();
+
+  const [addresses, setAddresses] = useState<Address[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchAddresses = useCallback(async () => {
+    setLoading(true);
+    try {
+      const token = localStorage.getItem("jwtToken");
+      const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!res.ok) throw new Error("Failed to fetch addresses");
+
+      const data = await res.json();
+      setAddresses(data["hydra:member"] || []);
+    } catch (err) {
+      console.error("Error loading addresses", err);
+      addMessage("error", "Failed to load addresses");
+    } finally {
+      setLoading(false);
+    }
+  }, [addMessage]);
+
+  const handleDelete = async (id: number) => {
+    try {
+      const token = localStorage.getItem("jwtToken");
+      const res = await fetch(
+        `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses/${id}`,
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
         }
-    };
-
-    useEffect(() => {
-        fetchAddresses();
-    }, []);
-
-    const defaultId = getDefaultAddressId(customer?.defaultAddress);
-
-    const sortedAddresses = [...addresses].sort((a, b) => {
-        if (String(a.id) === defaultId) return -1;
-        if (String(b.id) === defaultId) return 1;
-        return 0;
-    });
-
-    return (
-        <Default>
-            <AccountLayout
-                breadcrumbs={[
-                    { label: "Home", url: "/" },
-                    { label: "My account", url: "/account/dashboard" },
-                    { label: "Address book", url: "/account/address-book" },
-                ]}
+      );
+
+      if (!res.ok) throw new Error("Failed to delete address");
+
+      addMessage("success", "Address deleted");
+      fetchAddresses();
+    } catch (err) {
+      console.error("Error deleting address", err);
+      addMessage("error", "Failed to delete address");
+    }
+  };
+
+  useEffect(() => {
+    fetchAddresses();
+  }, [fetchAddresses]);
+
+  const defaultId = getDefaultAddressId(customer?.defaultAddress);
+
+  const sortedAddresses = [...addresses].sort((a, b) => {
+    if (String(a.id) === defaultId) return -1;
+    if (String(b.id) === defaultId) return 1;
+    return 0;
+  });
+
+  return (
+    <Default>
+      <AccountLayout
+        breadcrumbs={[
+          { label: "Home", url: "/" },
+          { label: "My account", url: "/account/dashboard" },
+          { label: "Address book", url: "/account/address-book" },
+        ]}
+      >
+        <div className="w-full md:w-3/4">
+          <div className="mb-4 flex items-start justify-between">
+            <div>
+              <h1 className="mb-1">Address book</h1>
+              <div className="text-muted-foreground">Manage your saved addresses</div>
+            </div>
+            <Link
+              to="/account/address-book/add"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center justify-center rounded px-4 py-2"
             >
-                <div className="col-12 col-md-9">
-                    <div className="d-flex justify-content-between align-items-start mb-4">
-                        <div>
-                            <h1 className="mb-1">Address book</h1>
-                            <div className="text-muted">Manage your saved addresses</div>
-                        </div>
-                        <Link to="/account/address-book/add" className="btn btn-primary">
-                            Add address
-                        </Link>
-                    </div>
-
-                    {loading ? (
-                        <Skeleton count={3} height={120} className="mb-3" />
-                    ) : addresses.length === 0 ? (
-                        <div className="alert alert-info">
-                            <div className="fw-bold">Info</div>
-                            You have no addresses defined
-                        </div>
-                    ) : (
-                        <AddressCards
-                            addresses={sortedAddresses}
-                            onDelete={handleDelete}
-                            refetchAddresses={fetchAddresses}
-                        />
-                    )}
-                </div>
-            </AccountLayout>
-        </Default>
-    );
+              Add address
+            </Link>
+          </div>
+
+          {loading ? (
+            <Skeleton count={3} height={120} className="mb-3" />
+          ) : addresses.length === 0 ? (
+            <div className="rounded border border-blue-200 bg-blue-50 p-3 text-blue-800">
+              <div className="font-bold">Info</div>
+              You have no addresses defined
+            </div>
+          ) : (
+            <AddressCards
+              addresses={sortedAddresses}
+              onDelete={handleDelete}
+              refetchAddresses={fetchAddresses}
+            />
+          )}
+        </div>
+      </AccountLayout>
+    </Default>
+  );
 };
 
 export default AddressBookPage;
diff --git a/src/pages/account/ChangePasswordPage.tsx b/src/pages/account/ChangePasswordPage.tsx
index c1c9606..9b9c3e8 100644
--- a/src/pages/account/ChangePasswordPage.tsx
+++ b/src/pages/account/ChangePasswordPage.tsx
@@ -1,139 +1,274 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import Default from "../../layouts/Default.tsx";
 import AccountLayout from "../../layouts/Account.tsx";
 import { useCustomer } from "../../context/CustomerContext.tsx";
 import { useNavigate } from "react-router-dom";
 import Loader from "../../components/layout/Loader.tsx";
 import { useFlashMessages } from "../../context/FlashMessagesContext.tsx";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useForm } from "@tanstack/react-form";
+import { ChangePasswordPayload } from "@/schemas/account";
+import { passwordComplexity } from "@/schemas/auth";
+import { applyServerErrors, submitForm } from "@/lib/utils";
+import { FieldError } from "@/components/ui/field-error";
+import { PasswordStrength } from "@/components/ui/password-strength";
+import { z } from "zod";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+
+const labelClass = "block text-sm font-medium mb-1";
 
 const ChangePasswordPage: React.FC = () => {
   const { customer } = useCustomer();
   const navigate = useNavigate();
   const { addMessage } = useFlashMessages();
+  const formRef = useRef<HTMLFormElement>(null);
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
 
-  const [currentPassword, setCurrentPassword] = useState<string>();
-  const [newPassword, setNewPassword] = useState<string>();
-  const [confirmation, setConfirmation] = useState<string>();
-  const [loading, setLoading] = useState<boolean>(false);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-
-  const handleChangePassword = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    setLoading(true);
-    setErrors({});
-
-    try {
-      const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_API_URL}${customer && customer["@id"]}/password`,
-        {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
-          },
-          body: JSON.stringify({
-            newPassword,
-            confirmNewPassword: confirmation,
-            currentPassword,
-          }),
-        },
-      );
+  const form = useForm({
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmation: "",
+    },
+    onSubmit: async ({ value }) => {
+      const payload: ChangePasswordPayload = {
+        currentPassword: value.currentPassword,
+        newPassword: value.newPassword,
+        confirmNewPassword: value.confirmation,
+      };
 
-      if (!response.ok) {
-        const data = await response.json();
-
-        const formattedErrors: Record<string, string> = {};
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_REACT_APP_API_URL}${customer && customer["@id"]}/password`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+            },
+            body: JSON.stringify(payload),
+          }
+        );
 
-        data.violations?.forEach(
-          (error: { propertyPath: string; message: string }) => {
+        if (!response.ok) {
+          const data = await response.json();
+          const formattedErrors: Record<string, string> = {};
+          data.violations?.forEach((error: { propertyPath: string; message: string }) => {
             formattedErrors[error.propertyPath] = error.message;
-          },
-        );
+          });
+          const mappedErrors: Partial<Record<string, string>> = {};
+          if (formattedErrors.currentPassword)
+            mappedErrors.currentPassword = formattedErrors.currentPassword;
+          if (formattedErrors.newPassword) mappedErrors.newPassword = formattedErrors.newPassword;
+          if (formattedErrors.confirmNewPassword)
+            mappedErrors.confirmation = formattedErrors.confirmNewPassword;
+          applyServerErrors(form, mappedErrors);
+          throw new Error("Failed to change password");
+        }
 
-        setErrors(formattedErrors || {});
-        throw new Error("Failed to submit order");
+        navigate("/account/dashboard");
+        addMessage("success", "Password changed successfully");
+      } catch {
+        // Server error already handled via applyServerErrors above
       }
-
-      navigate("/account/dashboard");
-      addMessage("success", "Password changed successfully");
-    } catch (err) {
-      console.log(err);
-    } finally {
-      setLoading(false);
-    }
-  };
+    },
+  });
 
   return (
     <Default>
       <AccountLayout>
-        <div className="col-12 col-md-9">
+        <div className="w-full md:w-3/4">
           <div className="mb-4">
             <h1>Change password</h1>
             Set a new password for your account
           </div>
 
-          <div className="mb-4 position-relative">
-            <Loader loading={loading}>
-              <form method="post" onSubmit={handleChangePassword}>
-                <div className="mb-4">
-                  <div className="field mb-3 required">
-                    <label className="form-label required">
-                      Current password
-                    </label>
-                    <input
-                      type="password"
-                      required={true}
-                      className="form-control"
-                      onChange={(e) => setCurrentPassword(e.target.value)}
-                    />
-                    {errors?.currentPassword && (
-                      <div className="invalid-feedback d-block">
-                        {errors.currentPassword}
+          <div className="relative mb-4">
+            <form.Subscribe selector={(state) => state.isSubmitting}>
+              {(isSubmitting) => (
+                <Loader loading={isSubmitting}>
+                  <form
+                    ref={formRef}
+                    method="post"
+                    noValidate
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      void submitForm(form, formRef.current);
+                    }}
+                  >
+                    <div className="mb-4">
+                      <div className="mb-3">
+                        <label className={labelClass}>Current password</label>
+                        <form.Field
+                          name="currentPassword"
+                          validators={{
+                            onSubmit: z.string().min(1, "Current password is required"),
+                            onBlur: z.string().min(1, "Current password is required"),
+                          }}
+                        >
+                          {(field) => (
+                            <>
+                              <div className="relative">
+                                <Input
+                                  type={showCurrentPassword ? "text" : "password"}
+                                  required={true}
+                                  className="pr-10"
+                                  value={field.state.value}
+                                  onChange={(e) => field.handleChange(e.target.value)}
+                                  onBlur={field.handleBlur}
+                                  aria-describedby="currentPassword-error"
+                                  aria-invalid={
+                                    (field.state.meta.errors?.length ?? 0) > 0 || undefined
+                                  }
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => setShowCurrentPassword((v) => !v)}
+                                  className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2 focus:outline-none"
+                                  aria-label={
+                                    showCurrentPassword ? "Hide password" : "Show password"
+                                  }
+                                >
+                                  {showCurrentPassword ? (
+                                    <IconEyeOff size={18} />
+                                  ) : (
+                                    <IconEye size={18} />
+                                  )}
+                                </button>
+                              </div>
+                              <FieldError
+                                id="currentPassword-error"
+                                errors={field.state.meta.errors}
+                                isTouched={field.state.meta.isTouched}
+                                isSubmitted={form.state.isSubmitted}
+                              />
+                            </>
+                          )}
+                        </form.Field>
                       </div>
-                    )}
-                  </div>
 
-                  <div className="field mb-3 required">
-                    <label className="form-label required">New password</label>
-                    <input
-                      type="password"
-                      required={true}
-                      className="form-control"
-                      onChange={(e) => setNewPassword(e.target.value)}
-                    />
-                    {errors?.newPassword && (
-                      <div className="invalid-feedback d-block">
-                        {errors.newPassword}
+                      <div className="mb-3">
+                        <label className={labelClass}>New password</label>
+                        <form.Field
+                          name="newPassword"
+                          validators={{
+                            onSubmit: passwordComplexity,
+                            onBlur: passwordComplexity,
+                            onChangeListenTo: ["confirmation"],
+                            onBlurListenTo: ["confirmation"],
+                          }}
+                        >
+                          {(field) => (
+                            <>
+                              <div className="relative">
+                                <Input
+                                  type={showNewPassword ? "text" : "password"}
+                                  required={true}
+                                  className="pr-10"
+                                  value={field.state.value}
+                                  onChange={(e) => field.handleChange(e.target.value)}
+                                  onBlur={field.handleBlur}
+                                  aria-describedby="newPassword-error"
+                                  aria-invalid={
+                                    (field.state.meta.errors?.length ?? 0) > 0 || undefined
+                                  }
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => setShowNewPassword((v) => !v)}
+                                  className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2 focus:outline-none"
+                                  aria-label={showNewPassword ? "Hide password" : "Show password"}
+                                >
+                                  {showNewPassword ? (
+                                    <IconEyeOff size={18} />
+                                  ) : (
+                                    <IconEye size={18} />
+                                  )}
+                                </button>
+                              </div>
+                              <PasswordStrength value={field.state.value} />
+                              <FieldError
+                                id="newPassword-error"
+                                errors={field.state.meta.errors}
+                                isTouched={field.state.meta.isTouched}
+                                isSubmitted={form.state.isSubmitted}
+                              />
+                            </>
+                          )}
+                        </form.Field>
                       </div>
-                    )}
-                  </div>
 
-                  <div className="field mb-3 required">
-                    <label className="form-label required">Confirmation</label>
-                    <input
-                      type="password"
-                      required={true}
-                      className="form-control"
-                      onChange={(e) => setConfirmation(e.target.value)}
-                    />
-                    {errors?.confirmNewPassword && (
-                      <div className="invalid-feedback d-block">
-                        {errors.confirmNewPassword}
+                      <div className="mb-3">
+                        <label className={labelClass}>Confirmation</label>
+                        <form.Field
+                          name="confirmation"
+                          validators={{
+                            onBlur: ({ value, fieldApi }) => {
+                              const newPassword = fieldApi.form.getFieldValue("newPassword");
+                              if (value !== newPassword) return "Passwords do not match";
+                              return undefined;
+                            },
+                            onSubmit: ({ value, fieldApi }) => {
+                              const newPassword = fieldApi.form.getFieldValue("newPassword");
+                              if (value !== newPassword) return "Passwords do not match";
+                              if (!value) return "Please confirm your password";
+                              return undefined;
+                            },
+                            onChangeListenTo: ["newPassword"],
+                            onBlurListenTo: ["newPassword"],
+                          }}
+                        >
+                          {(field) => (
+                            <>
+                              <div className="relative">
+                                <Input
+                                  type={showConfirmation ? "text" : "password"}
+                                  required={true}
+                                  className="pr-10"
+                                  value={field.state.value}
+                                  onChange={(e) => field.handleChange(e.target.value)}
+                                  onBlur={field.handleBlur}
+                                  aria-describedby="confirmation-error"
+                                  aria-invalid={
+                                    (field.state.meta.errors?.length ?? 0) > 0 || undefined
+                                  }
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => setShowConfirmation((v) => !v)}
+                                  className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2 focus:outline-none"
+                                  aria-label={showConfirmation ? "Hide password" : "Show password"}
+                                >
+                                  {showConfirmation ? (
+                                    <IconEyeOff size={18} />
+                                  ) : (
+                                    <IconEye size={18} />
+                                  )}
+                                </button>
+                              </div>
+                              <FieldError
+                                id="confirmation-error"
+                                errors={field.state.meta.errors}
+                                isTouched={field.state.meta.isTouched}
+                                isSubmitted={form.state.isSubmitted}
+                              />
+                            </>
+                          )}
+                        </form.Field>
                       </div>
-                    )}
-                  </div>
-                </div>
+                    </div>
 
-                <button
-                  type="submit"
-                  className="btn btn-primary"
-                  id="save-changes"
-                >
-                  Save changes
-                </button>
-              </form>
-            </Loader>
+                    <Button type="submit" id="save-changes">
+                      Save changes
+                    </Button>
+                  </form>
+                </Loader>
+              )}
+            </form.Subscribe>
           </div>
         </div>
       </AccountLayout>
diff --git a/src/pages/account/DashboardPage.tsx b/src/pages/account/DashboardPage.tsx
index 8c7ac80..33745d5 100644
--- a/src/pages/account/DashboardPage.tsx
+++ b/src/pages/account/DashboardPage.tsx
@@ -7,143 +7,163 @@ import { IconPencil, IconLock, IconCheck } from "@tabler/icons-react";
 import { Link, useSearchParams, useNavigate } from "react-router-dom";
 import Skeleton from "react-loading-skeleton";
 import { sendVerificationEmail, verifyToken } from "../../services/customerVerification";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 
 const DashboardPage: React.FC = () => {
-    const { customer, refetchCustomer } = useCustomer();
-    const { addMessage } = useFlashMessages();
-    const [searchParams] = useSearchParams();
-    const navigate = useNavigate();
-
-    const [isVerifying, setIsVerifying] = useState(false);
-    const verificationAttempted = useRef(false);
-
-    const handleVerifyClick = async () => {
-        if (!customer?.email) {
-            addMessage("error", "Customer email not found.");
-            return;
-        }
-
-        const jwtToken = localStorage.getItem("jwtToken");
-        if (!jwtToken) {
-            addMessage("error", "Authentication token not found. Please log in again.");
-            return;
-        }
-
-        setIsVerifying(true);
-        const { success, message } = await sendVerificationEmail(customer.email, window.location.href, jwtToken);
-
-        if (success) {
-            addMessage("success", "Verification email sent! Please check your inbox.");
-        } else {
-            addMessage("error", message || "Failed to send verification email.");
-        }
-
-        setIsVerifying(false);
+  const { customer, refetchCustomer } = useCustomer();
+  const { addMessage } = useFlashMessages();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [isVerifying, setIsVerifying] = useState(false);
+  const verificationAttempted = useRef(false);
+
+  const handleVerifyClick = async () => {
+    if (!customer?.email) {
+      addMessage("error", "Customer email not found.");
+      return;
+    }
+
+    const jwtToken = localStorage.getItem("jwtToken");
+    if (!jwtToken) {
+      addMessage("error", "Authentication token not found. Please log in again.");
+      return;
+    }
+
+    setIsVerifying(true);
+    const { success, message } = await sendVerificationEmail(
+      customer.email,
+      window.location.href,
+      jwtToken
+    );
+
+    if (success) {
+      addMessage("success", "Verification email sent! Please check your inbox.");
+    } else {
+      addMessage("error", message || "Failed to send verification email.");
+    }
+
+    setIsVerifying(false);
+  };
+
+  useEffect(() => {
+    const tokenFromUrl = searchParams.get("token");
+    const jwtToken = localStorage.getItem("jwtToken");
+
+    if (!tokenFromUrl || !jwtToken || verificationAttempted.current) return;
+    verificationAttempted.current = true;
+
+    const verify = async () => {
+      const { success, message } = await verifyToken(tokenFromUrl, jwtToken);
+
+      if (success) {
+        addMessage("success", "Your email has been successfully verified.");
+        await refetchCustomer();
+      } else {
+        addMessage("error", message || "Verification failed.");
+      }
+
+      navigate("/account/dashboard", { replace: true });
     };
 
-    useEffect(() => {
-        const tokenFromUrl = searchParams.get("token");
-        const jwtToken = localStorage.getItem("jwtToken");
-
-        if (!tokenFromUrl || !jwtToken || verificationAttempted.current) return;
-        verificationAttempted.current = true;
-
-        const verify = async () => {
-            const { success, message } = await verifyToken(tokenFromUrl, jwtToken);
-
-            if (success) {
-                addMessage("success", "Your email has been successfully verified.");
-                await refetchCustomer();
-            } else {
-                addMessage("error", message || "Verification failed.");
-            }
-
-            navigate("/account/dashboard", { replace: true });
-        };
-
-        verify();
-    }, [searchParams, addMessage, refetchCustomer, navigate]);
-
-    return (
-        <Default>
-            <AccountLayout>
-                <div className="col-12 col-md-9">
-                    <div className="mb-4">
-                        <h1>My account</h1>
-                        Manage your personal information and preferences
-                    </div>
-
-                    <div className="card border-0 bg-body-tertiary">
-                        <div className="card-body">
-                            <div className="row mb-3">
-                                <div className="col-12 col-sm-auto mb-2 order-sm-1">
-                                    {!customer?.user ? (
-                                        <Skeleton width={80} height={26} borderRadius={20} />
-                                    ) : customer.user.verified ? (
-                                        <span className="badge text-bg-success">Verified</span>
-                                    ) : (
-                                        <span className="badge text-bg-danger">Not verified</span>
-                                    )}
-                                </div>
-
-                                <div className="col-12 col-sm">
-                                    <strong>{customer?.fullName || <Skeleton width={120} />}</strong>
-                                    <div>{customer?.email || <Skeleton width={180} />}</div>
-                                </div>
-                            </div>
-
-                            <div className="d-flex flex-column align-items-center flex-sm-row gap-2">
-                                {!customer?.user ? (
-                                    <>
-                                        <Skeleton width={100} height={36} />
-                                        <Skeleton width={140} height={36} />
-                                        <Skeleton width={120} height={36} />
-                                    </>
-                                ) : (
-                                    <>
-                                        <Link to="/account/profile/edit" className="btn btn-sm btn-icon btn-outline-gray">
-                                            <IconPencil stroke={2} size={16} />
-                                            Edit
-                                        </Link>
-
-                                        <Link to="/account/change-password" className="btn btn-sm btn-icon btn-outline-gray">
-                                            <IconLock stroke={2} size={16} />
-                                            Change password
-                                        </Link>
-
-                                        {!customer.user.verified && (
-                                            <button
-                                                className="btn btn-sm btn-icon btn-outline-gray text-primary"
-                                                type="button"
-                                                onClick={handleVerifyClick}
-                                                disabled={isVerifying}
-                                            >
-                                                {isVerifying ? (
-                                                    <>
+    verify();
+  }, [searchParams, addMessage, refetchCustomer, navigate]);
+
+  return (
+    <Default>
+      <AccountLayout>
+        <div className="w-full md:w-3/4">
+          <div className="mb-4">
+            <h1>My account</h1>
+            Manage your personal information and preferences
+          </div>
+
+          <div className="bg-muted rounded-lg">
+            <div className="p-4">
+              <div className="-mx-4 mb-3 flex flex-wrap">
+                <div className="mb-2 w-full px-4 sm:order-1 sm:w-auto">
+                  {!customer?.user ? (
+                    <Skeleton width={80} height={26} borderRadius={20} />
+                  ) : customer.user.verified ? (
+                    <Badge className="bg-green-100 text-green-800 hover:bg-green-100">
+                      Verified
+                    </Badge>
+                  ) : (
+                    <Badge variant="destructive">Not verified</Badge>
+                  )}
+                </div>
+
+                <div className="w-full px-4 sm:flex-1">
+                  <strong>{customer?.fullName || <Skeleton width={120} />}</strong>
+                  <div>{customer?.email || <Skeleton width={180} />}</div>
+                </div>
+              </div>
+
+              <div className="flex flex-col items-center gap-2 sm:flex-row">
+                {!customer?.user ? (
+                  <>
+                    <Skeleton width={100} height={36} />
+                    <Skeleton width={140} height={36} />
+                    <Skeleton width={120} height={36} />
+                  </>
+                ) : (
+                  <>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      nativeButton={false}
+                      render={<Link to="/account/profile/edit" />}
+                    >
+                      <IconPencil stroke={2} size={16} />
+                      Edit
+                    </Button>
+
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      nativeButton={false}
+                      render={<Link to="/account/change-password" />}
+                    >
+                      <IconLock stroke={2} size={16} />
+                      Change password
+                    </Button>
+
+                    {!customer.user.verified && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        type="button"
+                        onClick={handleVerifyClick}
+                        disabled={isVerifying}
+                        className="text-primary"
+                      >
+                        {isVerifying ? (
+                          <>
                             <span
-                                className="spinner-border spinner-border-sm"
-                                role="status"
-                                aria-hidden="true"
+                              className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+                              role="status"
+                              aria-hidden="true"
                             ></span>
-                                                        Sending...
-                                                    </>
-                                                ) : (
-                                                    <>
-                                                        <IconCheck stroke={2} size={16} />
-                                                        Verify
-                                                    </>
-                                                )}
-                                            </button>
-                                        )}
-                                    </>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </AccountLayout>
-        </Default>
-    );
+                            Sending...
+                          </>
+                        ) : (
+                          <>
+                            <IconCheck stroke={2} size={16} />
+                            Verify
+                          </>
+                        )}
+                      </Button>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </AccountLayout>
+    </Default>
+  );
 };
 
 export default DashboardPage;
diff --git a/src/pages/account/EditAddressPage.tsx b/src/pages/account/EditAddressPage.tsx
index d245049..acce4e8 100644
--- a/src/pages/account/EditAddressPage.tsx
+++ b/src/pages/account/EditAddressPage.tsx
@@ -1,167 +1,190 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import Default from "../../layouts/Default";
-import AccountLayout from "../../layouts/Account";
+import { Button } from "@/components/ui/button";
+import React, { useEffect, useRef, useState } from "react";
 import Skeleton from "react-loading-skeleton";
+import { useNavigate, useParams } from "react-router-dom";
+import AddressForm, { type AnyFormApi } from "../../components/account/AddressForm";
 import { useFlashMessages } from "../../context/FlashMessagesContext";
-import AddressForm from "../../components/account/AddressForm";
+import AccountLayout from "../../layouts/Account";
+import Default from "../../layouts/Default";
+import { useForm } from "@tanstack/react-form";
+import { addressSchema, AddressValues } from "@/schemas/address";
+import { submitForm } from "@/lib/utils";
 
 interface Country {
-    code: string;
-    name: string;
+  code: string;
+  name: string;
 }
 
+const emptyAddressValues: AddressValues = {
+  firstName: "",
+  lastName: "",
+  company: "",
+  street: "",
+  countryCode: "",
+  provinceName: "",
+  city: "",
+  postcode: "",
+  phoneNumber: "",
+};
+
 const EditAddressPage: React.FC = () => {
-    const navigate = useNavigate();
-    const { id } = useParams<{ id: string }>();
-    const { addMessage } = useFlashMessages();
-
-    const [countries, setCountries] = useState<Country[]>([]);
-    const [loadingCountries, setLoadingCountries] = useState(true);
-    const [loadingAddress, setLoadingAddress] = useState(true);
-    const [submitting, setSubmitting] = useState(false);
-
-    const [formData, setFormData] = useState({
-        firstName: "",
-        lastName: "",
-        company: "",
-        street: "",
-        countryCode: "",
-        provinceName: "",
-        city: "",
-        postcode: "",
-        phoneNumber: "",
-    });
-
-    useEffect(() => {
-        const fetchCountries = async () => {
-            try {
-                const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/countries`);
-                const data = await res.json();
-                setCountries(data["hydra:member"] || []);
-            } catch (error) {
-                console.error("Error fetching countries", error);
-            } finally {
-                setLoadingCountries(false);
-            }
-        };
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const { addMessage } = useFlashMessages();
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const [countries, setCountries] = useState<Country[]>([]);
+  const [loadingCountries, setLoadingCountries] = useState(true);
+  const [loadingAddress, setLoadingAddress] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+
+  const form = useForm({
+    defaultValues: emptyAddressValues,
+    validators: {
+      onSubmit: addressSchema,
+      onBlur: addressSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setSubmitting(true);
+      try {
+        const token = localStorage.getItem("jwtToken");
+        const res = await fetch(
+          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses/${id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify(value),
+          }
+        );
+
+        if (!res.ok) throw new Error("Failed to update address");
+
+        addMessage("success", "Address updated successfully");
+        navigate("/account/address-book");
+      } catch (error) {
+        console.error("Error updating address", error);
+        addMessage("error", "Failed to update address");
+      } finally {
+        setSubmitting(false);
+      }
+    },
+  });
+
+  useEffect(() => {
+    const fetchCountries = async () => {
+      try {
+        const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/countries`);
+        const data = await res.json();
+        setCountries(data["hydra:member"] || []);
+      } catch (error) {
+        console.error("Error fetching countries", error);
+      } finally {
+        setLoadingCountries(false);
+      }
+    };
 
-        const fetchAddress = async () => {
-            try {
-                const token = localStorage.getItem("jwtToken");
-                const res = await fetch(
-                    `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses/${id}`,
-                    {
-                        headers: { Authorization: `Bearer ${token}` },
-                    }
-                );
-                if (!res.ok) throw new Error("Failed to fetch address");
-                const data = await res.json();
-                setFormData({
-                    firstName: data.firstName || "",
-                    lastName: data.lastName || "",
-                    company: data.company || "",
-                    street: data.street || "",
-                    countryCode: data.countryCode || "",
-                    provinceName: data.provinceName || "",
-                    city: data.city || "",
-                    postcode: data.postcode || "",
-                    phoneNumber: data.phoneNumber || "",
-                });
-            } catch (err) {
-                console.error("Error loading address", err);
-                addMessage("error", "Failed to load address");
-            } finally {
-                setLoadingAddress(false);
-            }
+    const fetchAddress = async () => {
+      try {
+        const token = localStorage.getItem("jwtToken");
+        const res = await fetch(
+          `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses/${id}`,
+          {
+            headers: { Authorization: `Bearer ${token}` },
+          }
+        );
+        if (!res.ok) throw new Error("Failed to fetch address");
+        const data = await res.json();
+
+        const existingAddress: AddressValues = {
+          firstName: data.firstName || "",
+          lastName: data.lastName || "",
+          company: data.company || "",
+          street: data.street || "",
+          countryCode: data.countryCode || "",
+          provinceName: data.provinceName || "",
+          city: data.city || "",
+          postcode: data.postcode || "",
+          phoneNumber: data.phoneNumber || "",
         };
 
-        fetchCountries();
-        fetchAddress();
-    }, [id]);
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-        const { name, value } = e.target;
-        setFormData((prev) => ({ ...prev, [name]: value }));
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setSubmitting(true);
-
-        try {
-            const token = localStorage.getItem("jwtToken");
-            const res = await fetch(
-                `${import.meta.env.VITE_REACT_APP_API_URL}/api/v2/shop/addresses/${id}`,
-                {
-                    method: "PUT",
-                    headers: {
-                        "Content-Type": "application/json",
-                        Authorization: `Bearer ${token}`,
-                    },
-                    body: JSON.stringify(formData),
-                }
-            );
-
-            if (!res.ok) throw new Error("Failed to update address");
-
-            addMessage("success", "Address updated successfully");
-            navigate("/account/address-book");
-        } catch (error) {
-            console.error("Error updating address", error);
-            addMessage("error", "Failed to update address");
-        } finally {
-            setSubmitting(false);
-        }
+        form.setFieldValue("firstName", existingAddress.firstName);
+        form.setFieldValue("lastName", existingAddress.lastName);
+        form.setFieldValue("company", existingAddress.company);
+        form.setFieldValue("street", existingAddress.street);
+        form.setFieldValue("countryCode", existingAddress.countryCode);
+        form.setFieldValue("provinceName", existingAddress.provinceName);
+        form.setFieldValue("city", existingAddress.city);
+        form.setFieldValue("postcode", existingAddress.postcode);
+        form.setFieldValue("phoneNumber", existingAddress.phoneNumber);
+      } catch (err) {
+        console.error("Error loading address", err);
+        addMessage("error", "Failed to load address");
+      } finally {
+        setLoadingAddress(false);
+      }
     };
 
-    return (
-        <Default>
-            <AccountLayout
-                breadcrumbs={[
-                    { label: "Home", url: "/" },
-                    { label: "My account", url: "/account/dashboard" },
-                    { label: "Address book", url: "/account/address-book" },
-                    { label: "Edit", url: `/account/address-book/edit/${id}` },
-                ]}
+    fetchCountries();
+    fetchAddress();
+  }, [id, addMessage, form]);
+
+  return (
+    <Default>
+      <AccountLayout
+        breadcrumbs={[
+          { label: "Home", url: "/" },
+          { label: "My account", url: "/account/dashboard" },
+          { label: "Address book", url: "/account/address-book" },
+          { label: "Edit", url: `/account/address-book/edit/${id}` },
+        ]}
+      >
+        <div className="w-full md:w-3/4">
+          <div className="mb-4">
+            <h1>Address book</h1>
+            <p>Edit my address</p>
+          </div>
+
+          {loadingAddress ? (
+            <Skeleton count={10} height={36} className="mb-2" />
+          ) : (
+            <form
+              ref={formRef}
+              noValidate
+              onSubmit={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                void submitForm(form, formRef.current);
+              }}
             >
-                <div className="col-12 col-md-9">
-                    <div className="mb-4">
-                        <h1>Address book</h1>
-                        <p>Edit my address</p>
-                    </div>
-
-                    {loadingAddress ? (
-                        <Skeleton count={10} height={36} className="mb-2" />
-                    ) : (
-                        <form onSubmit={handleSubmit}>
-                            <div className="mb-4">
-                                <AddressForm
-                                    formData={formData}
-                                    countries={countries}
-                                    loadingCountries={loadingCountries}
-                                    onChange={handleChange}
-                                />
-                            </div>
-
-                            <div className="d-flex gap-2">
-                                <button type="submit" className="btn btn-primary" disabled={submitting}>
-                                    {submitting ? "Saving..." : "Save changes"}
-                                </button>
-                                <button
-                                    type="button"
-                                    className="btn btn-outline-gray"
-                                    onClick={() => navigate("/account/address-book")}
-                                >
-                                    Cancel
-                                </button>
-                            </div>
-                        </form>
-                    )}
-                </div>
-            </AccountLayout>
-        </Default>
-    );
+              <div className="mb-4">
+                <AddressForm
+                  form={form as unknown as AnyFormApi}
+                  countries={countries}
+                  loadingCountries={loadingCountries}
+                />
+              </div>
+
+              <div className="flex gap-2">
+                <Button type="submit" disabled={submitting}>
+                  {submitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => navigate("/account/address-book")}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          )}
+        </div>
+      </AccountLayout>
+    </Default>
+  );
 };
 
 export default EditAddressPage;
diff --git a/src/pages/account/OrderDetailsPage.tsx b/src/pages/account/OrderDetailsPage.tsx
index 02efb06..b2a828d 100644
--- a/src/pages/account/OrderDetailsPage.tsx
+++ b/src/pages/account/OrderDetailsPage.tsx
@@ -9,179 +9,195 @@ import ProductRow from "../../components/order/ProductRow";
 import { OrderItem, Order } from "../../types/Order";
 import { formatPrice } from "../../utils/price";
 import Skeleton from "react-loading-skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
 const OrderDetailsPage: React.FC = () => {
-    const { token } = useParams<{ token: string }>();
-    const [order, setOrder] = useState<Order | null>(null);
-    const [loading, setLoading] = useState<boolean>(true);
-
-    useEffect(() => {
-        const fetchOrder = async () => {
-            try {
-                const tokenJwt = localStorage.getItem("jwtToken");
-                if (!tokenJwt || !token) return;
-
-                const baseUrl = import.meta.env.VITE_REACT_APP_API_URL;
-                const orderRes = await fetch(`${baseUrl}/api/v2/shop/orders/${token}`, {
-                    headers: { Authorization: `Bearer ${tokenJwt}` },
-                });
-
-                if (!orderRes.ok) throw new Error("Błąd pobierania zamówienia");
-                const data = await orderRes.json();
-
-                if (data.payments?.[0]?.['@id']) {
-                    const paymentRes = await fetch(`${baseUrl}${data.payments[0]['@id']}`, {
-                        headers: { Authorization: `Bearer ${tokenJwt}` },
-                    });
-
-                    if (paymentRes.ok) {
-                        const fullPayment = await paymentRes.json();
-                        data.payments[0] = fullPayment;
-                        data.createdAt = fullPayment.createdAt;
-                    }
-                }
-
-                setOrder(data);
-            } catch (e) {
-                console.error(e);
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchOrder();
-    }, [token]);
-
-    return (
-        <Default>
-            <AccountLayout
-                breadcrumbs={
-                    order
-                        ? [
-                            { label: "Home", url: "/" },
-                            { label: "My account", url: "/account/dashboard" },
-                            { label: "Order History", url: "/account/order-history" },
-                            { label: `#${order.number}`, url: `/account/orders/${order.tokenValue}` },
-                        ]
-                        : []
-                }
-            >
-                {loading ? (
-                    <div className="col-12 col-md-9 pt-4">
-                        <Skeleton height={30} width={200} className="mb-4" />
-                        <Skeleton height={100} className="mb-3" count={2} />
-                        <Skeleton height={200} className="mb-4" />
-                    </div>
-                ) : (
-                    <div className="col-12 col-md-9 pt-4">
-                        <h1 className="h5 mb-4">Order #{order?.number}</h1>
-
-                        <div className="card border-0 bg-body-tertiary mb-3">
-                            <div className="card-body d-flex flex-column gap-1">
-                                <div className="row">
-                                    <div className="col-12 col-sm-4">State</div>
-                                    <div className="col">{order?.state || '-'}</div>
-                                </div>
-                                <div className="row">
-                                    <div className="col-12 col-sm-4">Created at</div>
-                                    <div className="col">
-                                        {order?.createdAt
-                                            ? new Date(order.createdAt).toLocaleString('en-GB', {
-                                                year: 'numeric',
-                                                month: '2-digit',
-                                                day: '2-digit',
-                                                hour: '2-digit',
-                                                minute: '2-digit',
-                                            })
-                                            : '-'}
-                                    </div>
-                                </div>
-                                <div className="row">
-                                    <div className="col-12 col-sm-4">Currency</div>
-                                    <div className="col">{order?.currencyCode || '-'}</div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="mb-4">
-                            <div className="row">
-                                <div className="col-md-6 mb-3">
-                                    {order?.billingAddress && (
-                                        <Address sectionName="Billing address" address={order.billingAddress} />
-                                    )}
-                                </div>
-                                <div className="col-md-6 mb-3">
-                                    {order?.shippingAddress && (
-                                        <Address sectionName="Shipping address" address={order.shippingAddress} />
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-
-                        {order?.payments?.[0] && (
-                            <PaymentsCard
-                                payment={order.payments[0]}
-                                total={order.total ?? 0}
-                                paymentState={order.paymentState}
-                            />
-                        )}
-
-                        <div className="card border-0 bg-body-tertiary mb-3">
-                            <div className="card-header d-flex align-items-center">
-                                <div className="me-auto">Shipments</div>
-                                <div>{order?.state}</div>
-                            </div>
-                        </div>
-
-                        {order?.shipments?.[0] && <ShipmentsCard shipment={order.shipments[0]} />}
-
-                        <div className="table-responsive mt-4">
-                            <table className="table table-borderless align-middle">
-                                <thead>
-                                <tr>
-                                    <th>Item</th>
-                                    <th className="text-end">Unit price</th>
-                                    <th className="text-end">Qty</th>
-                                    <th className="text-end">Subtotal</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                {order?.items?.map((item: OrderItem) => (
-                                    <ProductRow key={item.id} orderItem={item} />
-                                ))}
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <table className="table table-borderless align-middle ms-auto w-auto">
-                            <tbody>
-                            <tr>
-                                <td className="text-end">Items total:</td>
-                                <td className="text-end">${formatPrice(order?.itemsSubtotal)}</td>
-                            </tr>
-                            <tr>
-                                <td className="text-end">Tax total:</td>
-                                <td className="text-end">${formatPrice(order?.taxTotal)}</td>
-                            </tr>
-                            <tr>
-                                <td className="text-end">Discount:</td>
-                                <td className="text-end">${formatPrice(order?.orderPromotionTotal)}</td>
-                            </tr>
-                            <tr>
-                                <td className="text-end">Shipping total:</td>
-                                <td className="text-end">${formatPrice(order?.shippingTotal)}</td>
-                            </tr>
-                            <tr>
-                                <td className="text-end fw-bold">Total:</td>
-                                <td className="text-end fw-bold">${formatPrice(order?.total)}</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                )}
-            </AccountLayout>
-        </Default>
-    );
+  const { token } = useParams<{ token: string }>();
+  const [order, setOrder] = useState<Order | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fetchOrder = async () => {
+      try {
+        const tokenJwt = localStorage.getItem("jwtToken");
+        if (!tokenJwt || !token) return;
+
+        const baseUrl = import.meta.env.VITE_REACT_APP_API_URL;
+        const orderRes = await fetch(`${baseUrl}/api/v2/shop/orders/${token}`, {
+          headers: { Authorization: `Bearer ${tokenJwt}` },
+        });
+
+        if (!orderRes.ok) throw new Error("Blad pobierania zamowienia");
+        const data = await orderRes.json();
+
+        if (data.payments?.[0]?.["@id"]) {
+          const paymentRes = await fetch(`${baseUrl}${data.payments[0]["@id"]}`, {
+            headers: { Authorization: `Bearer ${tokenJwt}` },
+          });
+
+          if (paymentRes.ok) {
+            const fullPayment = await paymentRes.json();
+            data.payments[0] = fullPayment;
+            data.createdAt = fullPayment.createdAt;
+          }
+        }
+
+        setOrder(data);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchOrder();
+  }, [token]);
+
+  return (
+    <Default>
+      <AccountLayout
+        breadcrumbs={
+          order
+            ? [
+                { label: "Home", url: "/" },
+                { label: "My account", url: "/account/dashboard" },
+                { label: "Order History", url: "/account/order-history" },
+                { label: `#${order.number}`, url: `/account/orders/${order.tokenValue}` },
+              ]
+            : []
+        }
+      >
+        {loading ? (
+          <div className="w-full pt-4 md:w-3/4">
+            <Skeleton height={30} width={200} className="mb-4" />
+            <Skeleton height={100} className="mb-3" count={2} />
+            <Skeleton height={200} className="mb-4" />
+          </div>
+        ) : (
+          <div className="w-full pt-4 md:w-3/4">
+            <h1 className="mb-4 text-lg font-semibold">Order #{order?.number}</h1>
+
+            <div className="bg-muted mb-3 rounded-lg">
+              <div className="flex flex-col gap-1 p-4">
+                <div className="-mx-4 flex flex-wrap">
+                  <div className="w-full px-4 sm:w-1/3">State</div>
+                  <div className="flex-1 px-4">{order?.state || "-"}</div>
+                </div>
+                <div className="-mx-4 flex flex-wrap">
+                  <div className="w-full px-4 sm:w-1/3">Created at</div>
+                  <div className="flex-1 px-4">
+                    {order?.createdAt
+                      ? new Date(order.createdAt).toLocaleString("en-GB", {
+                          year: "numeric",
+                          month: "2-digit",
+                          day: "2-digit",
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })
+                      : "-"}
+                  </div>
+                </div>
+                <div className="-mx-4 flex flex-wrap">
+                  <div className="w-full px-4 sm:w-1/3">Currency</div>
+                  <div className="flex-1 px-4">{order?.currencyCode || "-"}</div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <div className="-mx-4 flex flex-wrap">
+                <div className="mb-3 w-full px-4 md:w-1/2">
+                  {order?.billingAddress && (
+                    <Address sectionName="Billing address" address={order.billingAddress} />
+                  )}
+                </div>
+                <div className="mb-3 w-full px-4 md:w-1/2">
+                  {order?.shippingAddress && (
+                    <Address sectionName="Shipping address" address={order.shippingAddress} />
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {order?.payments?.[0] && (
+              <PaymentsCard
+                payment={order.payments[0]}
+                total={order.total ?? 0}
+                paymentState={order.paymentState}
+              />
+            )}
+
+            <div className="bg-muted mb-3 rounded-lg">
+              <div className="flex items-center p-4">
+                <div className="flex-1">Shipments</div>
+                <div>{order?.state}</div>
+              </div>
+            </div>
+
+            {order?.shipments?.[0] && <ShipmentsCard shipment={order.shipments[0]} />}
+
+            <div className="mt-4">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="text-left">Item</TableHead>
+                    <TableHead className="text-right">Unit price</TableHead>
+                    <TableHead className="text-right">Qty</TableHead>
+                    <TableHead className="text-right">Subtotal</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {order?.items?.map((item: OrderItem) => (
+                    <ProductRow key={item.id} orderItem={item} />
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+
+            <Table className="mt-4 ml-auto w-auto">
+              <TableBody>
+                <TableRow>
+                  <TableCell className="py-1 pr-4 text-right">Items total:</TableCell>
+                  <TableCell className="py-1 text-right">
+                    ${formatPrice(order?.itemsSubtotal)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="py-1 pr-4 text-right">Tax total:</TableCell>
+                  <TableCell className="py-1 text-right">${formatPrice(order?.taxTotal)}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="py-1 pr-4 text-right">Discount:</TableCell>
+                  <TableCell className="py-1 text-right">
+                    ${formatPrice(order?.orderPromotionTotal)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="py-1 pr-4 text-right">Shipping total:</TableCell>
+                  <TableCell className="py-1 text-right">
+                    ${formatPrice(order?.shippingTotal)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="py-1 pr-4 text-right font-bold">Total:</TableCell>
+                  <TableCell className="py-1 text-right font-bold">
+                    ${formatPrice(order?.total)}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </AccountLayout>
+    </Default>
+  );
 };
 
 export default OrderDetailsPage;
diff --git a/src/pages/account/OrderHistoryPage.tsx b/src/pages/account/OrderHistoryPage.tsx
index 88b099e..7bd6ba8 100644
--- a/src/pages/account/OrderHistoryPage.tsx
+++ b/src/pages/account/OrderHistoryPage.tsx
@@ -6,160 +6,186 @@ import { useCustomer } from "../../context/CustomerContext";
 import { useQuery } from "@tanstack/react-query";
 import { Order } from "../../types/Order";
 import Skeleton from "react-loading-skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
 const fetchCustomerOrders = async (): Promise<Order[]> => {
-    const token = localStorage.getItem("jwtToken");
-    if (!token) throw new Error("No Token");
-
-    const baseUrl = import.meta.env.VITE_REACT_APP_API_URL;
-
-    const response = await fetch(`${baseUrl}/api/v2/shop/orders`, {
-        headers: { Authorization: `Bearer ${token}` },
-    });
-
-    if (!response.ok) {
-        throw new Error("Order download error");
-    }
-
-    const data = await response.json();
-    const basicOrders = data["hydra:member"] as Partial<Order>[];
-
-    const fullOrders = await Promise.all(
-        basicOrders.map(async (order) => {
-            try {
-                const orderResponse = await fetch(`${baseUrl}/api/v2/shop/orders/${order.tokenValue}`, {
-                    headers: { Authorization: `Bearer ${token}` },
-                });
-
-                if (!orderResponse.ok) {
-                    throw new Error("Full order download error");
-                }
-
-                const fullOrderData = await orderResponse.json();
-
-                let createdAt: string | undefined = undefined;
-
-                if (fullOrderData.payments && fullOrderData.payments.length > 0) {
-                    const paymentUrl = fullOrderData.payments[0]["@id"];
-                    const paymentResponse = await fetch(`${baseUrl}${paymentUrl}`, {
-                        headers: { Authorization: `Bearer ${token}` },
-                    });
-
-                    if (paymentResponse.ok) {
-                        const paymentData = await paymentResponse.json();
-                        createdAt = paymentData.createdAt;
-                    }
-                }
-
-                return {
-                    ...fullOrderData,
-                    createdAt: createdAt ?? undefined,
-                };
-            } catch (error) {
-                console.warn(`Failed to fetch full order for token: ${order.tokenValue}`, error);
-                return order as Order;
-            }
-        })
-    );
-
-    return fullOrders;
+  const token = localStorage.getItem("jwtToken");
+  if (!token) throw new Error("No Token");
+
+  const baseUrl = import.meta.env.VITE_REACT_APP_API_URL;
+
+  const response = await fetch(`${baseUrl}/api/v2/shop/orders`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+
+  if (!response.ok) {
+    throw new Error("Order download error");
+  }
+
+  const data = await response.json();
+  const basicOrders = data["hydra:member"] as Partial<Order>[];
+
+  const fullOrders = await Promise.all(
+    basicOrders.map(async (order) => {
+      try {
+        const orderResponse = await fetch(`${baseUrl}/api/v2/shop/orders/${order.tokenValue}`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+
+        if (!orderResponse.ok) {
+          throw new Error("Full order download error");
+        }
+
+        const fullOrderData = await orderResponse.json();
+
+        let createdAt: string | undefined = undefined;
+
+        if (fullOrderData.payments && fullOrderData.payments.length > 0) {
+          const paymentUrl = fullOrderData.payments[0]["@id"];
+          const paymentResponse = await fetch(`${baseUrl}${paymentUrl}`, {
+            headers: { Authorization: `Bearer ${token}` },
+          });
+
+          if (paymentResponse.ok) {
+            const paymentData = await paymentResponse.json();
+            createdAt = paymentData.createdAt;
+          }
+        }
+
+        return {
+          ...fullOrderData,
+          createdAt: createdAt ?? undefined,
+        };
+      } catch (error) {
+        console.warn(`Failed to fetch full order for token: ${order.tokenValue}`, error);
+        return order as Order;
+      }
+    })
+  );
+
+  return fullOrders;
 };
 
 const OrderHistoryPage: React.FC = () => {
-    const { customer } = useCustomer();
-
-    const { data: orders = [], isLoading, isError } = useQuery<Order[]>({
-        queryKey: ["customerOrders", customer?.email],
-        queryFn: fetchCustomerOrders,
-        enabled: !!customer,
-    });
-
-    return (
-        <Default>
-            <AccountLayout
-                breadcrumbs={[
-                    { label: "Home", url: "/" },
-                    { label: "My account", url: "/account/dashboard" },
-                    { label: "Order History", url: "/account/order-history" },
-                ]}
-            >
-                <div className="col-12 col-md-9">
-                    <div className="mb-4">
-                        <h1>Order history</h1>
-                        Browse your orders from the past
-                    </div>
-
-                    <div className="card">
-                        <div className="card-body border-bottom py-3">
-                            <div className="d-flex border-bottom pb-3"></div>
-                            <div className="table-responsive">
-                                {isLoading ? (
-                                    <table className="table card-table">
-                                        <tbody>
-                                        <tr>
-                                            <td><Skeleton width={80} /></td>
-                                            <td><Skeleton width={100} /></td>
-                                            <td><Skeleton width={100} /></td>
-                                            <td><Skeleton width={80} /></td>
-                                            <td><Skeleton width={80} /></td>
-                                            <td><Skeleton width={60} height={30} /></td>
-                                        </tr>
-                                        </tbody>
-                                    </table>
-                                ) : isError ? (
-                                    <p>Failed to load orders. Please try again later.</p>
-                                ) : (
-                                    <table className="table card-table table-vcenter text-nowrap datatable">
-                                        <thead>
-                                        <tr>
-                                            <th>Number</th>
-                                            <th>Date</th>
-                                            <th>Ship to</th>
-                                            <th>Total</th>
-                                            <th>State</th>
-                                            <th>Actions</th>
-                                        </tr>
-                                        </thead>
-                                        <tbody>
-                                        {orders.map((order: Order) => (
-                                            <tr key={order.tokenValue} className="item">
-                                                <td>#{order.number}</td>
-                                                <td>
-                                                    {order.createdAt
-                                                        ? new Date(order.createdAt).toLocaleDateString('en-GB', {
-                                                            year: 'numeric',
-                                                            month: '2-digit',
-                                                            day: '2-digit',
-                                                        })
-                                                        : '-'}
-                                                </td>
-                                                <td>
-                                                    {order.shippingAddress
-                                                        ? `${order.shippingAddress.firstName ?? ''} ${order.shippingAddress.lastName ?? ''}`.trim()
-                                                        : '-'}
-                                                </td>
-                                                <td>${(order.itemsSubtotal / 100).toFixed(2)}</td>
-                                                <td>{order.state}</td>
-                                                <td>
-                                                    <Link
-                                                        to={`/account/orders/${order.tokenValue}`}
-                                                        className="btn btn-sm btn-outline-gray"
-                                                    >
-                                                        Show
-                                                    </Link>
-                                                </td>
-                                            </tr>
-                                        ))}
-                                        </tbody>
-                                    </table>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </AccountLayout>
-        </Default>
-    );
+  const { customer } = useCustomer();
+
+  const {
+    data: orders = [],
+    isLoading,
+    isError,
+  } = useQuery<Order[]>({
+    queryKey: ["customerOrders", customer?.email],
+    queryFn: fetchCustomerOrders,
+    enabled: !!customer,
+  });
+
+  return (
+    <Default>
+      <AccountLayout
+        breadcrumbs={[
+          { label: "Home", url: "/" },
+          { label: "My account", url: "/account/dashboard" },
+          { label: "Order History", url: "/account/order-history" },
+        ]}
+      >
+        <div className="w-full md:w-3/4">
+          <div className="mb-4">
+            <h1>Order history</h1>
+            Browse your orders from the past
+          </div>
+
+          <div className="rounded-lg border">
+            <div className="border-b p-4">
+              <div className="border-b pb-3"></div>
+              <div className="overflow-x-auto">
+                {isLoading ? (
+                  <Table>
+                    <TableBody>
+                      <TableRow>
+                        <TableCell>
+                          <Skeleton width={80} />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton width={100} />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton width={100} />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton width={80} />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton width={80} />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton width={60} height={30} />
+                        </TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                ) : isError ? (
+                  <p>Failed to load orders. Please try again later.</p>
+                ) : (
+                  <Table className="whitespace-nowrap">
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="pr-4 text-left">Number</TableHead>
+                        <TableHead className="pr-4 text-left">Date</TableHead>
+                        <TableHead className="pr-4 text-left">Ship to</TableHead>
+                        <TableHead className="pr-4 text-left">Total</TableHead>
+                        <TableHead className="pr-4 text-left">State</TableHead>
+                        <TableHead className="text-left">Actions</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {orders.map((order: Order) => (
+                        <TableRow key={order.tokenValue}>
+                          <TableCell className="pr-4">#{order.number}</TableCell>
+                          <TableCell className="pr-4">
+                            {order.createdAt
+                              ? new Date(order.createdAt).toLocaleDateString("en-GB", {
+                                  year: "numeric",
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                })
+                              : "-"}
+                          </TableCell>
+                          <TableCell className="pr-4">
+                            {order.shippingAddress
+                              ? `${order.shippingAddress.firstName ?? ""} ${order.shippingAddress.lastName ?? ""}`.trim()
+                              : "-"}
+                          </TableCell>
+                          <TableCell className="pr-4">
+                            ${(order.itemsSubtotal / 100).toFixed(2)}
+                          </TableCell>
+                          <TableCell className="pr-4">{order.state}</TableCell>
+                          <TableCell>
+                            <Link
+                              to={`/account/orders/${order.tokenValue}`}
+                              className="border-border hover:bg-muted inline-flex items-center rounded border px-3 py-1.5 text-sm"
+                            >
+                              Show
+                            </Link>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </AccountLayout>
+    </Default>
+  );
 };
 
 export default OrderHistoryPage;
diff --git a/src/pages/account/ProfilePage.tsx b/src/pages/account/ProfilePage.tsx
index 684d5b4..d82b26f 100644
--- a/src/pages/account/ProfilePage.tsx
+++ b/src/pages/account/ProfilePage.tsx
@@ -1,188 +1,289 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import Default from "../../layouts/Default";
 import AccountLayout from "../../layouts/Account";
 import { useCustomer } from "../../context/CustomerContext";
 import { useFlashMessages } from "../../context/FlashMessagesContext";
 import Skeleton from "react-loading-skeleton";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useForm } from "@tanstack/react-form";
+import { profileSchema } from "@/schemas/account";
+import { FieldError } from "@/components/ui/field-error";
+import { submitForm } from "@/lib/utils";
 
-const ProfilePage: React.FC = () => {
-    const { customer, refetchCustomer } = useCustomer();
-    const { addMessage } = useFlashMessages();
-
-    const [formData, setFormData] = useState({
-        firstName: "",
-        lastName: "",
-        email: "",
-        birthday: "",
-        gender: "u",
-        phoneNumber: "",
-        subscribedToNewsletter: false,
-    });
-
-    const [loading, setLoading] = useState(true);
+const labelClass = "block text-sm font-medium mb-1";
 
-    useEffect(() => {
-        if (!customer) return;
+const ProfilePage: React.FC = () => {
+  const { customer, refetchCustomer } = useCustomer();
+  const { addMessage } = useFlashMessages();
+  const formRef = useRef<HTMLFormElement>(null);
 
-        setFormData({
-            firstName: customer.firstName ?? "",
-            lastName: customer.lastName ?? "",
-            email: customer.email ?? "",
-            birthday: customer.birthday?.split(" ")[0] ?? "",
-            gender: customer.gender ?? "u",
-            phoneNumber: customer.phoneNumber ?? "",
-            subscribedToNewsletter: customer.subscribedToNewsletter ?? false,
+  const form = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      birthday: "",
+      gender: "u",
+      phoneNumber: "",
+      subscribedToNewsletter: false,
+    },
+    validators: {
+      onSubmit: profileSchema,
+    },
+    onSubmit: async ({ value }) => {
+      try {
+        const res = await fetch(`${import.meta.env.VITE_REACT_APP_API_URL}${customer?.["@id"]}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+          },
+          body: JSON.stringify({
+            ...value,
+            user: {
+              username: value.email,
+              enabled: true,
+            },
+          }),
         });
-        setLoading(false);
-    }, [customer]);
-
-    const handleChange = (
-        e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
-    ) => {
-        const { name, value, type } = e.target;
-        const newValue =
-            type === "checkbox" ? (e.target as HTMLInputElement).checked : value;
 
-        setFormData((prev) => ({ ...prev, [name]: newValue }));
-    };
+        if (!res.ok) throw new Error("Failed to update profile");
 
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        try {
-            const res = await fetch(
-                `${import.meta.env.VITE_REACT_APP_API_URL}${customer?.["@id"]}`,
-                {
-                    method: "PUT",
-                    headers: {
-                        "Content-Type": "application/json",
-                        Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
-                    },
-                    body: JSON.stringify({
-                        ...formData,
-                        user: {
-                            username: formData.email,
-                            enabled: true,
-                        },
-                    }),
-                }
-            );
+        await refetchCustomer();
+        addMessage("success", "Profile updated successfully");
+      } catch (err) {
+        addMessage("error", "Error updating profile");
+        console.error(err);
+      }
+    },
+  });
 
-            if (!res.ok) throw new Error("Failed to update profile");
+  useEffect(() => {
+    if (!customer) return;
 
-            await refetchCustomer();
-            addMessage("success", "Profile updated successfully");
-        } catch (err) {
-            addMessage("error", "Error updating profile");
-            console.error(err);
-        }
-    };
+    form.setFieldValue("firstName", customer.firstName ?? "");
+    form.setFieldValue("lastName", customer.lastName ?? "");
+    form.setFieldValue("email", customer.email ?? "");
+    form.setFieldValue("birthday", customer.birthday?.split(" ")[0] ?? "");
+    form.setFieldValue("gender", customer.gender ?? "u");
+    form.setFieldValue("phoneNumber", customer.phoneNumber ?? "");
+    form.setFieldValue("subscribedToNewsletter", customer.subscribedToNewsletter ?? false);
+  }, [customer, form]);
 
-    return (
-        <Default>
-            <AccountLayout
-                breadcrumbs={[
-                    { label: "Home", url: "/" },
-                    { label: "My account", url: "/account/dashboard" },
-                    { label: "Personal information", url: "/account/profile/edit" },
-                ]}
-            >
-                <div className="col-12 col-md-9">
-                    <div className="mb-4">
-                        <h1>Your profile</h1>
-                        Edit your personal information
-                    </div>
+  const loading = !customer;
 
-                    {loading ? (
-                        <Skeleton count={12} height={36} className="mb-2" />
-                    ) : (
-                        <form onSubmit={handleSubmit}>
-                            <div className="row">
-                                <div className="col-md-6 mb-3">
-                                    <label className="form-label">First name *</label>
-                                    <input
-                                        className="form-control"
-                                        name="firstName"
-                                        value={formData.firstName}
-                                        onChange={handleChange}
-                                        required
-                                    />
-                                </div>
-                                <div className="col-md-6 mb-3">
-                                    <label className="form-label">Last name *</label>
-                                    <input
-                                        className="form-control"
-                                        name="lastName"
-                                        value={formData.lastName}
-                                        onChange={handleChange}
-                                        required
-                                    />
-                                </div>
-                                <div className="col-12 mb-3">
-                                    <label className="form-label">Email *</label>
-                                    <input
-                                        className="form-control"
-                                        name="email"
-                                        type="email"
-                                        value={formData.email}
-                                        onChange={handleChange}
-                                        required
-                                    />
-                                </div>
-                                <div className="col-md-6 mb-3">
-                                    <label className="form-label">Birthday</label>
-                                    <input
-                                        className="form-control"
-                                        name="birthday"
-                                        type="date"
-                                        value={formData.birthday}
-                                        onChange={handleChange}
-                                    />
-                                </div>
-                                <div className="col-md-6 mb-3">
-                                    <label className="form-label">Gender *</label>
-                                    <select
-                                        className="form-select"
-                                        name="gender"
-                                        value={formData.gender}
-                                        onChange={handleChange}
-                                        required
-                                    >
-                                        <option value="m">Male</option>
-                                        <option value="f">Female</option>
-                                        <option value="u">Unknown</option>
-                                    </select>
-                                </div>
-                                <div className="col-12 mb-3">
-                                    <label className="form-label">Phone number</label>
-                                    <input
-                                        className="form-control"
-                                        name="phoneNumber"
-                                        value={formData.phoneNumber}
-                                        onChange={handleChange}
-                                    />
-                                </div>
-                                <div className="col-12 mb-4 form-check">
-                                    <input
-                                        type="checkbox"
-                                        id="newsletter"
-                                        className="form-check-input"
-                                        name="subscribedToNewsletter"
-                                        checked={formData.subscribedToNewsletter}
-                                        onChange={handleChange}
-                                    />
-                                    <label htmlFor="newsletter" className="form-check-label">
-                                        Subscribe to the newsletter
-                                    </label>
-                                </div>
-                            </div>
+  return (
+    <Default>
+      <AccountLayout
+        breadcrumbs={[
+          { label: "Home", url: "/" },
+          { label: "My account", url: "/account/dashboard" },
+          { label: "Personal information", url: "/account/profile/edit" },
+        ]}
+      >
+        <div className="w-full md:w-3/4">
+          <div className="mb-4">
+            <h1>Your profile</h1>
+            Edit your personal information
+          </div>
 
-                            <button className="btn btn-primary">Save changes</button>
-                        </form>
+          {loading ? (
+            <Skeleton count={12} height={36} className="mb-2" />
+          ) : (
+            <form
+              ref={formRef}
+              noValidate
+              onSubmit={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                void submitForm(form, formRef.current);
+              }}
+            >
+              <div className="-mx-3 flex flex-wrap">
+                <div className="mb-3 w-full px-3 md:w-1/2">
+                  <label className={labelClass}>First name *</label>
+                  <form.Field
+                    name="firstName"
+                    validators={{
+                      onSubmit: profileSchema.shape.firstName,
+                      onBlur: profileSchema.shape.firstName,
+                    }}
+                  >
+                    {(field) => (
+                      <>
+                        <Input
+                          value={field.state.value}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          onBlur={field.handleBlur}
+                          required
+                          aria-describedby="firstName-error"
+                          aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                        />
+                        <FieldError
+                          id="firstName-error"
+                          errors={field.state.meta.errors}
+                          isTouched={field.state.meta.isTouched}
+                          isSubmitted={form.state.isSubmitted}
+                        />
+                      </>
                     )}
+                  </form.Field>
                 </div>
-            </AccountLayout>
-        </Default>
-    );
+                <div className="mb-3 w-full px-3 md:w-1/2">
+                  <label className={labelClass}>Last name *</label>
+                  <form.Field
+                    name="lastName"
+                    validators={{
+                      onSubmit: profileSchema.shape.lastName,
+                      onBlur: profileSchema.shape.lastName,
+                    }}
+                  >
+                    {(field) => (
+                      <>
+                        <Input
+                          value={field.state.value}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          onBlur={field.handleBlur}
+                          required
+                          aria-describedby="lastName-error"
+                          aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                        />
+                        <FieldError
+                          id="lastName-error"
+                          errors={field.state.meta.errors}
+                          isTouched={field.state.meta.isTouched}
+                          isSubmitted={form.state.isSubmitted}
+                        />
+                      </>
+                    )}
+                  </form.Field>
+                </div>
+                <div className="mb-3 w-full px-3">
+                  <label className={labelClass}>Email *</label>
+                  <form.Field
+                    name="email"
+                    validators={{
+                      onSubmit: profileSchema.shape.email,
+                      onBlur: profileSchema.shape.email,
+                    }}
+                  >
+                    {(field) => (
+                      <>
+                        <Input
+                          type="email"
+                          value={field.state.value}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          onBlur={field.handleBlur}
+                          required
+                          aria-describedby="email-error"
+                          aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                        />
+                        <FieldError
+                          id="email-error"
+                          errors={field.state.meta.errors}
+                          isTouched={field.state.meta.isTouched}
+                          isSubmitted={form.state.isSubmitted}
+                        />
+                      </>
+                    )}
+                  </form.Field>
+                </div>
+                <div className="mb-3 w-full px-3 md:w-1/2">
+                  <label className={labelClass}>Birthday</label>
+                  <form.Field
+                    name="birthday"
+                    validators={{
+                      onSubmit: profileSchema.shape.birthday,
+                      onBlur: profileSchema.shape.birthday,
+                    }}
+                  >
+                    {(field) => (
+                      <>
+                        <Input
+                          type="date"
+                          value={field.state.value ?? ""}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          onBlur={field.handleBlur}
+                          aria-describedby="birthday-error"
+                          aria-invalid={(field.state.meta.errors?.length ?? 0) > 0 || undefined}
+                        />
+                        <FieldError
+                          id="birthday-error"
+                          errors={field.state.meta.errors}
+                          isTouched={field.state.meta.isTouched}
+                          isSubmitted={form.state.isSubmitted}
+                        />
+                      </>
+                    )}
+                  </form.Field>
+                </div>
+                <div className="mb-3 w-full px-3 md:w-1/2">
+                  <label className={labelClass}>Gender *</label>
+                  <form.Field name="gender">
+                    {(field) => (
+                      <Select
+                        value={field.state.value ?? "u"}
+                        onValueChange={(v) => v && field.handleChange(v)}
+                        required
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="m">Male</SelectItem>
+                          <SelectItem value="f">Female</SelectItem>
+                          <SelectItem value="u">Unknown</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </form.Field>
+                </div>
+                <div className="mb-3 w-full px-3">
+                  <label className={labelClass}>Phone number</label>
+                  <form.Field name="phoneNumber">
+                    {(field) => (
+                      <Input
+                        value={field.state.value ?? ""}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                      />
+                    )}
+                  </form.Field>
+                </div>
+                <div className="mb-4 w-full px-3">
+                  <div className="flex items-center gap-2">
+                    <form.Field name="subscribedToNewsletter">
+                      {(field) => (
+                        <Checkbox
+                          id="newsletter"
+                          checked={field.state.value ?? false}
+                          onCheckedChange={(checked) => field.handleChange(checked === true)}
+                        />
+                      )}
+                    </form.Field>
+                    <label htmlFor="newsletter" className="text-sm">
+                      Subscribe to the newsletter
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <Button type="submit">Save changes</Button>
+            </form>
+          )}
+        </div>
+      </AccountLayout>
+    </Default>
+  );
 };
 
 export default ProfilePage;
diff --git a/src/providers/AppProvider.tsx b/src/providers/AppProvider.tsx
index 23403c3..55fd577 100644
--- a/src/providers/AppProvider.tsx
+++ b/src/providers/AppProvider.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Toaster } from "sonner";
 import { CustomerProvider } from "../context/CustomerContext";
 import { OrderProvider } from "../context/OrderContext";
 import { FlashMessagesProvider } from "../context/FlashMessagesContext";
@@ -11,7 +12,10 @@ const AppProviders: React.FC<AppProvidersProps> = ({ children }) => {
   return (
     <CustomerProvider>
       <OrderProvider>
-        <FlashMessagesProvider>{children}</FlashMessagesProvider>
+        <FlashMessagesProvider>
+          {children}
+          <Toaster richColors position="top-center" />
+        </FlashMessagesProvider>
       </OrderProvider>
     </CustomerProvider>
   );
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
index 49a2a16..14b192d 100644
--- a/src/reportWebVitals.ts
+++ b/src/reportWebVitals.ts
@@ -1,14 +1,13 @@
-import { ReportHandler } from 'web-vitals';
+import { onCLS, onFCP, onLCP, onTTFB, type Metric } from "web-vitals";
+
+type ReportHandler = (metric: Metric) => void;
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+    onCLS(onPerfEntry);
+    onFCP(onPerfEntry);
+    onLCP(onPerfEntry);
+    onTTFB(onPerfEntry);
   }
 };
 
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 63566e8..833f479 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -5,13 +5,7 @@ import { coreRoutes } from "./coreRoutes";
 import { productRoutes } from "./productRoutes";
 
 const AppRoutes = () => {
-  return useRoutes([
-    ...coreRoutes,
-    ...productRoutes,
-    checkoutRoutes,
-    thankYouRoute,
-    accountRoutes,
-  ]);
+  return useRoutes([...coreRoutes, ...productRoutes, checkoutRoutes, thankYouRoute, accountRoutes]);
 };
 
 export default AppRoutes;
diff --git a/src/routes/accountRoutes.tsx b/src/routes/accountRoutes.tsx
index 14a4c38..40b785f 100644
--- a/src/routes/accountRoutes.tsx
+++ b/src/routes/accountRoutes.tsx
@@ -1,13 +1,13 @@
 import { RouteObject } from "react-router-dom";
 
+import AddAddressPage from "../pages/account/AddAddressPage";
+import AddressBookPage from "../pages/account/AddressBookPage";
+import ChangePasswordPage from "../pages/account/ChangePasswordPage";
 import DashboardPage from "../pages/account/DashboardPage";
-import OrderHistoryPage from "../pages/account/OrderHistoryPage";
+import EditAddressPage from "../pages/account/EditAddressPage";
 import OrderDetailsPage from "../pages/account/OrderDetailsPage";
+import OrderHistoryPage from "../pages/account/OrderHistoryPage";
 import ProfilePage from "../pages/account/ProfilePage";
-import AddressBookPage from "../pages/account/AddressBookPage";
-import AddAddressPage from "../pages/account/AddAddressPage";
-import EditAddressPage from "../pages/account/EditAddressPage";
-import ChangePasswordPage from "../pages/account/ChangePasswordPage";
 import RequireAuth from "./guards/RequireAuth.tsx";
 
 export const accountRoutes: RouteObject = {
diff --git a/src/routes/coreRoutes.tsx b/src/routes/coreRoutes.tsx
index eb4e13e..0be8108 100644
--- a/src/routes/coreRoutes.tsx
+++ b/src/routes/coreRoutes.tsx
@@ -2,9 +2,17 @@ import { RouteObject } from "react-router-dom";
 import Homepage from "../pages/Homepage";
 import CartPage from "../pages/CartPage";
 import LoginPage from "../pages/LoginPage";
+import RegisterPage from "../pages/RegisterPage";
+import ForgotPasswordPage from "../pages/ForgotPasswordPage";
+import ResetPasswordPage from "../pages/ResetPasswordPage";
+import NotFoundPage from "../pages/NotFoundPage";
 
 export const coreRoutes: RouteObject[] = [
   { path: "/", element: <Homepage /> },
   { path: "cart", element: <CartPage /> },
   { path: "login", element: <LoginPage /> },
+  { path: "register", element: <RegisterPage /> },
+  { path: "forgot-password", element: <ForgotPasswordPage /> },
+  { path: "reset-password/:token", element: <ResetPasswordPage /> },
+  { path: "*", element: <NotFoundPage /> },
 ];
diff --git a/src/schemas/__tests__/account.test.ts b/src/schemas/__tests__/account.test.ts
new file mode 100644
index 0000000..73fa231
--- /dev/null
+++ b/src/schemas/__tests__/account.test.ts
@@ -0,0 +1,87 @@
+import { describe, it, expect } from "vitest";
+import { profileSchema, changePasswordSchema } from "../account";
+
+function birthdayFor(yearsAgo: number): string {
+  const d = new Date();
+  d.setFullYear(d.getFullYear() - yearsAgo);
+  return d.toISOString().slice(0, 10);
+}
+
+const profileBase = {
+  firstName: "Jane",
+  lastName: "Doe",
+  email: "jane@example.com",
+  gender: "female",
+  phoneNumber: "",
+  subscribedToNewsletter: false,
+};
+
+describe("profileSchema birthday", () => {
+  it("rejects empty birthday with required message", () => {
+    const result = profileSchema.safeParse({ ...profileBase, birthday: "" });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "birthday");
+      expect(issue?.message).toBe("Birthday is required");
+    }
+  });
+
+  it("rejects a future date", () => {
+    const future = new Date();
+    future.setFullYear(future.getFullYear() + 1);
+    const result = profileSchema.safeParse({
+      ...profileBase,
+      birthday: future.toISOString().slice(0, 10),
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "birthday");
+      expect(issue?.message).toBe("Birthday cannot be in the future");
+    }
+  });
+
+  it("rejects age under 18", () => {
+    const result = profileSchema.safeParse({ ...profileBase, birthday: birthdayFor(17) });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "birthday");
+      expect(issue?.message).toBe("You must be at least 18 years old");
+    }
+  });
+
+  it("rejects age over 120", () => {
+    const result = profileSchema.safeParse({ ...profileBase, birthday: birthdayFor(121) });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "birthday");
+      expect(issue?.message).toBe("Please enter a realistic birth year");
+    }
+  });
+
+  it("accepts a valid 25-year-old birthday", () => {
+    const result = profileSchema.safeParse({ ...profileBase, birthday: birthdayFor(25) });
+    expect(result.success).toBe(true);
+  });
+});
+
+describe("changePasswordSchema", () => {
+  const base = {
+    currentPassword: "OldPass1!",
+    newPassword: "NewPass1!",
+    confirmation: "NewPass1!",
+  };
+
+  it("rejects mismatched confirmation", () => {
+    const result = changePasswordSchema.safeParse({ ...base, confirmation: "WrongPass1!" });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "confirmation");
+      expect(issue?.message).toBe("Passwords do not match");
+    }
+  });
+
+  it("accepts valid matching passwords", () => {
+    const result = changePasswordSchema.safeParse(base);
+    expect(result.success).toBe(true);
+  });
+});
diff --git a/src/schemas/__tests__/auth.test.ts b/src/schemas/__tests__/auth.test.ts
new file mode 100644
index 0000000..f2179ae
--- /dev/null
+++ b/src/schemas/__tests__/auth.test.ts
@@ -0,0 +1,145 @@
+import { describe, it, expect } from "vitest";
+import { loginSchema, passwordComplexity, registerSchema, resetPasswordSchema } from "../auth";
+
+describe("loginSchema", () => {
+  it("rejects empty email", () => {
+    const result = loginSchema.safeParse({ email: "", password: "secret", remember_me: false });
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects invalid email format", () => {
+    const result = loginSchema.safeParse({
+      email: "not-an-email",
+      password: "secret",
+      remember_me: false,
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const emailIssue = result.error.issues.find((i) => i.path[0] === "email");
+      expect(emailIssue?.message).toBe("Invalid email address");
+    }
+  });
+
+  it("rejects empty password", () => {
+    const result = loginSchema.safeParse({
+      email: "user@example.com",
+      password: "",
+      remember_me: false,
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const passIssue = result.error.issues.find((i) => i.path[0] === "password");
+      expect(passIssue).toBeDefined();
+    }
+  });
+
+  it("accepts valid credentials", () => {
+    const result = loginSchema.safeParse({
+      email: "user@example.com",
+      password: "pass123",
+      remember_me: true,
+    });
+    expect(result.success).toBe(true);
+  });
+});
+
+describe("passwordComplexity", () => {
+  it("rejects password shorter than 8 characters", () => {
+    const result = passwordComplexity.safeParse("Ab1!");
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe("Password must be at least 8 characters");
+    }
+  });
+
+  it("rejects password without uppercase letter", () => {
+    const result = passwordComplexity.safeParse("abcde1!x");
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe(
+        "Password must contain at least one uppercase letter"
+      );
+    }
+  });
+
+  it("rejects password without digit", () => {
+    const result = passwordComplexity.safeParse("Abcdefg!");
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe("Password must contain at least one digit");
+    }
+  });
+
+  it("rejects password without symbol", () => {
+    const result = passwordComplexity.safeParse("Abcde123");
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe("Password must contain at least one symbol");
+    }
+  });
+
+  it("accepts a strong password meeting all criteria", () => {
+    const result = passwordComplexity.safeParse("Abcde1!x");
+    expect(result.success).toBe(true);
+  });
+});
+
+describe("registerSchema", () => {
+  const base = {
+    gender: "male",
+    firstName: "John",
+    lastName: "Doe",
+    email: "john@example.com",
+    password: "Abcde1!x",
+    confirmPassword: "Abcde1!x",
+    subscribedToNewsletter: false,
+  };
+
+  it("rejects mismatched confirmPassword", () => {
+    const result = registerSchema.safeParse({ ...base, confirmPassword: "Different1!" });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "confirmPassword");
+      expect(issue?.message).toBe("Passwords do not match");
+    }
+  });
+
+  it("accepts matching passwords", () => {
+    const result = registerSchema.safeParse(base);
+    expect(result.success).toBe(true);
+  });
+});
+
+describe("resetPasswordSchema", () => {
+  it("rejects a weak newPassword", () => {
+    const result = resetPasswordSchema.safeParse({
+      newPassword: "weak",
+      confirmNewPassword: "weak",
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "newPassword");
+      expect(issue).toBeDefined();
+    }
+  });
+
+  it("rejects mismatched confirmNewPassword", () => {
+    const result = resetPasswordSchema.safeParse({
+      newPassword: "Abcde1!x",
+      confirmNewPassword: "Different1!",
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "confirmNewPassword");
+      expect(issue?.message).toBe("Passwords do not match");
+    }
+  });
+
+  it("accepts valid strong matching passwords", () => {
+    const result = resetPasswordSchema.safeParse({
+      newPassword: "Abcde1!x",
+      confirmNewPassword: "Abcde1!x",
+    });
+    expect(result.success).toBe(true);
+  });
+});
diff --git a/src/schemas/__tests__/review.test.ts b/src/schemas/__tests__/review.test.ts
new file mode 100644
index 0000000..d1deb33
--- /dev/null
+++ b/src/schemas/__tests__/review.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect } from "vitest";
+import { reviewSchema } from "../review";
+
+describe("reviewSchema", () => {
+  const base = {
+    rating: 5,
+    title: "Great product",
+    comment: "Really enjoyed it.",
+    email: "reviewer@example.com",
+  };
+
+  it("rejects rating of 0", () => {
+    const result = reviewSchema.safeParse({ ...base, rating: 0 });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "rating");
+      expect(issue).toBeDefined();
+    }
+  });
+
+  it("accepts rating of 1", () => {
+    const result = reviewSchema.safeParse({ ...base, rating: 1 });
+    expect(result.success).toBe(true);
+  });
+
+  it("accepts rating of 5", () => {
+    const result = reviewSchema.safeParse({ ...base, rating: 5 });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects empty title", () => {
+    const result = reviewSchema.safeParse({ ...base, title: "" });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "title");
+      expect(issue?.message).toBe("Title is required");
+    }
+  });
+
+  it("rejects empty comment", () => {
+    const result = reviewSchema.safeParse({ ...base, comment: "" });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "comment");
+      expect(issue?.message).toBe("Comment is required");
+    }
+  });
+
+  it("rejects invalid email", () => {
+    const result = reviewSchema.safeParse({ ...base, email: "not-an-email" });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find((i) => i.path[0] === "email");
+      expect(issue?.message).toBe("Invalid email address");
+    }
+  });
+
+  it("accepts valid review data", () => {
+    const result = reviewSchema.safeParse(base);
+    expect(result.success).toBe(true);
+  });
+});
diff --git a/src/schemas/account.ts b/src/schemas/account.ts
new file mode 100644
index 0000000..d8d3b6d
--- /dev/null
+++ b/src/schemas/account.ts
@@ -0,0 +1,69 @@
+import { z } from "zod";
+import { passwordComplexity } from "./auth";
+
+export const profileSchema = z.object({
+  firstName: z.string().min(1, "First name is required"),
+  lastName: z.string().min(1, "Last name is required"),
+  email: z.string().email("Invalid email address"),
+  birthday: z
+    .string()
+    .or(z.literal(""))
+    .superRefine((val, ctx) => {
+      if (val === "") {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Birthday is required" });
+        return;
+      }
+      if (!/^\d{4}-\d{2}-\d{2}$/.test(val) || isNaN(new Date(val).getTime())) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Birthday must be a valid date (YYYY-MM-DD)",
+        });
+        return;
+      }
+      const birth = new Date(val);
+      const today = new Date();
+      if (birth > today) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Birthday cannot be in the future" });
+        return;
+      }
+      const age =
+        today.getFullYear() -
+        birth.getFullYear() -
+        (today.getMonth() < birth.getMonth() ||
+        (today.getMonth() === birth.getMonth() && today.getDate() < birth.getDate())
+          ? 1
+          : 0);
+      if (age < 18) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "You must be at least 18 years old" });
+        return;
+      }
+      if (age > 120) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Please enter a realistic birth year",
+        });
+      }
+    })
+    .transform((val) => (val === "" ? undefined : val)),
+  gender: z.string(),
+  phoneNumber: z.string(),
+  subscribedToNewsletter: z.boolean(),
+});
+export type ProfileValues = z.infer<typeof profileSchema>;
+
+export const changePasswordSchema = z
+  .object({
+    currentPassword: z.string().min(1, "Current password is required"),
+    newPassword: passwordComplexity,
+    confirmation: z.string().min(1, "Please confirm your password"),
+  })
+  .refine((data) => data.newPassword === data.confirmation, {
+    message: "Passwords do not match",
+    path: ["confirmation"],
+  });
+export type ChangePasswordValues = z.infer<typeof changePasswordSchema>;
+export type ChangePasswordPayload = {
+  currentPassword: string;
+  newPassword: string;
+  confirmNewPassword: string;
+};
diff --git a/src/schemas/address.ts b/src/schemas/address.ts
new file mode 100644
index 0000000..06c4aae
--- /dev/null
+++ b/src/schemas/address.ts
@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+export const addressSchema = z.object({
+  firstName: z.string().min(1, "First name is required"),
+  lastName: z.string().min(1, "Last name is required"),
+  company: z.string(),
+  street: z.string().min(1, "Street address is required"),
+  countryCode: z.string().min(1, "Country is required"),
+  provinceName: z.string(),
+  city: z.string().min(1, "City is required"),
+  postcode: z.string().min(1, "Postcode is required"),
+  phoneNumber: z.string(),
+});
+export type AddressValues = z.infer<typeof addressSchema>;
+
+export const checkoutAddressSchema = z.object({
+  email: z.string().email("Invalid email address").optional(),
+  billingAddress: addressSchema,
+  useDifferentShipping: z.boolean().optional(),
+  shippingAddress: addressSchema.optional(),
+});
+export type CheckoutAddressValues = z.infer<typeof checkoutAddressSchema>;
diff --git a/src/schemas/auth.ts b/src/schemas/auth.ts
new file mode 100644
index 0000000..2ad037c
--- /dev/null
+++ b/src/schemas/auth.ts
@@ -0,0 +1,49 @@
+import { z } from "zod";
+
+export const passwordComplexity = z
+  .string()
+  .min(8, "Password must be at least 8 characters")
+  .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
+  .regex(/[0-9]/, "Password must contain at least one digit")
+  .regex(/[^A-Za-z0-9]/, "Password must contain at least one symbol");
+
+export const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(1, "Password is required"),
+  remember_me: z.boolean(),
+});
+export type LoginValues = z.infer<typeof loginSchema>;
+
+export const registerSchema = z
+  .object({
+    gender: z.string(),
+    firstName: z.string().min(1, "First name is required"),
+    lastName: z.string().min(1, "Last name is required"),
+    email: z.string().email("Invalid email address"),
+    password: passwordComplexity,
+    confirmPassword: z.string().min(1, "Please confirm your password"),
+    subscribedToNewsletter: z.boolean(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
+export type RegisterValues = z.infer<typeof registerSchema>;
+export type RegisterPayload = Omit<RegisterValues, "confirmPassword">;
+
+export const forgotPasswordSchema = z.object({
+  email: z.string().email("Invalid email address"),
+});
+export type ForgotPasswordValues = z.infer<typeof forgotPasswordSchema>;
+
+export const resetPasswordSchema = z
+  .object({
+    newPassword: passwordComplexity,
+    confirmNewPassword: z.string().min(1, "Please confirm your password"),
+  })
+  .refine((data) => data.newPassword === data.confirmNewPassword, {
+    message: "Passwords do not match",
+    path: ["confirmNewPassword"],
+  });
+export type ResetPasswordValues = z.infer<typeof resetPasswordSchema>;
+export type ResetPasswordPayload = Pick<ResetPasswordValues, "newPassword">;
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
new file mode 100644
index 0000000..fad9694
--- /dev/null
+++ b/src/schemas/index.ts
@@ -0,0 +1,4 @@
+export * from "./auth";
+export * from "./address";
+export * from "./account";
+export * from "./review";
diff --git a/src/schemas/review.ts b/src/schemas/review.ts
new file mode 100644
index 0000000..472ebd3
--- /dev/null
+++ b/src/schemas/review.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const reviewSchema = z.object({
+  rating: z.number().min(1, "Rating is required").max(5),
+  title: z.string().min(1, "Title is required"),
+  comment: z.string().min(1, "Comment is required"),
+  email: z.string().email("Invalid email address"),
+});
+export type ReviewValues = z.infer<typeof reviewSchema>;
diff --git a/src/services/customerVerification.ts b/src/services/customerVerification.ts
index bffb615..fc6dc95 100644
--- a/src/services/customerVerification.ts
+++ b/src/services/customerVerification.ts
@@ -1,61 +1,61 @@
 const API_URL = import.meta.env.VITE_REACT_APP_API_URL;
 
 export const sendVerificationEmail = async (
-    email: string,
-    link: string,
-    jwtToken: string
+  email: string,
+  link: string,
+  jwtToken: string
 ): Promise<{ success: boolean; message?: string }> => {
-    try {
-        const response = await fetch(`${API_URL}/api/v2/shop/customers/verify`, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${jwtToken}`,
-            },
-            body: JSON.stringify({ email, link }),
-        });
+  try {
+    const response = await fetch(`${API_URL}/api/v2/shop/customers/verify`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${jwtToken}`,
+      },
+      body: JSON.stringify({ email, link }),
+    });
 
-        if (response.ok) {
-            return { success: true };
-        } else {
-            const errorData = await response.json();
-            return {
-                success: false,
-                message: errorData.message || errorData.detail || "Failed to send verification email.",
-            };
-        }
-    } catch {
-        return { success: false, message: "An unexpected error occurred. Please try again." };
+    if (response.ok) {
+      return { success: true };
+    } else {
+      const errorData = await response.json();
+      return {
+        success: false,
+        message: errorData.message || errorData.detail || "Failed to send verification email.",
+      };
     }
+  } catch {
+    return { success: false, message: "An unexpected error occurred. Please try again." };
+  }
 };
 
 export const verifyToken = async (
-    token: string,
-    jwtToken: string
+  token: string,
+  jwtToken: string
 ): Promise<{ success: boolean; message?: string }> => {
-    try {
-        const response = await fetch(`${API_URL}/api/v2/shop/customers/verify/${token}`, {
-            method: "PATCH",
-            headers: {
-                "Content-Type": "application/merge-patch+json",
-                Authorization: `Bearer ${jwtToken}`,
-            },
-            body: JSON.stringify({}),
-        });
+  try {
+    const response = await fetch(`${API_URL}/api/v2/shop/customers/verify/${token}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/merge-patch+json",
+        Authorization: `Bearer ${jwtToken}`,
+      },
+      body: JSON.stringify({}),
+    });
 
-        if (response.ok) {
-            return { success: true };
-        } else {
-            const errorData = await response.json();
-            return {
-                success: false,
-                message: errorData.message || errorData.detail || "Verification failed.",
-            };
-        }
-    } catch {
-        return {
-            success: false,
-            message: "Unexpected error during token verification. Please try again.",
-        };
+    if (response.ok) {
+      return { success: true };
+    } else {
+      const errorData = await response.json();
+      return {
+        success: false,
+        message: errorData.message || errorData.detail || "Verification failed.",
+      };
     }
+  } catch {
+    return {
+      success: false,
+      message: "Unexpected error during token verification. Please try again.",
+    };
+  }
 };
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 8f2609b..1dd407a 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 0000000..f149f27
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";
diff --git a/src/types/Address.ts b/src/types/Address.ts
index bea5a89..fc000d8 100644
--- a/src/types/Address.ts
+++ b/src/types/Address.ts
@@ -1,18 +1,18 @@
 export interface Address {
-    firstName?: string;
-    lastName?: string;
-    email?: string;
-    gender?: 'm' | 'f' | 'u' | null;
-    phoneNumber?: string | null;
-    company?: string | null;
-    countryCode?: string;
-    provinceCode?: string | null;
-    provinceName?: string | null;
-    street?: string;
-    city?: string;
-    postcode?: string;
-    createdAt?: string;
-    updatedAt?: string | null;
-    id?: number;
-    customer?: string | null;
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  gender?: "m" | "f" | "u" | null;
+  phoneNumber?: string | null;
+  company?: string | null;
+  countryCode?: string;
+  provinceCode?: string | null;
+  provinceName?: string | null;
+  street?: string;
+  city?: string;
+  postcode?: string;
+  createdAt?: string;
+  updatedAt?: string | null;
+  id?: number;
+  customer?: string | null;
 }
diff --git a/src/types/Order.ts b/src/types/Order.ts
index cffde24..f4a77e8 100644
--- a/src/types/Order.ts
+++ b/src/types/Order.ts
@@ -1,74 +1,74 @@
 export interface OrderItem {
-    variant: string;
-    productName?: string | null;
-    id?: number;
-    quantity?: number;
-    unitPrice?: number;
-    originalUnitPrice?: number | null;
-    total?: number;
-    discountedUnitPrice?: number;
-    subtotal?: number;
+  variant: string;
+  productName?: string | null;
+  id?: number;
+  quantity?: number;
+  unitPrice?: number;
+  originalUnitPrice?: number | null;
+  total?: number;
+  discountedUnitPrice?: number;
+  subtotal?: number;
 }
 
 export interface AddressInterface {
-    firstName?: string;
-    lastName?: string;
-    fullName?: string | null;
-    phoneNumber?: string;
-    company?: string;
-    countryCode?: string;
-    provinceCode?: string | null;
-    provinceName?: string | null;
-    street?: string;
-    city?: string;
-    postcode?: string;
-    createdAt?: string;
-    updatedAt?: string | null;
-    id?: number;
-    customer?: string | null;
-    email?: string;
-    gender?: 'm' | 'f' | 'u' | null;
+  firstName?: string;
+  lastName?: string;
+  fullName?: string | null;
+  phoneNumber?: string;
+  company?: string;
+  countryCode?: string;
+  provinceCode?: string | null;
+  provinceName?: string | null;
+  street?: string;
+  city?: string;
+  postcode?: string;
+  createdAt?: string;
+  updatedAt?: string | null;
+  id?: number;
+  customer?: string | null;
+  email?: string;
+  gender?: "m" | "f" | "u" | null;
 }
 
 export interface Payment {
-    "@id"?: string;
-    "@type"?: string;
-    id?: number;
-    method?: {
-        name?: string;
-    } | null;
-    state?: string;
+  "@id"?: string;
+  "@type"?: string;
+  id?: number;
+  method?: {
+    name?: string;
+  } | null;
+  state?: string;
 }
 
 export interface Shipment {
-    id?: number;
-    "@id"?: string;
-    "@type"?: string;
-    method?: string;
+  id?: number;
+  "@id"?: string;
+  "@type"?: string;
+  method?: string;
 }
 
 export interface ShippingAddress {
-    firstName?: string;
-    lastName?: string;
+  firstName?: string;
+  lastName?: string;
 }
 
 export interface Order {
-    id?: number;
-    number: string;
-    tokenValue: string;
-    state: string;
-    itemsSubtotal: number;
-    currencyCode: string;
-    shippingAddress?: AddressInterface;
-    billingAddress?: AddressInterface;
-    payments?: Payment[];
-    shipments?: Shipment[];
-    createdAt?: string;
-    total?: number;
-    taxTotal?: number;
-    orderPromotionTotal?: number;
-    shippingTotal?: number;
-    items?: OrderItem[];
-    localeCode?: string;
-    paymentState?: string;
+  id?: number;
+  number: string;
+  tokenValue: string;
+  state: string;
+  itemsSubtotal: number;
+  currencyCode: string;
+  shippingAddress?: AddressInterface;
+  billingAddress?: AddressInterface;
+  payments?: Payment[];
+  shipments?: Shipment[];
+  createdAt?: string;
+  total?: number;
+  taxTotal?: number;
+  orderPromotionTotal?: number;
+  shippingTotal?: number;
+  items?: OrderItem[];
+  localeCode?: string;
+  paymentState?: string;
 }
diff --git a/src/types/Product.ts b/src/types/Product.ts
index 2b6d088..eb30fb7 100644
--- a/src/types/Product.ts
+++ b/src/types/Product.ts
@@ -1,56 +1,56 @@
 export interface Product {
-    id: number;
-    slug: string;
-    name: string;
-    code: string;
-    description: string;
-    shortDescription: string;
-    variants: string[];
-    images: Image[];
-    options?: string[];
-    reviews?: { '@id': string }[];
-    mainTaxon?: string;
-    productTaxons?: string[];
-    defaultVariant?: string;
-    associations?: string[];
+  id: number;
+  slug: string;
+  name: string;
+  code: string;
+  description: string;
+  shortDescription: string;
+  variants: string[];
+  images: Image[];
+  options?: string[];
+  reviews?: { "@id": string }[];
+  mainTaxon?: string;
+  productTaxons?: string[];
+  defaultVariant?: string;
+  associations?: string[];
 }
 
 export interface ProductOption {
-    code: string;
-    name: string;
-    values: ProductOptionValue[];
+  code: string;
+  name: string;
+  values: ProductOptionValue[];
 }
 
 export interface ProductOptionValue {
-    code: string;
-    value: string;
+  code: string;
+  value: string;
 }
 
 export interface ProductVariantDetails {
-    id: number;
-    price: number;
-    code: string;
-    name?: string;
+  id: number;
+  price: number;
+  code: string;
+  name?: string;
 }
 
 export interface Image {
-    id: number;
-    path: string;
+  id: number;
+  path: string;
 }
 
 export interface ProductAttribute {
-    id: number;
-    name: string;
-    value: string;
+  id: number;
+  name: string;
+  value: string;
 }
 
 export interface ProductReview {
-    id: number;
-    title: string;
-    rating: number;
-    comment: string;
-    createdAt: string;
-    author?: {
-        firstName: string | null;
-    };
+  id: number;
+  title: string;
+  rating: number;
+  comment: string;
+  createdAt: string;
+  author?: {
+    firstName: string | null;
+  };
 }
diff --git a/src/types/Taxon.ts b/src/types/Taxon.ts
index ce66e90..7d625b7 100644
--- a/src/types/Taxon.ts
+++ b/src/types/Taxon.ts
@@ -1,20 +1,20 @@
 export interface ProductTaxon {
-    taxon: string;
+  taxon: string;
 }
 
 export interface Taxon {
-    id: number;
-    code: string;
-    slug: string;
-    name: string;
-    description: string;
-    children: string[];
-    parent?: string;
+  id: number;
+  code: string;
+  slug: string;
+  name: string;
+  description: string;
+  children: string[];
+  parent?: string;
 }
 export interface TaxonChild {
-    id: number;
-    name: string;
-    slug: string;
-    code: string;
-    description: string;
+  id: number;
+  name: string;
+  slug: string;
+  code: string;
+  description: string;
 }
diff --git a/src/utils/price.tsx b/src/utils/price.tsx
index eb24480..da830fa 100644
--- a/src/utils/price.tsx
+++ b/src/utils/price.tsx
@@ -1,6 +1,6 @@
 const formatPrice = (priceInCents?: number): string => {
-    if (priceInCents === undefined) return "-";
-    return (priceInCents / 100).toFixed(2);
+  if (priceInCents === undefined) return "-";
+  return (priceInCents / 100).toFixed(2);
 };
 
 export { formatPrice };
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 358ca9b..97bad9c 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -15,6 +15,11 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    /* Path aliases */
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
diff --git a/tsconfig.json b/tsconfig.json
index 1ffef60..16971f8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,9 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
index db0becc..1a023f1 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -2,7 +2,8 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": ["ES2023"],
+    "lib": ["ES2023", "DOM"],
+    "types": ["node"],
     "module": "ESNext",
     "skipLibCheck": true,
 
@@ -20,5 +21,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "playwright.config.ts", "vitest.config.ts", "e2e/**/*.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 7f59db6..e90d396 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,27 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+import fs from "fs";
+
+const certKey = "/certs/localhost-key.pem";
+const certCrt = "/certs/localhost.pem";
+const hasMkcert = fs.existsSync(certKey) && fs.existsSync(certCrt);
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [tailwindcss(), react(), ...(hasMkcert ? [] : [basicSsl()])],
+  ...(hasMkcert && {
+    server: {
+      https: {
+        key: fs.readFileSync(certKey),
+        cert: fs.readFileSync(certCrt),
+      },
+    },
+  }),
   resolve: {
     alias: {
-      '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
+      "@tabler/icons-react": "@tabler/icons-react/dist/esm/icons/index.mjs",
+      "@": "/src",
     },
   },
-})
+});
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..c7db017
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./src/test/setup.ts"],
+    include: ["src/**/*.{test,spec}.{ts,tsx}"],
+    coverage: { provider: "v8", thresholds: { lines: 80, functions: 80, branches: 80 } },
+  },
+  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
+});